From 10962f795f214e9a37c4d9b55d63d36d640a5df4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Sun, 7 Jun 2026 22:58:50 +0200
Subject: [PATCH] feat: three-column ticket list layout (list + detail as
 peers, no Sheet)

- Replace Sheet slide-over with persistent right-column detail panel
- Ticket list shrinks to w-80 when ticket selected, detail takes flex-1
- Animated transition (300ms ease-out) when selecting/deselecting
- Kept existing conversation thread, properties sidebar, reply box inline
---
 web/src/app/page.tsx | 624 ++++++++++++++++++++++---------------------
 1 file changed, 323 insertions(+), 301 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 6af13db..7df5885 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -16,12 +16,6 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
 import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
@@ -66,7 +60,7 @@ function getInitialColor(name: string): string {
   return colors[Math.abs(hash) % colors.length];
 }
 
-function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
+function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: boolean; 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 });
@@ -74,7 +68,12 @@ function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void })
   return (
     <button
       onClick={onClick}
-      className="w-full flex items-center gap-3 py-3 px-4 text-left hover:bg-accent transition-all duration-150 border-l-2 border-transparent hover:border-primary border-b border-border"
+      className={cn(
+        "w-full flex items-center gap-3 py-3 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
+        selected
+          ? "bg-accent border-l-primary"
+          : "border-l-transparent hover:bg-accent hover:border-l-primary"
+      )}
     >
       <span
         className="w-2 h-2 rounded-full flex-shrink-0"
@@ -120,236 +119,240 @@ function SkeletonRow() {
   );
 }
 
-function TicketDetailSheet({
+function TicketDetailPanel({
   ticketId,
-  open,
-  onOpenChange,
+  onBack,
 }: {
-  ticketId: string | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+  ticketId: string;
+  onBack: () => void;
 }) {
   const [ticket, setTicket] = useState<Ticket | null>(null);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [replyText, setReplyText] = useState("");
 
   useEffect(() => {
-    if (open && ticketId) {
-      setLoading(true);
-      setError(null);
-      Promise.all([
-        getTicket(ticketId),
-        getTicketTransactions(ticketId),
-      ]).then(([ticketRes, txRes]) => {
-        if (ticketRes.error) {
-          setError(ticketRes.error);
-        } else {
-          setTicket(ticketRes.data);
-        }
-        if (txRes.data) {
-          setTransactions(txRes.data);
-        }
-        setLoading(false);
-      });
-    }
-  }, [open, ticketId]);
+    setLoading(true);
+    setError(null);
+    setTicket(null);
+    setTransactions([]);
+    setReplyText("");
+    Promise.all([
+      getTicket(ticketId),
+      getTicketTransactions(ticketId),
+    ]).then(([ticketRes, txRes]) => {
+      if (ticketRes.error) {
+        setError(ticketRes.error);
+      } else {
+        setTicket(ticketRes.data);
+      }
+      if (txRes.data) {
+        setTransactions(txRes.data);
+      }
+      setLoading(false);
+    });
+  }, [ticketId]);
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent
-        side="right"
-        className="w-full sm:max-w-lg flex flex-col p-0"
-        showCloseButton={true}
-      >
-        {loading && (
-          <div className="flex-1 p-4 space-y-4">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="flex gap-3">
-                <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
-                <div className="flex-1 space-y-2">
-                  <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
-                  <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
-                </div>
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
+        <button
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150 flex-shrink-0"
+        >
+          <ArrowLeftIcon className="w-3.5 h-3.5" />
+          Back
+        </button>
+      </div>
+
+      {loading && (
+        <div className="flex-1 p-4 space-y-4 overflow-y-auto">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="flex gap-3">
+              <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
+              <div className="flex-1 space-y-2">
+                <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
+                <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
               </div>
-            ))}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {error && (
+        <div className="flex flex-col items-center justify-center flex-1">
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      )}
+
+      {!loading && !error && ticket && (
+        <>
+          {/* Title */}
+          <div className="px-4 py-3 border-b border-border shrink-0">
+            <h2 className="text-sm font-semibold truncate">
+              {ticket.subject}
+            </h2>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              <span className="font-mono">{ticket.id.slice(0, 8)}</span>
+            </p>
           </div>
-        )}
 
-        {error && (
-          <div className="flex flex-col items-center justify-center flex-1">
-            <p className="text-sm text-destructive">{error}</p>
-          </div>
-        )}
+          {/* Conversation */}
+          <div className="flex-1 overflow-y-auto">
+            {transactions.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-20">
+                <p className="text-sm text-muted-foreground">
+                  No activity yet
+                </p>
+              </div>
+            )}
+            {transactions.map((tx) => {
+              const isSystem =
+                tx.transaction_type === "status_change" ||
+                tx.transaction_type === "assignment" ||
+                tx.transaction_type === "create";
+              const isAgent =
+                tx.transaction_type === "agent_reply" ||
+                tx.transaction_type === "internal_note";
 
-        {!loading && !error && ticket && (
-          <div className="flex flex-col h-full">
-            {/* Header */}
-            <SheetHeader className="border-b border-border shrink-0">
-              <SheetTitle className="text-sm font-semibold truncate">
-                {ticket.subject}
-              </SheetTitle>
-              <p className="text-xs text-muted-foreground">
-                <span className="font-mono">{ticket.id.slice(0, 8)}</span>
-              </p>
-            </SheetHeader>
-
-            {/* Conversation */}
-            <div className="flex-1 overflow-y-auto">
-              {transactions.length === 0 && (
-                <div className="flex flex-col items-center justify-center py-20">
-                  <p className="text-sm text-muted-foreground">
-                    No activity yet
-                  </p>
-                </div>
-              )}
-              {transactions.map((tx) => {
-                const isSystem =
-                  tx.transaction_type === "status_change" ||
-                  tx.transaction_type === "assignment" ||
-                  tx.transaction_type === "create";
-                const isAgent =
-                  tx.transaction_type === "agent_reply" ||
-                  tx.transaction_type === "internal_note";
-
-                if (isSystem) {
-                  const txTimeAgo = formatDistanceToNow(
-                    new Date(tx.created_at),
-                    { addSuffix: true }
-                  );
-                  let message = "";
-                  if (tx.transaction_type === "create") {
-                    message = "Ticket created";
-                  } else if (tx.transaction_type === "status_change") {
-                    const oldLabel = tx.old_value
-                      ? STATUS_LABELS[tx.old_value] || tx.old_value
-                      : "?";
-                    const newLabel = tx.new_value
-                      ? STATUS_LABELS[tx.new_value] || tx.new_value
-                      : "?";
-                    message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
-                  } else if (tx.transaction_type === "assignment") {
-                    message = tx.new_value
-                      ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
-                      : `${getInitial(tx.creator_id)} unassigned`;
-                  } else {
-                    message = tx.transaction_type;
-                  }
-                  return (
-                    <div
-                      key={tx.id}
-                      className="flex justify-center py-2"
-                    >
-                      <span className="text-xs text-muted-foreground">
-                        {message} · {txTimeAgo}
-                      </span>
-                    </div>
-                  );
-                }
-
-                const isInternal =
-                  tx.transaction_type === "internal_note";
+              if (isSystem) {
                 const txTimeAgo = formatDistanceToNow(
                   new Date(tx.created_at),
                   { addSuffix: true }
                 );
-
+                let message = "";
+                if (tx.transaction_type === "create") {
+                  message = "Ticket created";
+                } else if (tx.transaction_type === "status_change") {
+                  const oldLabel = tx.old_value
+                    ? STATUS_LABELS[tx.old_value] || tx.old_value
+                    : "?";
+                  const newLabel = tx.new_value
+                    ? STATUS_LABELS[tx.new_value] || tx.new_value
+                    : "?";
+                  message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
+                } else if (tx.transaction_type === "assignment") {
+                  message = tx.new_value
+                    ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
+                    : `${getInitial(tx.creator_id)} unassigned`;
+                } else {
+                  message = tx.transaction_type;
+                }
                 return (
                   <div
                     key={tx.id}
-                    className={cn(
-                      "flex gap-3 py-3 px-4",
-                      isAgent ? "flex-row-reverse" : ""
-                    )}
+                    className="flex justify-center py-2"
                   >
-                    <div
-                      className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
-                      style={{
-                        backgroundColor: isAgent
-                          ? getInitialColor(tx.creator_id)
-                          : "var(--muted)",
-                      }}
-                    >
-                      <span
-                        className="text-[11px] font-semibold"
-                        style={{
-                          color: isAgent
-                            ? "#f7f8f8"
-                            : "var(--muted-foreground)",
-                        }}
-                      >
-                        {getInitial(tx.creator_id)}
-                      </span>
-                    </div>
-                    <div
-                      className={cn(
-                        "max-w-[75%] rounded-lg px-3 py-2",
-                        isAgent
-                          ? "bg-primary/15 text-foreground"
-                          : isInternal
-                            ? "bg-muted border border-border text-foreground"
-                            : "bg-muted text-foreground"
-                      )}
-                    >
-                      {isInternal && (
-                        <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
-                          Internal note
-                        </div>
-                      )}
-                      <p className="text-sm whitespace-pre-wrap">
-                        {typeof tx.data === "object" &&
-                        tx.data !== null &&
-                        "body" in (tx.data as Record<string, unknown>)
-                          ? String(
-                              (tx.data as Record<string, unknown>).body
-                            )
-                          : tx.transaction_type}
-                      </p>
-                      <p className="text-[10px] text-muted-foreground mt-1">
-                        {txTimeAgo}
-                      </p>
-                    </div>
+                    <span className="text-xs text-muted-foreground">
+                      {message} · {txTimeAgo}
+                    </span>
                   </div>
                 );
-              })}
-            </div>
+              }
 
-            {/* Reply box */}
-            <div className="border-t border-border bg-sidebar p-3 shrink-0">
-              <div className="flex items-end gap-2">
-                <textarea
-                  value={replyText}
-                  onChange={(e) => setReplyText(e.target.value)}
-                  placeholder="Reply to this ticket..."
-                  rows={2}
-                  className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
-                />
-                <div className="flex items-center gap-1">
-                  <button
-                    className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
-                    title="Attach file (coming soon)"
+              const isInternal =
+                tx.transaction_type === "internal_note";
+              const txTimeAgo = formatDistanceToNow(
+                new Date(tx.created_at),
+                { addSuffix: true }
+              );
+
+              return (
+                <div
+                  key={tx.id}
+                  className={cn(
+                    "flex gap-3 py-3 px-4",
+                    isAgent ? "flex-row-reverse" : ""
+                  )}
+                >
+                  <div
+                    className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
+                    style={{
+                      backgroundColor: isAgent
+                        ? getInitialColor(tx.creator_id)
+                        : "var(--muted)",
+                    }}
                   >
-                    <PaperclipIcon className="w-4 h-4" />
-                  </button>
-                  <button
-                    disabled={!replyText.trim()}
+                    <span
+                      className="text-[11px] font-semibold"
+                      style={{
+                        color: isAgent
+                          ? "#f7f8f8"
+                          : "var(--muted-foreground)",
+                      }}
+                    >
+                      {getInitial(tx.creator_id)}
+                    </span>
+                  </div>
+                  <div
                     className={cn(
-                      "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
-                      replyText.trim()
-                        ? "bg-primary text-primary-foreground hover:bg-primary/80"
-                        : "bg-muted text-muted-foreground cursor-not-allowed"
+                      "max-w-[75%] rounded-lg px-3 py-2",
+                      isAgent
+                        ? "bg-primary/15 text-foreground"
+                        : isInternal
+                          ? "bg-muted border border-border text-foreground"
+                          : "bg-muted text-foreground"
                     )}
                   >
-                    <SendIcon className="w-4 h-4" />
-                  </button>
+                    {isInternal && (
+                      <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
+                        Internal note
+                      </div>
+                    )}
+                    <p className="text-sm whitespace-pre-wrap">
+                      {typeof tx.data === "object" &&
+                      tx.data !== null &&
+                      "body" in (tx.data as Record<string, unknown>)
+                        ? String(
+                            (tx.data as Record<string, unknown>).body
+                          )
+                        : tx.transaction_type}
+                    </p>
+                    <p className="text-[10px] text-muted-foreground mt-1">
+                      {txTimeAgo}
+                    </p>
+                  </div>
                 </div>
+              );
+            })}
+          </div>
+
+          {/* Reply box */}
+          <div className="border-t border-border bg-sidebar p-3 shrink-0">
+            <div className="flex items-end gap-2">
+              <textarea
+                value={replyText}
+                onChange={(e) => setReplyText(e.target.value)}
+                placeholder="Reply to this ticket..."
+                rows={2}
+                className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
+              />
+              <div className="flex items-center gap-1">
+                <button
+                  className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
+                  title="Attach file (coming soon)"
+                >
+                  <PaperclipIcon className="w-4 h-4" />
+                </button>
+                <button
+                  disabled={!replyText.trim()}
+                  className={cn(
+                    "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
+                    replyText.trim()
+                      ? "bg-primary text-primary-foreground hover:bg-primary/80"
+                      : "bg-muted text-muted-foreground cursor-not-allowed"
+                  )}
+                >
+                  <SendIcon className="w-4 h-4" />
+                </button>
               </div>
             </div>
           </div>
-        )}
-      </SheetContent>
-    </Sheet>
+        </>
+      )}
+    </div>
   );
 }
 
@@ -373,9 +376,8 @@ function TicketListPageContent() {
   const [submitting, setSubmitting] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
-  // Sheet
-  const [sheetTicketId, setSheetTicketId] = useState<string | null>(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
+  // Selected ticket
+  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
 
   const initialQueueId = searchParams.get("queue") || "";
 
@@ -456,106 +458,133 @@ function TicketListPageContent() {
       setNewSubject("");
       setNewQueueId("");
       setNewDescription("");
-      // Open in sheet
-      setSheetTicketId(data.id);
-      setSheetOpen(true);
+      setSelectedTicketId(data.id);
+      // Refresh the list to show the new ticket
+      fetchData();
     }
   };
 
+  const handleSelectTicket = (ticketId: string) => {
+    setSelectedTicketId(ticketId);
+  };
+
+  const handleDeselectTicket = () => {
+    setSelectedTicketId(null);
+  };
+
   return (
-    <div className="flex flex-col h-full">
-      {/* Top bar */}
-      <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
-        <div className="relative flex-1">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <input
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Search tickets..."
-            className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
-          />
-        </div>
-        <Button
-          onClick={() => setDialogOpen(true)}
-          className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
-        >
-          <PlusIcon className="w-4 h-4 mr-1.5" />
-          New ticket
-        </Button>
-      </div>
-
-      {/* Filter chips */}
-      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border">
-        {FILTERS.map((filter) => (
-          <button
-            key={filter.key ?? "all"}
-            onClick={() => setActiveFilter(filter.key)}
-            className={cn(
-              "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
-              activeFilter === filter.key
-                ? "bg-primary text-primary-foreground"
-                : "text-muted-foreground hover:text-foreground hover:bg-accent"
-            )}
-          >
-            {filter.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Ticket list */}
-      <div className="flex-1 overflow-y-auto">
-        {error && (
-          <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
-            {error}{" "}
-            <button
-              onClick={fetchData}
-              className="underline hover:text-destructive/80"
-            >
-              Retry
-            </button>
-          </div>
+    <div className="flex h-full">
+      {/* Ticket list column */}
+      <div
+        className={cn(
+          "flex flex-col h-full overflow-hidden transition-all duration-300 ease-out",
+          selectedTicketId ? "w-80 min-w-80 flex-shrink-0" : "flex-1 min-w-0"
         )}
+      >
+        {/* Top bar */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+          <div className="relative flex-1">
+            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search tickets..."
+              className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
+            />
+          </div>
+          <Button
+            onClick={() => setDialogOpen(true)}
+            className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
+          >
+            <PlusIcon className="w-4 h-4 mr-1.5" />
+            New ticket
+          </Button>
+        </div>
 
-        {loading &&
-          Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
+        {/* Filter chips */}
+        <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
+          {FILTERS.map((filter) => (
+            <button
+              key={filter.key ?? "all"}
+              onClick={() => setActiveFilter(filter.key)}
+              className={cn(
+                "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
+                activeFilter === filter.key
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
+              )}
+            >
+              {filter.label}
+            </button>
+          ))}
+        </div>
 
-        {!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-muted flex items-center justify-center mb-4">
-                <SearchIcon className="w-5 h-5 text-muted-foreground" />
-              </div>
-              <p className="text-sm text-foreground font-medium">
-                No tickets match your filters
-              </p>
-              <p className="text-xs text-muted-foreground 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-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
+        {/* Ticket list */}
+        <div className="flex-1 overflow-y-auto">
+          {error && (
+            <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
+              {error}{" "}
+              <button
+                onClick={fetchData}
+                className="underline hover:text-destructive/80"
               >
-                <PlusIcon className="w-4 h-4 mr-1.5" />
-                Create a ticket
-              </Button>
+                Retry
+              </button>
             </div>
           )}
 
-        {!loading &&
-          !error &&
-          tickets.map((ticket) => (
-            <TicketRow
-              key={ticket.id}
-              ticket={ticket}
-              onClick={() => {
-                setSheetTicketId(ticket.id);
-                setSheetOpen(true);
-              }}
-            />
-          ))}
+          {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-muted flex items-center justify-center mb-4">
+                  <SearchIcon className="w-5 h-5 text-muted-foreground" />
+                </div>
+                <p className="text-sm text-foreground font-medium">
+                  No tickets match your filters
+                </p>
+                <p className="text-xs text-muted-foreground 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-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
+                >
+                  <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}
+                selected={ticket.id === selectedTicketId}
+                onClick={() => handleSelectTicket(ticket.id)}
+              />
+            ))}
+        </div>
       </div>
 
+      {/* Ticket detail column */}
+      {selectedTicketId && (
+        <div
+          className="flex-1 min-w-0 border-l overflow-hidden"
+          style={{ animation: "slide-in-right 300ms ease-out" }}
+        >
+          <TicketDetailPanel
+            ticketId={selectedTicketId}
+            onBack={handleDeselectTicket}
+          />
+        </div>
+      )}
+
       {/* Create ticket dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent
@@ -654,13 +683,6 @@ function TicketListPageContent() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Ticket detail sheet */}
-      <TicketDetailSheet
-        ticketId={sheetTicketId}
-        open={sheetOpen}
-        onOpenChange={setSheetOpen}
-      />
     </div>
   );
 }