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
@@ -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,
+      ]}
+    />
+  );
+}