JakeBreath/J621
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source 
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
This commit is contained in:
JakeBreath
2026-09-17 08:33:22 -05:00
parent 063305c552
commit a09ab8a160
8 changed files with 324 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/apps/library/views.py
+46 -2
View File
@@ -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(ordering if ordering in allowed else "-created_at")
queryset = queryset.order_by(
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
+15 -2
View File
@@ -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
+180
View File
@@ -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
+41 -4
View File
@@ -1,13 +1,15 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowLeft, Download } from "lucide-react";
import { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
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
+18 -2
View File
@@ -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
+9
View File
@@ -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
+10
View File
@@ -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
+5
View File
@@ -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" },
),