feat: Hide right sidebar until there are changes or user manually opens it

apps/twig/src/renderer/components/HeaderRow.tsx

@@ -1,23 +1,19 @@
 import { RightSidebarTrigger } from "@features/right-sidebar/components/RightSidebarTrigger";
+import { useHasFileChanges } from "@features/right-sidebar/hooks/useHasFileChanges";
 import { useRightSidebarStore } from "@features/right-sidebar/stores/rightSidebarStore";
 import { SidebarTrigger } from "@features/sidebar/components/SidebarTrigger";
 import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
 import { Box, Flex } from "@radix-ui/themes";
 import { useHeaderStore } from "@stores/headerStore";
 import { useNavigationStore } from "@stores/navigationStore";
+import type React from "react";
+import { useEffect } from "react";
 
 export const HEADER_HEIGHT = 36;
 const COLLAPSED_WIDTH = 110;
 
-export function HeaderRow() {
-  const content = useHeaderStore((state) => state.content);
-  const view = useNavigationStore((state) => state.view);
-
-  const sidebarOpen = useSidebarStore((state) => state.open);
-  const sidebarWidth = useSidebarStore((state) => state.width);
-  const isResizing = useSidebarStore((state) => state.isResizing);
-  const setIsResizing = useSidebarStore((state) => state.setIsResizing);
-
+function RightSidebarHeaderSection({ taskId }: { taskId: string }) {
+  const hasChanges = useHasFileChanges(taskId);
   const rightSidebarOpen = useRightSidebarStore((state) => state.open);
   const rightSidebarWidth = useRightSidebarStore((state) => state.width);
   const rightSidebarIsResizing = useRightSidebarStore(
@@ -26,19 +22,69 @@ export function HeaderRow() {
   const setRightSidebarIsResizing = useRightSidebarStore(
     (state) => state.setIsResizing,
   );
+  const setOpenAuto = useRightSidebarStore((state) => state.setOpenAuto);
 
-  const showRightSidebarSection = view.type === "task-detail";
+  useEffect(() => {
+    setOpenAuto(hasChanges);
+  }, [hasChanges, setOpenAuto]);
 
-  const handleLeftSidebarMouseDown = (e: React.MouseEvent) => {
+  const handleRightSidebarMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
-    setIsResizing(true);
+    setRightSidebarIsResizing(true);
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
   };
 
-  const handleRightSidebarMouseDown = (e: React.MouseEvent) => {
+  return (
+    <Flex
+      align="center"
+      justify="between"
+      px="2"
+      pl="3"
+      style={{
+        width: rightSidebarOpen
+          ? `${rightSidebarWidth}px`
+          : `${COLLAPSED_WIDTH}px`,
+        minWidth: `${COLLAPSED_WIDTH}px`,
+        height: "100%",
+        borderLeft: "1px solid var(--gray-6)",
+        transition: rightSidebarIsResizing ? "none" : "width 0.2s ease-in-out",
+        position: "relative",
+      }}
+    >
+      <RightSidebarTrigger />
+      {rightSidebarOpen && (
+        <Box
+          onMouseDown={handleRightSidebarMouseDown}
+          className="no-drag"
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: "4px",
+            cursor: "col-resize",
+            backgroundColor: "transparent",
+            zIndex: 100,
+          }}
+        />
+      )}
+    </Flex>
+  );
+}
+
+export function HeaderRow() {
+  const content = useHeaderStore((state) => state.content);
+  const view = useNavigationStore((state) => state.view);
+
+  const sidebarOpen = useSidebarStore((state) => state.open);
+  const sidebarWidth = useSidebarStore((state) => state.width);
+  const isResizing = useSidebarStore((state) => state.isResizing);
+  const setIsResizing = useSidebarStore((state) => state.setIsResizing);
+
+  const handleLeftSidebarMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
-    setRightSidebarIsResizing(true);
+    setIsResizing(true);
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
   };
@@ -98,43 +144,8 @@ export function HeaderRow() {
         </Flex>
       )}
 
-      {showRightSidebarSection && view.type === "task-detail" && view.data && (
-        <Flex
-          align="center"
-          justify="between"
-          px="2"
-          pl="3"
-          style={{
-            width: rightSidebarOpen
-              ? `${rightSidebarWidth}px`
-              : `${COLLAPSED_WIDTH}px`,
-            minWidth: `${COLLAPSED_WIDTH}px`,
-            height: "100%",
-            borderLeft: "1px solid var(--gray-6)",
-            transition: rightSidebarIsResizing
-              ? "none"
-              : "width 0.2s ease-in-out",
-            position: "relative",
-          }}
-        >
-          <RightSidebarTrigger />
-          {rightSidebarOpen && (
-            <Box
-              onMouseDown={handleRightSidebarMouseDown}
-              className="no-drag"
-              style={{
-                position: "absolute",
-                left: 0,
-                top: 0,
-                bottom: 0,
-                width: "4px",
-                cursor: "col-resize",
-                backgroundColor: "transparent",
-                zIndex: 100,
-              }}
-            />
-          )}
-        </Flex>
+      {view.type === "task-detail" && view.data && (
+        <RightSidebarHeaderSection taskId={view.data.id} />
       )}
     </Flex>
   );

apps/twig/src/renderer/features/right-sidebar/hooks/useHasFileChanges.ts

@@ -0,0 +1,21 @@
+import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { trpcVanilla } from "@renderer/trpc/client";
+import { useQuery } from "@tanstack/react-query";
+
+export function useHasFileChanges(taskId: string): boolean {
+  const repoPath = useCwd(taskId);
+
+  const { data: changedFiles = [] } = useQuery({
+    queryKey: ["changed-files-head", repoPath],
+    queryFn: () =>
+      trpcVanilla.git.getChangedFilesHead.query({
+        directoryPath: repoPath as string,
+      }),
+    enabled: !!repoPath,
+    refetchOnMount: "always",
+    refetchOnWindowFocus: true,
+    placeholderData: (prev) => prev,
+  });
+
+  return changedFiles.length > 0;
+}

apps/twig/src/renderer/features/right-sidebar/stores/rightSidebarStore.ts

@@ -3,4 +3,5 @@ import { createSidebarStore } from "@stores/createSidebarStore";
 export const useRightSidebarStore = createSidebarStore({
   name: "right-sidebar-storage",
   defaultWidth: 300,
+  defaultOpen: false,
 });

apps/twig/src/renderer/stores/createSidebarStore.ts

@@ -3,12 +3,14 @@ import { persist } from "zustand/middleware";
 
 export interface SidebarStoreState {
   open: boolean;
+  hasUserSetOpen: boolean;
   width: number;
   isResizing: boolean;
 }
 
 export interface SidebarStoreActions {
   setOpen: (open: boolean) => void;
+  setOpenAuto: (open: boolean) => void;
   toggle: () => void;
   setWidth: (width: number) => void;
   setIsResizing: (isResizing: boolean) => void;
@@ -29,17 +31,22 @@ export function createSidebarStore(options: CreateSidebarStoreOptions) {
     persist(
       (set) => ({
         open: defaultOpen,
+        hasUserSetOpen: false,
         width: defaultWidth,
         isResizing: false,
-        setOpen: (open) => set({ open }),
-        toggle: () => set((state) => ({ open: !state.open })),
+        setOpen: (open) => set({ open, hasUserSetOpen: true }),
+        setOpenAuto: (open) =>
+          set((state) => (state.hasUserSetOpen ? state : { open })),
+        toggle: () =>
+          set((state) => ({ open: !state.open, hasUserSetOpen: true })),
         setWidth: (width) => set({ width }),
         setIsResizing: (isResizing) => set({ isResizing }),
       }),
       {
         name,
         partialize: (state) => ({
           open: state.open,
+          hasUserSetOpen: state.hasUserSetOpen,
           width: state.width,
         }),
       },