Shell shortcuts: /, D, [ ], Ctrl+K palette + neighbors endpoint

Backend:
- GET /api/files/{md5}/neighbors/ returns previous/next items in the
  current ordering (name, size, created_at) for keyboard navigation

Frontend:
- / focuses the library search input
- D downloads the file on the detail page
- [ and ] navigate to the previous/next item; hint shown on the page
- Ctrl/Cmd+K opens a command palette (navigation, toggle filters,
  focus search, log in/out); Escape closes it
- Sort order now persists alongside the other library filters so
  prev/next stays consistent

backend/apps/library/views.py

@@ -13,6 +13,8 @@ from . import services
 from .models import MediaItem
 from .serializers import MediaItemSerializer
 
+LIST_ORDERINGS = {"name", "-name", "size", "-size", "created_at", "-created_at"}
+
 
 class MediaItemViewSet(
     mixins.ListModelMixin,
@@ -39,8 +41,9 @@ class MediaItemViewSet(
         if ratings:
             queryset = queryset.filter(rating__in=ratings)
         ordering = self.request.query_params.get("ordering", "").strip()
-        allowed = {"name", "-name", "size", "-size", "created_at", "-created_at"}
+        queryset = queryset.order_by(
-        queryset = queryset.order_by(ordering if ordering in allowed else "-created_at")
+            ordering if ordering in LIST_ORDERINGS else "-created_at"
+        )
         return queryset.distinct()
 
     @action(detail=True, methods=["get"])
@@ -76,6 +79,47 @@ class MediaItemViewSet(
             return services.serve_file(request, thumbnail)
         return services.serve_file(request, path)
 
+    @action(detail=True, methods=["get"])
+    def neighbors(self, request, md5=None):
+        """Previous/next items in the ordered list, for keyboard navigation."""
+        item = self.get_object()
+        ordering = request.query_params.get("ordering", "-created_at").strip()
+        if ordering not in LIST_ORDERINGS:
+            ordering = "-created_at"
+        field = ordering.lstrip("-")
+        descending = ordering.startswith("-")
+        value = {
+            "size": item.size,
+            "created_at": item.created_at,
+            "name": item.name,
+        }[field]
+
+        queryset = self.get_queryset().exclude(pk=item.pk)
+        if descending:
+            previous_query = queryset.filter(**{f"{field}__gt": value}).order_by(field)
+            next_query = queryset.filter(**{f"{field}__lt": value}).order_by(f"-{field}")
+        else:
+            previous_query = queryset.filter(**{f"{field}__lt": value}).order_by(
+                f"-{field}"
+            )
+            next_query = queryset.filter(**{f"{field}__gt": value}).order_by(field)
+
+        def brief(obj):
+            location = obj.locations.first()
+            return {
+                "md5": obj.md5,
+                "filename": Path(location.rel_path).name if location else obj.md5,
+            }
+
+        previous = previous_query.first()
+        next_item = next_query.first()
+        return Response(
+            {
+                "previous": brief(previous) if previous else None,
+                "next": brief(next_item) if next_item else None,
+            }
+        )
+
 
 class UploadView(APIView):
     permission_classes = [IsAuthenticated]

frontend/src/components/AppShell.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import { LogOut, Menu } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
 
+import { CommandPalette } from "@/components/CommandPalette";
 import { StatusFooter } from "@/components/StatusFooter";
 import { StatusPill } from "@/components/StatusPill";
 import { api } from "@/lib/api";
@@ -21,6 +22,7 @@ export function AppShell() {
   const logout = useAuth((state) => state.logout);
   const toggleSidebar = useUi((state) => state.toggleSidebar);
   const location = useLocation();
+  const [paletteOpen, setPaletteOpen] = useState(false);
 
   const statusQuery = useQuery({
     queryKey: ["status"],
@@ -32,9 +34,19 @@ export function AppShell() {
 
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
-      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "b") {
+      const modifier = event.ctrlKey || event.metaKey;
+      if (modifier && event.key.toLowerCase() === "b") {
         event.preventDefault();
         toggleSidebar();
+        return;
+      }
+      if (modifier && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+        return;
+      }
+      if (event.key === "Escape") {
+        setPaletteOpen(false);
       }
     }
     window.addEventListener("keydown", handleKeyDown);
@@ -122,6 +134,7 @@ export function AppShell() {
       </main>
 
       <StatusFooter status={status} />
+      <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
     </div>
   );
 }

frontend/src/components/CommandPalette.tsx

@@ -0,0 +1,180 @@
+import {
+  FolderOpen,
+  LogIn,
+  LogOut,
+  Menu,
+  Search,
+  Upload,
+  type LucideIcon,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { cn } from "@/lib/cn";
+import { useAuth } from "@/store/auth";
+import { useUi } from "@/store/ui";
+
+interface Command {
+  id: string;
+  label: string;
+  hint?: string;
+  icon: LucideIcon;
+  run: () => void;
+}
+
+export function CommandPalette({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  if (!open) return null;
+  return <CommandPaletteDialog onClose={onClose} />;
+}
+
+function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
+  const navigate = useNavigate();
+  const user = useAuth((state) => state.user);
+  const logout = useAuth((state) => state.logout);
+  const toggleSidebar = useUi((state) => state.toggleSidebar);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const commands = useMemo<Command[]>(() => {
+    const list: Command[] = [
+      {
+        id: "library",
+        label: "Go to Library",
+        icon: FolderOpen,
+        run: () => navigate("/"),
+      },
+      {
+        id: "upload",
+        label: "Go to Upload",
+        icon: Upload,
+        run: () => navigate("/upload"),
+      },
+      {
+        id: "filters",
+        label: "Toggle filters",
+        hint: "Ctrl+B",
+        icon: Menu,
+        run: toggleSidebar,
+      },
+      {
+        id: "search",
+        label: "Focus library search",
+        hint: "/",
+        icon: Search,
+        run: () => {
+          navigate("/");
+          window.requestAnimationFrame(() => {
+            document.getElementById("library-search")?.focus();
+          });
+        },
+      },
+    ];
+    if (user) {
+      list.push({
+        id: "logout",
+        label: `Log out (${user.username})`,
+        icon: LogOut,
+        run: () => void logout(),
+      });
+    } else {
+      list.push({
+        id: "login",
+        label: "Log in",
+        icon: LogIn,
+        run: () => navigate("/login"),
+      });
+    }
+    return list;
+  }, [navigate, toggleSidebar, user, logout]);
+
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return needle
+      ? commands.filter((command) =>
+          command.label.toLowerCase().includes(needle),
+        )
+      : commands;
+  }, [commands, query]);
+
+  function runCommand(command: Command | undefined) {
+    if (!command) return;
+    onClose();
+    command.run();
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-start justify-center bg-ctp-crust/70 px-4 pt-[18vh] backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-lg overflow-hidden rounded-lg border border-ctp-surface1 bg-ctp-surface0 shadow-[0_4px_12px_rgba(17,17,27,0.6)]"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <input
+          autoFocus
+          value={query}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setActiveIndex(0);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setActiveIndex((index) =>
+                Math.min(index + 1, filtered.length - 1),
+              );
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setActiveIndex((index) => Math.max(index - 1, 0));
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              runCommand(filtered[activeIndex]);
+            } else if (event.key === "Escape") {
+              onClose();
+            }
+          }}
+          placeholder="Type a command…"
+          className="w-full border-b border-ctp-surface1 bg-transparent px-4 py-3 font-mono text-sm text-ctp-text placeholder:text-ctp-overlay0 focus:outline-none"
+        />
+        <ul className="max-h-72 overflow-y-auto p-1.5">
+          {filtered.length === 0 ? (
+            <li className="px-3 py-6 text-center text-sm text-ctp-overlay0">
+              No matching commands
+            </li>
+          ) : (
+            filtered.map((command, index) => (
+              <li key={command.id}>
+                <button
+                  type="button"
+                  onMouseEnter={() => setActiveIndex(index)}
+                  onClick={() => runCommand(command)}
+                  className={cn(
+                    "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition",
+                    index === activeIndex
+                      ? "bg-ctp-surface1 text-ctp-text"
+                      : "text-ctp-subtext0",
+                  )}
+                >
+                  <command.icon className="h-4 w-4 shrink-0" />
+                  <span className="flex-1 truncate">{command.label}</span>
+                  {command.hint ? (
+                    <span className="font-mono text-[11px] text-ctp-overlay0">
+                      {command.hint}
+                    </span>
+                  ) : null}
+                </button>
+              </li>
+            ))
+          )}
+        </ul>
+      </div>
+    </div>
+  );
+}

frontend/src/features/library/FileDetailPage.tsx

@@ -1,13 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArrowLeft, Download } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
 import { Button, EmptyState, Spinner, inputClass } from "@/components/ui";
 import { api, errorMessage } from "@/lib/api";
 import { cn } from "@/lib/cn";
+import { isTypingTarget } from "@/lib/dom";
 import { formatBytes, formatDate } from "@/lib/format";
-import type { MediaItem, Rating } from "@/lib/types";
+import { useUi } from "@/store/ui";
+import type { FileNeighbors, MediaItem, Rating } from "@/lib/types";
 
 const ratingChoices: { value: Rating; label: string; active: string }[] = [
   {
@@ -114,12 +116,45 @@ function CustomDataCard({ item }: { item: MediaItem }) {
 
 export default function FileDetailPage() {
   const { md5 = "" } = useParams();
+  const navigate = useNavigate();
+  const ordering = useUi((state) => state.ordering);
+  const rawUrl = `/api/files/${md5}/raw/`;
+
   const query = useQuery({
     queryKey: ["file", md5],
     queryFn: () => api<MediaItem>(`/api/files/${md5}/`),
     enabled: md5.length > 0,
   });
 
+  const neighborsQuery = useQuery({
+    queryKey: ["neighbors", md5, ordering],
+    queryFn: () =>
+      api<FileNeighbors>(
+        `/api/files/${md5}/neighbors/?ordering=${encodeURIComponent(ordering)}`,
+      ),
+    enabled: md5.length > 0,
+  });
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      if (isTypingTarget(event.target)) return;
+      if (event.key === "d" || event.key === "D") {
+        event.preventDefault();
+        window.location.href = `${rawUrl}?download=1`;
+        return;
+      }
+      const neighbors = neighborsQuery.data;
+      if (event.key === "[" && neighbors?.previous) {
+        navigate(`/view/${neighbors.previous.md5}`);
+      } else if (event.key === "]" && neighbors?.next) {
+        navigate(`/view/${neighbors.next.md5}`);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [neighborsQuery.data, navigate, rawUrl]);
+
   if (query.isPending) {
     return (
       <div className="flex justify-center py-24">
@@ -142,7 +177,6 @@ export default function FileDetailPage() {
   }
 
   const item = query.data;
-  const rawUrl = `/api/files/${item.md5}/raw/`;
 
   return (
     <div className="flex flex-col gap-4">
@@ -211,6 +245,9 @@ export default function FileDetailPage() {
             >
               <Download className="h-4 w-4" /> Download
             </a>
+            <p className="mt-3 font-mono text-[11px] text-ctp-overlay0">
+              [ ] navigate · D download
+            </p>
           </section>
 
           <CustomDataCard key={item.updated_at} item={item} />

frontend/src/features/library/LibraryPage.tsx

@@ -1,11 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 import { Search, X } from "lucide-react";
-import { useState, type FormEvent } from "react";
+import { useState, useEffect, type FormEvent } from "react";
 
 import { MediaCard } from "@/components/MediaCard";
 import { Button, EmptyState, Spinner, inputClass } from "@/components/ui";
 import { api } from "@/lib/api";
 import { cn } from "@/lib/cn";
+import { isTypingTarget } from "@/lib/dom";
 import { useUi } from "@/store/ui";
 import type { MediaItem, Paginated } from "@/lib/types";
 
@@ -41,7 +42,6 @@ const ratingFilters = [
 export default function LibraryPage() {
   const [searchInput, setSearchInput] = useState("");
   const [search, setSearch] = useState("");
-  const [ordering, setOrdering] = useState("-created_at");
   const [page, setPage] = useState(1);
 
   const sidebarOpen = useUi((state) => state.sidebarOpen);
@@ -50,6 +50,21 @@ export default function LibraryPage() {
   const setRatings = useUi((state) => state.setRatings);
   const perPage = useUi((state) => state.perPage);
   const setPerPage = useUi((state) => state.setPerPage);
+  const ordering = useUi((state) => state.ordering);
+  const setOrdering = useUi((state) => state.setOrdering);
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key !== "/" || event.ctrlKey || event.metaKey || event.altKey) {
+        return;
+      }
+      if (isTypingTarget(event.target)) return;
+      event.preventDefault();
+      document.getElementById("library-search")?.focus();
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
   const query = useQuery({
     queryKey: ["files", { search, ratings, ordering, perPage, page }],
@@ -100,6 +115,7 @@ export default function LibraryPage() {
         <div className="relative">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ctp-overlay0" />
           <input
+            id="library-search"
             className={cn(inputClass, "pl-8")}
             placeholder="Filename…"
             value={searchInput}

frontend/src/lib/dom.ts

@@ -0,0 +1,9 @@
+export function isTypingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return (
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT" ||
+    target.isContentEditable
+  );
+}

frontend/src/lib/types.ts

@@ -54,3 +54,13 @@ export interface SystemStatus {
   };
   server_time_ms: number;
 }
+
+export interface FileNeighbor {
+  md5: string;
+  filename: string;
+}
+
+export interface FileNeighbors {
+  previous: FileNeighbor | null;
+  next: FileNeighbor | null;
+}

frontend/src/store/ui.ts

@@ -9,6 +9,8 @@ interface UiState {
   setRatings: (ratings: string[]) => void;
   perPage: number;
   setPerPage: (perPage: number) => void;
+  ordering: string;
+  setOrdering: (ordering: string) => void;
 }
 
 export const useUi = create<UiState>()(
@@ -23,6 +25,9 @@ export const useUi = create<UiState>()(
 
       perPage: 48,
       setPerPage: (perPage) => set({ perPage }),
+
+      ordering: "-created_at",
+      setOrdering: (ordering) => set({ ordering }),
     }),
     { name: "j621.ui" },
   ),