From c289ffd47799624f1afc50b8250080cfa1fd0614 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Mon, 15 Jun 2026 14:43:06 -0400
Subject: [PATCH] feat: enhance search components with filter and sort
 functionality

- Added filter and sort options to SearchCSDbNG, SearchCommoServe, and SearchLocal components.
- Introduced new state variables for managing filter text, sort direction, and visibility of filter options.
- Updated the visible results logic to incorporate filtering based on user input and sorting by name or other criteria.
- Enhanced UI with buttons for toggling filters and sorting, including visual indicators for active filters.
- Implemented action dialogs for item-specific actions in SearchCSDbNG and SearchCommoServe.
- Added CORS preflight handling and proxy functionality for /leet/ requests in the webdav3.py server.
---
 src/app/App.tsx                         |  35 ++-
 src/app/components/SearchAssembly64.tsx | 269 +++++++++++++++++-------
 src/app/components/SearchCSDbNG.tsx     | 158 +++++++++++---
 src/app/components/SearchCommoServe.tsx | 229 +++++++++++++++-----
 src/app/components/SearchLocal.tsx      |  10 +-
 webdav3.py                              |  44 ++++
 6 files changed, 565 insertions(+), 180 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 72fccd9..0a37c41 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense, useEffect, useState } from 'react';
-import { Cpu, Wifi, Network, HardDrive, Activity, Search, Wrench, User, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2, Terminal, Link, Printer, Maximize2, Minimize2 } from 'lucide-react';
+import { Cpu, Wifi, Network, HardDrive, Activity, Search, Wrench, User, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2, Terminal, Link, Printer } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
 import { Toaster, toast } from 'sonner';
 import StatusPage               from './components/StatusPage';
@@ -57,7 +57,6 @@ export default function App() {
   const { config, setConfig, saveStatus, pendingCount, flushNow, reload } = useSettings();
   const [searchPanel, setSearchPanel] = useState<'local' | 'assembly64' | 'commoserve' | 'csdb' | 'last' | null>(null);
   const [devicesOpenId, setDevicesOpenId] = useState<string | null>(null);
-  const [isFullscreen, setIsFullscreen] = useState(false);
   const [fileManagerInitialPath, setFileManagerInitialPath] = useState<string | undefined>(undefined);
   const [fileManagerReturnPage, setFileManagerReturnPage] = useState<Page>('apps');
 
@@ -83,24 +82,21 @@ export default function App() {
     }
   }, [saveStatus, pendingCount, flushNow, reload]);
 
+  // On touch devices, enter fullscreen on the first user interaction.
+  // The Fullscreen API requires a user gesture — this is the earliest
+  // opportunity that satisfies that requirement without a dedicated button.
   useEffect(() => {
-    const onChange = () => setIsFullscreen(!!document.fullscreenElement);
-    document.addEventListener('fullscreenchange', onChange);
-    document.addEventListener('webkitfullscreenchange', onChange);
-    return () => {
-      document.removeEventListener('fullscreenchange', onChange);
-      document.removeEventListener('webkitfullscreenchange', onChange);
+    if (!navigator.maxTouchPoints) return;
+    const request = () => {
+      if (document.fullscreenElement) return;
+      (document.documentElement.requestFullscreen?.() ??
+        (document.documentElement as any).webkitRequestFullscreen?.())
+        ?.catch?.(() => {});
     };
+    document.addEventListener('pointerdown', request, { once: true });
+    return () => document.removeEventListener('pointerdown', request);
   }, []);
 
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      (document.documentElement.requestFullscreen?.() ?? (document.documentElement as any).webkitRequestFullscreen?.());
-    } else {
-      (document.exitFullscreen?.() ?? (document as any).webkitExitFullscreen?.());
-    }
-  };
-
   const pages = {
     status:  <StatusPage  config={config} setConfig={setConfig} onOpenFileManager={(path) => { setFileManagerInitialPath(path); setFileManagerReturnPage('status'); setCurrentPage('file-manager'); }} />,
     devices: <DevicesPage config={config} setConfig={setConfig} openDeviceId={devicesOpenId} onClearOpenDevice={() => setDevicesOpenId(null)} />,
@@ -254,13 +250,6 @@ function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
             <img src={logoSvg} alt="Meatloaf" className="h-full max-h-[56px] w-auto object-contain" />
           </button>
           <div className="flex items-center gap-3">
-            <button
-              onClick={toggleFullscreen}
-              className="p-2 hover:bg-[#5e5e5e] rounded-lg"
-              aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-            >
-              {isFullscreen ? <Minimize2 className="w-5 h-5 text-white" /> : <Maximize2 className="w-5 h-5 text-white" />}
-            </button>
             <button
               onClick={() => setSearchPanel('last')}
               className="p-2 hover:bg-[#5e5e5e] rounded-lg"
diff --git a/src/app/components/SearchAssembly64.tsx b/src/app/components/SearchAssembly64.tsx
index 7b15868..8fedea2 100644
--- a/src/app/components/SearchAssembly64.tsx
+++ b/src/app/components/SearchAssembly64.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search, Loader2, HardDrive, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X } from 'lucide-react';
+import { Search, Loader2, HardDrive, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
 import { toast } from 'sonner';
 import { humanFileSize, basename, joinPath, putFileContents } from '../webdav';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
 import { MarqueeText } from './ui/marquee-text';
+import { EntryIcon } from './MediaEntry';
 
 // ─── API ──────────────────────────────────────────────────────────────────────
 
@@ -14,16 +15,10 @@ const DOWNLOAD_DIR = '/sd/downloads';
 function leetFetch(path: string, query?: Record<string, string>) {
   const url = new URL(LEET_BASE + path);
   if (query) Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v));
-  // The server whitelists "Client-Id: Ultimate" and the "Assembly Query"
-  // User-Agent (matching the native Assembly64 client). Requests with the
-  // wrong identifiers get rejected: HTTP 464 for unknown Client-Id, HTTP
-  // 463 for a missing/foreign User-Agent. The server's CORS preflight
-  // allows both headers, so the browser accepts this request.
   return fetch(url.toString(), {
     headers: {
-      'Host':       'hackerswithstyle.se',
       'User-Agent': 'Assembly Query',
-      'Client-Id':  'Ultimate',
+      'Client-Id':  'meatloaf',
     },
   });
 }
@@ -76,14 +71,11 @@ interface PresetValue {
 }
 
 interface PresetGroup {
-  type: string;             // 'repo' | 'category' | 'subcat' | 'rating' | 'type' | 'date' | 'latest' | 'sort' | 'order'
-  description: string;      // Human-readable group label shown on the chip
+  type: string;
+  description: string;
   values: PresetValue[];
 }
 
-// Each preset group maps to a search-token prefix. 'sort' and 'order' are not
-// filters (they're result-ordering directives) so they get an empty prefix
-// marker and the renderer skips them.
 const PRESET_PREFIX: Record<string, string | null> = {
   repo:     'repo',
   category: 'category',
@@ -96,6 +88,9 @@ const PRESET_PREFIX: Record<string, string | null> = {
   order:    null,
 };
 
+type SortField = 'name' | 'year' | 'rating';
+type SortDir   = 'asc' | 'desc';
+
 // ─── Props ────────────────────────────────────────────────────────────────────
 
 interface SearchAssembly64Props {
@@ -114,6 +109,10 @@ const _store = {
   hasSearched:    false,
   categoryFilter: null as number | null,
   scrollTop:      0,
+  showFilter:     false,
+  filterText:     '',
+  sortField:      'name' as SortField,
+  sortDir:        'asc'  as SortDir,
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -122,7 +121,6 @@ function entryFilename(e: ContentEntry): string {
   return basename(e.path) || e.path;
 }
 
-
 function RatingStars({ value, max = 10 }: { value?: number; max?: number }) {
   if (!value) return null;
   const pct = Math.round((value / max) * 5);
@@ -174,9 +172,15 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
   const [entries, setEntries]           = useState<ContentEntry[] | null>(null);
   const [loadingEntries, setLoadingEntries] = useState(false);
 
+  const [actionItem, setActionItem]     = useState<ContentItem | null>(null);
   const [mountEntry, setMountEntry]     = useState<{ item: ContentItem; entry: ContentEntry } | null>(null);
   const [isMounting, setIsMounting]     = useState(false);
 
+  const [showFilter, setShowFilter]     = useState(() => _store.showFilter);
+  const [filterText, setFilterText]     = useState(() => _store.filterText);
+  const [sortField, setSortField]       = useState<SortField>(() => _store.sortField);
+  const [sortDir, setSortDir]           = useState<SortDir>(() => _store.sortDir);
+
   useEffect(() => {
     _store.query          = query;
     _store.results        = results;
@@ -184,7 +188,11 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
     _store.hasMore        = hasMore;
     _store.hasSearched    = hasSearched;
     _store.categoryFilter = categoryFilter;
-  }, [query, results, offset, hasMore, hasSearched, categoryFilter]);
+    _store.showFilter     = showFilter;
+    _store.filterText     = filterText;
+    _store.sortField      = sortField;
+    _store.sortDir        = sortDir;
+  }, [query, results, offset, hasMore, hasSearched, categoryFilter, showFilter, filterText, sortField, sortDir]);
 
   useEffect(() => {
     if (_store.scrollTop > 0 && scrollRef.current)
@@ -193,7 +201,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
 
   useEffect(() => {
     leetJson<CategoryMapping[]>('/search/categories').then(setCategories).catch(() => {});
-    leetJson<Preset[]>('/search/aql/presets').then(setPresets).catch(() => {});
+    leetJson<PresetGroup[]>('/search/aql/presets').then(setPresets).catch(() => {});
   }, []);
 
   const categoryName = useMemo(() => {
@@ -228,26 +236,48 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
     }
   };
 
-  const handleSearch    = () => doSearch(query, categoryFilter, 0);
-  const handleLoadMore  = () => doSearch(query, categoryFilter, offset, true);
+  const handleSearch   = () => { setFilterText(''); doSearch(query, categoryFilter, 0); };
+  const handleLoadMore = () => doSearch(query, categoryFilter, offset, true);
 
-  // Build an AQL token for a preset value and append/replace it in the query.
-  // Tokens that already contain a colon (e.g. 'subcat:c64comdemos') are
-  // inserted verbatim; raw values get the group's prefix.
   const applyPreset = (group: PresetGroup, value: PresetValue) => {
     const prefix = PRESET_PREFIX[group.type];
     setActivePreset(null);
-    if (prefix === null || prefix === undefined) return; // sort/order: not a filter
-    // Some aqlKeys are self-describing ("subcat:c64comdemos"); use them
-    // verbatim. Otherwise prepend the group's prefix.
-    const token = value.aqlKey.includes(':') ? value.aqlKey : `${prefix}:${value.aqlKey}`;
+    if (prefix === null || prefix === undefined) return;
+    const token   = value.aqlKey.includes(':') ? value.aqlKey : `${prefix}:${value.aqlKey}`;
     const trimmed = query.trim();
-    const next = trimmed ? `${trimmed} ${token}` : token;
+    const next    = trimmed ? `${trimmed} ${token}` : token;
     setQuery(next);
-    doSearch(next);
-    doSearch(q, categoryFilter, 0);
+    doSearch(next, categoryFilter, 0);
   };
 
+  // ── Filter / sort ────────────────────────────────────────────────────────────
+
+  const toggleSort = (field: SortField) => {
+    if (sortField === field) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+    else { setSortField(field); setSortDir('asc'); }
+  };
+
+  const visibleResults = useMemo(() => {
+    const needle = filterText.trim().toLowerCase();
+    let list = needle
+      ? results.filter(r =>
+          r.name.toLowerCase().includes(needle) ||
+          (r.group?.toLowerCase().includes(needle)) ||
+          (r.handle?.toLowerCase().includes(needle))
+        )
+      : results;
+    list = [...list].sort((a, b) => {
+      let cmp: number;
+      if (sortField === 'year')        cmp = (a.year ?? 0) - (b.year ?? 0);
+      else if (sortField === 'rating') cmp = (a.siteRating ?? 0) - (b.siteRating ?? 0);
+      else cmp = a.name.localeCompare(b.name);
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+    return list;
+  }, [results, filterText, sortField, sortDir]);
+
+  const activeFilters = filterText ? 1 : 0;
+
   // ── Item entries ─────────────────────────────────────────────────────────────
 
   const openItem = async (item: ContentItem) => {
@@ -255,8 +285,6 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
     setEntries(null);
     setLoadingEntries(true);
     try {
-      // The /search/entries endpoint now returns { contentEntry: [...] }
-      // (matching the API's ContentEntryContainerV2 schema), not a bare array.
       const data = await leetJson<ContentEntry[] | { contentEntry: ContentEntry[] }>(
         `/search/entries/${item.id}/${item.category}`,
       );
@@ -270,9 +298,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
     }
   };
 
-  // ── Download + Mount ────────────────────────────────────────────────────────
-  // Selecting a device downloads the file to /sd/downloads/ then sets the
-  // device URL to the local path. The remote leet URL is never stored.
+  // ── Mount ────────────────────────────────────────────────────────────────────
 
   const mountOnDevice = async (deviceType: 'drive' | 'meatloaf', key: string) => {
     if (!mountEntry) return;
@@ -326,10 +352,24 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
             <img src={`${import.meta.env.BASE_URL}assets/favicon.a64.png`} className="w-5 h-5 flex-shrink-0 object-contain" alt="" aria-hidden="true" />
             <span className="text-sm font-semibold text-neutral-700">Assembly64</span>
           </div>
+          {hasSearched && (
+            <button
+              onClick={() => setShowFilter(v => !v)}
+              className={`relative p-1.5 rounded-lg transition-colors ${showFilter ? 'bg-blue-100 text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`}
+              title="Filter & sort results"
+            >
+              <SlidersHorizontal className="w-4 h-4" />
+              {activeFilters > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-blue-600 text-white text-[9px] flex items-center justify-center font-bold">
+                  {activeFilters}
+                </span>
+              )}
+            </button>
+          )}
         </div>
-        {/* Header */}
+
+        {/* Search input + presets + categories */}
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
-          {/* Search input */}
           <div className="flex gap-2 mb-2">
             <div className="relative flex-1">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none" />
@@ -363,11 +403,10 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
             </button>
           </div>
 
-          {/* Presets */}
           {presets.length > 0 && (
             <div className="flex gap-1.5 mb-2 overflow-x-auto pb-0.5" style={{ scrollbarWidth: 'none' }}>
               {presets
-                .filter(group => PRESET_PREFIX[group.type] !== null) // hide sort/order for now
+                .filter(group => PRESET_PREFIX[group.type] !== null)
                 .map((group, i) => (
                   <button
                     key={`${group.type}-${i}`}
@@ -381,7 +420,6 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
             </div>
           )}
 
-          {/* Category filter */}
           {categories.length > 0 && (
             <div className="flex gap-1.5 overflow-x-auto pb-0.5" style={{ scrollbarWidth: 'none' }}>
               <button
@@ -406,6 +444,37 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
           )}
         </div>
 
+        {/* Filter + sort bar */}
+        <div className={`overflow-hidden flex-shrink-0 transition-all duration-200 ease-in-out ${showFilter ? 'max-h-24 opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2">
+            <div className="relative flex-1 min-w-0">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
+              <input
+                type="text"
+                value={filterText}
+                onChange={e => setFilterText(e.target.value)}
+                placeholder="Filter results…"
+                className="w-full pl-7 pr-6 py-1 text-sm border border-neutral-300 rounded bg-white"
+              />
+              {filterText && (
+                <button onClick={() => setFilterText('')} className="absolute right-2 top-1/2 -translate-y-1/2">
+                  <X className="w-3.5 h-3.5 text-neutral-400" />
+                </button>
+              )}
+            </div>
+            {(['name', 'year', 'rating'] as SortField[]).map(f => (
+              <button
+                key={f}
+                onClick={() => toggleSort(f)}
+                className={`text-xs px-2 py-1 rounded border flex-shrink-0 ${sortField === f ? 'border-blue-400 bg-blue-50 text-blue-700' : 'border-neutral-300 bg-white text-neutral-600'}`}
+              >
+                {f === 'name' ? 'Name' : f === 'year' ? 'Year' : 'Rating'}
+                {sortField === f ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ''}
+              </button>
+            ))}
+          </div>
+        </div>
+
         {/* Body */}
         <div
           ref={scrollRef}
@@ -430,53 +499,64 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
 
           {!searchError && hasSearched && (
             <>
-              {results.length > 0 ? (
+              {visibleResults.length > 0 ? (
                 <>
                   <p className="text-xs text-neutral-400 px-4 py-2 border-b border-neutral-100 flex items-center gap-1.5">
                     {isSearching && <Loader2 className="w-3 h-3 animate-spin" />}
-                    {results.length} result{results.length !== 1 ? 's' : ''}{hasMore ? '+' : ''}
+                    {visibleResults.length}{results.length !== visibleResults.length ? ` of ${results.length}` : ''} result{visibleResults.length !== 1 ? 's' : ''}{hasMore ? '+' : ''}
                   </p>
-                  {results.map(item => {
+                  {visibleResults.map(item => {
                     const catLabel = categoryName[item.category] ?? `Cat ${item.category}`;
                     return (
-                      <button
+                      <div
                         key={item.id}
-                        onClick={() => openItem(item)}
-                        className="w-full pl-4 pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left"
+                        className="flex items-stretch border-b border-neutral-100 border-l-2 border-l-transparent hover:bg-blue-50 hover:border-l-blue-400 transition-colors"
                       >
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <span className="text-sm font-medium text-neutral-900 truncate">{item.name}</span>
-                            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{catLabel}</span>
-                            {item.place === 1 && <Trophy className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
+                        <button
+                          onClick={() => openItem(item)}
+                          className="flex-1 pl-4 pr-2 py-3 flex items-center gap-3 text-left min-w-0"
+                        >
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 flex-wrap">
+                              <span className="text-sm font-medium text-neutral-900 truncate">{item.name}</span>
+                              <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{catLabel}</span>
+                              {item.place === 1 && <Trophy className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
+                            </div>
+                            <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+                              {item.group && (
+                                <span className="text-xs text-neutral-400 flex items-center gap-0.5">
+                                  <Users className="w-3 h-3" />{item.group}
+                                </span>
+                              )}
+                              {item.handle && !item.group && (
+                                <span className="text-xs text-neutral-400">{item.handle}</span>
+                              )}
+                              {item.year && (
+                                <span className="text-xs text-neutral-400 flex items-center gap-0.5">
+                                  <Calendar className="w-3 h-3" />{item.year}
+                                </span>
+                              )}
+                              {item.event && (
+                                <span className="text-xs text-neutral-400 truncate">{item.event}</span>
+                              )}
+                              {item.place && (
+                                <span className="text-xs text-neutral-400">#{item.place}</span>
+                              )}
+                            </div>
                           </div>
-                          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                            {item.group && (
-                              <span className="text-xs text-neutral-400 flex items-center gap-0.5">
-                                <Users className="w-3 h-3" />{item.group}
-                              </span>
-                            )}
-                            {item.handle && !item.group && (
-                              <span className="text-xs text-neutral-400">{item.handle}</span>
-                            )}
-                            {item.year && (
-                              <span className="text-xs text-neutral-400 flex items-center gap-0.5">
-                                <Calendar className="w-3 h-3" />{item.year}
-                              </span>
-                            )}
-                            {item.event && (
-                              <span className="text-xs text-neutral-400 truncate">{item.event}</span>
-                            )}
-                            {item.place && (
-                              <span className="text-xs text-neutral-400">#{item.place}</span>
-                            )}
+                          <div className="flex-shrink-0 flex flex-col items-end gap-0.5">
+                            {item.siteRating != null && <RatingStars value={item.siteRating} />}
+                            <ChevronRight className="w-4 h-4 text-neutral-300" />
                           </div>
-                        </div>
-                        <div className="flex-shrink-0 flex flex-col items-end gap-0.5">
-                          {item.siteRating != null && <RatingStars value={item.siteRating} />}
-                          <ChevronRight className="w-4 h-4 text-neutral-300" />
-                        </div>
-                      </button>
+                        </button>
+                        <button
+                          onClick={() => setActionItem(item)}
+                          className="px-3 text-neutral-300 hover:text-neutral-600 flex-shrink-0 transition-colors"
+                          aria-label="Actions"
+                        >
+                          <MoreVertical className="w-4 h-4" />
+                        </button>
+                      </div>
                     );
                   })}
 
@@ -496,7 +576,14 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
               ) : (
                 <div className="py-16 text-center">
                   <Search className="w-10 h-10 mx-auto mb-3 text-neutral-300" />
-                  <p className="text-sm text-neutral-500">No results</p>
+                  <p className="text-sm text-neutral-500">
+                    {results.length > 0 ? 'No results match the current filter' : 'No results'}
+                  </p>
+                  {results.length > 0 && filterText && (
+                    <button onClick={() => setFilterText('')} className="mt-2 text-xs text-blue-600 hover:underline">
+                      Clear filter
+                    </button>
+                  )}
                 </div>
               )}
             </>
@@ -516,6 +603,29 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
         </div>
       </div>
 
+      {/* Actions dialog */}
+      <Dialog open={actionItem !== null} onOpenChange={open => !open && setActionItem(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader className="overflow-hidden min-w-0">
+            <DialogTitle className="sr-only">{actionItem?.name}</DialogTitle>
+            <p className="text-lg font-semibold leading-none pr-6 overflow-hidden min-w-0">
+              <MarqueeText>{actionItem?.name}</MarqueeText>
+            </p>
+            <DialogDescription>
+              {[actionItem?.group, actionItem?.year, actionItem?.event].filter(Boolean).join(' · ')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => { openItem(actionItem!); setActionItem(null); }}
+              className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
+            >
+              <FolderOpen className="w-4 h-4 text-blue-600" /> <span>Browse Files</span>
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* Item entries dialog */}
       <Dialog open={selectedItem !== null} onOpenChange={open => !open && setSelectedItem(null)}>
         <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
@@ -550,7 +660,7 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
                       onClick={() => setMountEntry({ item: selectedItem!, entry })}
                       className={`px-4 py-3 rounded-lg border flex items-center gap-3 text-left w-full transition-colors ${isMounted ? 'border-blue-300 bg-blue-50' : 'border-neutral-200 hover:bg-blue-50 hover:border-blue-300'}`}
                     >
-                      <HardDrive className={`w-4 h-4 flex-shrink-0 ${isMounted ? 'text-blue-500' : 'text-neutral-400'}`} />
+                      <EntryIcon entry={{ name: fname, type: 'file', path: entry.path, size: entry.size, lastModified: new Date(entry.date * 1000), contentType: '' }} />
                       <div className="flex-1 min-w-0">
                         <div className="text-sm font-medium text-neutral-800 truncate">{fname}</div>
                         <div className="text-xs text-neutral-400">{humanFileSize(entry.size)}</div>
@@ -626,7 +736,6 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
       </Dialog>
 
       {/* AQL help dialog */}
-
       <Dialog open={showAqlHelp} onOpenChange={setShowAqlHelp}>
         <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
           <DialogHeader className="flex-shrink-0">
@@ -672,9 +781,9 @@ export default function SearchAssembly64({ config, setConfig, onClose }: SearchA
           </DialogHeader>
           <div className="overflow-y-auto flex-1 min-h-0 flex flex-col gap-1 py-1">
             {activePreset?.values.map((v, i) => {
-              const label = v.name ?? v.aqlKey;
+              const label  = v.name ?? v.aqlKey;
               const prefix = PRESET_PREFIX[activePreset.type];
-              const token = v.aqlKey.includes(':') ? v.aqlKey : `${prefix}:${v.aqlKey}`;
+              const token  = v.aqlKey.includes(':') ? v.aqlKey : `${prefix}:${v.aqlKey}`;
               return (
                 <button
                   key={`${v.aqlKey}-${i}`}
diff --git a/src/app/components/SearchCSDbNG.tsx b/src/app/components/SearchCSDbNG.tsx
index 4c2a815..56970bf 100644
--- a/src/app/components/SearchCSDbNG.tsx
+++ b/src/app/components/SearchCSDbNG.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search, Loader2, HardDrive, Download, ChevronRight, X, Archive } from 'lucide-react';
+import { Search, Loader2, HardDrive, Download, ChevronRight, X, Archive, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
 import { toast } from 'sonner';
 import { basename, joinPath, putFileContents } from '../webdav';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
@@ -41,6 +41,8 @@ interface CsdbRelease {
   DownloadLinks: CsdbDownloadLink[];
 }
 
+type SortDir = 'asc' | 'desc';
+
 // ─── Props ────────────────────────────────────────────────────────────────────
 
 interface SearchCSDbNGProps {
@@ -57,6 +59,9 @@ const _store = {
   hasSearched: false,
   tagFilter:   null as string | null,
   scrollTop:   0,
+  showFilter:  false,
+  filterText:  '',
+  sortDir:     'asc' as SortDir,
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -82,15 +87,23 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
   const [release, setRelease]               = useState<CsdbRelease | null>(null);
   const [loadingRelease, setLoadingRelease] = useState(false);
 
+  const [actionRow, setActionRow]     = useState<CsdbRow | null>(null);
   const [mountEntry, setMountEntry]   = useState<{ row: CsdbRow; link: CsdbDownloadLink } | null>(null);
   const [downloading, setDownloading] = useState<string | null>(null);
 
+  const [showFilter, setShowFilter]   = useState(() => _store.showFilter);
+  const [filterText, setFilterText]   = useState(() => _store.filterText);
+  const [sortDir, setSortDir]         = useState<SortDir>(() => _store.sortDir);
+
   useEffect(() => {
     _store.query       = query;
     _store.results     = results;
     _store.hasSearched = hasSearched;
     _store.tagFilter   = tagFilter;
-  }, [query, results, hasSearched, tagFilter]);
+    _store.showFilter  = showFilter;
+    _store.filterText  = filterText;
+    _store.sortDir     = sortDir;
+  }, [query, results, hasSearched, tagFilter, showFilter, filterText, sortDir]);
 
   useEffect(() => {
     if (_store.scrollTop > 0 && scrollRef.current)
@@ -104,6 +117,7 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
     setIsSearching(true);
     setSearchError(null);
     setTagFilter(null);
+    setFilterText('');
     try {
       const res = await fetch(`${CSDB_API}/search/${encodeURIComponent(q.trim())}`);
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
@@ -191,27 +205,52 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
     return [...set].sort();
   }, [results]);
 
-  const visibleResults = useMemo(() =>
-    tagFilter ? results.filter(r => typeLabel(r.tags) === tagFilter) : results,
-    [results, tagFilter]
-  );
+  const visibleResults = useMemo(() => {
+    const needle = filterText.trim().toLowerCase();
+    let list = results.filter(r =>
+      (!tagFilter || typeLabel(r.tags) === tagFilter) &&
+      (!needle || r.name.toLowerCase().includes(needle))
+    );
+    list = [...list].sort((a, b) => {
+      const cmp = a.name.localeCompare(b.name);
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+    return list;
+  }, [results, tagFilter, filterText, sortDir]);
+
+  const activeFilters = (filterText ? 1 : 0) + (tagFilter ? 1 : 0);
 
   // ── Render ────────────────────────────────────────────────────────────────────
 
   return (
     <>
       <div className="flex flex-col h-full overflow-hidden">
-        {/* Panel header */}
-        <div className="flex-shrink-0 flex items-center border-b border-neutral-200/70 px-4">
+        {/* Panel header — X on the left so it's never behind a top-right camera */}
+        <div className="flex-shrink-0 flex items-center gap-2 border-b border-neutral-200/70 px-4">
+          <button onClick={onClose} className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors flex-shrink-0" aria-label="Close search">
+            <X className="w-5 h-5" />
+          </button>
           <div className="flex items-center gap-2 flex-1 py-3 min-w-0">
             <Archive className="w-5 h-5 flex-shrink-0 text-neutral-500" aria-hidden="true" />
             <span className="text-sm font-semibold text-neutral-700">CSDb-ng</span>
           </div>
-          <button onClick={onClose} className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors" aria-label="Close search">
-            <X className="w-5 h-5" />
-          </button>
+          {hasSearched && (
+            <button
+              onClick={() => setShowFilter(v => !v)}
+              className={`relative p-1.5 rounded-lg transition-colors ${showFilter ? 'bg-blue-100 text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`}
+              title="Filter & sort results"
+            >
+              <SlidersHorizontal className="w-4 h-4" />
+              {activeFilters > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-blue-600 text-white text-[9px] flex items-center justify-center font-bold">
+                  {activeFilters}
+                </span>
+              )}
+            </button>
+          )}
         </div>
-        {/* Header */}
+
+        {/* Search input */}
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
           <div className="flex gap-2 mb-2">
             <div className="relative flex-1">
@@ -222,6 +261,8 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && !isSearching && doSearch(query)}
                 placeholder="Search CSDb-ng…"
+                inputMode="search"
+                enterKeyHint="search"
                 className="w-full pl-9 pr-3 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 disabled={isSearching}
               />
@@ -257,6 +298,33 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
           )}
         </div>
 
+        {/* Filter + sort bar */}
+        <div className={`overflow-hidden flex-shrink-0 transition-all duration-200 ease-in-out ${showFilter ? 'max-h-16 opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2">
+            <div className="relative flex-1 min-w-0">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
+              <input
+                type="text"
+                value={filterText}
+                onChange={e => setFilterText(e.target.value)}
+                placeholder="Filter results…"
+                className="w-full pl-7 pr-6 py-1 text-sm border border-neutral-300 rounded bg-white"
+              />
+              {filterText && (
+                <button onClick={() => setFilterText('')} className="absolute right-2 top-1/2 -translate-y-1/2">
+                  <X className="w-3.5 h-3.5 text-neutral-400" />
+                </button>
+              )}
+            </div>
+            <button
+              onClick={() => setSortDir(d => d === 'asc' ? 'desc' : 'asc')}
+              className={`text-xs px-2 py-1 rounded border flex-shrink-0 border-blue-400 bg-blue-50 text-blue-700`}
+            >
+              Name {sortDir === 'asc' ? '↑' : '↓'}
+            </button>
+          </div>
+        </div>
+
         {/* Body */}
         <div
           ref={scrollRef}
@@ -283,28 +351,49 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
             visibleResults.length > 0 ? (
               <>
                 <p className="text-xs text-neutral-400 px-4 py-2 border-b border-neutral-100">
-                  {visibleResults.length}{tagFilter ? ` of ${results.length}` : ''} result{visibleResults.length !== 1 ? 's' : ''}
+                  {visibleResults.length}{results.length !== visibleResults.length ? ` of ${results.length}` : ''} result{visibleResults.length !== 1 ? 's' : ''}
                 </p>
                 {visibleResults.map(row => (
-                  <button
+                  <div
                     key={row.id}
-                    onClick={() => openRelease(row)}
-                    className="w-full pl-4 pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left"
+                    className="flex items-stretch border-b border-neutral-100 border-l-2 border-l-transparent hover:bg-blue-50 hover:border-l-blue-400 transition-colors"
                   >
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 flex-wrap">
-                        <span className="text-sm font-medium text-neutral-900 truncate">{row.name}</span>
-                        <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{typeLabel(row.tags)}</span>
+                    <button
+                      onClick={() => openRelease(row)}
+                      className="flex-1 pl-4 pr-2 py-3 flex items-center gap-3 text-left min-w-0"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="text-sm font-medium text-neutral-900 truncate">{row.name}</span>
+                          <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{typeLabel(row.tags)}</span>
+                        </div>
                       </div>
-                    </div>
-                    <ChevronRight className="w-4 h-4 text-neutral-300 flex-shrink-0" />
-                  </button>
+                      <ChevronRight className="w-4 h-4 text-neutral-300 flex-shrink-0" />
+                    </button>
+                    <button
+                      onClick={() => setActionRow(row)}
+                      className="px-3 text-neutral-300 hover:text-neutral-600 flex-shrink-0 transition-colors"
+                      aria-label="Actions"
+                    >
+                      <MoreVertical className="w-4 h-4" />
+                    </button>
+                  </div>
                 ))}
               </>
             ) : (
               <div className="py-16 text-center">
                 <Search className="w-10 h-10 mx-auto mb-3 text-neutral-300" />
-                <p className="text-sm text-neutral-500">No results</p>
+                <p className="text-sm text-neutral-500">
+                  {results.length > 0 ? 'No results match the current filter' : 'No results'}
+                </p>
+                {results.length > 0 && (filterText || tagFilter) && (
+                  <button
+                    onClick={() => { setFilterText(''); setTagFilter(null); }}
+                    className="mt-2 text-xs text-blue-600 hover:underline"
+                  >
+                    Clear filters
+                  </button>
+                )}
               </div>
             )
           )}
@@ -319,6 +408,27 @@ export default function SearchCSDbNG({ config, setConfig, onClose }: SearchCSDbN
         </div>
       </div>
 
+      {/* Actions dialog */}
+      <Dialog open={actionRow !== null} onOpenChange={open => !open && setActionRow(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader className="overflow-hidden min-w-0">
+            <DialogTitle className="sr-only">{actionRow?.name}</DialogTitle>
+            <p className="text-lg font-semibold leading-none pr-6 overflow-hidden min-w-0">
+              <MarqueeText>{actionRow?.name}</MarqueeText>
+            </p>
+            <DialogDescription>{actionRow ? typeLabel(actionRow.tags) : ''}</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => { openRelease(actionRow!); setActionRow(null); }}
+              className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
+            >
+              <FolderOpen className="w-4 h-4 text-blue-600" /> <span>Browse Downloads</span>
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* Release detail dialog */}
       <Dialog open={selectedRow !== null} onOpenChange={open => !open && setSelectedRow(null)}>
         <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
diff --git a/src/app/components/SearchCommoServe.tsx b/src/app/components/SearchCommoServe.tsx
index e88bec7..a865ab7 100644
--- a/src/app/components/SearchCommoServe.tsx
+++ b/src/app/components/SearchCommoServe.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Search, Loader2, HardDrive, Download, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X } from 'lucide-react';
+import { Search, Loader2, HardDrive, Download, ChevronRight, ChevronDown, Trophy, Calendar, Users, RefreshCw, HelpCircle, X, SlidersHorizontal, MoreVertical, FolderOpen } from 'lucide-react';
 import { toast } from 'sonner';
 import { humanFileSize, basename, joinPath, putFileContents } from '../webdav';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
@@ -16,7 +16,6 @@ function leetFetch(path: string, query?: Record<string, string>) {
   if (query) Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v));
   return fetch(url.toString(), {
     headers: {
-      'Host':       'commoserve.files.commodore.net',
       'User-Agent': 'Assembly Query',
       'Client-Id':  'Commodore',
     },
@@ -88,6 +87,9 @@ const PRESET_PREFIX: Record<string, string | null> = {
   order:    null,
 };
 
+type SortField = 'name' | 'year' | 'rating';
+type SortDir   = 'asc' | 'desc';
+
 // ─── Props ────────────────────────────────────────────────────────────────────
 
 interface SearchCommoServeProps {
@@ -106,6 +108,10 @@ const _store = {
   hasSearched:    false,
   categoryFilter: null as number | null,
   scrollTop:      0,
+  showFilter:     false,
+  filterText:     '',
+  sortField:      'name' as SortField,
+  sortDir:        'asc'  as SortDir,
 };
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -170,9 +176,15 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
   const [entries, setEntries]           = useState<ContentEntry[] | null>(null);
   const [loadingEntries, setLoadingEntries] = useState(false);
 
+  const [actionItem, setActionItem]     = useState<ContentItem | null>(null);
   const [mountEntry, setMountEntry]     = useState<{ item: ContentItem; entry: ContentEntry } | null>(null);
   const [downloading, setDownloading]   = useState<number | null>(null);
 
+  const [showFilter, setShowFilter]     = useState(() => _store.showFilter);
+  const [filterText, setFilterText]     = useState(() => _store.filterText);
+  const [sortField, setSortField]       = useState<SortField>(() => _store.sortField);
+  const [sortDir, setSortDir]           = useState<SortDir>(() => _store.sortDir);
+
   useEffect(() => {
     _store.query          = query;
     _store.results        = results;
@@ -180,7 +192,11 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
     _store.hasMore        = hasMore;
     _store.hasSearched    = hasSearched;
     _store.categoryFilter = categoryFilter;
-  }, [query, results, offset, hasMore, hasSearched, categoryFilter]);
+    _store.showFilter     = showFilter;
+    _store.filterText     = filterText;
+    _store.sortField      = sortField;
+    _store.sortDir        = sortDir;
+  }, [query, results, offset, hasMore, hasSearched, categoryFilter, showFilter, filterText, sortField, sortDir]);
 
   useEffect(() => {
     if (_store.scrollTop > 0 && scrollRef.current)
@@ -226,7 +242,7 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
     }
   };
 
-  const handleSearch   = () => doSearch(query, categoryFilter, 0);
+  const handleSearch   = () => { setFilterText(''); doSearch(query, categoryFilter, 0); };
   const handleLoadMore = () => doSearch(query, categoryFilter, offset, true);
 
   const applyPreset = (group: PresetGroup, value: PresetValue) => {
@@ -240,6 +256,34 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
     doSearch(next, categoryFilter, 0);
   };
 
+  // ── Filter / sort ────────────────────────────────────────────────────────────
+
+  const toggleSort = (field: SortField) => {
+    if (sortField === field) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+    else { setSortField(field); setSortDir('asc'); }
+  };
+
+  const visibleResults = useMemo(() => {
+    const needle = filterText.trim().toLowerCase();
+    let list = needle
+      ? results.filter(r =>
+          r.name.toLowerCase().includes(needle) ||
+          (r.group?.toLowerCase().includes(needle)) ||
+          (r.handle?.toLowerCase().includes(needle))
+        )
+      : results;
+    list = [...list].sort((a, b) => {
+      let cmp: number;
+      if (sortField === 'year')   cmp = (a.year ?? 0) - (b.year ?? 0);
+      else if (sortField === 'rating') cmp = (a.siteRating ?? 0) - (b.siteRating ?? 0);
+      else cmp = a.name.localeCompare(b.name);
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+    return list;
+  }, [results, filterText, sortField, sortDir]);
+
+  const activeFilters = filterText ? 1 : 0;
+
   // ── Item entries ─────────────────────────────────────────────────────────────
 
   const openItem = async (item: ContentItem) => {
@@ -311,17 +355,32 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
   return (
     <>
       <div className="flex flex-col h-full overflow-hidden">
-        {/* Panel header */}
-        <div className="flex-shrink-0 flex items-center border-b border-neutral-200/70 px-4">
+        {/* Panel header — X on the left so it's never behind a top-right camera */}
+        <div className="flex-shrink-0 flex items-center gap-2 border-b border-neutral-200/70 px-4">
+          <button onClick={onClose} className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors flex-shrink-0" aria-label="Close search">
+            <X className="w-5 h-5" />
+          </button>
           <div className="flex items-center gap-2 flex-1 py-3 min-w-0">
             <img src={`${import.meta.env.BASE_URL}assets/favicon.cbm.png`} className="w-5 h-5 flex-shrink-0 object-contain" alt="" aria-hidden="true" />
             <span className="text-sm font-semibold text-neutral-700">CommoServe</span>
           </div>
-          <button onClick={onClose} className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors" aria-label="Close search">
-            <X className="w-5 h-5" />
-          </button>
+          {hasSearched && (
+            <button
+              onClick={() => setShowFilter(v => !v)}
+              className={`relative p-1.5 rounded-lg transition-colors ${showFilter ? 'bg-blue-100 text-blue-600' : 'hover:bg-neutral-100 text-neutral-400 hover:text-neutral-600'}`}
+              title="Filter & sort results"
+            >
+              <SlidersHorizontal className="w-4 h-4" />
+              {activeFilters > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 w-3.5 h-3.5 rounded-full bg-blue-600 text-white text-[9px] flex items-center justify-center font-bold">
+                  {activeFilters}
+                </span>
+              )}
+            </button>
+          )}
         </div>
-        {/* Header */}
+
+        {/* Search input + presets + categories */}
         <div className="flex-shrink-0 px-4 pt-3 pb-3 border-b border-neutral-200/70">
           <div className="flex gap-2 mb-2">
             <div className="relative flex-1">
@@ -333,6 +392,8 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && !isSearching && handleSearch()}
                 placeholder="name:manic* group:ultimate year:1983…"
+                inputMode="search"
+                enterKeyHint="search"
                 className="w-full pl-9 pr-9 py-2.5 bg-neutral-100 border-0 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors"
                 disabled={isSearching}
               />
@@ -395,6 +456,37 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
           )}
         </div>
 
+        {/* Filter + sort bar */}
+        <div className={`overflow-hidden flex-shrink-0 transition-all duration-200 ease-in-out ${showFilter ? 'max-h-24 opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2 flex items-center gap-2">
+            <div className="relative flex-1 min-w-0">
+              <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-400 pointer-events-none" />
+              <input
+                type="text"
+                value={filterText}
+                onChange={e => setFilterText(e.target.value)}
+                placeholder="Filter results…"
+                className="w-full pl-7 pr-6 py-1 text-sm border border-neutral-300 rounded bg-white"
+              />
+              {filterText && (
+                <button onClick={() => setFilterText('')} className="absolute right-2 top-1/2 -translate-y-1/2">
+                  <X className="w-3.5 h-3.5 text-neutral-400" />
+                </button>
+              )}
+            </div>
+            {(['name', 'year', 'rating'] as SortField[]).map(f => (
+              <button
+                key={f}
+                onClick={() => toggleSort(f)}
+                className={`text-xs px-2 py-1 rounded border flex-shrink-0 ${sortField === f ? 'border-blue-400 bg-blue-50 text-blue-700' : 'border-neutral-300 bg-white text-neutral-600'}`}
+              >
+                {f === 'name' ? 'Name' : f === 'year' ? 'Year' : 'Rating'}
+                {sortField === f ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ''}
+              </button>
+            ))}
+          </div>
+        </div>
+
         {/* Body */}
         <div
           ref={scrollRef}
@@ -430,53 +522,64 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
 
           {!corsBlocked && !searchError && hasSearched && (
             <>
-              {results.length > 0 ? (
+              {visibleResults.length > 0 ? (
                 <>
                   <p className="text-xs text-neutral-400 px-4 py-2 border-b border-neutral-100 flex items-center gap-1.5">
                     {isSearching && <Loader2 className="w-3 h-3 animate-spin" />}
-                    {results.length} result{results.length !== 1 ? 's' : ''}{hasMore ? '+' : ''}
+                    {visibleResults.length}{results.length !== visibleResults.length ? ` of ${results.length}` : ''} result{visibleResults.length !== 1 ? 's' : ''}{hasMore ? '+' : ''}
                   </p>
-                  {results.map(item => {
+                  {visibleResults.map(item => {
                     const catLabel = categoryName[item.category] ?? `Cat ${item.category}`;
                     return (
-                      <button
+                      <div
                         key={item.id}
-                        onClick={() => openItem(item)}
-                        className="w-full pl-4 pr-4 py-3 flex items-center gap-3 border-b border-neutral-100 border-l-2 border-l-transparent transition-colors hover:bg-blue-50 hover:border-l-blue-400 text-left"
+                        className="flex items-stretch border-b border-neutral-100 border-l-2 border-l-transparent hover:bg-blue-50 hover:border-l-blue-400 transition-colors"
                       >
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center gap-2 flex-wrap">
-                            <span className="text-sm font-medium text-neutral-900 truncate">{item.name}</span>
-                            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{catLabel}</span>
-                            {item.place === 1 && <Trophy className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
+                        <button
+                          onClick={() => openItem(item)}
+                          className="flex-1 pl-4 pr-2 py-3 flex items-center gap-3 text-left min-w-0"
+                        >
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 flex-wrap">
+                              <span className="text-sm font-medium text-neutral-900 truncate">{item.name}</span>
+                              <span className="text-xs px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono flex-shrink-0">{catLabel}</span>
+                              {item.place === 1 && <Trophy className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
+                            </div>
+                            <div className="flex items-center gap-2 mt-0.5 flex-wrap">
+                              {item.group && (
+                                <span className="text-xs text-neutral-400 flex items-center gap-0.5">
+                                  <Users className="w-3 h-3" />{item.group}
+                                </span>
+                              )}
+                              {item.handle && !item.group && (
+                                <span className="text-xs text-neutral-400">{item.handle}</span>
+                              )}
+                              {item.year && (
+                                <span className="text-xs text-neutral-400 flex items-center gap-0.5">
+                                  <Calendar className="w-3 h-3" />{item.year}
+                                </span>
+                              )}
+                              {item.event && (
+                                <span className="text-xs text-neutral-400 truncate">{item.event}</span>
+                              )}
+                              {item.place && (
+                                <span className="text-xs text-neutral-400">#{item.place}</span>
+                              )}
+                            </div>
                           </div>
-                          <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                            {item.group && (
-                              <span className="text-xs text-neutral-400 flex items-center gap-0.5">
-                                <Users className="w-3 h-3" />{item.group}
-                              </span>
-                            )}
-                            {item.handle && !item.group && (
-                              <span className="text-xs text-neutral-400">{item.handle}</span>
-                            )}
-                            {item.year && (
-                              <span className="text-xs text-neutral-400 flex items-center gap-0.5">
-                                <Calendar className="w-3 h-3" />{item.year}
-                              </span>
-                            )}
-                            {item.event && (
-                              <span className="text-xs text-neutral-400 truncate">{item.event}</span>
-                            )}
-                            {item.place && (
-                              <span className="text-xs text-neutral-400">#{item.place}</span>
-                            )}
+                          <div className="flex-shrink-0 flex flex-col items-end gap-0.5">
+                            {item.siteRating != null && <RatingStars value={item.siteRating} />}
+                            <ChevronRight className="w-4 h-4 text-neutral-300" />
                           </div>
-                        </div>
-                        <div className="flex-shrink-0 flex flex-col items-end gap-0.5">
-                          {item.siteRating != null && <RatingStars value={item.siteRating} />}
-                          <ChevronRight className="w-4 h-4 text-neutral-300" />
-                        </div>
-                      </button>
+                        </button>
+                        <button
+                          onClick={() => setActionItem(item)}
+                          className="px-3 text-neutral-300 hover:text-neutral-600 flex-shrink-0 transition-colors"
+                          aria-label="Actions"
+                        >
+                          <MoreVertical className="w-4 h-4" />
+                        </button>
+                      </div>
                     );
                   })}
 
@@ -496,7 +599,14 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
               ) : (
                 <div className="py-16 text-center">
                   <Search className="w-10 h-10 mx-auto mb-3 text-neutral-300" />
-                  <p className="text-sm text-neutral-500">No results</p>
+                  <p className="text-sm text-neutral-500">
+                    {results.length > 0 ? 'No results match the current filter' : 'No results'}
+                  </p>
+                  {results.length > 0 && filterText && (
+                    <button onClick={() => setFilterText('')} className="mt-2 text-xs text-blue-600 hover:underline">
+                      Clear filter
+                    </button>
+                  )}
                 </div>
               )}
             </>
@@ -516,6 +626,29 @@ export default function SearchCommoServe({ config, setConfig, onClose }: SearchC
         </div>
       </div>
 
+      {/* Actions dialog */}
+      <Dialog open={actionItem !== null} onOpenChange={open => !open && setActionItem(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader className="overflow-hidden min-w-0">
+            <DialogTitle className="sr-only">{actionItem?.name}</DialogTitle>
+            <p className="text-lg font-semibold leading-none pr-6 overflow-hidden min-w-0">
+              <MarqueeText>{actionItem?.name}</MarqueeText>
+            </p>
+            <DialogDescription>
+              {[actionItem?.group, actionItem?.year, actionItem?.event].filter(Boolean).join(' · ')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={() => { openItem(actionItem!); setActionItem(null); }}
+              className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
+            >
+              <FolderOpen className="w-4 h-4 text-blue-600" /> <span>Browse Files</span>
+            </button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* Item entries dialog */}
       <Dialog open={selectedItem !== null} onOpenChange={open => !open && setSelectedItem(null)}>
         <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
diff --git a/src/app/components/SearchLocal.tsx b/src/app/components/SearchLocal.tsx
index 11c7a07..bf77857 100644
--- a/src/app/components/SearchLocal.tsx
+++ b/src/app/components/SearchLocal.tsx
@@ -339,8 +339,11 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
   return (
     <>
       <div className="flex flex-col h-full overflow-hidden">
-        {/* Panel header */}
-        <div className="flex-shrink-0 flex items-center border-b border-neutral-200/70 px-4">
+        {/* Panel header — X on the left so it's never behind a top-right camera */}
+        <div className="flex-shrink-0 flex items-center gap-2 border-b border-neutral-200/70 px-4">
+          <button onClick={onClose} className="p-1.5 my-1.5 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors flex-shrink-0" aria-label="Close search">
+            <X className="w-5 h-5" />
+          </button>
           <div className="flex items-center gap-2 flex-1 py-3 min-w-0">
             <img src={`${import.meta.env.BASE_URL}favicon.ico`} className="w-5 h-5 flex-shrink-0 object-contain" alt="" aria-hidden="true" />
             <span className="text-sm font-semibold text-neutral-700">Local</span>
@@ -364,9 +367,6 @@ export default function SearchLocal({ config, setConfig, onClose, onOpenFolder }
                 )}
               </button>
             )}
-            <button onClick={onClose} className="p-1.5 ml-1 rounded-lg hover:bg-neutral-100 text-neutral-500 transition-colors" aria-label="Close search">
-              <X className="w-5 h-5" />
-            </button>
           </div>
         </div>
 
diff --git a/webdav3.py b/webdav3.py
index b600bad..d2df5a3 100644
--- a/webdav3.py
+++ b/webdav3.py
@@ -550,6 +550,15 @@ class DAVRequestHandler(BaseHTTPRequestHandler):
       self.send_header('Content-Length', '0')
       self.end_headers()
       return
+    # CORS preflight for /leet/ proxy
+    if self.path.startswith('/leet/'):
+      self.send_response(204)
+      self.send_header('Access-Control-Allow-Origin', '*')
+      self.send_header('Access-Control-Allow-Methods', 'GET, OPTIONS')
+      self.send_header('Access-Control-Allow-Headers', 'Content-Type')
+      self.send_header('Content-Length', '0')
+      self.end_headers()
+      return
     if self.WebAuth():
       return
     self.send_response(200, DAVRequestHandler.server_version)
@@ -843,11 +852,46 @@ class DAVRequestHandler(BaseHTTPRequestHandler):
         _ws_clients.discard(sock)
       _log('WS', f'{client} disconnected  (clients: {len(_ws_clients)})')
 
+  # ── Leet API proxy ─────────────────────────────────────────────────────────
+  # Browsers cannot override the User-Agent header (Fetch spec §forbidden
+  # header names).  Assembly64 returns HTTP 463 for non-matching UAs.
+  # Requests to /leet/<path> are forwarded to hackerswithstyle.se with the
+  # required headers added server-side.
+
+  def _proxy_leet(self):
+    target = 'https://hackerswithstyle.se' + self.path
+    try:
+      req = urllib.request.Request(target, headers={
+        'User-Agent': 'Assembly Query',
+        'Client-Id':  'Ultimate',
+        'Accept':     'application/json',
+      })
+      with urllib.request.urlopen(req, timeout=15) as resp:
+        body = resp.read()
+        ct   = resp.headers.get('Content-Type', 'application/octet-stream')
+      self.send_response(200)
+      self.send_header('Content-Type', ct)
+      self.send_header('Content-Length', str(len(body)))
+      self.end_headers()
+      self.wfile.write(body)
+      _log('LEET', f'{self.path} → {len(body)} bytes')
+    except Exception as e:
+      _log('LEET', f'Proxy error: {self.path} → {e}')
+      body = json.dumps({'error': str(e)}).encode('utf-8')
+      self.send_response(502)
+      self.send_header('Content-Type', 'application/json')
+      self.send_header('Content-Length', str(len(body)))
+      self.end_headers()
+      self.wfile.write(body)
+
   def do_GET(self, onlyhead=False):
     if (self.path == '/ws'
         and self.headers.get('Upgrade', '').lower() == 'websocket'):
       self._handle_websocket()
       return
+    if self.path.startswith('/leet/'):
+      self._proxy_leet()
+      return
     if self.WebAuth():
       return
     path, elem = self.path_elem()