CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

Desktop: custom context menus everywhere, never the browser's menu

Browse source 
One ContextMenu in the design system (keyboard, type-ahead, submenus, check items,
disabled reasons, Shift+F10 / Menu key, viewport placement, light and dark). The
native menu is prevented globally; text fields keep Cut / Copy / Paste / Select all.
Menus on sidebar and portfolio apps, app hero, releases, store art, live art,
reviews, checks, editor fields, catalog, prices, accounts, app folders, ignored.
This commit is contained in:
CRTkafa 2026-10-23 08:59:14 +08:00
parent 944b24fe59
commit dece83c3e8
23 changed files with 839 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/desktop/src/screens/Portfolio.tsx
View file

@ -12,6 +12,8 @@ import { useShowIgnored } from '../lib/show-ignored';
import { filterSort, groupByStudio, type ListRow, type SortBy, studioCounts, type UnifiedApp, withIgnored } from '../lib/identity';
import { type Attention, attention, healthSeries, type HealthSnapshot, isError, laneOf, PLAY_THRESHOLDS, STAGES, storeNow, type Tone } from '../lib/model';
import { type AppTab, useNav } from '../nav';
import { useContextMenu } from '../ui/ContextMenu';
import { appMenu } from '../ui/app-menu';
import type { IconName } from '../ui/icons';
import { useData } from '../store';
import { exportName, portfolioCsv } from '../lib/exports';
@ -144,8 +146,11 @@ function AppCard({ r, icon, health, studio }: { r: CardRow; icon: string | null;
const name = e?.app?.name && app.project ? e.app.name : app.name;
const go = (tab: AppTab) => nav.go({ screen: 'app', appId: app.key, tab });
const style = tintStyle(hue);
const d = useData();
const menu = useContextMenu();
const [showIgnored] = useShowIgnored();
return (
<article className="pf-card" style={style} aria-label={name}>
<article className="pf-card" style={style} aria-label={name} {...menu(() => appMenu(app, d, nav, { showIgnored }))}>
<div className={`pf-shots${shots.length ? '' : ' empty'}`} aria-hidden="true">
{shots.length ? shots.map((s, i) => <img key={i} src={s} alt="" draggable={false} loading="lazy" />) : <AppIcon name={app.name} src={icon} className="pf-hero-icon" />}
</div>
@ -285,6 +290,7 @@ export function Portfolio() {
const visible = useMemo(() => d.apps.filter(a => !a.ignored), [d.apps]);
const ignoredApps = useMemo(() => d.apps.filter(a => a.ignored), [d.apps]);
const [showIgnored, setShowIgnored] = useShowIgnored();
const menu = useContextMenu();
const [round, setRound] = useState(0);
const [rechecking, setRechecking] = useState(false);
const health = useCachedHealth(visible.map(a => a.target), round);
@ -349,7 +355,7 @@ export function Portfolio() {
const ios = !!(app.ios || e?.app?.platforms.ios), android = !!(app.android || e?.app?.platforms.android);
const sub = app.ios?.app.bundleId ?? e?.app?.platforms.ios?.bundleId ?? app.android?.app.id ?? e?.app?.platforms.android?.packageName ?? '';
return (
<tr key={app.key} className="clickable" onClick={() => open(app)}>
<tr key={app.key} className="clickable" onClick={() => open(app)} {...menu(() => appMenu(app, d, nav, { showIgnored }))}>
<td>
<div className="cell-app">
<AppIcon name={app.name} src={d.iconFor(app)} />
@ -435,7 +441,7 @@ export function Portfolio() {
<button className="link" aria-pressed={showIgnored} onClick={() => setShowIgnored(!showIgnored)}>{showIgnored ? t('ignored.hide', { count: ignoredApps.length }) : t('ignored.show', { count: ignoredApps.length })}</button>
{showIgnored && ignoredApps.map(a => (
<span key={a.key} className="row muted" style={{ gap: 4 }}>
<button className="link" onClick={() => open(a)}>{a.name}</button>
<button className="link" onClick={() => open(a)} {...menu(() => appMenu(a, d, nav, { showIgnored }))}>{a.name}</button>
<button className="btn btn-sm btn-ghost btn-icon" onClick={() => d.updateOverrides(o => withIgnored(o, a.ignoreKeys, false))} aria-label={t('ignored.restore')} title={t('ignored.restore')}><Icon name="eye" /></button>
</span>
))}