feat(ui): polish welcome dialog, window sizing, and cowork UI details

fisherdaddy · fisherdaddy · commit 09e71d224da5 · 2026-07-03T23:11:17.000+08:00
Enlarge default window size and center it on screen, redesign
WelcomeDialog buttons and drop the close action, vertically center the
cowork welcome view with flexible spacers, and refine artifact tab
close buttons and selected-text snippet badge styling.
diff --git a/src/main/windowState.test.ts b/src/main/windowState.test.ts
@@ -9,14 +9,14 @@ import {
   resolveInitialAppWindowState,
 } from './windowState';
 
-test('resolveInitialAppWindowState uses the image-like default size on large displays', () => {
+test('resolveInitialAppWindowState uses the centered default size on large displays', () => {
   const state = resolveInitialAppWindowState(undefined, [
     { x: 0, y: 0, width: 2560, height: 1440 },
   ]);
 
   expect(state).toEqual({
-    x: 768,
-    y: 380,
+    x: 640,
+    y: 320,
     width: DEFAULT_APP_WINDOW_WIDTH,
     height: DEFAULT_APP_WINDOW_HEIGHT,
     isMaximized: false,
@@ -28,10 +28,10 @@ test('resolveInitialAppWindowState scales the default size to fit smaller displa
     { x: 0, y: 0, width: 1000, height: 650 },
   ]);
 
-  expect(state.width).toBe(907);
-  expect(state.height).toBe(602);
-  expect(state.x).toBe(47);
-  expect(state.y).toBe(24);
+  expect(state.width).toBe(952);
+  expect(state.height).toBe(600);
+  expect(state.x).toBe(24);
+  expect(state.y).toBe(25);
 });
 
 test('resolveInitialAppWindowState restores stored bounds on their matching display', () => {
diff --git a/src/main/windowState.ts b/src/main/windowState.ts
@@ -2,8 +2,8 @@ export const AppWindowStoreKey = {
   State: 'app_window_state',
 } as const;
 
-export const DEFAULT_APP_WINDOW_WIDTH = 1024;
-export const DEFAULT_APP_WINDOW_HEIGHT = 680;
+export const DEFAULT_APP_WINDOW_WIDTH = 1280;
+export const DEFAULT_APP_WINDOW_HEIGHT = 800;
 export const MIN_APP_WINDOW_WIDTH = 800;
 export const MIN_APP_WINDOW_HEIGHT = 600;
 
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -568,7 +568,6 @@ const App: React.FC = () => {
     window.electron.window.close();
   }, []);
 
-  const handleWelcomeClose = useCallback(() => setShowWelcome(false), []);
   const handleWelcomeLogin = useCallback(async () => {
     setShowWelcome(false);
     await authService.login();
@@ -1116,7 +1115,6 @@ const App: React.FC = () => {
         <WelcomeDialog
           onLogin={handleWelcomeLogin}
           onCustomModel={handleWelcomeCustomModel}
-          onClose={handleWelcomeClose}
         />
       )}
     </div>
diff --git a/src/renderer/components/WelcomeDialog.tsx b/src/renderer/components/WelcomeDialog.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
+
 import { i18nService } from '@/services/i18n';
 
 interface WelcomeDialogProps {
   onLogin: () => void;
   onCustomModel: () => void;
-  onClose: () => void;
 }
 
-const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ onLogin, onCustomModel, onClose }) => {
+const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ onLogin, onCustomModel }) => {
   return (
     <div className="fixed inset-0 z-[60] bg-surface flex items-center justify-center">
       {/* gradient overlay */}
@@ -16,17 +16,6 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ onLogin, onCustomModel, o
         style={{ background: 'linear-gradient(360deg, rgba(255, 0, 77, 0) 5.5%, rgba(255, 0, 77, 0.05) 100%)' }}
       />
 
-      {/* close button */}
-      <button
-        onClick={onClose}
-        className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full text-secondary hover:text-foreground hover:bg-surface-raised transition-colors z-10"
-        aria-label="Close"
-      >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <path d="M1 1L13 13M13 1L1 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-        </svg>
-      </button>
-
       {/* content */}
       <div className="relative z-10 flex flex-col items-center py-12 w-[420px]">
         {/* logo */}
@@ -49,43 +38,47 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ onLogin, onCustomModel, o
           {i18nService.t('welcomeSubtitle')}
         </p>
 
-        {/* promo badge — left-aligned to match buttons */}
-        <div className="flex items-center gap-1.5 w-full" style={{ paddingLeft: 11, marginBottom: 10 }}>
-          <img
-            src="love.png"
-            alt=""
-            width={16}
-            height={16}
-            className="select-none shrink-0"
-            draggable={false}
-            aria-hidden="true"
-          />
-          <span className="text-sm text-secondary">{i18nService.t('welcomePromo')}</span>
-        </div>
+        {/* action stack — login is the primary path, custom model stays visible but quiet */}
+        <div className="flex flex-col w-[320px]">
+          {/* promo badge — anchored above the login button as its incentive */}
+          <div className="flex items-center gap-1.5" style={{ paddingLeft: 11, marginBottom: 10 }}>
+            <img
+              src="love.png"
+              alt=""
+              width={16}
+              height={16}
+              className="select-none shrink-0"
+              draggable={false}
+              aria-hidden="true"
+            />
+            <span className="text-sm text-secondary">{i18nService.t('welcomePromo')}</span>
+          </div>
 
-        {/* buttons — hand image sits at bottom-left of this row, overlapping login button */}
-        <div className="flex gap-3 w-full relative overflow-visible">
-          <img
-            src="hand.png"
-            alt=""
-            width={41}
-            height={55}
-            className="absolute select-none pointer-events-none z-10"
-            style={{ bottom: 0, left: -8 }}
-            draggable={false}
-            aria-hidden="true"
-          />
-          <button
-            onClick={onLogin}
-            className="w-[204px] h-10 rounded-xl text-sm font-medium text-white transition-opacity hover:opacity-90 active:opacity-80"
-            style={{ backgroundColor: 'rgba(72, 133, 255, 1)' }}
-          >
-            {i18nService.t('welcomeLogin')}
-          </button>
+          {/* primary: login — hand image overlaps its bottom-left corner */}
+          <div className="relative w-full overflow-visible">
+            <img
+              src="hand.png"
+              alt=""
+              width={41}
+              height={55}
+              className="absolute select-none pointer-events-none z-10"
+              style={{ bottom: 0, left: -8 }}
+              draggable={false}
+              aria-hidden="true"
+            />
+            <button
+              onClick={onLogin}
+              className="w-full h-11 rounded-xl text-sm font-medium text-white transition-opacity hover:opacity-90 active:opacity-80 shadow-[0_4px_14px_rgba(72,133,255,0.35)]"
+              style={{ backgroundColor: 'rgba(72, 133, 255, 1)' }}
+            >
+              {i18nService.t('welcomeLogin')}
+            </button>
+          </div>
+
+          {/* secondary: custom model — ghost style keeps it discoverable without competing */}
           <button
             onClick={onCustomModel}
-            className="w-[204px] h-10 rounded-xl text-sm font-medium text-white transition-opacity hover:opacity-90 active:opacity-80"
-            style={{ backgroundColor: 'rgba(54, 57, 63, 1)' }}
+            className="mt-3 w-full h-10 rounded-xl text-sm font-medium text-secondary border border-border bg-transparent hover:text-foreground hover:bg-surface-raised transition-colors"
           >
             {i18nService.t('welcomeCustomModel')}
           </button>
diff --git a/src/renderer/components/cowork/CoworkSessionDetail.tsx b/src/renderer/components/cowork/CoworkSessionDetail.tsx
@@ -931,6 +931,9 @@ const ArtifactTabPlusIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) =>
   </svg>
 );
 
+const artifactTabCloseButtonClassName =
+  'mr-1 flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full text-transparent transition-colors group-hover:bg-muted group-hover:text-background hover:!bg-foreground hover:!text-background';
+
 const ArtifactBrowserTabIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" {...props}>
     <circle cx="8" cy="8" r="6" />
@@ -4392,14 +4395,10 @@ const CoworkSessionDetail: React.FC<CoworkSessionDetailProps> = ({
                           event.stopPropagation();
                           handleCloseArtifactFileListTab();
                         }}
-                        className={`mr-1 rounded p-0.5 transition-colors ${
-                          activeArtifactPreviewTab || activeSpecialPreviewTab !== ArtifactSpecialTab.FileList
-                            ? 'text-transparent group-hover:text-secondary group-hover:hover:bg-surface-hover group-hover:hover:text-foreground'
-                            : 'text-secondary hover:bg-surface-hover hover:text-foreground'
-                        }`}
+                        className={artifactTabCloseButtonClassName}
                         title={i18nService.t('artifactCloseTab')}
                       >
-                        <ArtifactTabCloseIcon className="h-3 w-3" />
+                        <ArtifactTabCloseIcon className="h-2.5 w-2.5" />
                       </button>
                     </div>
                   )}
@@ -4431,14 +4430,10 @@ const CoworkSessionDetail: React.FC<CoworkSessionDetailProps> = ({
                           event.stopPropagation();
                           handleCloseArtifactBrowserTab();
                         }}
-                        className={`mr-1 rounded p-0.5 transition-colors ${
-                          activeArtifactPreviewTab || activeSpecialPreviewTab !== ArtifactSpecialTab.Browser
-                            ? 'text-transparent group-hover:text-secondary group-hover:hover:bg-surface-hover group-hover:hover:text-foreground'
-                            : 'text-secondary hover:bg-surface-hover hover:text-foreground'
-                        }`}
+                        className={artifactTabCloseButtonClassName}
                         title={i18nService.t('artifactCloseTab')}
                       >
-                        <ArtifactTabCloseIcon className="h-3 w-3" />
+                        <ArtifactTabCloseIcon className="h-2.5 w-2.5" />
                       </button>
                     </div>
                   )}
@@ -4470,14 +4465,10 @@ const CoworkSessionDetail: React.FC<CoworkSessionDetailProps> = ({
                           event.stopPropagation();
                           handleCloseArtifactSubagentTab();
                         }}
-                        className={`mr-1 rounded p-0.5 transition-colors ${
-                          activeArtifactPreviewTab || activeSpecialPreviewTab !== ArtifactSpecialTab.Subagents
-                            ? 'text-transparent group-hover:text-secondary group-hover:hover:bg-surface-hover group-hover:hover:text-foreground'
-                            : 'text-secondary hover:bg-surface-hover hover:text-foreground'
-                        }`}
+                        className={artifactTabCloseButtonClassName}
                         title={i18nService.t('artifactCloseTab')}
                       >
-                        <ArtifactTabCloseIcon className="h-3 w-3" />
+                        <ArtifactTabCloseIcon className="h-2.5 w-2.5" />
                       </button>
                     </div>
                   )}
@@ -4509,14 +4500,10 @@ const CoworkSessionDetail: React.FC<CoworkSessionDetailProps> = ({
                             event.stopPropagation();
                             handleCloseArtifactTab(tab.id);
                           }}
-                          className={`mr-1 rounded p-0.5 transition-colors ${
-                            isActive
-                              ? 'text-secondary hover:bg-surface-hover hover:text-foreground'
-                              : 'text-transparent group-hover:text-secondary group-hover:hover:bg-surface-hover group-hover:hover:text-foreground'
-                          }`}
+                          className={artifactTabCloseButtonClassName}
                           title={i18nService.t('artifactCloseTab')}
                         >
-                          <ArtifactTabCloseIcon className="h-3 w-3" />
+                          <ArtifactTabCloseIcon className="h-2.5 w-2.5" />
                         </button>
                       </div>
                     );
diff --git a/src/renderer/components/cowork/CoworkView.tsx b/src/renderer/components/cowork/CoworkView.tsx
@@ -779,7 +779,11 @@ const CoworkView: React.FC<CoworkViewProps> = ({ onRequestAppSettings, onShowSki
 
       {/* Main Content */}
       <div className="flex-1 overflow-y-auto min-h-0 relative">
-        <div className="relative flex min-h-full w-full min-w-[320px] flex-col items-center px-4 pt-[clamp(88px,19vh,140px)] pb-8">
+        <div className="relative flex min-h-full w-full min-w-[320px] flex-col items-center px-4 py-8">
+          {/* Flexible spacers (2:3) keep the welcome block at the optical
+              center on tall windows; min-h preserves breathing room before
+              the page starts scrolling on short windows. */}
+          <div aria-hidden="true" className="w-full min-h-[56px] flex-[2_0_0px]" />
           {/* Welcome Section - staggered entrance animation */}
           <div className="w-full max-w-3xl text-center">
             <img
@@ -842,6 +846,7 @@ const CoworkView: React.FC<CoworkViewProps> = ({ onRequestAppSettings, onShowSki
             )}
             <CreditsResetCampaignFloat />
           </div>
+          <div aria-hidden="true" className="w-full min-h-[24px] flex-[3_0_0px]" />
         </div>
       </div>
     </div>
diff --git a/src/renderer/components/cowork/SelectedTextSnippetBadge.tsx b/src/renderer/components/cowork/SelectedTextSnippetBadge.tsx
@@ -70,6 +70,10 @@ const SelectedTextSnippetBadge: React.FC<SelectedTextSnippetBadgeProps> = ({
   if (snippets.length === 0) return null;
   const canRemove = Boolean(onClear || onRemove);
   const popoverAlignmentClass = align === 'right' ? 'right-0' : 'left-0';
+  const popoverOriginClass = align === 'right' ? 'origin-bottom-right' : 'origin-bottom-left';
+  const pillSurfaceClass = expanded
+    ? 'bg-surface-raised/70'
+    : 'bg-surface hover:bg-surface-raised/50';
   const popoverWidthUnits = clampSelectedTextPopoverWidth(
     snippets.reduce((longestWidth, snippet) => {
       const sourceLabelWidth = getApproximateTextWidthUnits(getSourceLabel(snippet));
@@ -92,13 +96,14 @@ const SelectedTextSnippetBadge: React.FC<SelectedTextSnippetBadgeProps> = ({
 
   return (
     <div ref={rootRef} className="group relative inline-flex max-w-full">
-      <div className="inline-flex h-7 max-w-full items-center rounded-full border border-border bg-surface-raised text-xs text-foreground shadow-subtle transition-colors hover:bg-surface">
+      <div className={`inline-flex h-7 max-w-full items-center rounded-full border border-border text-xs text-foreground shadow-subtle transition-colors ${pillSurfaceClass}`}>
         <button
           type="button"
           onClick={() => setExpanded(value => !value)}
+          aria-expanded={expanded}
           className="inline-flex h-full min-w-0 items-center gap-1.5 rounded-full pl-2.5 pr-2 text-left"
         >
-          <SelectedTextIcon className="h-4 w-4 shrink-0 text-foreground" />
+          <SelectedTextIcon className="h-4 w-4 shrink-0 text-secondary" />
           <span className="min-w-0 truncate">
             {i18nService.t('coworkSelectedTextSnippetCount').replace('{count}', String(snippets.length))}
           </span>
@@ -107,7 +112,7 @@ const SelectedTextSnippetBadge: React.FC<SelectedTextSnippetBadgeProps> = ({
           <button
             type="button"
             onClick={handleClear}
-            className="pointer-events-none mr-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-surface text-secondary opacity-0 transition-all hover:bg-surface-hover hover:text-foreground group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
+            className="pointer-events-none mr-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-muted opacity-0 transition-all hover:bg-surface-raised hover:text-foreground group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
             title={i18nService.t('coworkSelectedTextRemove')}
             aria-label={i18nService.t('coworkSelectedTextRemove')}
           >
@@ -117,12 +122,13 @@ const SelectedTextSnippetBadge: React.FC<SelectedTextSnippetBadgeProps> = ({
       </div>
       {expanded && (
         <div
-          className={`absolute bottom-full ${popoverAlignmentClass} z-50 mb-1.5 max-w-[calc(100vw-48px)] rounded-xl border border-border bg-surface p-2 shadow-popover`}
+          className={`absolute bottom-full ${popoverAlignmentClass} z-50 mb-1.5 max-w-[calc(100vw-48px)] ${popoverOriginClass} animate-scale-in rounded-xl border border-border bg-surface p-1.5 shadow-popover`}
           style={popoverStyle}
         >
           <div className="flex max-h-56 max-w-full flex-col items-stretch gap-1 overflow-y-auto">
             {snippets.map(snippet => (
-              <div key={snippet.id} className="flex w-full items-start gap-1 rounded-lg bg-surface-raised px-2 py-1.5 text-xs text-secondary">
+              <div key={snippet.id} className="group/snippet relative flex w-full items-start gap-1 rounded-lg bg-surface-raised/40 py-1.5 pl-3.5 pr-1.5 text-xs text-secondary transition-colors hover:bg-surface-raised/80">
+                <span aria-hidden="true" className="absolute inset-y-1.5 left-1.5 w-0.5 rounded-full bg-primary/40 transition-colors group-hover/snippet:bg-primary/60" />
                 <button
                   type="button"
                   onClick={() => {
@@ -145,7 +151,7 @@ const SelectedTextSnippetBadge: React.FC<SelectedTextSnippetBadgeProps> = ({
                   <button
                     type="button"
                     onClick={() => onRemove(snippet.id)}
-                    className="shrink-0 rounded p-0.5 hover:bg-surface"
+                    className="pointer-events-none shrink-0 rounded-md p-0.5 text-muted opacity-0 transition-all hover:bg-surface hover:text-foreground focus-visible:opacity-100 group-hover/snippet:pointer-events-auto group-hover/snippet:opacity-100 group-focus-within/snippet:pointer-events-auto group-focus-within/snippet:opacity-100"
                     title={i18nService.t('coworkSelectedTextRemove')}
                   >
                     <XMarkIcon className="h-3.5 w-3.5" />
