3 files changed, 32 insertions, 16 deletions
diff --git a/packages/desktop/src/components/session-list.tsx b/packages/desktop/src/components/session-list.tsx
index e0819780d..5b6dc0f5a 100644
--- a/packages/desktop/src/components/session-list.tsx
+++ b/packages/desktop/src/components/session-list.tsx
@@ -1,26 +1,36 @@
 import { useSync, useLocal } from "@/context"
-import { Button, Tooltip } from "@/ui"
+import { Tooltip } from "@/ui"
+import { DateTime } from "luxon"
 import { VList } from "virtua/solid"
 
 export default function SessionList() {
   const sync = useSync()
   const local = useLocal()
-
   return (
-    <VList data={sync.data.session} class="p-2">
+    <VList data={sync.data.session} class="p-3">
       {(session) => (
         <Tooltip placement="right" value={session.title} class="w-full min-w-0">
-          <Button
-            size="sm"
-            variant="ghost"
-            classList={{
-              "w-full min-w-0 py-1 text-left truncate justify-start text-text-muted text-xs": true,
-              "text-text!": local.session.active()?.id === session.id,
-            }}
+          <button
+            data-active={local.session.active()?.id === session.id}
+            class="group w-full min-w-0 text-left truncate justify-start text-xs my-0.5 cursor-pointer
+                   flex flex-col gap-1 rounded-md p-2 border-[0.5px] border-transparent
+                   hover:not-data-[active=true]:bg-background-panel
+                   data-[active=true]:bg-background-element data-[active=true]:border-border-subtle"
             onClick={() => local.session.setActive(session.id)}
           >
-            <span class="truncate">{session.title}</span>
-          </Button>
+            <div class="flex gap-1 items-center">
+              <div
+                classList={{
+                  "text-text/80 min-w-0 grow truncate": true,
+                  "group-data-[active=true]:text-text!": true,
+                }}
+              >
+                {session.title}
+              </div>
+              <div class="shrink-0 text-text-muted/60">{DateTime.fromMillis(session.time.updated).toRelative()}</div>
+            </div>
+            <span class="text-text-muted truncate">{session.share?.url}</span>
+          </button>
         </Tooltip>
       )}
     </VList>
diff --git a/packages/desktop/src/context/local.tsx b/packages/desktop/src/context/local.tsx
index b04c70f0f..276f87192 100644
--- a/packages/desktop/src/context/local.tsx
+++ b/packages/desktop/src/context/local.tsx
@@ -467,6 +467,11 @@ function init() {
       return sync.session.get(store.active)
     })
 
+    createEffect(() => {
+      if (!store.active) return
+      sync.session.sync(store.active)
+    })
+
     return {
       active,
       setActive(sessionId: string | undefined) {
diff --git a/packages/desktop/src/pages/index.tsx b/packages/desktop/src/pages/index.tsx
index f344830a4..54f6ff83b 100644
--- a/packages/desktop/src/pages/index.tsx
+++ b/packages/desktop/src/pages/index.tsx
@@ -214,9 +214,10 @@ export default function Page() {
   }
 
   return (
-    <div class="relative">
-      <div class="h-screen flex">
-        <div class="shrink-0 w-56">
+    <div class="relative h-screen flex flex-col">
+      <header class="h-10 shrink-0 bg-background-panel"></header>
+      <main class="h-[calc(100vh-2.5rem)] flex">
+        <div class="shrink-0 w-64">
           <SessionList />
         </div>
         <div class="grow w-full min-w-0 overflow-y-auto flex justify-center">
@@ -342,7 +343,7 @@ export default function Page() {
             </Show>
           </div>
         </div>
-      </div>
+      </main>
       <Show when={store.modelSelectOpen}>
         <SelectDialog
           key={(x) => `${x.provider.id}:${x.id}`}