snapshot

2026-04-16 15:44:10 +02:00
parent 3bdc8cc646
commit 14ed445328
30 changed files with 1562 additions and 1167 deletions
@@ -0,0 +1,81 @@
+import { Tags } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { SORT_OPTIONS, type SortValue } from "@/features/notes/sortOptions";
+
+type Props = {
+  query: string;
+  onQueryChange: (v: string) => void;
+  sort: SortValue;
+  onSortChange: (v: SortValue) => void;
+  tagTreeCount: number;
+  onOpenTagTree: () => void;
+  onCreateNew: () => void;
+};
+
+export function NotesToolbar({
+  query,
+  onQueryChange,
+  sort,
+  onSortChange,
+  tagTreeCount,
+  onOpenTagTree,
+  onCreateNew,
+}: Props) {
+  return (
+    <header className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:gap-3">
+      <div className="min-w-0 flex-1 space-y-1.5">
+        <Label htmlFor="search" className="text-xs text-muted-foreground">
+          Suche
+        </Label>
+        <Input
+          id="search"
+          value={query}
+          onChange={e => onQueryChange(e.target.value)}
+          placeholder="Freitext: Inhalt & Tags · tag:x · title:y · content:z"
+          autoComplete="off"
+          className="h-9"
+        />
+      </div>
+      <div className="w-full min-w-[min(100%,220px)] space-y-1.5 sm:w-72">
+        <Label htmlFor="sort" className="text-xs text-muted-foreground">
+          Sortierung
+        </Label>
+        <Select value={sort} onValueChange={v => onSortChange(v as SortValue)}>
+          <SelectTrigger id="sort" className="h-9 w-full">
+            <SelectValue placeholder="Sortierung" />
+          </SelectTrigger>
+          <SelectContent>
+            {SORT_OPTIONS.map(o => (
+              <SelectItem key={o.value} value={o.value}>
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex flex-wrap gap-2 sm:shrink-0">
+        <Button
+          type="button"
+          variant="outline"
+          className="h-9 w-full gap-2 sm:w-auto"
+          onClick={onOpenTagTree}
+          title="Tag-Hierarchie und Anzeige-Prefixe verwalten"
+        >
+          <Tags className="size-4 shrink-0 opacity-70" aria-hidden />
+          <span>Tag-Baum</span>
+          {tagTreeCount > 0 ? (
+            <span className="rounded-full bg-muted px-1.5 py-0 text-[10px] font-medium tabular-nums text-muted-foreground">
+              {tagTreeCount}
+            </span>
+          ) : null}
+        </Button>
+        <Button type="button" className="h-9 w-full sm:w-auto" onClick={onCreateNew}>
+          Neu
+        </Button>
+      </div>
+    </header>
+  );
+}