Redesign: Linear-inspired dark mode frontend

Complete rewrite of all pages:
- layout.tsx: App shell with 240px sidebar (saved views, queue list, admin link)
- app-shell.tsx: Client sidebar component with route highlighting + counts
- page.tsx: Sleek ticket list with filter chips (All/Open/In progress/Resolved), search bar, status dots, assignee avatars, skeleton loading
- tickets/[id]/page.tsx: Two-panel conversation layout — message thread (left) + properties sidebar (right) with status change, scrip preview, reply box
- admin/page.tsx: Suspense-wrapped admin with tabs in sheet panels
- command-palette.tsx: Cmd+K search with keyboard navigation

Design tokens from Linear:
- bg-[#08090a] canvas, bg-[#0f1011] panels, bg-[#191a1b] cards
- text-[#f7f8f8] primary, text-[#d0d6e0] secondary, text-[#8a8f98] tertiary
- borders: rgba(255,255,255,0.08) standard, rgba(255,255,255,0.05) subtle
- accent: #5e6ad2 primary, #7170ff interactive
- status colors: new=gray, open=indigo, in_progress=amber, resolved=green
- Inter font, weights 400/510/590, no pure white

Fixed: Suspense boundaries for useSearchParams in layout and admin pages
Build: passes with zero errors

web/src/app/page.tsx

@@ -1,27 +1,13 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { Plus, Filter } from "lucide-react";
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { getTickets, getQueues, createTicket } from "@/lib/api";
+import type { Ticket, Queue } from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Badge } from "@/components/ui/badge";
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableRow,
-  TableHead,
-  TableCell,
-} from "@/components/ui/table";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   Dialog,
   DialogContent,
@@ -30,234 +16,389 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import { getTickets, getQueues, createTicket } from "@/lib/api";
-import type { Ticket, Queue } from "@/lib/types";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 
 const STATUS_COLORS: Record<string, string> = {
-  new: "bg-blue-500/10 text-blue-400 border-blue-500/30",
-  open: "bg-sky-500/10 text-sky-400 border-sky-500/30",
-  in_progress: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
-  resolved: "bg-green-500/10 text-green-400 border-green-500/30",
-  closed: "bg-neutral-500/10 text-neutral-400 border-neutral-500/30",
+  new: "#8a8f98",
+  open: "#7170ff",
+  in_progress: "#f59e0b",
+  resolved: "#22c55e",
+  closed: "#6b7280",
 };
 
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
+const STATUS_LABELS: Record<string, string> = {
+  new: "New",
+  open: "Open",
+  in_progress: "In progress",
+  resolved: "Resolved",
+  closed: "Closed",
+};
+
+const FILTERS = [
+  { key: null, label: "All" },
+  { key: "open", label: "Open" },
+  { key: "in_progress", label: "In progress" },
+  { key: "resolved", label: "Resolved" },
+  { key: "my", label: "My tickets" },
+  { key: "unassigned", label: "Unassigned" },
+] as const;
+
+type FilterKey = (typeof FILTERS)[number]["key"];
+
+function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
+  const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
+  const shortId = ticket.id.slice(0, 8);
+  const timeAgo = formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true });
+
+  return (
+    <button
+      onClick={onClick}
+      className="w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-[rgba(255,255,255,0.02)] transition-colors border-b border-[rgba(255,255,255,0.04)]"
+    >
+      <span
+        className="w-2 h-2 rounded-full flex-shrink-0"
+        style={{ backgroundColor: statusColor }}
+      />
+      <span className="font-mono text-xs text-[#8a8f98] w-16 flex-shrink-0">
+        {shortId}
+      </span>
+      <span className="text-sm text-[#f7f8f8] flex-1 truncate font-medium">
+        {ticket.subject}
+      </span>
+      <span className="text-xs text-[#8a8f98] bg-[#191a1b] px-1.5 py-0.5 rounded font-medium flex-shrink-0">
+        {ticket.queue_id.slice(0, 8)}
+      </span>
+      {ticket.owner_id ? (
+        <span className="w-5 h-5 rounded-full bg-[#5e6ad2] flex items-center justify-center flex-shrink-0">
+          <span className="text-[#f7f8f8] text-[10px] font-semibold leading-none">
+            {ticket.owner_id.charAt(0).toUpperCase()}
+          </span>
+        </span>
+      ) : (
+        <span className="w-5 h-5 rounded-full border border-[rgba(255,255,255,0.08)] flex items-center justify-center flex-shrink-0">
+          <span className="text-[#8a8f98] text-[10px]">?</span>
+        </span>
+      )}
+      <span className="text-xs text-[#8a8f98] w-24 text-right flex-shrink-0 tabular-nums">
+        {timeAgo}
+      </span>
+    </button>
+  );
 }
 
-export default function TicketsPage() {
+function SkeletonRow() {
+  return (
+    <div className="flex items-center gap-3 px-4 py-2.5 border-b border-[rgba(255,255,255,0.04)]">
+      <div className="w-2 h-2 rounded-full bg-[#191a1b] animate-pulse" />
+      <div className="w-16 h-3 bg-[#191a1b] rounded animate-pulse" />
+      <div className="flex-1 h-3 bg-[#191a1b] rounded animate-pulse" />
+      <div className="w-12 h-4 bg-[#191a1b] rounded animate-pulse" />
+      <div className="w-5 h-5 rounded-full bg-[#191a1b] animate-pulse" />
+      <div className="w-20 h-3 bg-[#191a1b] rounded animate-pulse" />
+    </div>
+  );
+}
+
+export default function TicketListPage() {
   const router = useRouter();
+  const searchParams = useSearchParams();
+
   const [tickets, setTickets] = useState<Ticket[]>([]);
   const [queues, setQueues] = useState<Queue[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [filterQueue, setFilterQueue] = useState<string>("");
-  const [filterStatus, setFilterStatus] = useState<string>("");
+
+  const [activeFilter, setActiveFilter] = useState<FilterKey>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  // New ticket dialog
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newSubject, setNewSubject] = useState("");
   const [newQueueId, setNewQueueId] = useState("");
-  const [creating, setCreating] = useState(false);
+  const [newDescription, setNewDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
-  const fetchData = useCallback(async (queueId?: string, status?: string) => {
+  const initialQueueId = searchParams.get("queue") || "";
+
+  const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
-    const params: { queue_id?: string; status?: string } = {};
-    if (queueId) params.queue_id = queueId;
-    if (status) params.status = status;
-    const [tRes, qRes] = await Promise.all([getTickets(params), getQueues()]);
-    if (tRes.error) setError(tRes.error);
-    else setTickets(tRes.data ?? []);
-    if (qRes.error && !error) setError(qRes.error);
-    else setQueues(qRes.data ?? []);
+
+    const statusParam = activeFilter && activeFilter !== "my" && activeFilter !== "unassigned"
+      ? activeFilter
+      : undefined;
+
+    const [ticketsRes, queuesRes] = await Promise.all([
+      getTickets(statusParam ? { status: statusParam } : undefined),
+      getQueues(),
+    ]);
+
+    if (ticketsRes.error) {
+      setError(ticketsRes.error);
+      setTickets([]);
+    } else {
+      let result = ticketsRes.data ?? [];
+
+      if (activeFilter === "my") {
+        result = result.filter((t) => t.owner_id);
+      } else if (activeFilter === "unassigned") {
+        result = result.filter((t) => !t.owner_id);
+      }
+
+      if (initialQueueId && !activeFilter) {
+        result = result.filter((t) => t.queue_id === initialQueueId);
+      }
+
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        result = result.filter((t) => t.subject.toLowerCase().includes(q));
+      }
+
+      setTickets(result);
+    }
+
+    if (queuesRes.data) {
+      setQueues(queuesRes.data);
+    }
+
     setLoading(false);
-  }, []);
+  }, [activeFilter, searchQuery, initialQueueId]);
 
   useEffect(() => {
     fetchData();
   }, [fetchData]);
 
-  const handleFilter = () => {
-    fetchData(filterQueue || undefined, filterStatus || undefined);
-  };
+  // Check for "new" query param to open dialog
+  useEffect(() => {
+    if (searchParams.get("new") === "true") {
+      setDialogOpen(true);
+      const url = new URL(window.location.href);
+      url.searchParams.delete("new");
+      window.history.replaceState({}, "", url.toString());
+    }
+  }, [searchParams]);
 
   const handleCreate = async () => {
     if (!newSubject.trim() || !newQueueId) return;
-    setCreating(true);
+    setSubmitting(true);
     setCreateError(null);
-    const { data, error } = await createTicket({ subject: newSubject.trim(), queue_id: newQueueId });
-    setCreating(false);
+
+    const { data, error } = await createTicket({
+      subject: newSubject.trim(),
+      queue_id: newQueueId,
+    });
+
+    setSubmitting(false);
+
     if (error) {
       setCreateError(error);
-    } else {
+    } else if (data) {
       setDialogOpen(false);
       setNewSubject("");
       setNewQueueId("");
-      fetchData(filterQueue || undefined, filterStatus || undefined);
-      if (data) router.push(`/tickets/${data.id}`);
+      setNewDescription("");
+      router.push(`/tickets/${data.id}`);
     }
   };
 
-  const queueName = (id: string) => queues.find((q) => q.id === id)?.name ?? id;
-
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold tracking-tight">Tickets</h1>
-        <Button onClick={() => setDialogOpen(true)}>
-          <Plus className="size-4" />
-          New Ticket
-        </Button>
-      </div>
-
-      <div className="flex items-center gap-3 flex-wrap">
-        <Select value={filterQueue} onValueChange={(v) => setFilterQueue(!v || v === "_all" ? "" : v)}>
-          <SelectTrigger className="w-44">
-            <SelectValue placeholder="All queues" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="_all">All queues</SelectItem>
-            {queues.map((q) => (
-              <SelectItem key={q.id} value={q.id}>
-                {q.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select value={filterStatus} onValueChange={(v) => setFilterStatus(!v || v === "_all" ? "" : v)}>
-          <SelectTrigger className="w-40">
-            <SelectValue placeholder="All statuses" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="_all">All statuses</SelectItem>
-            <SelectItem value="new">New</SelectItem>
-            <SelectItem value="open">Open</SelectItem>
-            <SelectItem value="in_progress">In Progress</SelectItem>
-            <SelectItem value="resolved">Resolved</SelectItem>
-            <SelectItem value="closed">Closed</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Button variant="outline" onClick={handleFilter}>
-          <Filter className="size-4" />
-          Filter
-        </Button>
-      </div>
-
-      {error && (
-        <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-400">
-          {error}
+    <div className="flex flex-col h-full">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-[rgba(255,255,255,0.05)]">
+        <div className="relative flex-1">
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8a8f98]" />
+          <input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search tickets..."
+            className="w-full h-8 pl-9 pr-3 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] transition-colors"
+          />
         </div>
-      )}
+        <Button
+          onClick={() => setDialogOpen(true)}
+          className="h-8 px-3 rounded-lg text-sm font-medium bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] border-0 transition-colors"
+        >
+          <PlusIcon className="w-4 h-4 mr-1.5" />
+          New ticket
+        </Button>
+      </div>
 
-      {loading ? (
-        <div className="text-sm text-neutral-400 py-12 text-center">Loading tickets...</div>
-      ) : tickets.length === 0 ? (
-        <div className="text-sm text-neutral-400 py-12 text-center">
-          No tickets yet.{" "}
+      {/* Filter chips */}
+      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-[rgba(255,255,255,0.04)]">
+        {FILTERS.map((filter) => (
           <button
-            onClick={() => setDialogOpen(true)}
-            className="text-blue-400 hover:underline"
+            key={filter.key ?? "all"}
+            onClick={() => setActiveFilter(filter.key)}
+            className={cn(
+              "px-2.5 py-1 rounded-md text-xs font-medium transition-colors",
+              activeFilter === filter.key
+                ? "bg-[#5e6ad2] text-[#f7f8f8]"
+                : "text-[#8a8f98] hover:text-[#d0d6e0] hover:bg-[rgba(255,255,255,0.04)]"
+            )}
           >
-            Create your first ticket
+            {filter.label}
           </button>
-        </div>
-      ) : (
-        <div className="rounded-lg border border-neutral-800 overflow-hidden">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>ID</TableHead>
-                <TableHead>Subject</TableHead>
-                <TableHead>Queue</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Created</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {tickets.map((t) => (
-                <TableRow
-                  key={t.id}
-                  className="cursor-pointer hover:bg-neutral-800/50"
-                  onClick={() => router.push(`/tickets/${t.id}`)}
-                >
-                  <TableCell className="font-mono text-xs text-neutral-400">
-                    {t.id.slice(0, 8)}
-                  </TableCell>
-                  <TableCell className="font-medium">{t.subject}</TableCell>
-                  <TableCell>
-                    <Badge variant="outline">{queueName(t.queue_id)}</Badge>
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      className={`border ${STATUS_COLORS[t.status] ?? "bg-neutral-500/10 text-neutral-400 border-neutral-500/30"}`}
-                      variant="outline"
-                    >
-                      {t.status.replace("_", " ")}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-neutral-400 text-xs">
-                    {formatDate(t.created_at)}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      )}
+        ))}
+      </div>
 
+      {/* Ticket list */}
+      <div className="flex-1 overflow-y-auto">
+        {error && (
+          <div className="px-4 py-3 text-sm text-red-400 bg-red-400/5 border-b border-red-400/10">
+            {error}{" "}
+            <button
+              onClick={fetchData}
+              className="underline hover:text-red-300"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+
+        {loading &&
+          Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
+
+        {!loading &&
+          !error &&
+          tickets.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-20 px-4">
+              <div className="w-12 h-12 rounded-full bg-[#191a1b] flex items-center justify-center mb-4">
+                <SearchIcon className="w-5 h-5 text-[#8a8f98]" />
+              </div>
+              <p className="text-sm text-[#d0d6e0] font-medium">
+                No tickets match your filters
+              </p>
+              <p className="text-xs text-[#8a8f98] mt-1">
+                Try adjusting your search or filter criteria
+              </p>
+              <Button
+                onClick={() => setDialogOpen(true)}
+                className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8] border-0"
+              >
+                <PlusIcon className="w-4 h-4 mr-1.5" />
+                Create a ticket
+              </Button>
+            </div>
+          )}
+
+        {!loading &&
+          !error &&
+          tickets.map((ticket) => (
+            <TicketRow
+              key={ticket.id}
+              ticket={ticket}
+              onClick={() => router.push(`/tickets/${ticket.id}`)}
+            />
+          ))}
+      </div>
+
+      {/* Create ticket dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
+        <DialogContent
+          className="sm:max-w-md"
+          style={{
+            backgroundColor: "#191a1b",
+            borderColor: "rgba(255,255,255,0.08)",
+            color: "#f7f8f8",
+          }}
+          showCloseButton={true}
+        >
           <DialogHeader>
-            <DialogTitle>New Ticket</DialogTitle>
-            <DialogDescription>
-              Create a new ticket by providing a subject and queue.
+            <DialogTitle className="text-[#f7f8f8]">New ticket</DialogTitle>
+            <DialogDescription className="text-[#8a8f98]">
+              Create a new ticket to track an issue or request.
             </DialogDescription>
           </DialogHeader>
-          <div className="flex flex-col gap-4">
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="subject">Subject</Label>
-              <Input
-                id="subject"
-                placeholder="Enter ticket subject"
+
+          <div className="flex flex-col gap-3">
+            <div>
+              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+                Subject
+              </label>
+              <input
                 value={newSubject}
                 onChange={(e) => setNewSubject(e.target.value)}
+                placeholder="Ticket subject"
+                className="w-full h-8 px-2.5 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2]"
+                autoFocus
               />
             </div>
-            <div className="flex flex-col gap-2">
-              <Label htmlFor="queue">Queue</Label>
-              <Select value={newQueueId} onValueChange={(v) => setNewQueueId(v ?? "")}>
-                <SelectTrigger id="queue">
-                  <SelectValue placeholder="Select a queue" />
-                </SelectTrigger>
-                <SelectContent>
+
+            <div>
+              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+                Queue
+              </label>
+              <div className="relative">
+                <select
+                  value={newQueueId}
+                  onChange={(e) => setNewQueueId(e.target.value)}
+                  className="w-full h-8 px-2.5 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] appearance-none"
+                >
+                  <option value="" disabled>
+                    Select a queue...
+                  </option>
                   {queues.map((q) => (
-                    <SelectItem key={q.id} value={q.id}>
+                    <option key={q.id} value={q.id}>
                       {q.name}
-                    </SelectItem>
+                    </option>
                   ))}
-                </SelectContent>
-              </Select>
+                </select>
+                <svg
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8a8f98] pointer-events-none"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-[#d0d6e0] mb-1">
+                Description{" "}
+                <span className="text-[#8a8f98] font-normal">(optional)</span>
+              </label>
+              <textarea
+                value={newDescription}
+                onChange={(e) => setNewDescription(e.target.value)}
+                placeholder="Add a description..."
+                rows={3}
+                className="w-full px-2.5 py-2 rounded-lg bg-[#0f1011] border border-[rgba(255,255,255,0.08)] text-sm text-[#f7f8f8] placeholder:text-[#8a8f98] outline-none focus:border-[#5e6ad2] focus:ring-1 focus:ring-[#5e6ad2] resize-none"
+              />
             </div>
-            {createError && (
-              <div className="text-sm text-red-400">{createError}</div>
-            )}
           </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button
+
+          {createError && (
+            <p className="text-xs text-red-400">{createError}</p>
+          )}
+
+          <DialogFooter showCloseButton={false}>
+            <button
               onClick={handleCreate}
-              disabled={!newSubject.trim() || !newQueueId || creating}
+              disabled={!newSubject.trim() || !newQueueId || submitting}
+              className={cn(
+                "h-8 px-4 rounded-lg text-sm font-medium transition-colors",
+                "bg-[#5e6ad2] hover:bg-[#7170ff] text-[#f7f8f8]",
+                "disabled:opacity-40 disabled:cursor-not-allowed"
+              )}
             >
-              {creating ? "Creating..." : "Create Ticket"}
-            </Button>
+              {submitting ? "Creating..." : "Create ticket"}
+            </button>
           </DialogFooter>
         </DialogContent>
       </Dialog>