lanspread/design/design_reference/launcher.jsx

// 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;