From 14b074c03c2f1cc5f97e43ab32e31e455745f7b1 Mon Sep 17 00:00:00 2001
From: d-kimsuon <dev.kimuson@gmail.com>
Date: Sat, 30 Aug 2025 16:00:10 +0900
Subject: [PATCH] feat: implement sessions sidebar

---
 .../projects/[projectId]/hooks/useProject.ts  |   2 +
 .../components/SessionPageContent.tsx         |  65 +++++----
 .../conversationList/ConversationList.tsx     |  26 ++--
 .../SidechainConversationModal.tsx            |   6 +-
 .../sessionSidebar/SessionSidebar.tsx         | 134 ++++++++++++++++++
 src/server/service/session/getSessionMeta.ts  |   2 +-
 src/server/service/session/getSessions.ts     |  10 +-
 src/server/service/types.ts                   |   2 +-
 8 files changed, 195 insertions(+), 52 deletions(-)
 create mode 100644 src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx

diff --git a/src/app/projects/[projectId]/hooks/useProject.ts b/src/app/projects/[projectId]/hooks/useProject.ts
index 5824501..964722b 100644
--- a/src/app/projects/[projectId]/hooks/useProject.ts
+++ b/src/app/projects/[projectId]/hooks/useProject.ts
@@ -11,5 +11,7 @@ export const useProject = (projectId: string) => {
 
       return await response.json();
     },
+    refetchOnReconnect: true,
+    refetchInterval: 10 * 1000,
   });
 };
diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
index c20c962..07c286d 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/SessionPageContent.tsx
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { firstCommandToTitle } from "../../../services/firstCommandToTitle";
 import { useSession } from "../hooks/useSession";
 import { ConversationList } from "./conversationList/ConversationList";
+import { SessionSidebar } from "./sessionSidebar/SessionSidebar";
 
 export const SessionPageContent: FC<{
   projectId: string;
@@ -18,37 +19,43 @@ export const SessionPageContent: FC<{
   );
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <header className="mb-8">
-        <Button asChild variant="ghost" className="mb-4">
-          <Link
-            href={`/projects/${projectId}`}
-            className="flex items-center gap-2"
-          >
-            <ArrowLeftIcon className="w-4 h-4" />
-            Back to Session List
-          </Link>
-        </Button>
+    <div className="flex h-screen">
+      <SessionSidebar currentSessionId={sessionId} projectId={projectId} />
 
-        <div className="flex items-center gap-3 mb-2">
-          <MessageSquareIcon className="w-6 h-6" />
-          <h1 className="text-3xl font-bold">
-            {session.meta.firstCommand !== null
-              ? firstCommandToTitle(session.meta.firstCommand)
-              : sessionId}
-          </h1>
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="max-w-none px-6 md:px-8 py-6 md:py-8 flex-1 overflow-y-auto">
+          <header className="mb-8">
+            <Button asChild variant="ghost" className="mb-4">
+              <Link
+                href={`/projects/${projectId}`}
+                className="flex items-center gap-2"
+              >
+                <ArrowLeftIcon className="w-4 h-4" />
+                Back to Session List
+              </Link>
+            </Button>
+
+            <div className="flex items-center gap-3 mb-2">
+              <MessageSquareIcon className="w-6 h-6" />
+              <h1 className="text-3xl font-bold">
+                {session.meta.firstCommand !== null
+                  ? firstCommandToTitle(session.meta.firstCommand)
+                  : sessionId}
+              </h1>
+            </div>
+            <p className="text-muted-foreground font-mono text-sm">
+              Session ID: {sessionId}
+            </p>
+          </header>
+
+          <main className="w-full px-20">
+            <ConversationList
+              conversations={conversations}
+              getToolResult={getToolResult}
+            />
+          </main>
         </div>
-        <p className="text-muted-foreground font-mono text-sm">
-          Session ID: {sessionId}
-        </p>
-      </header>
-
-      <main>
-        <ConversationList
-          conversations={conversations}
-          getToolResult={getToolResult}
-        />
-      </main>
+      </div>
     </div>
   );
 };
diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx
index d224252..c45ff53 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx
@@ -51,28 +51,22 @@ export const ConversationList: FC<ConversationListProps> = ({
           />
         );
 
+        const isSidechain =
+          conversation.type !== "summary" && conversation.isSidechain;
+
         return [
           <li
             className={`w-full flex ${
-              conversation.type === "user"
-                ? "justify-end"
-                : conversation.type === "assistant"
-                  ? "justify-start"
-                  : "justify-center"
+              isSidechain ||
+              conversation.type === "assistant" ||
+              conversation.type === "system" ||
+              conversation.type === "summary"
+                ? "justify-start"
+                : "justify-end"
             }`}
             key={getConversationKey(conversation)}
           >
-            <div
-              className={`${
-                conversation.type === "user"
-                  ? "w-[90%]"
-                  : conversation.type === "assistant"
-                    ? "w-[90%]"
-                    : "w-[100%]"
-              }`}
-            >
-              {elm}
-            </div>
+            <div className="w-[85%]">{elm}</div>
           </li>,
         ];
       })}
diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx
index 55047f1..063eed9 100644
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx
@@ -63,7 +63,11 @@ export const SidechainConversationModal: FC<
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" size="sm" className="w-full mb-3">
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full mb-3 items-center justify-start"
+        >
           <div className="flex items-center gap-2 overflow-hidden">
             <Eye className="h-4 w-4 flex-shrink-0" />
             <span className="overflow-hidden text-ellipsis">
diff --git a/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
new file mode 100644
index 0000000..e1a6653
--- /dev/null
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/SessionSidebar.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { MessageSquareIcon, PanelLeftIcon } from "lucide-react";
+import Link from "next/link";
+import { type FC, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { Session } from "../../../../../../../server/service/types";
+import { useProject } from "../../../../hooks/useProject";
+import { firstCommandToTitle } from "../../../../services/firstCommandToTitle";
+
+const SidebarContent: FC<{
+  sessions: Session[];
+  currentSessionId: string;
+  projectId: string;
+}> = ({ sessions, currentSessionId, projectId }) => (
+  <div className="h-full flex flex-col bg-sidebar text-sidebar-foreground">
+    <div className="border-b border-sidebar-border p-4">
+      <h2 className="font-semibold text-lg">Sessions</h2>
+      <p className="text-xs text-sidebar-foreground/70 mt-1">
+        {sessions.length} total
+      </p>
+    </div>
+
+    <div className="flex-1 overflow-y-auto p-2 space-y-0.5">
+      {sessions.map((session) => {
+        const isActive = session.id === currentSessionId;
+        const title =
+          session.meta.firstCommand !== null
+            ? firstCommandToTitle(session.meta.firstCommand)
+            : session.id;
+
+        return (
+          <Link
+            key={session.id}
+            href={`/projects/${projectId}/sessions/${encodeURIComponent(
+              session.id,
+            )}`}
+            className={cn(
+              "block rounded-lg p-2.5 transition-all duration-200 hover:bg-blue-50/60 hover:border-blue-300/60 hover:shadow-sm border border-sidebar-border/40 bg-sidebar/30",
+              isActive &&
+                "bg-blue-100 border-blue-400 shadow-md ring-1 ring-blue-200/50 hover:bg-blue-100 hover:border-blue-400",
+            )}
+          >
+            <div className="space-y-1.5">
+              <h3 className="text-sm font-medium line-clamp-2 leading-tight text-sidebar-foreground">
+                {title}
+              </h3>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-1 text-xs text-sidebar-foreground/70">
+                  <MessageSquareIcon className="w-3 h-3" />
+                  <span>{session.meta.messageCount}</span>
+                </div>
+                {session.meta.lastModifiedAt && (
+                  <span className="text-xs text-sidebar-foreground/60">
+                    {new Date(session.meta.lastModifiedAt).toLocaleDateString(
+                      "en-US",
+                      {
+                        month: "short",
+                        day: "numeric",
+                      },
+                    )}
+                  </span>
+                )}
+              </div>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  </div>
+);
+
+export const SessionSidebar: FC<{
+  currentSessionId: string;
+  projectId: string;
+  className?: string;
+}> = ({ currentSessionId, projectId, className }) => {
+  const {
+    data: { sessions },
+  } = useProject(projectId);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <Collapsible
+      open={!isCollapsed}
+      onOpenChange={(open) => setIsCollapsed(!open)}
+      className={cn("hidden md:flex h-full", className)}
+    >
+      <div className="relative h-full">
+        <div
+          className={cn(
+            "h-full border-r border-sidebar-border transition-all duration-300 ease-in-out",
+            isCollapsed ? "w-12" : "w-72 lg:w-80",
+          )}
+        >
+          <CollapsibleTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute -right-3 top-4 z-10 bg-background border border-sidebar-border shadow-sm"
+            >
+              <PanelLeftIcon
+                className={cn(
+                  "w-4 h-4 transition-transform duration-200",
+                  isCollapsed && "rotate-180",
+                )}
+              />
+            </Button>
+          </CollapsibleTrigger>
+
+          <CollapsibleContent className="h-full data-[state=closed]:animate-slide-out-to-left data-[state=open]:animate-slide-in-from-left">
+            <SidebarContent
+              sessions={sessions}
+              currentSessionId={currentSessionId}
+              projectId={projectId}
+            />
+          </CollapsibleContent>
+
+          {isCollapsed && (
+            <div className="h-full bg-sidebar border-r border-sidebar-border flex flex-col items-center pt-16">
+              <MessageSquareIcon className="w-5 h-5 text-sidebar-foreground/70" />
+            </div>
+          )}
+        </div>
+      </div>
+    </Collapsible>
+  );
+};
diff --git a/src/server/service/session/getSessionMeta.ts b/src/server/service/session/getSessionMeta.ts
index 6f78f8e..e9ef335 100644
--- a/src/server/service/session/getSessionMeta.ts
+++ b/src/server/service/session/getSessionMeta.ts
@@ -96,7 +96,7 @@ export const getSessionMeta = async (
     messageCount: lines.length,
     firstCommand: getFirstCommand(jsonlFilePath, lines),
     lastModifiedAt: lastModifiedUnixTime
-      ? new Date(lastModifiedUnixTime)
+      ? new Date(lastModifiedUnixTime).toISOString()
       : null,
   };
 
diff --git a/src/server/service/session/getSessions.ts b/src/server/service/session/getSessions.ts
index 07e8a4f..9f4be4b 100644
--- a/src/server/service/session/getSessions.ts
+++ b/src/server/service/session/getSessions.ts
@@ -5,6 +5,11 @@ import { decodeProjectId } from "../project/id";
 import type { Session } from "../types";
 import { getSessionMeta } from "./getSessionMeta";
 
+const getTime = (date: string | null) => {
+  if (date === null) return 0;
+  return new Date(date).getTime();
+};
+
 export const getSessions = async (
   projectId: string,
 ): Promise<{ sessions: Session[] }> => {
@@ -27,10 +32,7 @@ export const getSessions = async (
 
   return {
     sessions: sessions.sort((a, b) => {
-      return (
-        (b.meta.lastModifiedAt?.getTime() ?? 0) -
-        (a.meta.lastModifiedAt?.getTime() ?? 0)
-      );
+      return getTime(b.meta.lastModifiedAt) - getTime(a.meta.lastModifiedAt);
     }),
   };
 };
diff --git a/src/server/service/types.ts b/src/server/service/types.ts
index f32c4c9..f76ffb4 100644
--- a/src/server/service/types.ts
+++ b/src/server/service/types.ts
@@ -23,7 +23,7 @@ export type Session = {
 export type SessionMeta = {
   messageCount: number;
   firstCommand: ParsedCommand | null;
-  lastModifiedAt: Date | null;
+  lastModifiedAt: string | null;
 };
 
 export type SessionDetail = Session & {