feat(app): make new tasks project-first

apps/app/src/app/index.css

@@ -185,13 +185,12 @@
   --dls-text-primary: var(--slate-12);
   --dls-text-secondary: var(--slate-11);
   --dls-hover: var(--slate-3);
-  --dls-active: var(--slate-5);
+  --dls-active: var(--slate-4);
   --dls-radius: 16px;
   --dls-radius-lg: 24px;
   --dls-shell-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
   --dls-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
   --project-dialog-accent: #1fbac0;
-  --project-dialog-accent-strong: #087b82;
   --project-dialog-notice: #f4f4ee;
   --project-dialog-option-border: #e7e7e8;
   --background: var(--slate-1);
@@ -247,7 +246,7 @@
   --dls-text-primary: var(--slate-12);
   --dls-text-secondary: var(--slate-11);
   --dls-hover: var(--slate-3);
-  --dls-active: var(--slate-5);
+  --dls-active: var(--slate-4);
   --dls-shell-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
   --dls-card-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
 }
@@ -577,7 +576,6 @@ select:disabled {
 .dark,
 [data-theme="dark"] {
   --project-dialog-accent: #1fbac0;
-  --project-dialog-accent-strong: #a9e7ea;
   --project-dialog-notice: var(--slate-3);
   --project-dialog-option-border: var(--slate-6);
   --background: var(--slate-1);

apps/app/src/components/chat/new-conversation-starter.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { type ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
-import type { CSSProperties } from "react";
+import { type ChangeEvent, useEffect, useId, useMemo, useRef, useState } from "react";
+import type { CSSProperties, Ref } from "react";
+import { createPortal } from "react-dom";
+import { LazyMotion, domAnimation, m, useReducedMotion, type Transition } from "motion/react";
 import {
   CheckIcon,
   ChevronDownIcon,
@@ -110,12 +112,19 @@ const ANIMATION_CATEGORY_LABELS: Record<string, { en: string; zh: string }> = {
   vfx: { en: "VFX", zh: "视觉特效" },
 };
 
-const MODES = [
+const MODES = [
   { id: "work", iconSrc: publicAssetUrl("new-conversation-tabs/work.svg"), label: "new_conversation.mode.work" },
   { id: "code", iconSrc: publicAssetUrl("new-conversation-tabs/code.svg"), label: "new_conversation.mode.code" },
   { id: "design", iconSrc: publicAssetUrl("new-conversation-tabs/design.svg"), label: "new_conversation.mode.design" },
   { id: "video", iconSrc: publicAssetUrl("new-conversation-tabs/video.svg"), label: "new_conversation.mode.video" },
-] as const satisfies ReadonlyArray<{ id: NewConversationMode; iconSrc: string; label: string }>;
+] as const satisfies ReadonlyArray<{ id: NewConversationMode; iconSrc: string; label: string }>;
+
+const MODE_TAB_SPRING = {
+  type: "spring",
+  mass: 1,
+  stiffness: 300,
+  damping: 20,
+} satisfies Transition;
 
 type StarterAction = {
   id: string;
@@ -265,7 +274,7 @@ function TemplateStrip({
   };
 
   return (
-    <section className="mt-4 rounded-xl border border-border/80 bg-muted/25 p-3" aria-live="polite">
+    <section data-testid="new-conversation-template-strip" data-category={category} className="mt-4 min-h-[185px] rounded-xl border border-border/80 bg-muted/25 p-3" aria-live="polite">
       <div className="mb-2 flex items-baseline justify-between gap-3 px-0.5">
         <div>
           <p className="text-[13px] font-medium text-foreground">{t("new_conversation.templates.title", { category: categoryLabel })}</p>
@@ -867,26 +876,31 @@ function ShortcutEditor({
   definitions,
   selectedIds,
   templates,
-  templatesLoading,
-  position,
-  onToggle,
+  templatesLoading,
+  position,
+  panelRef,
+  onToggle,
   onMove,
   onClose,
 }: {
   mode: NewConversationMode;
   definitions: ReadonlyArray<StarterAction>;
   selectedIds: string[];
   templates: TemplateCatalogItem[];
-  templatesLoading: boolean;
-  position: CSSProperties;
+  templatesLoading: boolean;
+  position: CSSProperties;
+  panelRef: Ref<HTMLDivElement>;
   onToggle: (id: string) => void;
   onMove: (id: string, direction: -1 | 1) => void;
   onClose: () => void;
-}) {
-  const creativeMode = mode === "design";
-  return (
-    <div
-      className="fixed z-[80] max-h-[min(420px,calc(100vh-2rem))] w-[min(340px,calc(100vw-2rem))] overflow-y-auto rounded-xl border border-border/80 bg-background/95 p-3 shadow-xl backdrop-blur"
+}) {
+  const creativeMode = mode === "design";
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    <div
+      ref={panelRef}
+      data-testid="new-conversation-shortcut-editor"
+      className="fixed z-[80] max-h-[min(420px,calc(100vh-2rem))] w-[min(340px,calc(100vw-2rem))] overflow-y-auto rounded-xl border border-border/80 bg-background/95 p-3 shadow-xl backdrop-blur"
       style={position}
       role="dialog"
       aria-label={t("new_conversation.shortcuts.title")}
@@ -965,13 +979,14 @@ function ShortcutEditor({
             </div>
           );
         })}
-      </div>
-    </div>
-  );
-}
+      </div>
+    </div>,
+    document.body,
+  );
+}
 
-export function newConversationPlaceholder(mode: NewConversationMode) {
-  return t(`new_conversation.placeholder.${mode}`);
+export function newConversationPlaceholder() {
+  return t("new_conversation.placeholder");
 }
 
 export function NewConversationStarter({
@@ -995,13 +1010,16 @@ export function NewConversationStarter({
   onChangeAnimationParams,
   onRetryAnimationCatalog,
 }: NewConversationStarterProps) {
-  const [activeTemplateCategory, setActiveTemplateCategory] = useState<TemplateCategory | null>(null);
+  const modeTabIndicatorId = useId();
+  const reduceMotion = useReducedMotion();
+  const [activeTemplateCategory, setActiveTemplateCategory] = useState<TemplateCategory | null>(null);
   const [hoveredMode, setHoveredMode] = useState<NewConversationMode | null>(null);
   const [shortcutEditorOpen, setShortcutEditorOpen] = useState(false);
   const [shortcutEditorPosition, setShortcutEditorPosition] = useState<CSSProperties>({});
   const [shortcutIds, setShortcutIds] = useState<Record<NewConversationMode, string[]>>(DEFAULT_SHORTCUT_IDS);
   const [savedPromptTemplates, setSavedPromptTemplates] = useState<SavedPromptTemplate[]>([]);
   const shortcutEditorRef = useRef<HTMLDivElement>(null);
+  const shortcutEditorPanelRef = useRef<HTMLDivElement>(null);
   const shortcutButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -1042,9 +1060,13 @@ export function NewConversationStarter({
   }, [shortcutIds]);
 
   useEffect(() => {
-    if (!shortcutEditorOpen) return;
-    const closeOnOutsidePress = (event: PointerEvent) => {
-      if (!shortcutEditorRef.current?.contains(event.target as Node)) setShortcutEditorOpen(false);
+    if (!shortcutEditorOpen) return;
+    const closeOnOutsidePress = (event: PointerEvent) => {
+      if (!(event.target instanceof Node)) return;
+      if (
+        !shortcutEditorRef.current?.contains(event.target)
+        && !shortcutEditorPanelRef.current?.contains(event.target)
+      ) setShortcutEditorOpen(false);
     };
     const closeOnEscape = (event: KeyboardEvent) => {
       if (event.key === "Escape") setShortcutEditorOpen(false);
@@ -1058,15 +1080,28 @@ export function NewConversationStarter({
   }, [shortcutEditorOpen]);
 
   const updateShortcutEditorPosition = () => {
-    const button = shortcutButtonRef.current;
-    if (!button || typeof window === "undefined") return;
-    const rect = button.getBoundingClientRect();
-    const right = Math.max(16, window.innerWidth - rect.right);
-    const opensAbove = rect.bottom > window.innerHeight * 0.58;
-    setShortcutEditorPosition(opensAbove
-      ? { right, bottom: Math.max(16, window.innerHeight - rect.top + 8) }
-      : { right, top: Math.max(16, rect.bottom + 8) });
-  };
+    const button = shortcutButtonRef.current;
+    if (!button || typeof window === "undefined") return;
+    const rect = button.getBoundingClientRect();
+    const contentRect = button.closest<HTMLElement>('[data-slot="sidebar-inset"]')?.getBoundingClientRect();
+    const contentLeft = contentRect?.left ?? 0;
+    const contentRight = contentRect?.right ?? window.innerWidth;
+    const horizontalMargin = 16;
+    const width = Math.min(340, Math.max(0, contentRight - contentLeft - horizontalMargin * 2));
+    const left = Math.min(
+      Math.max(rect.right - width, contentLeft + horizontalMargin),
+      contentRight - horizontalMargin - width,
+    );
+    const verticalMargin = 16;
+    const gap = 8;
+    const availableAbove = Math.max(0, rect.top - gap - verticalMargin);
+    const availableBelow = Math.max(0, window.innerHeight - rect.bottom - gap - verticalMargin);
+    const opensAbove = availableAbove > availableBelow;
+    const maxHeight = Math.min(420, opensAbove ? availableAbove : availableBelow);
+    setShortcutEditorPosition(opensAbove
+      ? { left, width, maxHeight, bottom: window.innerHeight - rect.top + gap }
+      : { left, width, maxHeight, top: rect.bottom + gap });
+  };
 
   useEffect(() => {
     if (!shortcutEditorOpen) return;
@@ -1132,17 +1167,17 @@ export function NewConversationStarter({
       onRequestTemplates?.();
     }
     onSelectMode(mode);
-  };
-
-  return (
-    <div className="relative w-full overflow-visible px-6 py-8 sm:px-0 sm:pb-0 sm:pt-12">
+  };
+
+  return (
+    <div data-testid="new-conversation-starter-layout" className="relative w-full overflow-visible px-6 pt-8 sm:px-0 sm:pt-12">
       <img
         src={publicAssetUrl("new-conversation-bg.png")}
         alt=""
         aria-hidden
         className="pointer-events-none absolute left-[calc(50%-280px)] -top-[18px] h-[243px] w-[243px] max-w-none dark:opacity-20"
       />
-      <div className="relative">
+      <div data-testid="new-conversation-starter-header" className="relative">
         <div className="max-w-4xl">
           <img
             src={publicAssetUrl("ipollo-work-wordmark.svg")}
@@ -1152,49 +1187,62 @@ export function NewConversationStarter({
           <h1 className="mt-3 font-sans text-[48px] font-semibold leading-none tracking-[-1.92px] text-black dark:text-white">
             {t("new_conversation.title")}
           </h1>
-          <p className="mt-8 font-sans text-[16px] font-light leading-normal tracking-[-0.64px] text-[#666] dark:text-[#ccc]">{t("new_conversation.subtitle")}</p>
-        </div>
-
-        <div
-          className="mt-8 grid h-[46px] w-full max-w-[394px] grid-cols-4 items-center gap-1.5 rounded-[12px] bg-[#F5F5F5] p-1 dark:bg-[#333]"
-          role="tablist"
-          aria-label={t("new_conversation.mode_label")}
-        >
-        {MODES.map(({ id, iconSrc, label }) => {
-          const selected = id === selectedMode;
-          return (
-            <button
-              key={id}
-              type="button"
-              role="tab"
-              aria-selected={selected}
-              className={cn(
-                "inline-flex h-[38px] min-w-0 items-center justify-center gap-1.5 rounded-[8px] px-1.5 font-sans text-[12px] font-medium leading-normal transition-[background-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                selected
-                  ? "bg-white text-black dark:bg-black dark:text-[#ccc]"
-                  : "text-[#999] hover:bg-white/70 hover:text-black dark:hover:bg-black/50 dark:hover:text-[#ccc] dark:active:bg-black dark:active:text-[#ccc]",
-              )}
-              onClick={() => selectMode(id)}
-              onMouseEnter={() => setHoveredMode(id)}
-              onMouseLeave={() => setHoveredMode(null)}
-            >
-              <img
-                src={iconSrc}
-                alt=""
-                aria-hidden
+        </div>
+
+        <LazyMotion features={domAnimation}>
+          <div
+            className="mt-8 flex h-[42px] w-fit max-w-full items-center gap-2 rounded-full bg-muted p-1"
+            role="tablist"
+            aria-label={t("new_conversation.mode_label")}
+          >
+          {MODES.map(({ id, iconSrc, label }) => {
+            const selected = id === selectedMode;
+            return (
+              <button
+                key={id}
+                type="button"
+                role="tab"
+                aria-selected={selected}
                 className={cn(
-                  "shrink-0 object-contain",
-                  id === "video" ? "h-[14px] w-[18px]" : "size-4",
-                  (selected || hoveredMode === id) && "brightness-0 dark:invert dark:opacity-80",
+                  "relative isolate inline-flex h-9 w-[92px] min-w-0 items-center justify-center gap-1 rounded-full px-3 font-sans text-[13px] font-normal leading-5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  selected
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:bg-background/70 hover:text-foreground",
                 )}
-              />
-              <span className="min-w-0 truncate">{t(label)}</span>
-            </button>
-          );
-        })}
-        </div>
-
-        <div className="mt-5 flex flex-wrap gap-2" aria-label={t("new_conversation.quick_actions_label")}>
+                onClick={() => selectMode(id)}
+                onMouseEnter={() => setHoveredMode(id)}
+                onMouseLeave={() => setHoveredMode(null)}
+              >
+                {selected ? (
+                  <m.span
+                    layoutId={`new-conversation-mode-indicator-${modeTabIndicatorId}`}
+                    data-testid="new-conversation-mode-indicator"
+                    aria-hidden="true"
+                    initial={false}
+                    transition={reduceMotion ? { duration: 0 } : MODE_TAB_SPRING}
+                    className="pointer-events-none absolute inset-0 -z-10 rounded-full bg-background"
+                  />
+                ) : null}
+                <img
+                  src={iconSrc}
+                  alt=""
+                  aria-hidden
+                  className={cn(
+                    "shrink-0 object-contain transition-[filter,opacity] duration-150",
+                    id === "video" ? "h-[14px] w-[18px]" : "size-4",
+                    (selected || hoveredMode === id) && "brightness-0 dark:invert",
+                  )}
+                />
+                <span className="min-w-0 truncate">{t(label)}</span>
+              </button>
+            );
+          })}
+          </div>
+        </LazyMotion>
+      </div>
+
+      <div data-testid="new-conversation-starter-tasks" className="relative pt-6">
+        <div data-testid="new-conversation-quick-actions" className="flex flex-wrap gap-2" aria-label={t("new_conversation.quick_actions_label")}>
         {actions.map(({ id, label, prompt, templateCategory, icon: ActionIcon }) => {
           const selectedTemplateAction = templateCategory !== undefined && templateCategory === activeTemplateCategory;
           const selectedCapabilityAction = !templateCategory && selectedCapabilityId === id;
@@ -1246,24 +1294,11 @@ export function NewConversationStarter({
                 updateShortcutEditorPosition();
                 setShortcutEditorOpen((open) => !open);
               }}
-            >
-              <Plus className="size-4 text-[#999]" strokeWidth={1.8} aria-hidden />
-            </button>
-            {shortcutEditorOpen ? (
-              <ShortcutEditor
-                mode={selectedMode}
-                definitions={modeDefinitions}
-                selectedIds={shortcutIds[selectedMode]}
-                templates={templates}
-                templatesLoading={templatesLoading}
-                position={shortcutEditorPosition}
-                onToggle={toggleShortcut}
-                onMove={moveShortcut}
-                onClose={() => setShortcutEditorOpen(false)}
-              />
-            ) : null}
-          </div>
-        ) : null}
+            >
+              <Plus className="size-4 text-[#999]" strokeWidth={1.8} aria-hidden />
+            </button>
+          </div>
+        ) : null}
         </div>
 
         {selectedMode === "design" && activeTemplateCategory ? (
@@ -1321,8 +1356,22 @@ export function NewConversationStarter({
             onRequestTemplates={onRequestTemplates}
           />
         ) : null}
-      </div>
-    </div>
-  );
-}
+      </div>
+      {shortcutEditorOpen ? (
+        <ShortcutEditor
+          mode={selectedMode}
+          definitions={modeDefinitions}
+          selectedIds={shortcutIds[selectedMode]}
+          templates={templates}
+          templatesLoading={templatesLoading}
+          position={shortcutEditorPosition}
+          panelRef={shortcutEditorPanelRef}
+          onToggle={toggleShortcut}
+          onMove={moveShortcut}
+          onClose={() => setShortcutEditorOpen(false)}
+        />
+      ) : null}
+    </div>
+  );
+}