From 58dcd73e1bec083fb9a306f4dcfbc7549252c293 Mon Sep 17 00:00:00 2001
From: huyan <huyanxius@Gmail.com>
Date: Fri, 4 Sep 2026 00:00:59 +0800
Subject: [PATCH] feat(quick-start): simplify history navigation

The persistent history rail competed with the Quick Start canvas and added unnecessary visual weight.

Replace it with a token-based left trigger and contextual floating panel with outside-click and Escape dismissal.

Keep the canvas full-width and limit the change to Quick Start history presentation.
---
 .../src/pages/quick-start/history-sidebar.tsx | 42 +++++++++----------
 frontend/src/pages/quick-start/index.tsx      |  5 +--
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/quick-start/history-sidebar.tsx b/frontend/src/pages/quick-start/history-sidebar.tsx
index c717942c..02c02240 100644
--- a/frontend/src/pages/quick-start/history-sidebar.tsx
+++ b/frontend/src/pages/quick-start/history-sidebar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { ClockCounterClockwise, Note, NotePencil, SidebarSimple, X } from '@phosphor-icons/react'
+import { ListDashes, Note, NotePencil, X } from '@phosphor-icons/react'
 import { Link } from 'react-router'
 
 import type { QuickStartEntryService, QuickStartHistoryItem } from './service'
@@ -40,6 +40,15 @@ export function QuickStartHistorySidebar({
 
   const closeMobile = () => setMobileOpen(false)
 
+  useEffect(() => {
+    if (!mobileOpen) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeMobile()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [mobileOpen])
+
   return (
     <>
       <button
@@ -47,9 +56,9 @@ export function QuickStartHistorySidebar({
         aria-label="打开创作历史"
         aria-expanded={mobileOpen}
         onClick={() => setMobileOpen(true)}
-        className="fixed top-[4.25rem] left-3 z-40 grid size-10 place-items-center rounded-xl border border-app-line bg-app-surface-raised text-app-muted shadow-app-card transition hover:text-app-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent lg:hidden"
+        className="fixed top-[4.35rem] left-4 z-40 grid size-9 place-items-center p-1 text-app-ink-soft transition-colors duration-150 hover:text-app-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-ink"
       >
-        <SidebarSimple aria-hidden="true" size={21} weight="bold" />
+        <ListDashes aria-hidden="true" size={23} weight="regular" />
       </button>
 
       {mobileOpen ? (
@@ -57,31 +66,23 @@ export function QuickStartHistorySidebar({
           type="button"
           aria-label="关闭创作历史"
           onClick={closeMobile}
-          className="fixed inset-0 z-40 bg-app-ink/20 backdrop-blur-[2px] lg:hidden"
+          className="fixed inset-0 z-40 bg-transparent"
         />
       ) : null}
 
       <aside
         data-open={mobileOpen ? 'true' : 'false'}
-        className={`fixed top-14 bottom-0 left-0 z-50 flex w-72 flex-col border-r border-app-line bg-app-surface px-3 py-4 text-app-ink shadow-app-panel transition-transform duration-200 lg:z-30 lg:translate-x-0 lg:shadow-none ${
-          mobileOpen ? 'translate-x-0' : '-translate-x-full'
+        className={`fixed top-[7.25rem] left-4 z-50 flex max-h-[calc(100vh-8.25rem)] w-[min(18rem,calc(100vw-2rem))] flex-col rounded-app-surface border border-app-line bg-app-surface px-3 py-4 text-app-ink shadow-app-menu transition duration-200 [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] ${
+          mobileOpen ? 'translate-y-0 opacity-100' : 'pointer-events-none -translate-y-2 opacity-0'
         }`}
       >
         <div className="mb-3 flex items-center justify-between px-2">
-          <div className="flex items-center gap-2.5">
-            <span className="grid size-8 place-items-center rounded-xl bg-app-accent-soft text-app-accent">
-              <ClockCounterClockwise aria-hidden="true" size={18} weight="bold" />
-            </span>
-            <div>
-              <p className="font-serif text-base font-semibold">创作历史</p>
-              <p className="text-[11px] text-app-faint">继续上一次 Quick Start</p>
-            </div>
-          </div>
+          <p className="font-serif text-base font-semibold">创作历史</p>
           <button
             type="button"
             aria-label="关闭创作历史"
             onClick={closeMobile}
-            className="grid size-9 place-items-center rounded-lg text-app-muted hover:bg-app-surface-muted lg:hidden"
+            className="grid size-9 place-items-center rounded-app-compact text-app-muted transition-colors hover:bg-app-surface-muted hover:text-app-ink"
           >
             <X aria-hidden="true" size={17} weight="bold" />
           </button>
@@ -91,10 +92,10 @@ export function QuickStartHistorySidebar({
           to="/quick-start"
           aria-current={activeRunId ? undefined : 'page'}
           onClick={closeMobile}
-          className={`mb-4 flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent ${
+          className={`mb-4 flex items-center gap-3 rounded-app-control px-3 py-2.5 text-sm font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent ${
             activeRunId
               ? 'text-app-ink-soft hover:bg-app-surface-muted'
-              : 'bg-app-accent-soft text-app-accent'
+              : 'text-app-ink-soft hover:bg-app-surface-muted'
           }`}
         >
           <NotePencil aria-hidden="true" size={19} weight="bold" />
@@ -102,9 +103,6 @@ export function QuickStartHistorySidebar({
         </Link>
 
         <nav aria-label="创作历史" className="min-h-0 flex-1 overflow-y-auto">
-          <p className="px-3 pb-2 font-mono text-[10px] font-bold tracking-[0.14em] text-app-faint">
-            RECENT
-          </p>
           {loading ? (
             <p role="status" className="px-3 py-3 text-xs text-app-muted">
               正在读取历史记录…
@@ -126,7 +124,7 @@ export function QuickStartHistorySidebar({
                       aria-current={current ? 'page' : undefined}
                       onClick={closeMobile}
                       title={item.title}
-                      className={`group flex min-w-0 items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent ${
+                      className={`group flex min-w-0 items-center gap-2.5 rounded-app-control px-3 py-2.5 text-sm transition focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-app-accent ${
                         current
                           ? 'bg-app-surface-strong font-semibold text-app-ink'
                           : 'text-app-ink-soft hover:bg-app-surface-muted'
diff --git a/frontend/src/pages/quick-start/index.tsx b/frontend/src/pages/quick-start/index.tsx
index 211c439e..6f5afe88 100644
--- a/frontend/src/pages/quick-start/index.tsx
+++ b/frontend/src/pages/quick-start/index.tsx
@@ -594,10 +594,7 @@ export function QuickStartPage({
   }, [])
 
   return (
-    <div
-      data-layout="quick-start-with-history"
-      className="relative min-h-screen bg-app-canvas lg:pl-72"
-    >
+    <div data-layout="quick-start-with-history" className="relative min-h-screen bg-app-canvas">
       <QuickStartHistorySidebar service={activeService} activeRunId={runId} />
       <div className="min-w-0">
         {runId ? (