note enhancing change (#2716)

ComputelessComputer · web-flow · commit 727d5003afc1 · 2026-01-02T00:08:12.000+09:00
* feat(note-input): enhance generating note tab with cancel and progress

* feat(ui): conditionally show spinner on non-active items

* refactor(ui): adjust note input and overlay styling

* chore(deps): add benchmark and test utility dependencies

* fmt

* fix(ui): replace span with button for better accessibility
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/apps/desktop/public/assets/write-animation.gif b/apps/desktop/public/assets/write-animation.gif
diff --git a/apps/desktop/src/components/main/body/sessions/index.tsx b/apps/desktop/src/components/main/body/sessions/index.tsx
@@ -50,7 +50,7 @@ export const TabItemNote: TabItem<Extract<Tab, { type: "sessions" }>> = ({
   const isEnhancing = useIsSessionEnhancing(tab.id);
   const isActive = sessionMode === "active" || sessionMode === "finalizing";
   const isFinalizing = sessionMode === "finalizing";
-  const showSpinner = isFinalizing || isEnhancing;
+  const showSpinner = !tab.active && (isFinalizing || isEnhancing);
 
   return (
     <TabItemBase
diff --git a/apps/desktop/src/components/main/body/sessions/note-input/enhanced/streaming.tsx b/apps/desktop/src/components/main/body/sessions/note-input/enhanced/streaming.tsx
@@ -1,41 +1,46 @@
-import { Loader2Icon } from "lucide-react";
-import { LayoutGroup, motion } from "motion/react";
-import { useCallback, useEffect, useRef } from "react";
 import { Streamdown } from "streamdown";
 
 import { cn } from "@hypr/utils";
 
 import { useAITaskTask } from "../../../../../../hooks/useAITaskTask";
-import {
-  createTaskId,
-  type TaskId,
-} from "../../../../../../store/zustand/ai-task/task-configs";
+import { createTaskId } from "../../../../../../store/zustand/ai-task/task-configs";
 import { type TaskStepInfo } from "../../../../../../store/zustand/ai-task/tasks";
 
 export function StreamingView({ enhancedNoteId }: { enhancedNoteId: string }) {
   const taskId = createTaskId(enhancedNoteId, "enhance");
-  const { streamedText, isGenerating } = useAITaskTask(taskId, "enhance");
+  const { streamedText, currentStep, isGenerating } = useAITaskTask(
+    taskId,
+    "enhance",
+  );
 
-  const containerRef = useAutoScrollToBottom(streamedText);
+  const step = currentStep as TaskStepInfo<"enhance"> | undefined;
+  const hasContent = streamedText.length > 0;
+
+  let statusText: string | null = null;
+  if (isGenerating && !hasContent) {
+    if (step?.type === "analyzing") {
+      statusText = "Analyzing structure...";
+    } else if (step?.type === "generating") {
+      statusText = "Generating...";
+    } else if (step?.type === "retrying") {
+      statusText = `Retrying (attempt ${step.attempt})...`;
+    } else {
+      statusText = "Loading...";
+    }
+  }
 
   return (
-    <div ref={containerRef} className="flex flex-col pb-2 space-y-1">
-      <LayoutGroup>
-        <motion.div layout>
-          <Streamdown
-            components={streamdownComponents}
-            className={cn(["space-y-2"])}
-          >
-            {streamedText}
-          </Streamdown>
-        </motion.div>
-
-        {isGenerating && (
-          <motion.div className="sticky bottom-0 pt-1">
-            <Status taskId={taskId} />
-          </motion.div>
-        )}
-      </LayoutGroup>
+    <div className="pb-2">
+      {statusText ? (
+        <p className="text-sm text-neutral-500">{statusText}</p>
+      ) : (
+        <Streamdown
+          components={streamdownComponents}
+          className={cn(["space-y-2"])}
+        >
+          {streamedText}
+        </Streamdown>
+      )}
     </div>
   );
 }
@@ -106,81 +111,3 @@ const streamdownComponents = {
     return <p className="py-2">{props.children as React.ReactNode}</p>;
   },
 } as const;
-
-function Status({ taskId }: { taskId: TaskId<"enhance"> }) {
-  const { currentStep, cancel, isGenerating } = useAITaskTask(
-    taskId,
-    "enhance",
-  );
-  if (!isGenerating) {
-    return null;
-  }
-  const step = currentStep as TaskStepInfo<"enhance"> | undefined;
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      cancel();
-    },
-    [cancel],
-  );
-
-  let statusText = "Loading";
-  if (step?.type === "analyzing") {
-    statusText = "Analyzing structure...";
-  } else if (step?.type === "generating") {
-    statusText = "Generating";
-  } else if (step?.type === "retrying") {
-    statusText = `Retrying (attempt ${step.attempt})...`;
-  }
-
-  return (
-    <button
-      className={cn([
-        "group flex items-center justify-center w-[calc(100%-24px)] gap-3",
-        "border border-neutral-200 bg-neutral-800 rounded-lg py-3 transition-colors",
-        "cursor-pointer hover:bg-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-100/60",
-      ])}
-      type="button"
-      aria-label="Cancel enhance task"
-      onClick={handleClick}
-    >
-      <Loader2Icon
-        aria-hidden="true"
-        className="w-4 h-4 animate-spin text-neutral-50"
-      />
-      <span className="text-xs text-neutral-50 group-hover:hidden group-focus-visible:hidden">
-        {statusText}
-      </span>
-      <span className="hidden text-xs text-neutral-50 group-hover:inline group-focus-visible:inline">
-        Press to cancel
-      </span>
-    </button>
-  );
-}
-
-function useAutoScrollToBottom(text: string) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-
-    const scrollableParent = container.parentElement;
-    if (!scrollableParent) {
-      return;
-    }
-
-    const { scrollTop, scrollHeight, clientHeight } = scrollableParent;
-    const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
-
-    if (isNearBottom) {
-      scrollableParent.scrollTop = scrollHeight;
-    }
-  }, [text]);
-
-  return containerRef;
-}
diff --git a/apps/desktop/src/components/main/body/sessions/note-input/header.tsx b/apps/desktop/src/components/main/body/sessions/note-input/header.tsx
@@ -1,4 +1,4 @@
-import { AlertCircleIcon, PlusIcon, RefreshCcwIcon } from "lucide-react";
+import { AlertCircleIcon, PlusIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { commands as analyticsCommands } from "@hypr/plugin-analytics";
@@ -8,11 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@hypr/ui/components/ui/popover";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@hypr/ui/components/ui/tooltip";
+import { Spinner } from "@hypr/ui/components/ui/spinner";
 import { cn } from "@hypr/utils";
 
 import { useListener } from "../../../../../contexts/listener";
@@ -27,6 +23,7 @@ import {
 } from "../../../../../hooks/useLLMConnection";
 import * as main from "../../../../../store/tinybase/store/main";
 import { createTaskId } from "../../../../../store/zustand/ai-task/task-configs";
+import { type TaskStepInfo } from "../../../../../store/zustand/ai-task/tasks";
 import { useTabs } from "../../../../../store/zustand/tabs";
 import { type EditorView } from "../../../../../store/zustand/tabs/schema";
 import { useHasTranscript } from "../shared";
@@ -88,10 +85,8 @@ function HeaderTabEnhanced({
   sessionId: string;
   enhancedNoteId: string;
 }) {
-  const { isGenerating, isError, error, onRegenerate } = useEnhanceLogic(
-    sessionId,
-    enhancedNoteId,
-  );
+  const { isGenerating, isError, onRegenerate, onCancel, currentStep } =
+    useEnhanceLogic(sessionId, enhancedNoteId);
 
   const title =
     main.UI.useCell("enhanced_notes", enhancedNoteId, "title", main.STORE_ID) ||
@@ -106,12 +101,51 @@ function HeaderTabEnhanced({
   );
 
   if (isGenerating) {
+    const step = currentStep as TaskStepInfo<"enhance"> | undefined;
+
+    const handleCancelClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onCancel();
+    };
+
     return (
-      <HeaderTab isActive={isActive} onClick={onClick}>
-        <span className="flex items-center gap-1">
+      <button
+        onClick={onClick}
+        className={cn([
+          "group/tab relative my-2 py-0.5 px-1 text-xs font-medium transition-all duration-200 border-b-2",
+          isActive
+            ? ["text-neutral-900", "border-neutral-900"]
+            : [
+                "text-neutral-600",
+                "border-transparent",
+                "hover:text-neutral-800",
+              ],
+        ])}
+      >
+        <span className="flex items-center gap-1 h-5">
           <TruncatedTitle title={title} isActive={isActive} />
+          <button
+            type="button"
+            onClick={handleCancelClick}
+            className="inline-flex h-5 w-5 items-center justify-center rounded cursor-pointer hover:bg-neutral-200"
+            aria-label="Cancel enhancement"
+          >
+            <span className="group-hover/tab:hidden flex items-center justify-center">
+              {step?.type === "generating" ? (
+                <img
+                  src="/assets/write-animation.gif"
+                  alt=""
+                  aria-hidden="true"
+                  className="size-3"
+                />
+              ) : (
+                <Spinner size={14} />
+              )}
+            </span>
+            <XIcon className="hidden group-hover/tab:flex items-center justify-center size-4" />
+          </button>
         </span>
-      </HeaderTab>
+      </button>
     );
   }
 
@@ -161,24 +195,7 @@ function HeaderTabEnhanced({
     >
       <span className="flex items-center gap-1 h-5">
         <TruncatedTitle title={title} isActive={isActive} />
-        {isActive && (
-          <div className="flex items-center gap-1">
-            {isError ? (
-              <Tooltip delayDuration={0}>
-                <TooltipTrigger asChild>{regenerateIcon}</TooltipTrigger>
-                {error && (
-                  <TooltipContent side="bottom">
-                    <p className="text-xs max-w-xs">
-                      {error instanceof Error ? error.message : String(error)}
-                    </p>
-                  </TooltipContent>
-                )}
-              </Tooltip>
-            ) : (
-              regenerateIcon
-            )}
-          </div>
-        )}
+        {isActive && regenerateIcon}
       </span>
     </button>
   );
@@ -519,6 +536,8 @@ function useEnhanceLogic(sessionId: string, enhancedNoteId: string) {
     isError,
     error,
     onRegenerate,
+    onCancel: enhanceTask.cancel,
+    currentStep: enhanceTask.currentStep,
   };
 }
 
diff --git a/apps/desktop/src/components/main/body/sessions/note-input/index.tsx b/apps/desktop/src/components/main/body/sessions/note-input/index.tsx
@@ -222,7 +222,7 @@ export const NoteInput = forwardRef<
         />
       </div>
 
-      <div className="relative flex-1 mt-2 overflow-hidden">
+      <div className="relative flex-1 overflow-hidden">
         <div
           ref={(node) => {
             fadeRef.current = node;
@@ -238,7 +238,7 @@ export const NoteInput = forwardRef<
             "h-full px-3",
             currentTab.type === "transcript"
               ? "overflow-hidden"
-              : ["overflow-auto", "pb-6"],
+              : ["overflow-auto", "pt-2", "pb-6"],
           ])}
         >
           {currentTab.type === "enhanced" && (
diff --git a/apps/desktop/src/components/main/body/sessions/title-input.tsx b/apps/desktop/src/components/main/body/sessions/title-input.tsx
@@ -202,7 +202,7 @@ export const TitleInput = forwardRef<
           }}
           onMouseDown={(e) => e.preventDefault()}
           className={cn([
-            "shrink-0 p-1",
+            "shrink-0",
             "text-muted-foreground hover:text-foreground",
             "opacity-50 hover:opacity-100 transition-opacity",
           ])}
diff --git a/apps/desktop/src/components/main/sidebar/timeline/item.tsx b/apps/desktop/src/components/main/sidebar/timeline/item.tsx
@@ -214,7 +214,7 @@ const SessionItem = memo(
     const sessionMode = useListener((state) => state.getSessionMode(sessionId));
     const isEnhancing = useIsSessionEnhancing(sessionId);
     const isFinalizing = sessionMode === "finalizing";
-    const showSpinner = isFinalizing || isEnhancing;
+    const showSpinner = !selected && (isFinalizing || isEnhancing);
 
     const calendarId = useMemo(() => {
       if (!store || !item.data.event_id) {
