design: updated design docs

2026-06-21 21:15:09 +02:00
parent d9a6181ae2
commit 6415a4e517
18 changed files with 2452 additions and 605 deletions
@@ -0,0 +1,120 @@
+// launcher.jsx — composes top bar + grid into a complete launcher screen
+// Comes in two chrome variants: 'single' (one-row) and 'two' (two-row).
+
+function applyFilterAndSort(games, filter, sort, query) {
+  let g = filterGames(games, filter);
+  if (query.trim()) {
+    const q = query.toLowerCase();
+    g = g.filter(x => x.title.toLowerCase().includes(q) || x.tags.some(t => t.toLowerCase().includes(q)));
+  }
+  if (sort === 'az') g = [...g].sort((a, b) => a.title.localeCompare(b.title));
+  else if (sort === 'size') g = [...g].sort((a, b) => b.size - a.size);
+  else if (sort === 'state') {
+    const order = { installed: 0, local: 1, none: 2 };
+    g = [...g].sort((a, b) => order[a.state] - order[b.state] || a.title.localeCompare(b.title));
+  } else if (sort === 'recent') {
+    const order = { installed: 0, local: 1, none: 2 };
+    g = [...g].sort((a, b) => order[a.state] - order[b.state] || b.version.localeCompare(a.version));
+  }
+  return g;
+}
+
+function Launcher({
+  variant,
+  tweaks, setTweak,
+  initialFilter = 'all', initialSort = 'recent', initialQuery = '',
+  initialOpenGame = null,
+  initialSettingsOpen = false,
+}) {
+  const { density, aspect, accent, bg } = tweaks;
+  const [filter, setFilter] = useState(initialFilter);
+  const [sort, setSort] = useState(initialSort);
+  const [query, setQuery] = useState(initialQuery);
+  const [openGame, setOpenGame] = useState(initialOpenGame);
+  const [settingsOpen, setSettingsOpen] = useState(initialSettingsOpen);
+
+  const counts = useMemo(() => countByFilter(GAMES), []);
+  const list = useMemo(() => applyFilterAndSort(GAMES, filter, sort, query), [filter, sort, query]);
+
+  const menuItems = [
+    { label: 'Settings', onClick: () => setSettingsOpen(true) },
+    { label: 'Refresh library', onClick: () => {} },
+    '-',
+    { label: 'Unpack logs', onClick: () => {} },
+    { label: 'About SoftLAN', onClick: () => {} },
+  ];
+
+  return (
+    <div className={`launcher launcher-${variant} bg-${bg} density-${density}`}
+         style={{ '--accent': accent }}>
+      {variant === 'single' ? (
+        <header className="topbar topbar-single">
+          <div className="topbar-left">
+            <div className="brand">
+              <div className="brand-mark" style={{ background: accent }}>S</div>
+              <div className="brand-name">SoftLAN</div>
+            </div>
+            <div className="topbar-left-trail">
+              <SegmentedFilters value={filter} onChange={setFilter} counts={counts} accent={accent}/>
+            </div>
+          </div>
+          <div className="topbar-center">
+            <SearchField value={query} onChange={setQuery} accent={accent} wide/>
+          </div>
+          <div className="topbar-right">
+            <div className="topbar-right-lead">
+              <SortMenu value={sort} onChange={setSort} accent={accent}/>
+            </div>
+            <div className="topbar-right-trail">
+              <KebabMenu items={menuItems}/>
+            </div>
+          </div>
+        </header>
+      ) : (
+        <header className="topbar topbar-two">
+          <div className="topbar-row topbar-row1">
+            <div className="brand">
+              <div className="brand-mark" style={{ background: accent }}>S</div>
+              <div className="brand-name">SoftLAN <span className="brand-name-soft">Launcher</span></div>
+            </div>
+            <div className="topbar-row1-right">
+              <StorageMeter accent={accent}/>
+              <KebabMenu items={menuItems}/>
+            </div>
+          </div>
+          <div className="topbar-row topbar-row2">
+            <UnderlineFilters value={filter} onChange={setFilter} counts={counts} accent={accent}/>
+            <div className="topbar-row2-right">
+              <SearchField value={query} onChange={setQuery} accent={accent} wide/>
+              <SortMenu value={sort} onChange={setSort} accent={accent}/>
+            </div>
+          </div>
+        </header>
+      )}
+
+      <main className="grid-wrap">
+        {variant === 'single' && (
+          <div className="results-bar">
+            <div className="results-count">
+              Showing <strong>{list.length}</strong> of {counts.all} games
+            </div>
+            <StorageMeter accent={accent} compact/>
+          </div>
+        )}
+        <div className="grid">
+          {list.map(g => (
+            <GameCard key={g.id} game={g} accent={accent} aspect={aspect}
+                      onOpen={(game) => setOpenGame(game)}/>
+          ))}
+        </div>
+      </main>
+
+      {openGame && <GameDetailModal game={openGame} accent={accent} onClose={() => setOpenGame(null)}/>}
+      {settingsOpen && setTweak && (
+        <SettingsDialog settings={tweaks} onChange={setTweak} onClose={() => setSettingsOpen(false)}/>
+      )}
+    </div>
+  );
+}
+
+window.Launcher = Launcher;