slightly better sync, recursive rebase, list, and loading component

src/commands/changes/commit.tsx

@@ -58,6 +58,7 @@ const DoChangesCommit = ({
     return (
         <RecursiveRebaser
             baseBranch={currentBranch}
+            endBranch={currentBranch}
             successStateNode={
                 <Text color="green">Committed changes successfully</Text>
             }

src/commands/list.tsx

@@ -1,67 +1,50 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { CommandConfig } from '../types.js';
 import { ForegroundColorName } from 'chalk';
 import { LiteralUnion } from 'type-fest';
 import { Loading } from '../components/loading.js';
 import { SelectRootBranch } from '../components/select-root-branch.js';
 import { treeToParentChildRecord } from '../utils/tree-helpers.js';
+import { useAsyncValue } from '../hooks/use-async-value.js';
+import { useGit } from '../hooks/use-git.js';
 import { useGitHelpers } from '../hooks/use-git-helpers.js';
 import { useTree } from '../hooks/use-tree.js';
 
-interface TextStyle {
-    color: LiteralUnion<ForegroundColorName, string>;
-    dimColor?: boolean;
-}
-
-const styleMap: TextStyle[] = [
-    { color: 'cyan' },
-    { color: 'blue' },
-    { color: 'yellow' },
-    { color: 'magentaBright' },
-    { color: 'green' },
-    { color: 'blueBright' },
-    { color: 'yellowBright' },
-    { color: 'magenta' },
-    { color: 'cyanBright' },
-];
-
-const DisplayElementText = ({ elements }: { elements: DisplayElement[] }) => {
-    return (
-        <>
-            {elements.map((element, index) => {
-                const style = styleMap[index % styleMap.length] as TextStyle;
-                return (
-                    <Text
-                        key={`element-${index}`}
-                        color={style.color}
-                        dimColor={style.dimColor}
-                    >
-                        {element.symbols}
-                    </Text>
-                );
-            })}
-        </>
-    );
-};
-
-const Spaces = ({ count }: { count: number }) => {
-    return <>{Array(count).fill('  ')}</>;
-};
-
 export const List = () => {
+    const git = useGit();
     const { currentBranch } = useGitHelpers();
-    const { get, rootBranchName } = useTree();
+    const { get, rootBranchName, currentTree } = useTree();
     const treeParentChildRecord = useMemo(
         () => treeToParentChildRecord(get()),
         []
     );
 
+    const getBranchNeedsRebaseRecord = useCallback(async () => {
+        const record: Record<string, boolean> = {};
+        await Promise.all(
+            currentTree.map(async (_node) => {
+                if (!_node.parent) return null;
+
+                record[_node.key] = await git.needsRebaseOnto({
+                    branch: _node.key,
+                    ontoBranch: _node.parent,
+                });
+                return null;
+            })
+        );
+        return record;
+    }, [currentTree, git.needsRebaseOnto]);
+
+    const branchNeedsRebaseRecord = useAsyncValue({
+        getValue: getBranchNeedsRebaseRecord,
+    });
+
     if (!rootBranchName) {
         return <SelectRootBranch />;
     }
 
-    if (currentBranch.isLoading) {
+    if (currentBranch.isLoading || branchNeedsRebaseRecord.isLoading) {
         return <Loading />;
     }
 
@@ -90,13 +73,14 @@ export const List = () => {
                             ]}
                         />
                         <Spaces
-                            count={
-                                maxWidth + 2 - node.width + (isCurrent ? 0 : 2)
-                            }
+                            count={maxWidth - node.width + (isCurrent ? 0 : 2)}
                         />
                         <Text color={style.color} dimColor={style.dimColor}>
                             {isCurrent ? ' 👉 ' : ''}
                             {node.name}{' '}
+                            {branchNeedsRebaseRecord.value?.[node.name] && (
+                                <Text color="white">(Needs rebase)</Text>
+                            )}
                         </Text>
                     </Text>
                 );
@@ -105,6 +89,46 @@ export const List = () => {
     );
 };
 
+interface TextStyle {
+    color: LiteralUnion<ForegroundColorName, string>;
+    dimColor?: boolean;
+}
+
+const styleMap: TextStyle[] = [
+    { color: 'cyan' },
+    { color: 'blue' },
+    { color: 'yellow' },
+    { color: 'magentaBright' },
+    { color: 'green' },
+    { color: 'blueBright' },
+    { color: 'yellowBright' },
+    { color: 'magenta' },
+    { color: 'cyanBright' },
+];
+
+const DisplayElementText = ({ elements }: { elements: DisplayElement[] }) => {
+    return (
+        <>
+            {elements.map((element, index) => {
+                const style = styleMap[index % styleMap.length] as TextStyle;
+                return (
+                    <Text
+                        key={`element-${index}`}
+                        color={style.color}
+                        dimColor={style.dimColor}
+                    >
+                        {element.symbols}
+                    </Text>
+                );
+            })}
+        </>
+    );
+};
+
+const Spaces = ({ count }: { count: number }) => {
+    return <>{Array(count).fill('  ')}</>;
+};
+
 interface DisplayElement {
     symbols: string;
 }

src/commands/sync.tsx

@@ -1,27 +1,90 @@
-import React from 'react';
+import ErrorDisplay from '../components/error-display.js';
+import React, { useCallback } from 'react';
+import { Action, useAction } from '../hooks/use-action.js';
 import { CommandConfig, CommandProps } from '../types.js';
+import { Loading } from '../components/loading.js';
 import { RecursiveRebaser } from '../components/recursive-rebaser.js';
 import { SelectRootBranch } from '../components/select-root-branch.js';
 import { Text } from 'ink';
+import { useGit } from '../hooks/use-git.js';
+import { useGitHelpers } from '../hooks/use-git-helpers.js';
 import { useTree } from '../hooks/use-tree.js';
 
 const Sync = (_: CommandProps) => {
+    const { currentBranch } = useGitHelpers();
     const { rootBranchName } = useTree();
 
     if (!rootBranchName) {
         return <SelectRootBranch />;
     }
 
-    // todo: prompt to delete branches
+    if (currentBranch.isLoading) {
+        return <Loading />;
+    }
+
+    return (
+        <DoSync
+            rootBranchName={rootBranchName}
+            currentBranchName={currentBranch.value}
+        />
+    );
+};
+
+const DoSync = ({
+    rootBranchName,
+    currentBranchName,
+}: {
+    rootBranchName: string;
+    currentBranchName: string;
+}) => {
+    const result = useSyncAction({
+        rootBranchName,
+        currentBranchName,
+    });
+
+    if (result.isError) {
+        return <ErrorDisplay error={result.error} />;
+    }
+
+    if (result.isLoading) {
+        return <Loading />;
+    }
 
+    // todo: prompt to delete branches
     return (
         <RecursiveRebaser
             baseBranch={rootBranchName}
+            endBranch={currentBranchName}
             successStateNode={<Text color="green">Synced successfully</Text>}
         />
     );
 };
 
+type UseSyncActionResult = Action;
+const useSyncAction = ({
+    currentBranchName,
+    rootBranchName,
+}: {
+    currentBranchName: string;
+    rootBranchName: string;
+}): UseSyncActionResult => {
+    const git = useGit();
+
+    const performAction = useCallback(async () => {
+        await git.checkout(rootBranchName);
+        await git.pull();
+        await git.checkout(currentBranchName);
+    }, [git]);
+
+    const action = useAction({
+        asyncAction: performAction,
+    });
+
+    return {
+        ...action,
+    } as UseSyncActionResult;
+};
+
 export const syncConfig: CommandConfig = {
     description: 'Sync your local changes with the remote server',
     usage: 'sync',

src/components/loading.tsx

@@ -1,6 +1,44 @@
-import React from 'react';
-import { Text } from 'ink';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Text } from 'ink';
 
 export const Loading = () => {
-    return <Text color="cyan">Loading...</Text>;
+    return <InfiniteLoadingAnimation />;
+};
+
+const WIDTH = 3;
+const SYMBOLS = ['◔', '◑', '◕', '●'];
+
+export const InfiniteLoadingAnimation = () => {
+    const [barStartIndex, setBarStartIndex] = useState(0);
+    const [symbolIndex, setSymbolIndex] = useState(0);
+
+    useEffect(() => {
+        const loadingBarInterval = setInterval(() => {
+            setBarStartIndex((prev) => (prev + 1) % WIDTH);
+        }, 150);
+
+        const symbolInterval = setInterval(() => {
+            setSymbolIndex((prev) => (prev + 1) % SYMBOLS.length);
+        }, 200);
+
+        return () => {
+            clearInterval(loadingBarInterval);
+            clearInterval(symbolInterval);
+        };
+    }, []);
+
+    // alternative loading bar concept
+    const currentBar = useMemo(() => {
+        const blocks = Array(WIDTH).fill('█') as string[];
+        blocks.splice(barStartIndex, 1, ' ');
+        return blocks;
+    }, [barStartIndex]);
+
+    return (
+        <Box gap={1}>
+            <Text color="cyan">{SYMBOLS[symbolIndex]} |</Text>
+            {/*<Text color="cyan">{currentBar.join('')}</Text>*/}
+            <Text color="cyan">Loading</Text>
+        </Box>
+    );
 };

src/components/rebase-conflict.tsx

@@ -15,6 +15,9 @@ export const RebaseConflict = () => {
                 3. Continue the rebase with{' '}
                 <Text color="cyan">gum continue</Text>
             </Text>
+            <Text color="yellow">
+                OR - Cancel with <Text color="cyan">git rebase --abort</Text>
+            </Text>
         </Box>
     );
 };

src/components/recursive-rebaser.tsx

@@ -10,12 +10,14 @@ import { RebaseConflict } from './rebase-conflict.js';
 
 export const RecursiveRebaser = ({
     baseBranch,
+    endBranch,
     successStateNode,
 }: {
     baseBranch: string;
+    endBranch: string;
     successStateNode: ReactNode;
 }) => {
-    const result = useRecursiveRebase({ baseBranch });
+    const result = useRecursiveRebase({ baseBranch, endBranch });
 
     if (result.isError) {
         return <ErrorDisplay error={result.error} />;

src/hooks/use-recursive-rebase.tsx

@@ -16,8 +16,10 @@ export type RebaseActionLog = RebaseAction & {
 
 export const useRecursiveRebase = ({
     baseBranch,
+    endBranch,
 }: {
     baseBranch: string;
+    endBranch: string;
 }): UseRecursiveRebaseResult => {
     const git = useGit();
     const { currentTree } = useTree();
@@ -31,6 +33,7 @@ export const useRecursiveRebase = ({
             await recursiveRebase({
                 tree: currentTree,
                 baseBranch: baseBranch,
+                endBranch: endBranch,
                 events: {
                     rebased: (action, state) => {
                         if (state === 'STARTED') {