feat(app): no sesssions empty state (#33315)

packages/app/src/i18n/en.ts

@@ -595,8 +595,8 @@ export const dict = {
   "home.sessions.search.placeholder.scoped": "Search sessions in {{scope}}",
   "home.sessions.search.sessions": "Sessions",
   "home.sessions.search.noResults": "No sessions found for {{query}}",
-  "home.sessions.empty": "No sessions found",
-  "home.sessions.empty.description": "Start a new session for this project",
+  "home.sessions.empty": "Nothing here yet",
+  "home.sessions.empty.description": "Create a session to get started",
   "home.sessions.group.today": "Today",
   "home.sessions.group.yesterday": "Yesterday",
   "home.sessions.group.older": "Older",

packages/app/src/i18n/zh.ts

@@ -510,7 +510,8 @@ export const dict = {
   "home.sessions.search.placeholder.scoped": "在 {{scope}} 中搜索会话",
   "home.sessions.search.sessions": "会话",
   "home.sessions.search.noResults": "未找到与 {{query}} 相关的会话",
-  "home.sessions.empty": "未找到会话",
+  "home.sessions.empty": "这里还没有内容",
+  "home.sessions.empty.description": "创建一个会话以开始。",
   "home.sessions.group.today": "今天",
   "home.sessions.group.yesterday": "昨天",
   "home.sessions.group.older": "更早",

packages/app/src/pages/home.tsx

@@ -461,22 +461,21 @@ export function NewHome() {
             onSelect={selectSearchSession}
           />
           <ScrollView class="mt-3 min-h-0 flex-1">
-            <div class="pt-3 flex flex-col gap-6">
+            <Show
+              when={!sessionLoad.isLoading}
+              fallback={
+                <div class="pt-3">
+                  <HomeSessionSkeleton label={language.t("common.loading")} />
+                </div>
+              }
+            >
               <Show
-                when={!sessionLoad.isLoading}
-                fallback={<HomeSessionSkeleton label={language.t("common.loading")} />}
+                when={groups().length > 0}
+                fallback={
+                  <HomeSessionsEmpty onNewSession={newSessionProject() ? openNewSession : undefined} />
+                }
               >
-                <Show
-                  when={groups().length > 0}
-                  fallback={
-                    <div class="flex min-w-0 flex-col gap-4">
-                      <HomeSessionGroupHeader
-                        title={language.t("home.sessions.empty")}
-                        onNewSession={newSessionProject() ? openNewSession : undefined}
-                      />
-                    </div>
-                  }
-                >
+                <div class="pt-3 flex flex-col gap-6">
                   <For each={groups()}>
                     {(group, index) => (
                       <div class="flex min-w-0 flex-col gap-4">
@@ -501,9 +500,9 @@ export function NewHome() {
                       </div>
                     )}
                   </For>
-                </Show>
+                </div>
               </Show>
-            </div>
+            </Show>
           </ScrollView>
         </section>
         <HomeUtilityNav
@@ -1210,6 +1209,33 @@ function HomeSessionRow(props: {
   )
 }
 
+function HomeSessionsEmpty(props: { onNewSession?: () => void }) {
+  const language = useLanguage()
+  return (
+    <div class="flex min-h-full flex-col items-center gap-4 px-6 pt-[52px] text-center">
+      <div class="shrink-0 text-[13px] leading-[13px] tracking-[-0.04px] text-v2-text-text-base [font-weight:530]">
+        {language.t("home.sessions.empty")}
+      </div>
+      <p class="mb-1 text-center text-[13px] leading-5 tracking-[-0.04px] text-v2-text-text-muted [font-weight:440]">
+        {language.t("home.sessions.empty.description")}
+      </p>
+      <Show when={props.onNewSession}>
+        {(onNewSession) => (
+          <ButtonV2
+            data-action="home-new-session"
+            variant="neutral"
+            size="normal"
+            icon="edit"
+            onClick={onNewSession()}
+          >
+            {language.t("command.session.new")}
+          </ButtonV2>
+        )}
+      </Show>
+    </div>
+  )
+}
+
 function HomeSessionSkeleton(props: { label: string }) {
   return (
     <div class="flex min-w-0 flex-col gap-4">