@open-slide/core 1.3.0 → 1.5.0

package/src/app/components/player.tsx

@@ -32,6 +32,12 @@ type Props = {
   allowExit?: boolean;
   controls?: boolean;
   slideId?: string;
+  /**
+   * When true, the Player enters the browser Fullscreen API on mount.
+   * When false, it renders as a window-sized overlay (viewport-filling)
+   * without entering fullscreen. Defaults to true for back-compat.
+   */
+  fullscreen?: boolean;
 };
 
 export function Player({
@@ -43,8 +49,9 @@ export function Player({
   allowExit = true,
   controls = false,
   slideId,
+  fullscreen = true,
 }: Props) {
-  const rootRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   // Mirrored as state so descendants portaling *into* the player subtree
   // (tooltips, popovers — the body is outside the fullscreen tree) re-render
   // once the node mounts.
@@ -60,6 +67,12 @@ export function Player({
   const [laser, setLaser] = useState(false);
   const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
+  const [windowed, setWindowed] = useState(!fullscreen);
+  // Mirror windowed into a ref so the fullscreenchange listener can read the
+  // latest value without re-binding — exits from window mode must not call
+  // onExit, but exits initiated by the browser (Esc in fullscreen) must.
+  const windowedRef = useRef(windowed);
+  windowedRef.current = windowed;
 
   const canPrev = index > 0;
   const canNext = index < pages.length - 1;
@@ -90,6 +103,7 @@ export function Player({
   });
 
   useEffect(() => {
+    if (windowed) return;
     const el = rootRef.current;
     if (!el) return;
     if (document.fullscreenElement !== el) {
@@ -98,17 +112,21 @@ export function Player({
     return () => {
       if (document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
     };
-  }, []);
+  }, [windowed]);
 
   useEffect(() => {
     if (!allowExit) return;
     const onFsChange = () => {
-      if (!document.fullscreenElement) onExit();
+      if (!document.fullscreenElement && !windowedRef.current) onExit();
     };
     document.addEventListener('fullscreenchange', onFsChange);
     return () => document.removeEventListener('fullscreenchange', onFsChange);
   }, [onExit, allowExit]);
 
+  const toggleFullscreen = useCallback(() => {
+    setWindowed((w) => !w);
+  }, []);
+
   // Player is the source of truth: it re-publishes state on every change
   // and answers `request-state` pings so newly opened presenter windows
   // hydrate immediately.
@@ -271,7 +289,7 @@ export function Player({
     <div
       ref={setRoot}
       className={cn(
-        'relative flex h-dvh w-screen items-center justify-center bg-black',
+        'fixed inset-0 flex items-center justify-center overflow-hidden bg-black',
         controls && 'select-none',
         controls && (hideCursor ? 'cursor-none' : 'cursor-default'),
       )}
@@ -310,12 +328,14 @@ export function Player({
             blackout={blackout}
             laser={laser}
             allowExit={allowExit}
+            windowed={windowed}
             onPrev={goPrev}
             onNext={goNext}
             onOverview={() => setOverviewOpen(true)}
             onBlackout={(mode) => setBlackout((c) => (c === mode ? null : mode))}
             onLaser={() => setLaser((v) => !v)}
             onPresenter={() => slideId && openPresenterWindow(slideId)}
+            onToggleFullscreen={toggleFullscreen}
             onHelp={() => setHelpOpen(true)}
             onExit={onExit}
           />
@@ -334,7 +354,7 @@ export function Player({
   );
 }
 
-function openPresenterWindow(slideId: string) {
+export function openPresenterWindow(slideId: string) {
   if (typeof window === 'undefined') return;
   const url = `/s/${encodeURIComponent(slideId)}/presenter`;
   window.open(url, `open-slide-presenter-${slideId}`, 'popup,width=1280,height=800');

package/src/app/components/present/control-bar.tsx

@@ -5,6 +5,8 @@ import {
   Grid2x2,
   Keyboard,
   LogOut,
+  Maximize,
+  Minimize,
   MonitorSpeaker,
   Square,
   Sun,
@@ -24,12 +26,14 @@ type Props = {
   blackout: 'black' | 'white' | null;
   laser: boolean;
   allowExit: boolean;
+  windowed: boolean;
   onPrev: () => void;
   onNext: () => void;
   onOverview: () => void;
   onBlackout: (mode: 'black' | 'white') => void;
   onLaser: () => void;
   onPresenter: () => void;
+  onToggleFullscreen: () => void;
   onHelp: () => void;
   onExit: () => void;
   /**
@@ -48,12 +52,14 @@ export function PresentControlBar({
   blackout,
   laser,
   allowExit,
+  windowed,
   onPrev,
   onNext,
   onOverview,
   onBlackout,
   onLaser,
   onPresenter,
+  onToggleFullscreen,
   onHelp,
   onExit,
   tooltipContainer,
@@ -123,6 +129,12 @@ export function PresentControlBar({
             <BarButton label={t.present.presenterAria} onClick={onPresenter}>
               <MonitorSpeaker className="size-4" />
             </BarButton>
+            <BarButton
+              label={windowed ? t.present.enterFullscreenAria : t.present.exitFullscreenAria}
+              onClick={onToggleFullscreen}
+            >
+              {windowed ? <Maximize className="size-4" /> : <Minimize className="size-4" />}
+            </BarButton>
             <BarButton label={t.present.helpAria} onClick={onHelp}>
               <Keyboard className="size-4" />
             </BarButton>

package/src/app/components/present/laser-pointer.tsx

@@ -24,13 +24,12 @@ export function PresentLaserPointer({ enabled }: { enabled: boolean }) {
   return (
     <div
       aria-hidden
-      className="pointer-events-none fixed z-[60]"
+      className="pointer-events-none fixed top-0 left-0 z-[60]"
       style={{
-        left: pos.x,
-        top: pos.y,
         width: 18,
         height: 18,
-        transform: 'translate(-50%, -50%)',
+        transform: `translate3d(${pos.x - 9}px, ${pos.y - 9}px, 0)`,
+        willChange: 'transform',
         borderRadius: '50%',
         background: 'radial-gradient(circle, oklch(0.66 0.24 28 / 0.95) 30%, transparent 70%)',
         boxShadow: '0 0 18px 4px oklch(0.66 0.24 28 / 0.55)',

package/src/app/components/present/progress-bar.tsx

@@ -7,19 +7,19 @@ type Props = {
 };
 
 export function PresentProgressBar({ index, total, visible }: Props) {
-  const pct = total > 0 ? ((index + 1) / total) * 100 : 0;
+  const pct = total > 0 ? (index + 1) / total : 0;
   return (
     <div
       aria-hidden
       className={cn(
-        'pointer-events-none absolute inset-x-0 top-0 z-30 h-[2px] bg-white/8',
+        'pointer-events-none absolute inset-x-0 top-0 z-30 h-[2px] overflow-hidden bg-white/8',
         'motion-safe:transition-opacity motion-safe:duration-200',
         visible ? 'opacity-100' : 'opacity-0',
       )}
     >
       <div
-        className="h-full bg-[var(--brand,#ef4444)] transition-[width] duration-200 ease-out"
-        style={{ width: `${pct}%` }}
+        className="h-full w-full origin-left bg-[var(--brand,#ef4444)] transition-transform duration-200 ease-out"
+        style={{ transform: `scaleX(${pct})` }}
       />
     </div>
   );

package/src/app/components/sidebar/folder-item.tsx

@@ -70,6 +70,9 @@ type Row =
     }
   | {
       kind: 'themes';
+    }
+  | {
+      kind: 'assets';
     };
 
 export function FolderItem({
@@ -92,7 +95,7 @@ export function FolderItem({
   const slideDragActive = useSlideDragActive();
   const t = useLocale();
 
-  const acceptsSlideDrop = row.kind !== 'themes';
+  const acceptsSlideDrop = row.kind !== 'themes' && row.kind !== 'assets';
   const isSlideDrag = (e: React.DragEvent) =>
     acceptsSlideDrop && e.dataTransfer.types.includes(SLIDE_DND_MIME);
   const handleDragEnter = (e: React.DragEvent) => {
@@ -125,9 +128,17 @@ export function FolderItem({
       ? { type: 'emoji', value: '📝' }
       : row.kind === 'themes'
         ? { type: 'emoji', value: '🎨' }
-        : row.folder.icon;
+        : row.kind === 'assets'
+          ? { type: 'emoji', value: '🗂️' }
+          : row.folder.icon;
   const label =
-    row.kind === 'draft' ? t.home.draft : row.kind === 'themes' ? t.home.themes : row.folder.name;
+    row.kind === 'draft'
+      ? t.home.draft
+      : row.kind === 'themes'
+        ? t.home.themes
+        : row.kind === 'assets'
+          ? t.home.assets
+          : row.folder.name;
 
   const commitRename = () => {
     if (row.kind !== 'folder') return;

package/src/app/components/sidebar/sidebar.tsx

@@ -10,11 +10,13 @@ import { IconPicker, PRESET_COLORS } from './icon-picker';
 
 export const DRAFT_ID = 'draft';
 export const THEMES_ID = '__themes__';
+export const ASSETS_ID = '__assets__';
 
 export function Sidebar({
   folders,
   countFor,
   themesCount,
+  assetsCount,
   selectedId,
   onSelect,
   onCreate,
@@ -27,6 +29,7 @@ export function Sidebar({
   folders: Folder[];
   countFor: (folderId: string | null) => number;
   themesCount: number;
+  assetsCount: number;
   selectedId: string;
   onSelect: (id: string) => void;
   onCreate: (name: string, icon: FolderIcon) => Promise<Folder> | undefined;
@@ -121,6 +124,13 @@ export function Sidebar({
           onSelect={() => onSelect(THEMES_ID)}
           onDropSlide={() => {}}
         />
+        <FolderItem
+          row={{ kind: 'assets' }}
+          count={assetsCount}
+          selected={selectedId === ASSETS_ID}
+          onSelect={() => onSelect(ASSETS_ID)}
+          onDropSlide={() => {}}
+        />
       </div>
 
       <div className="mt-5 flex items-center gap-2 px-4 pb-1.5">

package/src/app/lib/assets.ts

@@ -45,6 +45,27 @@ async function deleteAsset(slideId: string, name: string): Promise<Response> {
   return fetch(`/__assets/${slideId}/${encodeURIComponent(name)}`, { method: 'DELETE' });
 }
 
+export type AssetUsage = { slideId: string; count: number };
+
+export async function listAssetUsages(slideId: string, name: string): Promise<AssetUsage[]> {
+  const res = await fetch(`/__assets/${slideId}/${encodeURIComponent(name)}/usages`);
+  if (!res.ok) return [];
+  const data = (await res.json().catch(() => null)) as { usages?: AssetUsage[] } | null;
+  return data?.usages ?? [];
+}
+
+export async function revertAssetUsage(
+  slideId: string,
+  assetPath: string,
+): Promise<{ ok: boolean; status: number }> {
+  const res = await fetch('/__edit/revert-asset', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ slideId, assetPath }),
+  });
+  return { ok: res.ok, status: res.status };
+}
+
 export async function uploadWithAutoRename(
   slideId: string,
   file: File,

package/src/app/lib/export-pdf.ts

@@ -65,6 +65,12 @@ const PRINT_STYLES = `
 }
 `;
 
+export function isSafari(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  return /Safari/.test(ua) && !/Chrome|Chromium|Edg|OPR|Firefox/.test(ua);
+}
+
 export type PdfExportProgress = {
   phase: 'processing' | 'printing' | 'done';
   /** Number of pages whose intro animations have finished (0..total). */

package/src/app/lib/inspector/use-editor.ts

@@ -1,8 +1,16 @@
 import { useCallback } from 'react';
 
 export type EditOp =
-  | { kind: 'set-style'; key: string; value: string | null }
+  | { kind: 'set-style'; key: string; value: string | null; prevText?: string }
   | { kind: 'set-text'; value: string; prevText?: string }
+  | {
+      kind: 'set-text-range-style';
+      start: number;
+      end: number;
+      key: string;
+      value: string | null;
+      prevText?: string;
+    }
   | { kind: 'set-attr-asset'; attr: string; assetPath: string; previewUrl: string }
   | { kind: 'replace-placeholder-with-image'; assetPath: string };
 

package/src/app/lib/sdk.ts

@@ -6,6 +6,8 @@ export type Page = ComponentType;
 export type SlideMeta = {
   title?: string;
   theme?: string;
+  /** ISO 8601 timestamp. Set once at scaffold time; used to sort the slide list. */
+  createdAt?: string;
 };
 
 export type SlideModule = {

package/src/app/lib/slides.ts

@@ -1,4 +1,5 @@
 import {
+  slideCreatedAt as createdAt,
   slideIds as ids,
   loadSlide as load,
   slideThemes as themes,
@@ -7,6 +8,7 @@ import type { SlideModule } from './sdk';
 
 export const slideIds: string[] = ids;
 export const slideThemes: Record<string, string> = themes;
+export const slideCreatedAt: Record<string, number> = createdAt;
 
 export function slidesByTheme(themeId: string): string[] {
   return slideIds.filter((id) => slideThemes[id] === themeId);
@@ -15,3 +17,10 @@ export function slidesByTheme(themeId: string): string[] {
 export async function loadSlide(id: string): Promise<SlideModule> {
   return load(id);
 }
+
+export function slideChangeIncludes(data: unknown, slideId: string): boolean {
+  if (!data || typeof data !== 'object') return false;
+  const payload = data as { slideId?: unknown; slideIds?: unknown };
+  if (payload.slideId === slideId) return true;
+  return Array.isArray(payload.slideIds) && payload.slideIds.includes(slideId);
+}

package/src/app/lib/use-slide-module.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { SlideModule } from './sdk';
+import { loadSlide, slideChangeIncludes } from './slides';
+
+export function useSlideModule(slideId: string) {
+  const [slide, setSlide] = useState<SlideModule | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const loadSeqRef = useRef(0);
+
+  const reload = useCallback(
+    (reset: boolean) => {
+      const seq = ++loadSeqRef.current;
+      if (reset) setSlide(null);
+      setError(null);
+      loadSlide(slideId)
+        .then((mod) => {
+          if (seq === loadSeqRef.current) setSlide(mod);
+        })
+        .catch((e) => {
+          if (seq === loadSeqRef.current) setError(String(e?.message ?? e));
+        });
+    },
+    [slideId],
+  );
+
+  useEffect(() => {
+    reload(true);
+  }, [reload]);
+
+  useEffect(() => {
+    if (!import.meta.hot) return;
+    let cancelled = false;
+    const handler = (data: unknown) => {
+      if (slideChangeIncludes(data, slideId)) {
+        queueMicrotask(() => {
+          if (!cancelled) reload(false);
+        });
+      }
+    };
+    import.meta.hot.on('open-slide:slide-changed', handler);
+    return () => {
+      cancelled = true;
+      import.meta.hot?.off('open-slide:slide-changed', handler);
+    };
+  }, [slideId, reload]);
+
+  return { slide, error, reload };
+}

package/src/app/routes/assets.tsx

@@ -0,0 +1,9 @@
+import { AssetView } from '../components/asset-view';
+
+export function AssetsPage() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <AssetView slideId={null} />
+    </div>
+  );
+}

package/src/app/routes/home-shell.tsx

@@ -1,10 +1,12 @@
 import { useCallback, useMemo, useState } from 'react';
 import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
+import { useAssets } from '@/lib/assets';
 import { useFolders } from '@/lib/folders';
 import { format, useLocale } from '@/lib/use-locale';
+import { cn } from '@/lib/utils';
 import { MobileFolderPill } from '../components/sidebar/mobile-pill';
-import { DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
+import { ASSETS_ID, DRAFT_ID, Sidebar, THEMES_ID } from '../components/sidebar/sidebar';
 import type { FoldersManifest } from '../lib/sdk';
 import { slideIds } from '../lib/slides';
 import { themes as themeRegistry } from '../lib/themes';
@@ -25,6 +27,7 @@ export type HomeOutletContext = {
 
 function pathToSelectedId(pathname: string, search: URLSearchParams): string {
   if (pathname === '/themes' || pathname.startsWith('/themes/')) return THEMES_ID;
+  if (pathname === '/assets') return ASSETS_ID;
   return search.get('f') ?? DRAFT_ID;
 }
 
@@ -48,12 +51,16 @@ export function HomeShell() {
   const selectFolder = useCallback(
     (id: string) => {
       if (id === THEMES_ID) navigate('/themes', { replace: true });
+      else if (id === ASSETS_ID) navigate('/assets', { replace: true });
       else if (id === DRAFT_ID) navigate('/', { replace: true });
       else navigate(`/?f=${encodeURIComponent(id)}`, { replace: true });
     },
     [navigate],
   );
 
+  const { assets: globalAssets } = useAssets('@global');
+  const isAssetsRoute = location.pathname === '/assets';
+
   const { draftSlides, slidesByFolder } = useMemo(() => {
     const byFolder: Record<string, string[]> = {};
     const draft: string[] = [];
@@ -111,6 +118,7 @@ export function HomeShell() {
           folders={manifest.folders}
           countFor={countFor}
           themesCount={themeRegistry.length}
+          assetsCount={globalAssets.length}
           selectedId={selectedId}
           onSelect={selectFolder}
           onCreate={(name, icon) => create(name, icon)}
@@ -151,6 +159,13 @@ export function HomeShell() {
               active={selectedId === THEMES_ID}
               onClick={() => selectFolder(THEMES_ID)}
             />
+            <MobileFolderPill
+              icon={{ type: 'emoji', value: '🗂️' }}
+              label={t.home.assets}
+              count={globalAssets.length}
+              active={selectedId === ASSETS_ID}
+              onClick={() => selectFolder(ASSETS_ID)}
+            />
             {manifest.folders.map((f) => (
               <MobileFolderPill
                 key={f.id}
@@ -164,7 +179,13 @@ export function HomeShell() {
           </div>
         </div>
 
-        <div className="mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12">
+        <div
+          className={cn(
+            isAssetsRoute
+              ? 'flex min-h-0 flex-1 flex-col'
+              : 'mx-auto w-full max-w-[1180px] px-5 py-8 md:px-10 md:py-12',
+          )}
+        >
           <Outlet context={ctx} />
         </div>
       </div>

package/src/app/routes/home.tsx

@@ -1,4 +1,7 @@
 import {
+  ArrowDownAZ,
+  ChevronDown,
+  Clock,
   FolderInput,
   FolderPlus,
   MoreHorizontal,
@@ -31,9 +34,38 @@ import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/folder-ite
 import { DRAFT_ID } from '../components/sidebar/sidebar';
 import { SlideCanvas } from '../components/slide-canvas';
 import type { Folder, FolderIcon, SlideModule } from '../lib/sdk';
-import { loadSlide } from '../lib/slides';
+import { loadSlide, slideCreatedAt } from '../lib/slides';
 import type { HomeOutletContext } from './home-shell';
 
+type SortKey = 'created-desc' | 'created-asc' | 'title-asc' | 'title-desc';
+
+const SORT_KEYS: readonly SortKey[] = ['created-desc', 'created-asc', 'title-asc', 'title-desc'];
+
+const DEFAULT_SORT: SortKey = 'created-desc';
+const SORT_STORAGE_KEY = 'open-slide:home-sort';
+
+function readSortPref(): SortKey {
+  if (typeof window === 'undefined') return DEFAULT_SORT;
+  try {
+    const raw = window.localStorage.getItem(SORT_STORAGE_KEY);
+    if (raw && (SORT_KEYS as readonly string[]).includes(raw)) return raw as SortKey;
+  } catch {}
+  return DEFAULT_SORT;
+}
+
+function useSortPref(): [SortKey, (next: SortKey) => void] {
+  const [sortKey, setSortKey] = useState<SortKey>(readSortPref);
+  const update = (next: SortKey) => {
+    setSortKey(next);
+    try {
+      window.localStorage.setItem(SORT_STORAGE_KEY, next);
+    } catch {}
+  };
+  return [sortKey, update];
+}
+
+const TITLE_COLLATOR = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
+
 export function Home() {
   const {
     manifest,
@@ -58,6 +90,7 @@ export function Home() {
   const isDraft = selectedId === DRAFT_ID;
 
   const [query, setQuery] = useState('');
+  const [sortKey, setSortKey] = useSortPref();
 
   const trimmedQuery = query.trim().toLowerCase();
   const filteredSlides = useMemo(() => {
@@ -68,6 +101,24 @@ export function Home() {
       return tl ? tl.includes(trimmedQuery) : false;
     });
   }, [visibleSlides, titleMap, trimmedQuery]);
+  const sortedSlides = useMemo(() => {
+    const list = filteredSlides.slice();
+    const titleOf = (id: string) => titleMap[id] ?? id;
+    switch (sortKey) {
+      case 'title-asc':
+        list.sort((a, b) => TITLE_COLLATOR.compare(titleOf(a), titleOf(b)));
+        break;
+      case 'title-desc':
+        list.sort((a, b) => TITLE_COLLATOR.compare(titleOf(b), titleOf(a)));
+        break;
+      case 'created-asc':
+        list.sort((a, b) => (slideCreatedAt[a] ?? 0) - (slideCreatedAt[b] ?? 0));
+        break;
+      default:
+        list.sort((a, b) => (slideCreatedAt[b] ?? 0) - (slideCreatedAt[a] ?? 0));
+    }
+    return list;
+  }, [filteredSlides, sortKey, titleMap]);
   const isSearching = trimmedQuery.length > 0;
 
   return (
@@ -90,7 +141,8 @@ export function Home() {
               )}
             </span>
           )}
-          <div className="ml-auto w-full md:w-auto">
+          <div className="ml-auto flex w-full items-center gap-2 md:w-auto">
+            <SortControl value={sortKey} onChange={setSortKey} />
             <SearchInput value={query} onChange={setQuery} />
           </div>
         </div>
@@ -104,7 +156,7 @@ export function Home() {
         <NoResultsState query={query} onClear={() => setQuery('')} />
       ) : (
         <ul className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-x-6 gap-y-9 md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]">
-          {filteredSlides.map((id) => (
+          {sortedSlides.map((id) => (
             <li key={id}>
               <SlideCard
                 id={id}
@@ -152,6 +204,52 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
   );
 }
 
+function SortControl({ value, onChange }: { value: SortKey; onChange: (next: SortKey) => void }) {
+  const t = useLocale();
+  const labels: Record<SortKey, string> = {
+    'created-desc': t.home.sortByCreatedDesc,
+    'created-asc': t.home.sortByCreatedAsc,
+    'title-asc': t.home.sortByTitleAsc,
+    'title-desc': t.home.sortByTitleDesc,
+  };
+  const FieldIcon = ({ k, className }: { k: SortKey; className?: string }) =>
+    k === 'title-asc' || k === 'title-desc' ? (
+      <ArrowDownAZ className={className} aria-hidden />
+    ) : (
+      <Clock className={className} aria-hidden />
+    );
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={`${t.home.sortLabel}: ${labels[value]}`}
+          className="flex h-8 items-center gap-1.5 rounded-[6px] border border-border bg-background pl-2 pr-1.5 text-[12.5px] font-medium text-foreground outline-none hover:bg-muted focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
+        >
+          <FieldIcon k={value} className="size-3.5 text-muted-foreground" />
+          <span>{labels[value]}</span>
+          <ChevronDown className="size-3 text-muted-foreground" aria-hidden />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[180px]">
+        {SORT_KEYS.map((key) => {
+          const active = value === key;
+          return (
+            <DropdownMenuItem
+              key={key}
+              onSelect={() => onChange(key)}
+              className={cn(active && 'bg-muted text-foreground')}
+            >
+              <FieldIcon k={key} className="size-3.5 text-muted-foreground" />
+              <span>{labels[key]}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 function HomeLoading() {
   const t = useLocale();
   return (