ikanban-web 0.2.8 → 0.2.10

package/src/pages/home.tsx

@@ -1,56 +1,131 @@
-import { createMemo, For, Match, Switch } from "solid-js"
-import { Button } from "ikanban-ui/button"
-import { Logo } from "ikanban-ui/logo"
-import { useLayout } from "@/context/layout"
-import { useNavigate } from "@solidjs/router"
-import { base64Encode } from "ikanban-utils/encode"
-import { Icon } from "ikanban-ui/icon"
-import { usePlatform } from "@/context/platform"
-import { DateTime } from "luxon"
-import { useDialog } from "ikanban-ui/context/dialog"
-import { DialogSelectDirectory } from "@/components/dialog-select-directory"
-import { DialogSelectServer } from "@/components/dialog-select-server"
-import { useServer } from "@/context/server"
-import { useGlobalSync } from "@/context/global-sync"
-import { useLanguage } from "@/context/language"
+import { createMemo, createEffect, For, Match, Switch } from "solid-js";
+import { Button } from "ikanban-ui/button";
+import { Logo } from "ikanban-ui/logo";
+import { useLayout } from "@/context/layout";
+import { useNavigate } from "@solidjs/router";
+import { base64Encode } from "ikanban-utils/encode";
+import { Icon } from "ikanban-ui/icon";
+import { usePlatform } from "@/context/platform";
+import { DateTime } from "luxon";
+import { useDialog } from "ikanban-ui/context/dialog";
+import { DialogSelectDirectory } from "@/components/dialog-select-directory";
+import { DialogSelectServer } from "@/components/dialog-select-server";
+import { useGlobalSDK } from "@/context/global-sdk";
+import { useServer } from "@/context/server";
+import { useGlobalSync } from "@/context/global-sync";
+import { useLanguage } from "@/context/language";
+import { IconButton } from "ikanban-ui/icon-button";
+import { sortedRootSessions } from "@/pages/layout/helpers";
+import type { Session } from "@opencode-ai/sdk/v2/client";
+
+type BoardColumn = "progress" | "idle";
+
+type BoardCard = {
+  session: Session;
+  projectDirectory: string;
+  updatedAt: number;
+};
 
 export default function Home() {
-  const sync = useGlobalSync()
-  const layout = useLayout()
-  const platform = usePlatform()
-  const dialog = useDialog()
-  const navigate = useNavigate()
-  const server = useServer()
-  const language = useLanguage()
-  const homedir = createMemo(() => sync.data.path.home)
+  const sync = useGlobalSync();
+  const layout = useLayout();
+  const platform = usePlatform();
+  const dialog = useDialog();
+  const navigate = useNavigate();
+  const globalSDK = useGlobalSDK();
+  const server = useServer();
+  const language = useLanguage();
   const recent = createMemo(() => {
     return sync.data.project
       .slice()
-      .sort((a, b) => (b.time.updated ?? b.time.created) - (a.time.updated ?? a.time.created))
-      .slice(0, 5)
-  })
+      .sort(
+        (a, b) =>
+          (b.time.updated ?? b.time.created) -
+          (a.time.updated ?? a.time.created),
+      )
+      .slice(0, 5);
+  });
+  const boardColumns = createMemo<Record<BoardColumn, BoardCard[]>>(() => {
+    const now = Date.now();
+    const columns: Record<BoardColumn, BoardCard[]> = {
+      progress: [],
+      idle: [],
+    };
+
+    for (const project of recent()) {
+      const [store] = sync.child(project.worktree);
+      const sessions = sortedRootSessions(store, now);
+
+      for (const session of sessions) {
+        const status = store.session_status[session.id];
+        const updatedAt = session.time.updated ?? session.time.created;
+        const card = {
+          session,
+          projectDirectory: project.worktree,
+          updatedAt,
+        };
+
+        if (status?.type === "busy" || status?.type === "retry") {
+          columns.progress.push(card);
+          continue;
+        }
+
+        columns.idle.push(card);
+      }
+    }
+
+    for (const key of Object.keys(columns) as BoardColumn[]) {
+      columns[key].sort((a, b) => b.updatedAt - a.updatedAt);
+    }
+
+    return columns;
+  });
+
+  createEffect(() => {
+    for (const project of recent()) {
+      sync.child(project.worktree);
+    }
+  });
 
   const serverDotClass = createMemo(() => {
-    const healthy = server.healthy()
-    if (healthy === true) return "bg-icon-success-base"
-    if (healthy === false) return "bg-icon-critical-base"
-    return "bg-border-weak-base"
-  })
+    const healthy = server.healthy();
+    if (healthy === true) return "bg-icon-success-base";
+    if (healthy === false) return "bg-icon-critical-base";
+    return "bg-border-weak-base";
+  });
 
   function openProject(directory: string) {
-    layout.projects.open(directory)
-    server.projects.touch(directory)
-    navigate(`/${base64Encode(directory)}`)
+    layout.projects.open(directory);
+    server.projects.touch(directory);
+    navigate(`/${base64Encode(directory)}/session`);
+  }
+
+  function openSession(directory: string, sessionID: string) {
+    layout.projects.open(directory);
+    server.projects.touch(directory);
+    navigate(`/${base64Encode(directory)}/session/${sessionID}`);
+  }
+
+  async function archiveSession(directory: string, sessionID: string) {
+    const [, setStore] = sync.child(directory, { bootstrap: false });
+    await globalSDK.client.session.update({
+      sessionID,
+      time: { archived: Date.now() },
+    });
+    setStore(
+      "session",
+      (sessions) => sessions.filter((session) => session.id !== sessionID),
+    );
   }
 
   async function chooseProject() {
     function resolve(result: string | string[] | null) {
       if (Array.isArray(result)) {
         for (const directory of result) {
-          openProject(directory)
+          openProject(directory);
         }
       } else if (result) {
-        openProject(result)
+        openProject(result);
       }
     }
 
@@ -58,74 +133,199 @@ export default function Home() {
       const result = await platform.openDirectoryPickerDialog?.({
         title: language.t("command.project.open"),
         multiple: true,
-      })
-      resolve(result)
+      });
+      resolve(result);
     } else {
       dialog.show(
         () => <DialogSelectDirectory multiple={true} onSelect={resolve} />,
         () => resolve(null),
-      )
+      );
     }
   }
 
   return (
-    <div class="mx-auto mt-55 w-full md:w-auto px-4">
-      <Logo class="md:w-xl opacity-12" />
-      <Button
-        size="large"
-        variant="ghost"
-        class="mt-4 mx-auto text-14-regular text-text-weak"
-        onClick={() => dialog.show(() => <DialogSelectServer />)}
-      >
-        <div
-          classList={{
-            "size-2 rounded-full": true,
-            [serverDotClass()]: true,
-          }}
-        />
-        {server.name}
-      </Button>
+    <div class="mx-auto w-full max-w-7xl px-4 py-6 md:px-6 md:py-8">
+      <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div class="min-w-0">
+          <div class="flex items-center gap-3">
+            <div class="flex size-10 items-center justify-center rounded-2xl border border-border-weak bg-background-base/80">
+              <Logo class="w-6 opacity-90" />
+            </div>
+            <div>
+              <div class="text-18-medium text-text-strong">
+                {language.t("home.sessionBoard")}
+              </div>
+              <div class="mt-0.5 text-12-regular text-text-weak">
+                {language.t("home.sessionBoard.description")}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 self-start md:justify-end">
+          <Button
+            icon="folder-add-left"
+            size="normal"
+            class="pl-2 pr-3"
+            onClick={chooseProject}
+          >
+            {language.t("command.project.open")}
+          </Button>
+          <Button
+            size="normal"
+            variant="ghost"
+            class="pr-3 text-13-regular text-text-weak"
+            onClick={() => dialog.show(() => <DialogSelectServer />)}
+          >
+            <div
+              classList={{
+                "size-2 rounded-full": true,
+                [serverDotClass()]: true,
+              }}
+            />
+            {server.name}
+          </Button>
+        </div>
+      </div>
+
       <Switch>
         <Match when={sync.data.project.length > 0}>
-          <div class="mt-20 w-full flex flex-col gap-4">
-            <div class="flex gap-2 items-center justify-between pl-3">
-              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
-              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+          <div class="mt-6 flex w-full flex-col gap-6">
+            <section class="flex flex-col gap-4">
+              <div class="grid gap-3 lg:grid-cols-2">
+                <BoardColumnView
+                  title={language.t("home.sessionBoard.progress")}
+                  icon="brain"
+                  tone="progress"
+                  cards={boardColumns().progress}
+                  onOpen={openSession}
+                  onArchive={archiveSession}
+                  empty={language.t("home.sessionBoard.emptyProgress")}
+                />
+                <BoardColumnView
+                  title={language.t("home.sessionBoard.idle")}
+                  icon="dash"
+                  tone="idle"
+                  cards={boardColumns().idle}
+                  onOpen={openSession}
+                  onArchive={archiveSession}
+                  empty={language.t("home.sessionBoard.emptyIdle")}
+                />
+              </div>
+            </section>
+          </div>
+        </Match>
+        <Match when={true}>
+          <div class="mt-6 rounded-2xl border border-dashed border-border-weak bg-background-base/60 px-6 py-10">
+            <div class="mx-auto flex max-w-md flex-col items-center gap-3 text-center">
+              <div class="flex size-12 items-center justify-center rounded-2xl border border-border-weak bg-background-base/80">
+                <Icon name="folder-add-left" size="large" />
+              </div>
+              <div class="flex flex-col gap-1 items-center justify-center">
+                <div class="text-14-medium text-text-strong">
+                  {language.t("home.empty.title")}
+                </div>
+                <div class="text-12-regular text-text-weak">
+                  {language.t("home.empty.description")}
+                </div>
+              </div>
+              <Button class="mt-1 px-3" onClick={chooseProject}>
                 {language.t("command.project.open")}
               </Button>
             </div>
-            <ul class="flex flex-col gap-2">
-              <For each={recent()}>
-                {(project) => (
+          </div>
+        </Match>
+      </Switch>
+    </div>
+  );
+}
+
+function BoardColumnView(props: {
+  title: string;
+  icon: "brain" | "dash";
+  tone: BoardColumn;
+  cards: BoardCard[];
+  empty: string;
+  onOpen: (directory: string, sessionID: string) => void;
+  onArchive: (directory: string, sessionID: string) => void | Promise<void>;
+}) {
+  const toneClass = () => {
+    if (props.tone === "progress")
+      return "bg-emerald-500/12 text-emerald-300 border-emerald-500/20";
+    return "bg-sky-500/12 text-sky-300 border-sky-500/20";
+  };
+
+  return (
+    <section class="rounded-2xl border border-border-weak bg-background-base/80 p-3 md:p-4 min-h-72">
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 min-w-0">
+          <div
+            class={`size-7 rounded-full border flex items-center justify-center ${toneClass()}`}
+          >
+            <Icon name={props.icon} size="small" />
+          </div>
+          <div class="text-14-medium text-text-strong">{props.title}</div>
+        </div>
+        <div class="text-12-mono text-text-weak">{props.cards.length}</div>
+      </div>
+
+      <div class="mt-3 flex flex-col gap-2">
+        <Switch>
+          <Match when={props.cards.length > 0}>
+            <For each={props.cards}>
+              {(card) => (
+                <div class="overflow-hidden rounded-xl border border-border-weak bg-background-base/70 hover:border-border-strong">
+                  <div class="flex items-start justify-between gap-3 px-3 pt-3">
+                    <div class="min-w-0 flex-1 pt-1">
+                      <div class="truncate text-14-medium leading-tight text-text-strong">
+                        {card.session.title}
+                      </div>
+                    </div>
+                    <IconButton
+                      icon="archive"
+                      variant="ghost"
+                      class="size-7 rounded-md"
+                      aria-label="Archive session"
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        void props.onArchive(card.projectDirectory, card.session.id);
+                      }}
+                    />
+                  </div>
                   <Button
-                    size="large"
                     variant="ghost"
-                    class="text-14-mono text-left justify-between px-3"
-                    onClick={() => openProject(project.worktree)}
+                    class="flex h-auto w-full min-w-0 items-center justify-between gap-3 rounded-none border-0 bg-transparent px-3 pb-3 pt-2 text-left"
+                    onClick={() =>
+                      props.onOpen(card.projectDirectory, card.session.id)
+                    }
                   >
-                    {project.worktree.replace(homedir(), "~")}
-                    <div class="text-14-regular text-text-weak">
-                      {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
+                    <span class="min-w-0 flex-1 truncate text-12-regular text-text-weak">
+                      {card.projectDirectory.replace(
+                        /^.*?([^/\\]+(?:[/\\][^/\\]+)?)$/,
+                        "$1",
+                      )}
+                    </span>
+                    <div class="flex shrink-0 items-center gap-2 text-12-regular text-text-weak">
+                      <span>{DateTime.fromMillis(card.updatedAt).toRelative()}</span>
+                      <Icon
+                        name="arrow-right"
+                        size="small"
+                        class="text-icon-weak shrink-0"
+                      />
                     </div>
                   </Button>
-                )}
-              </For>
-            </ul>
-          </div>
-        </Match>
-        <Match when={true}>
-          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
-            <Icon name="folder-add-left" size="large" />
-            <div class="flex flex-col gap-1 items-center justify-center">
-              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
-              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
+                </div>
+              )}
+            </For>
+          </Match>
+          <Match when={true}>
+            <div class="rounded-xl border border-dashed border-border-weak px-3 py-8 text-center text-12-regular text-text-weak">
+              {props.empty}
             </div>
-            <Button class="px-3 mt-1" onClick={chooseProject}>
-              {language.t("command.project.open")}
-            </Button>
-          </div>
-        </Match>
-      </Switch>
-    </div>
-  )
+          </Match>
+        </Switch>
+      </div>
+    </section>
+  );
 }

package/src/pages/layout.tsx

@@ -62,7 +62,6 @@ import {
   effectiveWorkspaceOrder,
   errorMessage,
   getDraggableId,
-  latestRootSession,
   sortedRootSessions,
   workspaceKey,
 } from "./layout/helpers"
@@ -1055,69 +1054,7 @@ export default function Layout(props: ParentProps) {
     if (!directory) return
     const root = projectRoot(directory)
     server.projects.touch(root)
-    const project = layout.projects.list().find((item) => item.worktree === root)
-    let dirs = project
-      ? effectiveWorkspaceOrder(root, [root, ...(project.sandboxes ?? [])], store.workspaceOrder[root])
-      : [root]
-    const canOpen = (value: string | undefined) => {
-      if (!value) return false
-      return dirs.some((item) => workspaceKey(item) === workspaceKey(value))
-    }
-    const refreshDirs = async (target?: string) => {
-      if (!target || target === root || canOpen(target)) return canOpen(target)
-      const listed = await globalSDK.client.worktree
-        .list({ directory: root })
-        .then((x) => x.data ?? [])
-        .catch(() => [] as string[])
-      dirs = effectiveWorkspaceOrder(root, [root, ...listed], store.workspaceOrder[root])
-      return canOpen(target)
-    }
-    const openSession = async (target: { directory: string; id: string }) => {
-      if (!canOpen(target.directory)) return false
-      const resolved = await globalSDK.client.session
-        .get({ sessionID: target.id })
-        .then((x) => x.data)
-        .catch(() => undefined)
-      if (!resolved?.directory) return false
-      if (!canOpen(resolved.directory)) return false
-      setStore("lastProjectSession", root, { directory: resolved.directory, id: resolved.id, at: Date.now() })
-      navigateWithSidebarReset(`/${base64Encode(resolved.directory)}/session/${resolved.id}`)
-      return true
-    }
-
-    const projectSession = store.lastProjectSession[root]
-    if (projectSession?.id) {
-      await refreshDirs(projectSession.directory)
-      const opened = await openSession(projectSession)
-      if (opened) return
-      clearLastProjectSession(root)
-    }
-
-    const latest = latestRootSession(
-      dirs.map((item) => globalSync.child(item, { bootstrap: false })[0]),
-      Date.now(),
-    )
-    if (latest && (await openSession(latest))) {
-      return
-    }
-
-    const fetched = latestRootSession(
-      await Promise.all(
-        dirs.map(async (item) => ({
-          path: { directory: item },
-          session: await globalSDK.client.session
-            .list({ directory: item })
-            .then((x) => x.data ?? [])
-            .catch(() => []),
-        })),
-      ),
-      Date.now(),
-    )
-    if (fetched && (await openSession(fetched))) {
-      return
-    }
-
-    navigateWithSidebarReset(`/${base64Encode(root)}/session`)
+    navigateWithSidebarReset(`/${base64Encode(root)}`)
   }
 
   function navigateToSession(session: Session | undefined) {

package/src/pages/session/message-timeline.tsx

@@ -190,6 +190,7 @@ export function MessageTimeline(props: {
   setScrollRef: (el: HTMLDivElement | undefined) => void
   onScheduleScrollState: (el: HTMLDivElement) => void
   onAutoScrollHandleScroll: () => void
+  isUserScrolled: () => boolean
   onMarkScrollGesture: (target?: EventTarget | null) => void
   hasScrollGesture: () => boolean
   isDesktop: boolean
@@ -538,8 +539,8 @@ export function MessageTimeline(props: {
           onScroll={(e) => {
             props.onScheduleScrollState(e.currentTarget)
             props.onTurnBackfillScroll()
-            if (!props.hasScrollGesture()) return
             props.onAutoScrollHandleScroll()
+            if (!props.hasScrollGesture() && !props.isUserScrolled()) return
             props.onMarkScrollGesture(e.currentTarget)
             if (props.isDesktop) props.onScrollSpyScroll()
           }}

package/src/pages/session/review-tab.tsx

@@ -20,6 +20,8 @@ export interface SessionReviewTabProps {
   view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
   diffStyle: DiffStyle
   onDiffStyleChange?: (style: DiffStyle) => void
+  wordWrap?: boolean
+  onWordWrapChange?: (value: boolean) => void
   onViewFile?: (file: string) => void
   onRevealFile?: (file: string) => void
   onLineComment?: (comment: { file: string; selection: SelectedLineRange; comment: string; preview?: string }) => void
@@ -164,6 +166,8 @@ export function SessionReviewTab(props: SessionReviewTabProps) {
       diffs={props.diffs()}
       diffStyle={props.diffStyle}
       onDiffStyleChange={props.onDiffStyleChange}
+      wordWrap={props.wordWrap}
+      onWordWrapChange={props.onWordWrapChange}
       onViewFile={props.onViewFile}
       onRevealFile={props.onRevealFile}
       focusedFile={props.focusedFile}

package/src/pages/session.tsx

@@ -775,6 +775,8 @@ export default function Page() {
   const reviewContent = (input: {
     diffStyle: DiffStyle
     onDiffStyleChange?: (style: DiffStyle) => void
+    wordWrap: boolean
+    onWordWrapChange?: (value: boolean) => void
     classes?: SessionReviewTabProps["classes"]
     loadingClass: string
     emptyClass: string
@@ -793,6 +795,8 @@ export default function Page() {
             view={view}
             diffStyle={input.diffStyle}
             onDiffStyleChange={input.onDiffStyleChange}
+            wordWrap={input.wordWrap}
+            onWordWrapChange={input.onWordWrapChange}
             onScrollRef={(el) => setTree("reviewScroll", el)}
             focusedFile={tree.activeDiff}
             onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
@@ -821,6 +825,8 @@ export default function Page() {
               view={view}
               diffStyle={input.diffStyle}
               onDiffStyleChange={input.onDiffStyleChange}
+              wordWrap={input.wordWrap}
+              onWordWrapChange={input.onWordWrapChange}
               onScrollRef={(el) => setTree("reviewScroll", el)}
               focusedFile={tree.activeDiff}
               onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
@@ -852,6 +858,8 @@ export default function Page() {
             view={view}
             diffStyle={input.diffStyle}
             onDiffStyleChange={input.onDiffStyleChange}
+            wordWrap={input.wordWrap}
+            onWordWrapChange={input.onWordWrapChange}
             onScrollRef={(el) => setTree("reviewScroll", el)}
             focusedFile={tree.activeDiff}
             onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
@@ -875,6 +883,8 @@ export default function Page() {
         {reviewContent({
           diffStyle: layout.review.diffStyle(),
           onDiffStyleChange: layout.review.setDiffStyle,
+          wordWrap: layout.review.wordWrap(),
+          onWordWrapChange: layout.review.setWordWrap,
           loadingClass: "px-6 py-4 text-text-weak",
           emptyClass: "h-full pb-30 flex flex-col items-center justify-center text-center gap-6",
         })}
@@ -1251,6 +1261,8 @@ export default function Page() {
                     mobileChanges={mobileChanges()}
                     mobileFallback={reviewContent({
                       diffStyle: "unified",
+                      wordWrap: layout.review.wordWrap(),
+                      onWordWrapChange: layout.review.setWordWrap,
                       classes: {
                         root: "pb-8",
                         header: "px-4",
@@ -1264,6 +1276,7 @@ export default function Page() {
                     setScrollRef={setScrollRef}
                     onScheduleScrollState={scheduleScrollState}
                     onAutoScrollHandleScroll={autoScroll.handleScroll}
+                    isUserScrolled={autoScroll.userScrolled}
                     onMarkScrollGesture={markScrollGesture}
                     hasScrollGesture={hasScrollGesture}
                     isDesktop={isDesktop()}

package/dist/assets/home-BAEIhduF.js

@@ -1 +0,0 @@
-import{u as D,a as C,b as S,c as L,d as P,e as z,f as M,g,i as l,h as a,L as A,j as B,k as E,m as w,D as F,B as u,M as y,F as I,l as R,I as G,S as H,n as N,o as T,t as o}from"./index-BR3vRMWX.js";var q=o("<div>"),J=o('<div class="mt-20 w-full flex flex-col gap-4"><div class="flex gap-2 items-center justify-between pl-3"><div class="text-14-medium text-text-strong"></div></div><ul class="flex flex-col gap-2">'),K=o('<div class="mt-30 mx-auto flex flex-col items-center gap-3"><div class="flex flex-col gap-1 items-center justify-center"><div class="text-14-medium text-text-strong"></div><div class="text-12-regular text-text-weak">'),O=o('<div class="mx-auto mt-55 w-full md:w-auto px-4">'),Q=o('<div class="text-14-regular text-text-weak">');function V(){const m=D(),$=C(),p=S(),x=L(),_=P(),n=z(),s=M(),b=g(()=>m.data.path.home),k=g(()=>m.data.project.slice().sort((t,e)=>(e.time.updated??e.time.created)-(t.time.updated??t.time.created)).slice(0,5)),j=g(()=>{const t=n.healthy();return t===!0?"bg-icon-success-base":t===!1?"bg-icon-critical-base":"bg-border-weak-base"});function d(t){$.projects.open(t),n.projects.touch(t),_(`/${N(t)}`)}async function h(){function t(e){if(Array.isArray(e))for(const r of e)d(r);else e&&d(e)}if(p.openDirectoryPickerDialog&&n.isLocal()){const e=await p.openDirectoryPickerDialog?.({title:s.t("command.project.open"),multiple:!0});t(e)}else x.show(()=>a(T,{multiple:!0,onSelect:t}),()=>t(null))}return(()=>{var t=O();return l(t,a(A,{class:"md:w-xl opacity-12"}),null),l(t,a(u,{size:"large",variant:"ghost",class:"mt-4 mx-auto text-14-regular text-text-weak",onClick:()=>x.show(()=>a(F,{})),get children(){return[(()=>{var e=q();return B(r=>E(e,{"size-2 rounded-full":!0,[j()]:!0},r)),e})(),w(()=>n.name)]}}),null),l(t,a(H,{get children(){return[a(y,{get when(){return m.data.project.length>0},get children(){var e=J(),r=e.firstChild,i=r.firstChild,f=r.nextSibling;return l(i,()=>s.t("home.recentProjects")),l(r,a(u,{icon:"folder-add-left",size:"normal",class:"pl-2 pr-3",onClick:h,get children(){return s.t("command.project.open")}}),null),l(f,a(I,{get each(){return k()},children:c=>a(u,{size:"large",variant:"ghost",class:"text-14-mono text-left justify-between px-3",onClick:()=>d(c.worktree),get children(){return[w(()=>c.worktree.replace(b(),"~")),(()=>{var v=Q();return l(v,()=>R.fromMillis(c.time.updated??c.time.created).toRelative()),v})()]}})})),e}}),a(y,{when:!0,get children(){var e=K(),r=e.firstChild,i=r.firstChild,f=i.nextSibling;return l(e,a(G,{name:"folder-add-left",size:"large"}),r),l(i,()=>s.t("home.empty.title")),l(f,()=>s.t("home.empty.description")),l(e,a(u,{class:"px-3 mt-1",onClick:h,get children(){return s.t("command.project.open")}}),null),e}})]}}),null),t})()}export{V as default};