feat: rework task creation layout (#146)

Author: jonathanlab

package.json

@@ -71,20 +71,22 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.8",
     "@dnd-kit/react": "^0.1.21",
+    "@floating-ui/dom": "^1.7.4",
     "@phosphor-icons/react": "^2.1.10",
     "@posthog/agent": "1.20.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.90.2",
-    "@tiptap/extension-link": "^3.6.6",
-    "@tiptap/extension-mention": "^3.6.6",
-    "@tiptap/extension-placeholder": "^3.6.6",
-    "@tiptap/extension-typography": "^3.6.6",
-    "@tiptap/extension-underline": "^3.6.6",
-    "@tiptap/pm": "^3.6.6",
-    "@tiptap/react": "^3.6.6",
-    "@tiptap/starter-kit": "^3.6.6",
-    "@tiptap/suggestion": "^3.6.6",
+    "@tiptap/core": "^3.11.0",
+    "@tiptap/extension-link": "^3.11.0",
+    "@tiptap/extension-mention": "^3.11.0",
+    "@tiptap/extension-placeholder": "^3.11.0",
+    "@tiptap/extension-typography": "^3.11.0",
+    "@tiptap/extension-underline": "^3.11.0",
+    "@tiptap/pm": "^3.11.0",
+    "@tiptap/react": "^3.11.0",
+    "@tiptap/starter-kit": "^3.11.0",
+    "@tiptap/suggestion": "^3.11.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",

pnpm-lock.yaml

@@ -107,6 +107,18 @@ function createWindow(): void {
         { role: "quit" },
       ],
     },
+    {
+      label: "File",
+      submenu: [
+        {
+          label: "New task",
+          accelerator: "CmdOrCtrl+N",
+          click: () => {
+            mainWindow?.webContents.send("new-task");
+          },
+        },
+      ],
+    },
     {
       label: "Edit",
       submenu: [

src/main/index.ts

@@ -212,6 +212,11 @@ contextBridge.exposeInMainWorld("electronAPI", {
     ipcRenderer.on("open-settings", wrapped);
     return () => ipcRenderer.removeListener("open-settings", wrapped);
   },
+  onNewTask: (listener: () => void): (() => void) => {
+    const wrapped = () => listener();
+    ipcRenderer.on("new-task", wrapped);
+    return () => ipcRenderer.removeListener("new-task", wrapped);
+  },
   getAppVersion: (): Promise<string> => ipcRenderer.invoke("app:get-version"),
   onUpdateReady: (listener: () => void): (() => void) => {
     const channel = "updates:ready";

src/main/preload.ts

@@ -5,23 +5,22 @@ import { TopBar } from "@components/ui/topnav/TopBar";
 import { CommandMenu } from "@features/command/components/CommandMenu";
 import { SettingsView } from "@features/settings/components/SettingsView";
 import { TaskDetail } from "@features/task-detail/components/TaskDetail";
+import { TaskInput } from "@features/task-detail/components/TaskInput";
 import { TaskList } from "@features/task-list/components/TaskList";
 import { useIntegrations } from "@hooks/useIntegrations";
 import { Box, Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useLayoutStore } from "@stores/layoutStore";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useCallback, useEffect, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Toaster } from "sonner";
 
 export function MainLayout() {
-  const { setCliMode } = useLayoutStore();
   const {
     view,
     toggleSettings,
-    navigateToTaskList,
     navigateToTask,
+    navigateToTaskInput,
     goBack,
     goForward,
   } = useNavigationStore();
@@ -33,9 +32,8 @@ export function MainLayout() {
   }, [toggleSettings]);
 
   const handleFocusTaskMode = useCallback(() => {
-    navigateToTaskList();
-    setCliMode("task");
-  }, [setCliMode, navigateToTaskList]);
+    navigateToTaskInput();
+  }, [navigateToTaskInput]);
 
   useHotkeys("mod+k", () => setCommandMenuOpen((prev) => !prev), {
     enabled: !commandMenuOpen,
@@ -52,14 +50,19 @@ export function MainLayout() {
   useHotkeys("mod+]", () => goForward());
 
   useEffect(() => {
-    const unsubscribe = window.electronAPI?.onOpenSettings(() => {
+    const unsubscribeSettings = window.electronAPI?.onOpenSettings(() => {
       handleOpenSettings();
     });
 
+    const unsubscribeNewTask = window.electronAPI?.onNewTask(() => {
+      handleFocusTaskMode();
+    });
+
     return () => {
-      unsubscribe?.();
+      unsubscribeSettings?.();
+      unsubscribeNewTask?.();
     };
-  }, [handleOpenSettings]);
+  }, [handleOpenSettings, handleFocusTaskMode]);
 
   const handleSelectTask = (task: Task) => {
     navigateToTask(task);
@@ -76,6 +79,8 @@ export function MainLayout() {
             <TaskList onSelectTask={handleSelectTask} />
           )}
 
+          {view.type === "task-input" && <TaskInput />}
+
           {view.type === "task-detail" && view.data && (
             <TaskDetail key={view.data.id} task={view.data} />
           )}

src/renderer/components/MainLayout.tsx

@@ -9,18 +9,21 @@ import { useTaskContextMenu } from "@hooks/useTaskContextMenu";
 import { ArrowsInSimpleIcon, ArrowsOutSimpleIcon } from "@phosphor-icons/react";
 import { Box, Button, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useLayoutStore } from "@stores/layoutStore";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useSidebarStore } from "@stores/sidebarStore";
 import type React from "react";
 import { useState } from "react";
 
 export const SidebarContent: React.FC = () => {
-  const { view, navigateToTaskList, navigateToTask, navigateToSettings } =
-    useNavigationStore();
+  const {
+    view,
+    navigateToTaskList,
+    navigateToTask,
+    navigateToTaskInput,
+    navigateToSettings,
+  } = useNavigationStore();
   const expandedNodesArray = useSidebarStore((state) => state.expandedNodes);
   const { toggleNode, expandAll, collapseAll } = useSidebarStore();
-  const { setCliMode } = useLayoutStore();
   const { isLoading } = useTasks();
   const activeFilters = useTaskStore((state) => state.activeFilters);
   const setActiveFilters = useTaskStore((state) => state.setActiveFilters);
@@ -45,8 +48,7 @@ export const SidebarContent: React.FC = () => {
   };
 
   const handleCreateTask = () => {
-    navigateToTaskList();
-    setCliMode("task");
+    navigateToTaskInput();
   };
 
   const handleProjectClick = (repository: string) => {
@@ -93,7 +95,8 @@ export const SidebarContent: React.FC = () => {
       <Box
         style={{
           flexGrow: 1,
-          overflow: "auto",
+          overflowY: "auto",
+          overflowX: "hidden",
         }}
       >
         <Flex direction="column" gap="4" p="2">

src/renderer/components/ui/sidebar/SidebarContent.tsx

@@ -19,7 +19,7 @@ interface TaskView {
 }
 
 interface ViewState {
-  type: "task-list" | "task-detail" | "settings";
+  type: "task-list" | "task-detail" | "task-input" | "settings";
   data?: Task;
 }
 

src/renderer/components/ui/sidebar/UseSidebarMenuData.tsx

@@ -9,7 +9,7 @@ interface TopBarProps {
 export const TopBar = ({ onSearchClick }: TopBarProps) => {
   return (
     <Flex
-      className="drag h-10 w-full border-gray-6 border-b"
+      className="drag h-10 min-h-10 w-full border-gray-6 border-b"
       align="center"
       justify="center"
       px="2"

src/renderer/components/ui/topnav/TopBar.tsx

@@ -1,7 +1,6 @@
 import { PostHogAPIClient } from "@api/posthogClient";
 import { identifyUser, resetUser, track } from "@renderer/lib/analytics";
 import { queryClient } from "@renderer/lib/queryClient";
-import { useNavigationStore } from "@renderer/stores/navigationStore";
 import type { CloudRegion } from "@shared/types/oauth";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
@@ -135,9 +134,6 @@ export const useAuthStore = create<AuthState>()(
             project_id: projectId.toString(),
             region,
           });
-
-          // Navigate to task list after successful authentication
-          useNavigationStore.getState().navigateToTaskList();
         } catch {
           throw new Error("Failed to authenticate with PostHog");
         }
@@ -310,9 +306,6 @@ export const useAuthStore = create<AuthState>()(
                 region: tokens.cloudRegion,
               });
 
-              // Navigate to task list after successful authentication
-              useNavigationStore.getState().navigateToTaskList();
-
               if (state.encryptedOpenaiKey) {
                 const decryptedOpenaiKey =
                   await window.electronAPI.retrieveApiKey(

src/renderer/features/auth/stores/authStore.ts

@@ -4,7 +4,6 @@ import { useTasks } from "@features/tasks/hooks/useTasks";
 import { FileTextIcon, ListBulletIcon } from "@radix-ui/react-icons";
 import { Flex, Text } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
-import { useLayoutStore } from "@stores/layoutStore";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useCallback, useEffect, useRef } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -15,8 +14,8 @@ interface CommandMenuProps {
 }
 
 export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
-  const { navigateToTaskList, navigateToTask } = useNavigationStore();
-  const { setCliMode } = useLayoutStore();
+  const { navigateToTaskList, navigateToTask, navigateToTaskInput } =
+    useNavigationStore();
   const { data: tasks = [] } = useTasks();
   const commandRef = useRef<HTMLDivElement>(null);
 
@@ -71,8 +70,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
   };
 
   const handleCreateTask = () => {
-    navigateToTaskList();
-    setCliMode("task");
+    navigateToTaskInput();
     onOpenChange(false);
   };