Git branch flow improvements (#370)

src-web/components/CloneGitRepositoryDialog.tsx

@@ -0,0 +1,161 @@
+import { open } from '@tauri-apps/plugin-dialog';
+import { gitClone } from '@yaakapp-internal/git';
+import { useState } from 'react';
+import { openWorkspaceFromSyncDir } from '../commands/openWorkspaceFromSyncDir';
+import { appInfo } from '../lib/appInfo';
+import { showErrorToast } from '../lib/toast';
+import { Banner } from './core/Banner';
+import { Button } from './core/Button';
+import { Checkbox } from './core/Checkbox';
+import { IconButton } from './core/IconButton';
+import { PlainInput } from './core/PlainInput';
+import { VStack } from './core/Stacks';
+import { promptCredentials } from './git/credentials';
+
+interface Props {
+  hide: () => void;
+}
+
+// Detect path separator from an existing path (defaults to /)
+function getPathSeparator(path: string): string {
+  return path.includes('\\') ? '\\' : '/';
+}
+
+export function CloneGitRepositoryDialog({ hide }: Props) {
+  const [url, setUrl] = useState<string>('');
+  const [baseDirectory, setBaseDirectory] = useState<string>(appInfo.defaultProjectDir);
+  const [directoryOverride, setDirectoryOverride] = useState<string | null>(null);
+  const [hasSubdirectory, setHasSubdirectory] = useState(false);
+  const [subdirectory, setSubdirectory] = useState<string>('');
+  const [isCloning, setIsCloning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const repoName = extractRepoName(url);
+  const sep = getPathSeparator(baseDirectory);
+  const computedDirectory = repoName ? `${baseDirectory}${sep}${repoName}` : baseDirectory;
+  const directory = directoryOverride ?? computedDirectory;
+  const workspaceDirectory =
+    hasSubdirectory && subdirectory ? `${directory}${sep}${subdirectory}` : directory;
+
+  const handleSelectDirectory = async () => {
+    const dir = await open({
+      title: 'Select Directory',
+      directory: true,
+      multiple: false,
+    });
+    if (dir != null) {
+      setBaseDirectory(dir);
+      setDirectoryOverride(null);
+    }
+  };
+
+  const handleClone = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!url || !directory) return;
+
+    setIsCloning(true);
+    setError(null);
+
+    try {
+      const result = await gitClone(url, directory, promptCredentials);
+
+      if (result.type === 'needs_credentials') {
+        setError(
+          result.error ?? 'Authentication failed. Please check your credentials and try again.',
+        );
+        return;
+      }
+
+      // Open the workspace from the cloned directory (or subdirectory)
+      await openWorkspaceFromSyncDir.mutateAsync(workspaceDirectory);
+
+      hide();
+    } catch (err) {
+      setError(String(err));
+      showErrorToast({
+        id: 'git-clone-error',
+        title: 'Clone Failed',
+        message: String(err),
+      });
+    } finally {
+      setIsCloning(false);
+    }
+  };
+
+  return (
+    <VStack as="form" space={3} alignItems="start" className="pb-3" onSubmit={handleClone}>
+      {error && (
+        <Banner color="danger" className="w-full">
+          {error}
+        </Banner>
+      )}
+
+      <PlainInput
+        required
+        label="Repository URL"
+        placeholder="https://github.com/user/repo.git"
+        defaultValue={url}
+        onChange={setUrl}
+      />
+
+      <PlainInput
+        label="Directory"
+        placeholder={appInfo.defaultProjectDir}
+        defaultValue={directory}
+        onChange={setDirectoryOverride}
+        rightSlot={
+          <IconButton
+            size="xs"
+            className="mr-0.5 !h-auto my-0.5"
+            icon="folder"
+            title="Browse"
+            onClick={handleSelectDirectory}
+          />
+        }
+      />
+
+      <Checkbox
+        checked={hasSubdirectory}
+        onChange={setHasSubdirectory}
+        title="Workspace is in a subdirectory"
+        help="Enable if the Yaak workspace files are not at the root of the repository"
+      />
+
+      {hasSubdirectory && (
+        <PlainInput
+          label="Subdirectory"
+          placeholder="path/to/workspace"
+          defaultValue={subdirectory}
+          onChange={setSubdirectory}
+        />
+      )}
+
+      <Button
+        type="submit"
+        color="primary"
+        className="w-full mt-3"
+        disabled={!url || !directory || isCloning}
+        isLoading={isCloning}
+      >
+        {isCloning ? 'Cloning...' : 'Clone Repository'}
+      </Button>
+    </VStack>
+  );
+}
+
+function extractRepoName(url: string): string {
+  // Handle various Git URL formats:
+  // https://github.com/user/repo.git
+  // git@github.com:user/repo.git
+  // https://github.com/user/repo
+  const match = url.match(/\/([^/]+?)(\.git)?$/);
+  if (match?.[1]) {
+    return match[1];
+  }
+  // Fallback for SSH-style URLs
+  const sshMatch = url.match(/:([^/]+?)(\.git)?$/);
+  if (sshMatch?.[1]) {
+    return sshMatch[1];
+  }
+  return '';
+}

src-web/components/WorkspaceActionsDropdown.tsx

@@ -18,6 +18,7 @@ import { useWorkspaceActions } from '../hooks/useWorkspaceActions';
 import { showDialog } from '../lib/dialog';
 import { jotaiStore } from '../lib/jotai';
 import { revealInFinderText } from '../lib/reveal';
+import { CloneGitRepositoryDialog } from './CloneGitRepositoryDialog';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
@@ -39,9 +40,19 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const { mutate: deleteSendHistory } = useDeleteSendHistory();
   const workspaceActions = useWorkspaceActions();
 
-  const { workspaceItems, itemsAfter } = useMemo<{
+  const openCloneGitRepositoryDialog = useCallback(() => {
+    showDialog({
+      id: 'clone-git-repository',
+      size: 'md',
+      title: 'Clone Git Repository',
+      render: ({ hide }) => <CloneGitRepositoryDialog hide={hide} />,
+    });
+  }, []);
+
+  const { workspaceItems, itemsAfter, itemsBefore } = useMemo<{
     workspaceItems: RadioDropdownItem[];
     itemsAfter: DropdownItem[];
+    itemsBefore: DropdownItem[];
   }>(() => {
     const workspaceItems: RadioDropdownItem[] = workspaces.map((w) => ({
       key: w.id,
@@ -50,6 +61,38 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
       leftSlot: w.id === workspace?.id ? <Icon icon="check" /> : <Icon icon="empty" />,
     }));
 
+    const itemsBefore: DropdownItem[] = [
+      {
+        label: 'New Workspace',
+        leftSlot: <Icon icon="plus" />,
+        submenu: [
+          {
+            label: 'Create Empty',
+            leftSlot: <Icon icon="plus_circle" />,
+            onSelect: createWorkspace,
+          },
+          {
+            label: 'Open Folder',
+            leftSlot: <Icon icon="folder_open" />,
+            onSelect: async () => {
+              const dir = await open({
+                title: 'Select Workspace Directory',
+                directory: true,
+                multiple: false,
+              });
+
+              if (dir == null) return;
+              openWorkspaceFromSyncDir.mutate(dir);
+            },
+          },
+          {
+            label: 'Clone Git Repository',
+            leftSlot: <Icon icon="hard_drive_download" />,
+            onSelect: openCloneGitRepositoryDialog,
+          },
+        ],
+      },
+    ];
     const itemsAfter: DropdownItem[] = [
       ...workspaceActions.map((a) => ({
         label: a.label,
@@ -80,34 +123,15 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         leftSlot: <Icon icon="history" />,
         onSelect: deleteSendHistory,
       },
-      { type: 'separator' },
-      {
-        label: 'New Workspace',
-        leftSlot: <Icon icon="plus" />,
-        onSelect: createWorkspace,
-      },
-      {
-        label: 'Open Existing Workspace',
-        leftSlot: <Icon icon="folder_open" />,
-        onSelect: async () => {
-          const dir = await open({
-            title: 'Select Workspace Directory',
-            directory: true,
-            multiple: false,
-          });
-
-          if (dir == null) return;
-          openWorkspaceFromSyncDir.mutate(dir);
-        },
-      },
     ];
 
-    return { workspaceItems, itemsAfter };
+    return { workspaceItems, itemsAfter, itemsBefore };
   }, [
     workspaces,
     workspaceMeta,
     deleteSendHistory,
     createWorkspace,
+    openCloneGitRepositoryDialog,
     workspace?.id,
     workspace,
     workspaceActions.map,
@@ -144,6 +168,7 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
     <RadioDropdown
       items={workspaceItems}
       itemsAfter={itemsAfter}
+      itemsBefore={itemsBefore}
       onChange={handleSwitchWorkspace}
       value={workspace?.id ?? null}
     >

src-web/components/core/Dropdown.tsx

@@ -66,6 +66,8 @@ export type DropdownItemDefault = {
   keepOpenOnSelect?: boolean;
   onSelect?: () => void | Promise<void>;
   submenu?: DropdownItem[];
+  /** If true, submenu opens on click instead of hover */
+  submenuOpenOnClick?: boolean;
   icon?: IconProps['icon'];
 };
 
@@ -272,6 +274,7 @@ interface MenuProps {
   defaultSelectedIndex: number | null;
   triggerShape: Pick<DOMRect, 'top' | 'bottom' | 'left' | 'right'> | null;
   onClose: () => void;
+  onCloseAll?: () => void;
   showTriangle?: boolean;
   fullWidth?: boolean;
   isOpen: boolean;
@@ -288,6 +291,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       items,
       fullWidth,
       onClose,
+      onCloseAll,
       triggerShape,
       defaultSelectedIndex,
       showTriangle,
@@ -300,7 +304,16 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       defaultSelectedIndex ?? -1,
       [defaultSelectedIndex],
     );
+
     const [filter, setFilter] = useState<string>('');
+
+    // Clear filter when menu opens
+    useEffect(() => {
+      if (isOpen) {
+        setFilter('');
+      }
+    }, [isOpen]);
+
     const [activeSubmenu, setActiveSubmenu] = useState<{
       item: DropdownItemDefault;
       parent: HTMLButtonElement;
@@ -320,10 +333,18 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
 
     const handleClose = useCallback(() => {
       onClose();
-      setFilter('');
       setActiveSubmenu(null);
     }, [onClose]);
 
+    // Close the entire menu hierarchy (used when selecting an item)
+    const handleCloseAll = useCallback(() => {
+      if (onCloseAll) {
+        onCloseAll();
+      } else {
+        handleClose();
+      }
+    }, [onCloseAll, handleClose]);
+
     // Handle type-ahead filtering (only for the deepest open menu)
     const handleMenuKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
       // Skip if this menu has a submenu open - let the submenu handle typing
@@ -393,6 +414,14 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
       [items, setSelectedIndex],
     );
 
+    // Ensure selection is on a valid item (not hidden/separator/content)
+    useEffect(() => {
+      const item = items[selectedIndex ?? -1];
+      if (item?.hidden || item?.type === 'separator' || item?.type === 'content') {
+        handleNext();
+      }
+    }, [selectedIndex, items, handleNext]);
+
     useKey(
       'ArrowUp',
       (e) => {
@@ -433,7 +462,13 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
     );
 
     const handleSelect = useCallback(
-      async (item: DropdownItem) => {
+      async (item: DropdownItem, parentEl?: HTMLButtonElement) => {
+        // Handle click-to-open submenu
+        if ('submenu' in item && item.submenu && item.submenuOpenOnClick && parentEl) {
+          setActiveSubmenu({ item, parent: parentEl });
+          return;
+        }
+
         if (!('onSelect' in item) || !item.onSelect) return;
         setSelectedIndex(null);
 
@@ -446,9 +481,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
           }
         }
 
-        if (!item.keepOpenOnSelect) handleClose();
+        if (!item.keepOpenOnSelect) handleCloseAll();
       },
-      [handleClose, setSelectedIndex],
+      [handleCloseAll, setSelectedIndex],
     );
 
     useImperativeHandle(ref, () => {
@@ -476,17 +511,23 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
         const parentRect = triggerShape;
         const docRect = document.documentElement.getBoundingClientRect();
         const spaceRight = docRect.width - parentRect.right;
+        const spaceBelow = docRect.height - parentRect.top;
+        const spaceAbove = parentRect.bottom;
         const openLeft = spaceRight < 200; // Heuristic to open on left if not enough space on right
+        // Estimate submenu height (items * ~28px + padding), flip if not enough space below
+        const estimatedHeight = items.length * 28 + 20;
+        const openUpward = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
 
         return {
-          upsideDown: false,
+          upsideDown: openUpward,
           container: {
-            top: parentRect.top,
+            top: openUpward ? undefined : parentRect.top,
+            bottom: openUpward ? docRect.height - parentRect.bottom : undefined,
             left: openLeft ? undefined : parentRect.right,
             right: openLeft ? docRect.width - parentRect.left : undefined,
           },
           menu: {
-            maxHeight: `${docRect.height - parentRect.top - 20}px`,
+            maxHeight: `${(openUpward ? spaceAbove : spaceBelow) - 20}px`,
           },
           triangle: {}, // No triangle for submenus
         };
@@ -586,7 +627,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
           clearTimeout(submenuTimeoutRef.current);
         }
 
-        if (item.submenu) {
+        if (item.submenu && !item.submenuOpenOnClick) {
           setActiveSubmenu({ item, parent });
         } else if (activeSubmenu) {
           submenuTimeoutRef.current = window.setTimeout(() => {
@@ -759,6 +800,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
               items={activeSubmenu.item.submenu ?? []}
               defaultSelectedIndex={activeSubmenu.viaKeyboard ? 0 : null}
               onClose={() => setActiveSubmenu(null)}
+              onCloseAll={handleCloseAll}
               triggerShape={submenuTriggerShape}
             />
           </div>
@@ -804,7 +846,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
 interface MenuItemProps {
   className?: string;
   item: DropdownItemDefault;
-  onSelect: (item: DropdownItemDefault) => Promise<void>;
+  onSelect: (item: DropdownItemDefault, el?: HTMLButtonElement) => Promise<void>;
   onFocus: (item: DropdownItemDefault) => void;
   onHover: (item: DropdownItemDefault, el: HTMLButtonElement) => void;
   focused: boolean;
@@ -824,7 +866,7 @@ function MenuItem({
   const [isLoading, setIsLoading] = useState(false);
   const handleClick = useCallback(async () => {
     if (item.waitForOnSelect) setIsLoading(true);
-    await onSelect?.(item);
+    await onSelect?.(item, buttonRef.current ?? undefined);
     if (item.waitForOnSelect) setIsLoading(false);
   }, [item, onSelect]);
 
@@ -854,7 +896,7 @@ function MenuItem({
   };
 
   const rightSlot = item.submenu ? (
-    <Icon icon="chevron_right" />
+    <Icon icon="chevron_right" color='secondary' />
   ) : (
     (item.rightSlot ?? <Hotkey action={item.hotKeyAction ?? null} />)
   );

src-web/components/git/GitDropdown.tsx

@@ -17,7 +17,6 @@ import type { DropdownItem } from '../core/Dropdown';
 import { Dropdown } from '../core/Dropdown';
 import { Icon } from '../core/Icon';
 import { InlineCode } from '../core/InlineCode';
-import { BranchSelectionDialog } from './BranchSelectionDialog';
 import { gitCallbacks } from './callbacks';
 import { GitCommitDialog } from './GitCommitDialog';
 import { GitRemotesDialog } from './GitRemotesDialog';
@@ -39,7 +38,18 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
   const workspace = useAtomValue(activeWorkspaceAtom);
   const [
     { status, log },
-    { branch, deleteBranch, fetchAll, mergeBranch, push, pull, checkout, init },
+    {
+      createBranch,
+      deleteBranch,
+      deleteRemoteBranch,
+      renameBranch,
+      fetchAll,
+      mergeBranch,
+      push,
+      pull,
+      checkout,
+      init,
+    },
   ] = useGit(syncDir, gitCallbacks(syncDir));
 
   const localBranches = status.data?.localBranches ?? [];
@@ -47,8 +57,6 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
   const remoteOnlyBranches = remoteBranches.filter(
     (b) => !localBranches.includes(b.replace(/^origin\//, '')),
   );
-  const currentBranch = status.data?.headRefShorthand ?? 'UNKNOWN';
-
   if (workspace == null) {
     return null;
   }
@@ -58,6 +66,13 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
     return <SetupGitDropdown workspaceId={workspace.id} initRepo={init.mutate} />;
   }
 
+  // Still loading
+  if (status.data == null) {
+    return null;
+  }
+
+  const currentBranch = status.data.headRefShorthand;
+
   const tryCheckout = (branch: string, force: boolean) => {
     checkout.mutate(
       { branch, force },
@@ -104,7 +119,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
 
   const items: DropdownItem[] = [
     {
-      label: 'View History',
+      label: 'View History...',
       hidden: (log.data ?? []).length === 0,
       leftSlot: <Icon icon="history" />,
       onSelect: async () => {
@@ -118,13 +133,13 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
       },
     },
     {
-      label: 'Manage Remotes',
+      label: 'Manage Remotes...',
       leftSlot: <Icon icon="hard_drive_download" />,
       onSelect: () => GitRemotesDialog.show(syncDir),
     },
     { type: 'separator' },
     {
-      label: 'New Branch',
+      label: 'New Branch...',
       leftSlot: <Icon icon="git_branch_plus" />,
       async onSelect() {
         const name = await showPrompt({
@@ -134,7 +149,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
         });
         if (!name) return;
 
-        await branch.mutateAsync(
+        await createBranch.mutateAsync(
           { branch: name },
           {
             disableToastError: true,
@@ -150,95 +165,6 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
         tryCheckout(name, false);
       },
     },
-    {
-      label: 'Merge Branch',
-      leftSlot: <Icon icon="merge" />,
-      hidden: localBranches.length <= 1,
-      async onSelect() {
-        showDialog({
-          id: 'git-merge',
-          title: 'Merge Branch',
-          size: 'sm',
-          description: (
-            <>
-              Select a branch to merge into <InlineCode>{currentBranch}</InlineCode>
-            </>
-          ),
-          render: ({ hide }) => (
-            <BranchSelectionDialog
-              selectText="Merge"
-              branches={localBranches.filter((b) => b !== currentBranch)}
-              onCancel={hide}
-              onSelect={async (branch) => {
-                await mergeBranch.mutateAsync(
-                  { branch, force: false },
-                  {
-                    disableToastError: true,
-                    onSettled: hide,
-                    onSuccess() {
-                      showToast({
-                        id: 'git-merged-branch',
-                        message: (
-                          <>
-                            Merged <InlineCode>{branch}</InlineCode> into{' '}
-                            <InlineCode>{currentBranch}</InlineCode>
-                          </>
-                        ),
-                      });
-                      sync({ force: true });
-                    },
-                    onError(err) {
-                      showErrorToast({
-                        id: 'git-merged-branch-error',
-                        title: 'Error merging branch',
-                        message: String(err),
-                      });
-                    },
-                  },
-                );
-              }}
-            />
-          ),
-        });
-      },
-    },
-    {
-      label: 'Delete Branch',
-      leftSlot: <Icon icon="trash" />,
-      hidden: localBranches.length <= 1,
-      color: 'danger',
-      async onSelect() {
-        if (currentBranch == null) return;
-
-        const confirmed = await showConfirmDelete({
-          id: 'git-delete-branch',
-          title: 'Delete Branch',
-          description: (
-            <>
-              Permanently delete <InlineCode>{currentBranch}</InlineCode>?
-            </>
-          ),
-        });
-        if (confirmed) {
-          await deleteBranch.mutateAsync(
-            { branch: currentBranch },
-            {
-              disableToastError: true,
-              onError(err) {
-                showErrorToast({
-                  id: 'git-delete-branch-error',
-                  title: 'Error deleting branch',
-                  message: String(err),
-                });
-              },
-              async onSuccess() {
-                await sync({ force: true });
-              },
-            },
-          );
-        }
-      },
-    },
     { type: 'separator' },
     {
       label: 'Push',
@@ -278,7 +204,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
       },
     },
     {
-      label: 'Commit',
+      label: 'Commit...',
       leftSlot: <Icon icon="git_commit_vertical" />,
       onSelect() {
         showDialog({
@@ -298,16 +224,239 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
       return {
         label: branch,
         leftSlot: <Icon icon={isCurrent ? 'check' : 'empty'} />,
-        onSelect: isCurrent ? undefined : () => tryCheckout(branch, false),
-      };
+        submenuOpenOnClick: true,
+        submenu: [
+          {
+            label: 'Checkout',
+            hidden: isCurrent,
+            onSelect: () => tryCheckout(branch, false),
+          },
+          {
+            label: (
+              <>
+                Merge into <InlineCode>{currentBranch}</InlineCode>
+              </>
+            ),
+            hidden: isCurrent,
+            async onSelect() {
+              await mergeBranch.mutateAsync(
+                { branch },
+                {
+                  disableToastError: true,
+                  onSuccess() {
+                    showToast({
+                      id: 'git-merged-branch',
+                      message: (
+                        <>
+                          Merged <InlineCode>{branch}</InlineCode> into{' '}
+                          <InlineCode>{currentBranch}</InlineCode>
+                        </>
+                      ),
+                    });
+                    sync({ force: true });
+                  },
+                  onError(err) {
+                    showErrorToast({
+                      id: 'git-merged-branch-error',
+                      title: 'Error merging branch',
+                      message: String(err),
+                    });
+                  },
+                },
+              );
+            },
+          },
+          {
+            label: 'New Branch...',
+            async onSelect() {
+              const name = await showPrompt({
+                id: 'git-new-branch-from',
+                title: 'New Branch',
+                description: (
+                  <>
+                    Create a new branch from <InlineCode>{branch}</InlineCode>
+                  </>
+                ),
+                label: 'Branch Name',
+              });
+              if (!name) return;
+
+              await createBranch.mutateAsync(
+                { branch: name, base: branch },
+                {
+                  disableToastError: true,
+                  onError: (err) => {
+                    showErrorToast({
+                      id: 'git-branch-error',
+                      title: 'Error creating branch',
+                      message: String(err),
+                    });
+                  },
+                },
+              );
+              tryCheckout(name, false);
+            },
+          },
+          {
+            label: 'Rename...',
+            async onSelect() {
+              const newName = await showPrompt({
+                id: 'git-rename-branch',
+                title: 'Rename Branch',
+                label: 'New Branch Name',
+                defaultValue: branch,
+              });
+              if (!newName || newName === branch) return;
+
+              await renameBranch.mutateAsync(
+                { oldName: branch, newName },
+                {
+                  disableToastError: true,
+                  onSuccess() {
+                    showToast({
+                      id: 'git-rename-branch-success',
+                      message: (
+                        <>
+                          Renamed <InlineCode>{branch}</InlineCode> to{' '}
+                          <InlineCode>{newName}</InlineCode>
+                        </>
+                      ),
+                      color: 'success',
+                    });
+                  },
+                  onError(err) {
+                    showErrorToast({
+                      id: 'git-rename-branch-error',
+                      title: 'Error renaming branch',
+                      message: String(err),
+                    });
+                  },
+                },
+              );
+            },
+          },
+          { type: 'separator', hidden: isCurrent },
+          {
+            label: 'Delete',
+            color: 'danger',
+            hidden: isCurrent,
+            onSelect: async () => {
+              const confirmed = await showConfirmDelete({
+                id: 'git-delete-branch',
+                title: 'Delete Branch',
+                description: (
+                  <>
+                    Permanently delete <InlineCode>{branch}</InlineCode>?
+                  </>
+                ),
+              });
+              if (!confirmed) {
+                return;
+              }
+
+              const result = await deleteBranch.mutateAsync(
+                { branch },
+                {
+                  disableToastError: true,
+                  onError(err) {
+                    showErrorToast({
+                      id: 'git-delete-branch-error',
+                      title: 'Error deleting branch',
+                      message: String(err),
+                    });
+                  },
+                },
+              );
+
+              if (result.type === 'not_fully_merged') {
+                const confirmed = await showConfirm({
+                  id: 'force-branch-delete',
+                  title: 'Branch not fully merged',
+                  description: (
+                    <>
+                      <p>
+                        Branch <InlineCode>{branch}</InlineCode> is not fully merged.
+                      </p>
+                      <p>Do you want to delete it anyway?</p>
+                    </>
+                  ),
+                });
+                if (confirmed) {
+                  await deleteBranch.mutateAsync(
+                    { branch, force: true },
+                    {
+                      disableToastError: true,
+                      onError(err) {
+                        showErrorToast({
+                          id: 'git-force-delete-branch-error',
+                          title: 'Error force deleting branch',
+                          message: String(err),
+                        });
+                      },
+                    },
+                  );
+                }
+              }
+            },
+          },
+        ],
+      } satisfies DropdownItem;
     }),
     ...remoteOnlyBranches.map((branch) => {
       const isCurrent = currentBranch === branch;
       return {
         label: branch,
         leftSlot: <Icon icon={isCurrent ? 'check' : 'empty'} />,
-        onSelect: isCurrent ? undefined : () => tryCheckout(branch, false),
-      };
+        submenuOpenOnClick: true,
+        submenu: [
+          {
+            label: 'Checkout',
+            hidden: isCurrent,
+            onSelect: () => tryCheckout(branch, false),
+          },
+          {
+            label: 'Delete',
+            color: 'danger',
+            async onSelect() {
+              const confirmed = await showConfirmDelete({
+                id: 'git-delete-remote-branch',
+                title: 'Delete Remote Branch',
+                description: (
+                  <>
+                    Permanently delete <InlineCode>{branch}</InlineCode> from the remote?
+                  </>
+                ),
+              });
+              if (!confirmed) return;
+
+              await deleteRemoteBranch.mutateAsync(
+                { branch },
+                {
+                  disableToastError: true,
+                  onSuccess() {
+                    showToast({
+                      id: 'git-delete-remote-branch-success',
+                      message: (
+                        <>
+                          Deleted remote branch <InlineCode>{branch}</InlineCode>
+                        </>
+                      ),
+                      color: 'success',
+                    });
+                  },
+                  onError(err) {
+                    showErrorToast({
+                      id: 'git-delete-remote-branch-error',
+                      title: 'Error deleting remote branch',
+                      message: String(err),
+                    });
+                  },
+                },
+              );
+            },
+          },
+        ],
+      } satisfies DropdownItem;
     }),
   ];
 

src-web/components/git/callbacks.tsx

@@ -1,7 +1,5 @@
 import type { GitCallbacks } from '@yaakapp-internal/git';
-import { showPromptForm } from '../../lib/prompt-form';
-import { Banner } from '../core/Banner';
-import { InlineCode } from '../core/InlineCode';
+import { promptCredentials } from './credentials';
 import { addGitRemote } from './showAddRemoteDialog';
 
 export function gitCallbacks(dir: string): GitCallbacks {
@@ -9,40 +7,10 @@ export function gitCallbacks(dir: string): GitCallbacks {
     addRemote: async () => {
       return addGitRemote(dir);
     },
-    promptCredentials: async ({ url: remoteUrl, error }) => {
-      const isGitHub = /github\.com/i.test(remoteUrl);
-      const userLabel = isGitHub ? 'GitHub Username' : 'Username';
-      const passLabel = isGitHub ? 'GitHub Personal Access Token' : 'Password / Token';
-      const userDescription = isGitHub ? 'Use your GitHub username (not your email).' : undefined;
-      const passDescription = isGitHub
-        ? 'GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported.'
-        : 'Enter your password or access token for this Git server.';
-      const r = await showPromptForm({
-        id: 'git-credentials',
-        title: 'Credentials Required',
-        description: error ? (
-          <Banner color="danger">{error}</Banner>
-        ) : (
-          <>
-            Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
-          </>
-        ),
-        inputs: [
-          { type: 'text', name: 'username', label: userLabel, description: userDescription },
-          {
-            type: 'text',
-            name: 'password',
-            label: passLabel,
-            description: passDescription,
-            password: true,
-          },
-        ],
-      });
-      if (r == null) throw new Error('Cancelled credentials prompt');
-
-      const username = String(r.username || '');
-      const password = String(r.password || '');
-      return { username, password };
+    promptCredentials: async ({ url, error }) => {
+      const creds = await promptCredentials({ url, error });
+      if (creds == null) throw new Error('Cancelled credentials prompt');
+      return creds;
     },
   };
 }

src-web/components/git/credentials.tsx

@@ -0,0 +1,50 @@
+import { showPromptForm } from '../../lib/prompt-form';
+import { Banner } from '../core/Banner';
+import { InlineCode } from '../core/InlineCode';
+
+export interface GitCredentials {
+  username: string;
+  password: string;
+}
+
+export async function promptCredentials({
+  url: remoteUrl,
+  error,
+}: {
+  url: string;
+  error: string | null;
+}): Promise<GitCredentials | null> {
+  const isGitHub = /github\.com/i.test(remoteUrl);
+  const userLabel = isGitHub ? 'GitHub Username' : 'Username';
+  const passLabel = isGitHub ? 'GitHub Personal Access Token' : 'Password / Token';
+  const userDescription = isGitHub ? 'Use your GitHub username (not your email).' : undefined;
+  const passDescription = isGitHub
+    ? 'GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported.'
+    : 'Enter your password or access token for this Git server.';
+  const r = await showPromptForm({
+    id: 'git-credentials',
+    title: 'Credentials Required',
+    description: error ? (
+      <Banner color="danger">{error}</Banner>
+    ) : (
+      <>
+        Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
+      </>
+    ),
+    inputs: [
+      { type: 'text', name: 'username', label: userLabel, description: userDescription },
+      {
+        type: 'text',
+        name: 'password',
+        label: passLabel,
+        description: passDescription,
+        password: true,
+      },
+    ],
+  });
+  if (r == null) return null;
+
+  const username = String(r.username || '');
+  const password = String(r.password || '');
+  return { username, password };
+}