yaak/src-web/components/git/GitDropdown.tsx

import { useGit } from '@yaakapp-internal/git';
import type { WorkspaceMeta } from '@yaakapp-internal/models';
import classNames from 'classnames';
import { useAtomValue } from 'jotai';
import type { HTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { openWorkspaceSettings } from '../../commands/openWorkspaceSettings';
import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from '../../hooks/useActiveWorkspace';
import { useKeyValue } from '../../hooks/useKeyValue';
import { sync } from '../../init/sync';
import { showConfirm, showConfirmDelete } from '../../lib/confirm';
import { showDialog } from '../../lib/dialog';
import { showPrompt } from '../../lib/prompt';
import { showErrorToast, showToast } from '../../lib/toast';
import { Banner } from '../core/Banner';
import type { DropdownItem } from '../core/Dropdown';
import { Dropdown } from '../core/Dropdown';
import { Icon } from '../core/Icon';
import { InlineCode } from '../core/InlineCode';
import { gitCallbacks } from './callbacks';
import { GitCommitDialog } from './GitCommitDialog';
import { GitRemotesDialog } from './GitRemotesDialog';
import { handlePullResult } from './git-util';
import { HistoryDialog } from './HistoryDialog';

export function GitDropdown() {
  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
  if (workspaceMeta == null) return null;

  if (workspaceMeta.settingSyncDir == null) {
    return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
  }

  return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
}

function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
  const workspace = useAtomValue(activeWorkspaceAtom);
  const [
    { status, log },
    {
      createBranch,
      deleteBranch,
      deleteRemoteBranch,
      renameBranch,
      fetchAll,
      mergeBranch,
      push,
      pull,
      checkout,
      init,
    },
  ] = useGit(syncDir, gitCallbacks(syncDir));

  const localBranches = status.data?.localBranches ?? [];
  const remoteBranches = status.data?.remoteBranches ?? [];
  const remoteOnlyBranches = remoteBranches.filter(
    (b) => !localBranches.includes(b.replace(/^origin\//, '')),
  );
  if (workspace == null) {
    return null;
  }

  const noRepo = status.error?.includes('not found');
  if (noRepo) {
    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 },
      {
        disableToastError: true,
        async onError(err) {
          if (!force) {
            // Checkout failed so ask user if they want to force it
            const forceCheckout = await showConfirm({
              id: 'git-force-checkout',
              title: 'Conflicts Detected',
              description:
                'Your branch has conflicts. Either make a commit or force checkout to discard changes.',
              confirmText: 'Force Checkout',
              color: 'warning',
            });
            if (forceCheckout) {
              tryCheckout(branch, true);
            }
          } else {
            // Checkout failed
            showErrorToast({
              id: 'git-checkout-error',
              title: 'Error checking out branch',
              message: String(err),
            });
          }
        },
        async onSuccess(branchName) {
          showToast({
            id: 'git-checkout-success',
            message: (
              <>
                Switched branch <InlineCode>{branchName}</InlineCode>
              </>
            ),
            color: 'success',
          });
          await sync({ force: true });
        },
      },
    );
  };

  const items: DropdownItem[] = [
    {
      label: 'View History...',
      hidden: (log.data ?? []).length === 0,
      leftSlot: <Icon icon="history" />,
      onSelect: async () => {
        showDialog({
          id: 'git-history',
          size: 'md',
          title: 'Commit History',
          noPadding: true,
          render: () => <HistoryDialog log={log.data ?? []} />,
        });
      },
    },
    {
      label: 'Manage Remotes...',
      leftSlot: <Icon icon="hard_drive_download" />,
      onSelect: () => GitRemotesDialog.show(syncDir),
    },
    { type: 'separator' },
    {
      label: 'New Branch...',
      leftSlot: <Icon icon="git_branch_plus" />,
      async onSelect() {
        const name = await showPrompt({
          id: 'git-branch-name',
          title: 'Create Branch',
          label: 'Branch Name',
        });
        if (!name) return;

        await createBranch.mutateAsync(
          { branch: name },
          {
            disableToastError: true,
            onError: (err) => {
              showErrorToast({
                id: 'git-branch-error',
                title: 'Error creating branch',
                message: String(err),
              });
            },
          },
        );
        tryCheckout(name, false);
      },
    },
    { type: 'separator' },
    {
      label: 'Push',
      leftSlot: <Icon icon="arrow_up_from_line" />,
      waitForOnSelect: true,
      async onSelect() {
        await push.mutateAsync(undefined, {
          disableToastError: true,
          onSuccess: handlePullResult,
          onError(err) {
            showErrorToast({
              id: 'git-push-error',
              title: 'Error pushing changes',
              message: String(err),
            });
          },
        });
      },
    },
    {
      label: 'Pull',
      hidden: (status.data?.origins ?? []).length === 0,
      leftSlot: <Icon icon="arrow_down_to_line" />,
      waitForOnSelect: true,
      async onSelect() {
        await pull.mutateAsync(undefined, {
          disableToastError: true,
          onSuccess: handlePullResult,
          onError(err) {
            showErrorToast({
              id: 'git-pull-error',
              title: 'Error pulling changes',
              message: String(err),
            });
          },
        });
      },
    },
    {
      label: 'Commit...',
      leftSlot: <Icon icon="git_commit_vertical" />,
      onSelect() {
        showDialog({
          id: 'commit',
          title: 'Commit Changes',
          size: 'full',
          className: '!max-h-[min(80vh,40rem)] !max-w-[min(50rem,90vw)]',
          render: ({ hide }) => (
            <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
          ),
        });
      },
    },
    { type: 'separator', label: 'Branches', hidden: localBranches.length < 1 },
    ...localBranches.map((branch) => {
      const isCurrent = currentBranch === branch;
      return {
        label: branch,
        leftSlot: <Icon icon={isCurrent ? 'check' : 'empty'} />,
        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'} />,
        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;
    }),
  ];

  return (
    <Dropdown fullWidth items={items} onOpen={fetchAll.mutate}>
      <GitMenuButton>
        <InlineCode>{currentBranch}</InlineCode>
        <Icon icon="git_branch" size="sm" />
      </GitMenuButton>
    </Dropdown>
  );
}

const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
  function GitMenuButton({ className, ...props }: HTMLAttributes<HTMLButtonElement>, ref) {
    return (
      <button
        ref={ref}
        className={classNames(
          className,
          'px-3 h-md border-t border-border flex items-center justify-between text-text-subtle outline-none focus-visible:bg-surface-highlight',
        )}
        {...props}
      />
    );
  },
);

function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
    key: 'setup_sync',
    fallback: {},
  });

  if (hidden == null || hidden[workspaceMeta.workspaceId]) {
    return null;
  }

  const banner = (
    <Banner color="info">
      When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
      Git collaboration.
    </Banner>
  );

  return (
    <Dropdown
      fullWidth
      items={[
        {
          type: 'content',
          label: banner,
        },
        {
          color: 'success',
          label: 'Open Workspace Settings',
          leftSlot: <Icon icon="settings" />,
          onSelect: () => openWorkspaceSettings('data'),
        },
        { type: 'separator' },
        {
          label: 'Hide This Message',
          leftSlot: <Icon icon="eye_closed" />,
          async onSelect() {
            const confirmed = await showConfirm({
              id: 'hide-sync-menu-prompt',
              title: 'Hide Setup Message',
              description: 'You can configure filesystem sync or Git it in the workspace settings',
            });
            if (confirmed) {
              await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
            }
          },
        },
      ]}
    >
      <GitMenuButton>
        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
          <Icon icon="wrench" />
          <div className="truncate">Setup FS Sync or Git</div>
        </div>
      </GitMenuButton>
    </Dropdown>
  );
}

function SetupGitDropdown({
  workspaceId,
  initRepo,
}: {
  workspaceId: string;
  initRepo: () => void;
}) {
  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
    key: 'setup_git_repo',
    fallback: {},
  });

  if (hidden == null || hidden[workspaceId]) {
    return null;
  }

  const banner = <Banner color="info">Initialize local repo to start versioning with Git</Banner>;

  return (
    <Dropdown
      fullWidth
      items={[
        { type: 'content', label: banner },
        {
          label: 'Initialize Git Repo',
          leftSlot: <Icon icon="magic_wand" />,
          onSelect: initRepo,
        },
        { type: 'separator' },
        {
          label: 'Hide This Message',
          leftSlot: <Icon icon="eye_closed" />,
          async onSelect() {
            const confirmed = await showConfirm({
              id: 'hide-git-init-prompt',
              title: 'Hide Git Setup',
              description: 'You can initialize a git repo outside of Yaak to bring this back',
            });
            if (confirmed) {
              await setHidden((prev) => ({ ...prev, [workspaceId]: true }));
            }
          },
        },
      ]}
    >
      <GitMenuButton>
        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
          <Icon icon="folder_git" />
          <div className="truncate">Setup Git</div>
        </div>
      </GitMenuButton>
    </Dropdown>
  );
}