feat: add agent delete command and bulk tab close operations

2026-03-07 12:32:49 +07:00
parent 6b51088f39
commit 1d1c7058f1
21 changed files with 783 additions and 86 deletions
@@ -49,6 +49,7 @@ import {
  ContextMenuTrigger,
  useContextMenu,
 } from '@/components/ui/context-menu'
+import { SyncedLoader } from '@/components/synced-loader'
 import { useToast } from '@/contexts/toast-context'
 import { useCheckoutGitActionsStore } from '@/stores/checkout-git-actions-store'
 import { buildSidebarShortcutModel } from '@/utils/sidebar-shortcuts'
@@ -56,6 +57,7 @@ import { hasVisibleOrderChanged, mergeWithRemainder } from '@/utils/sidebar-reor
 import { decideLongPressMove } from '@/utils/sidebar-gesture-arbitration'
 import { confirmDialog } from '@/utils/confirm-dialog'
 import { projectIconPlaceholderLabelFromDisplayName } from '@/utils/project-display-name'
+import { shouldRenderSyncedStatusLoader } from '@/utils/status-loader'

 const PASEO_WORKTREE_PATH_MARKER = '/.paseo/worktrees'

@@ -144,11 +146,14 @@ function WorkspaceStatusIndicator({
 }) {
  const { theme } = useUnistyles()
  const color = resolveStatusDotColor({ theme, bucket })
+  const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket })

  return (
    <View style={styles.workspaceStatusDot}>
      {loading ? (
        <ActivityIndicator size={8} color={theme.colors.foregroundMuted} />
+      ) : shouldShowSyncedLoader ? (
+        <SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
      ) : (
        <View style={[styles.workspaceStatusDotFill, { backgroundColor: color }]} />
      )}
@@ -1340,17 +1345,16 @@ const styles = StyleSheet.create((theme) => ({
    position: 'relative',
  },
  workspaceStatusDot: {
-    width: 8,
-    height: 8,
+    width: 16,
+    height: 16,
    borderRadius: theme.borderRadius.full,
    flexShrink: 0,
    alignItems: 'center',
    justifyContent: 'center',
-    overflow: 'hidden',
  },
  workspaceStatusDotFill: {
-    width: 8,
-    height: 8,
+    width: 7,
+    height: 7,
    borderRadius: theme.borderRadius.full,
  },
  workspaceArchivingOverlay: {
@@ -1371,6 +1375,7 @@ const styles = StyleSheet.create((theme) => ({
  workspaceBranchText: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.sm,
+    lineHeight: 20,
    opacity: 0.76,
    flex: 1,
    minWidth: 0,
@@ -0,0 +1,170 @@
+import { View } from "react-native";
+import Animated, {
+  Easing,
+  makeMutable,
+  type SharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { useEffect } from "react";
+
+const SYNCED_LOADER_DURATION_MS = 950;
+const SYNCED_LOADER_EPOCH_MS = 0;
+const DOT_SEQUENCE = [0, 1, 3, 5, 4, 2] as const;
+const DOT_COUNT = DOT_SEQUENCE.length;
+const GRID_ROWS = 3;
+const GRID_COLUMNS = 2;
+const SNAKE_SEGMENT_OFFSETS = [0, -1, -2, -3, -4] as const;
+const SNAKE_OPACITIES = [1, 0.72, 0.46, 0.22, 0] as const;
+const sharedStepProgress = makeMutable(0);
+let sharedLoopStarted = false;
+
+function ensureSharedStepLoopStarted(): void {
+  if (sharedLoopStarted) {
+    return;
+  }
+
+  sharedLoopStarted = true;
+  const elapsedMs =
+    (Date.now() - SYNCED_LOADER_EPOCH_MS) % SYNCED_LOADER_DURATION_MS;
+  sharedStepProgress.value = (elapsedMs / SYNCED_LOADER_DURATION_MS) * DOT_COUNT;
+  sharedStepProgress.value = withTiming(
+    DOT_COUNT,
+    {
+      duration: Math.max(1, Math.round(SYNCED_LOADER_DURATION_MS - elapsedMs)),
+      easing: Easing.linear,
+    },
+    (finished) => {
+      if (!finished) {
+        sharedLoopStarted = false;
+        return;
+      }
+      sharedStepProgress.value = 0;
+      sharedStepProgress.value = withRepeat(
+        withTiming(DOT_COUNT, {
+          duration: SYNCED_LOADER_DURATION_MS,
+          easing: Easing.linear,
+        }),
+        -1,
+        false
+      );
+    }
+  );
+}
+
+export function SyncedLoader({
+  size = 10,
+  color,
+}: {
+  size?: number;
+  color: string;
+}) {
+  useEffect(() => {
+    ensureSharedStepLoopStarted();
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: 1,
+  }));
+
+  const gap = Math.max(1, Math.round(size * 0.12));
+  const dotSize = Math.max(2, Math.floor((size - gap * 2) / 3));
+  const gridWidth = dotSize * 2 + gap;
+  const gridHeight = dotSize * 3 + gap * 2;
+
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Animated.View
+        style={[
+          animatedStyle,
+          {
+            width: gridWidth,
+            height: gridHeight,
+          },
+        ]}
+      >
+        {Array.from({ length: DOT_COUNT }).map((_, dotIndex) => {
+          const rowIndex = Math.floor(dotIndex / GRID_COLUMNS);
+          const columnIndex = dotIndex % GRID_COLUMNS;
+          const sequenceIndex = DOT_SEQUENCE.indexOf(
+            dotIndex as (typeof DOT_SEQUENCE)[number]
+          );
+
+          return (
+            <SpinnerDot
+              key={dotIndex}
+              color={color}
+              dotSize={dotSize}
+              sequenceIndex={sequenceIndex}
+              progress={sharedStepProgress}
+              style={{
+                position: "absolute",
+                left: columnIndex * (dotSize + gap),
+                top: rowIndex * (dotSize + gap),
+              }}
+            />
+          );
+        })}
+      </Animated.View>
+    </View>
+  );
+}
+
+function SpinnerDot({
+  color,
+  dotSize,
+  sequenceIndex,
+  progress,
+  style,
+}: {
+  color: string;
+  dotSize: number;
+  sequenceIndex: number;
+  progress: SharedValue<number>;
+  style: {
+    position: "absolute";
+    left: number;
+    top: number;
+  };
+}) {
+  const animatedStyle = useAnimatedStyle(() => {
+    const headIndex = Math.floor(progress.value) % DOT_COUNT;
+    let opacity = 0;
+
+    for (let segmentIndex = 0; segmentIndex < SNAKE_SEGMENT_OFFSETS.length; segmentIndex += 1) {
+      const activeSequenceIndex =
+        (headIndex + SNAKE_SEGMENT_OFFSETS[segmentIndex] + DOT_COUNT) % DOT_COUNT;
+      if (sequenceIndex === activeSequenceIndex) {
+        opacity = SNAKE_OPACITIES[segmentIndex] ?? 0;
+        break;
+      }
+    }
+
+    return {
+      opacity,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        animatedStyle,
+        {
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+        },
+        style,
+      ]}
+    />
+  );
+}