paseo-kanban 0.1.0

package/client/kanban-lane.tsx

@@ -0,0 +1,240 @@
+import { useMemo, useEffect, Fragment, memo } from "react";
+import { View, Text, ScrollView, Pressable, StyleSheet, PanResponder } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { KanbanLane, KanbanTask } from "../shared/kanban";
+import { KanbanCard, KanbanDropSpacer } from "./kanban-card";
+import { getProjectDisplayName, type ProjectItem } from "./use-projects";
+import type { LaneDragBinding } from "./kanban-drag";
+import { useI18n } from "./i18n";
+
+type PluginTheme = PluginSurfaceProps["theme"];
+
+export interface KanbanLaneViewProps {
+  lane: KanbanLane;
+  tasks: KanbanTask[];
+  projects: ProjectItem[];
+  theme: PluginTheme;
+  layout: { compact: boolean; platform: "ios" | "android" | "web" };
+  dragBinding: LaneDragBinding;
+  onAddTask: (laneId: string) => void;
+  onManageLane: (laneId: string) => void;
+  onSelectTask: (task: KanbanTask) => void;
+  resolveProjectName?: (projectId: string | null) => string | null;
+}
+
+function KanbanLaneViewInner({
+  lane,
+  tasks,
+  projects,
+  theme,
+  layout,
+  dragBinding,
+  onAddTask,
+  onManageLane,
+  onSelectTask,
+  resolveProjectName,
+}: KanbanLaneViewProps) {
+  const { t } = useI18n();
+  const {
+    isHovered,
+    targetIndex,
+    isTaskDragging,
+    draggedCardHeight,
+    registerLaneLayout,
+    registerCardsViewport,
+    handleLaneScroll,
+    setDropSpacerY,
+    setLaneCardOrder,
+    bindCard,
+  } = dragBinding;
+
+  // Sync card order to controller whenever tasks in this lane change
+  useEffect(() => {
+    setLaneCardOrder?.(lane.id, tasks.map((t) => t.id));
+  }, [lane.id, tasks, setLaneCardOrder]);
+
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        laneColumn: {
+          width: layout.compact ? 270 : 300,
+          backgroundColor: theme.colors.surface1,
+          borderColor: theme.colors.border,
+          borderWidth: 2,
+          borderRadius: 10,
+          maxHeight: "100%",
+          padding: 10,
+          gap: 10,
+          userSelect: "none",
+        },
+        laneColumnHovered: {
+          borderColor: theme.colors.accent,
+          backgroundColor: theme.colors.surface2,
+        },
+        laneHeader: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingBottom: 8,
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+        },
+        laneTitleGroup: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 6,
+          flex: 1,
+        },
+        laneTitleText: {
+          fontSize: 14,
+          fontWeight: "700",
+          color: theme.colors.foreground,
+          userSelect: "none",
+        },
+        laneCountBadge: {
+          backgroundColor: theme.colors.surface2,
+          paddingHorizontal: 6,
+          paddingVertical: 2,
+          borderRadius: 10,
+        },
+        laneCountText: {
+          fontSize: 11,
+          color: theme.colors.foregroundMuted,
+          fontWeight: "600",
+        },
+        laneHeaderActions: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 4,
+        },
+        laneHeaderBtn: {
+          paddingHorizontal: 6,
+          paddingVertical: 3,
+          borderRadius: 4,
+          backgroundColor: theme.colors.surface2,
+        },
+        laneHeaderBtnText: {
+          fontSize: 11,
+          color: theme.colors.foreground,
+        },
+        cardsScroll: {
+          flex: 1,
+        },
+        cardsList: {
+          gap: 8,
+          paddingBottom: 8,
+        },
+        emptyLanePlaceholder: {
+          paddingVertical: 24,
+          alignItems: "center",
+          justifyContent: "center",
+          borderStyle: "dashed",
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: 8,
+          marginVertical: 6,
+        },
+        emptyLaneText: {
+          fontSize: 12,
+          color: theme.colors.foregroundMuted,
+          textAlign: "center",
+          paddingHorizontal: 12,
+          userSelect: "none",
+        },
+      }),
+    [theme, layout.compact]
+  );
+
+  const dropBeforeTaskId = isHovered
+    ? tasks.filter((task) => !isTaskDragging(task.id))[targetIndex]?.id
+    : undefined;
+
+  return (
+    <View
+      style={[styles.laneColumn, isHovered && styles.laneColumnHovered]}
+      onLayout={(e) => registerLaneLayout(e.nativeEvent.layout)}
+    >
+      {/* Lane Header */}
+      <View style={styles.laneHeader}>
+        <View style={styles.laneTitleGroup}>
+          <Text style={styles.laneTitleText} numberOfLines={1}>
+            {lane.title}
+          </Text>
+          <View style={styles.laneCountBadge}>
+            <Text style={styles.laneCountText}>{tasks.length}</Text>
+          </View>
+        </View>
+
+        <View style={styles.laneHeaderActions}>
+          <Pressable
+            onPress={() => onAddTask(lane.id)}
+            style={styles.laneHeaderBtn}
+            hitSlop={6}
+          >
+            <Text style={styles.laneHeaderBtnText}>{t("lane.add")}</Text>
+          </Pressable>
+
+          <Pressable
+            onPress={() => onManageLane(lane.id)}
+            style={styles.laneHeaderBtn}
+            hitSlop={6}
+          >
+            <Text style={styles.laneHeaderBtnText}>{t("lane.manage")}</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      {/* Cards Viewport */}
+      <ScrollView
+        style={styles.cardsScroll}
+        showsVerticalScrollIndicator={false}
+        onLayout={(e) => registerCardsViewport(e.nativeEvent.layout)}
+        onScroll={(e) => handleLaneScroll(e.nativeEvent.contentOffset.y)}
+        scrollEventThrottle={16}
+      >
+        <View style={styles.cardsList}>
+          {tasks.map((task) => (
+            <Fragment key={task.id}>
+              {isHovered && dropBeforeTaskId === task.id && (
+                <KanbanDropSpacer
+                  theme={theme}
+                  height={draggedCardHeight}
+                  onLayout={(rect) => setDropSpacerY(rect.y)}
+                />
+              )}
+              <KanbanCard
+                task={task}
+                projectDisplayName={
+                  resolveProjectName
+                    ? resolveProjectName(task.projectId)
+                    : getProjectDisplayName(task.projectId, projects)
+                }
+                theme={theme}
+                layout={layout}
+                binding={bindCard(task.id, () => onSelectTask(task), PanResponder)}
+              />
+            </Fragment>
+          ))}
+
+          {isHovered && !dropBeforeTaskId && (
+            <KanbanDropSpacer
+              theme={theme}
+              height={draggedCardHeight}
+              onLayout={(rect) => setDropSpacerY(rect.y)}
+            />
+          )}
+
+          {tasks.length === 0 && !isHovered && (
+            <View style={styles.emptyLanePlaceholder}>
+              <Text style={styles.emptyLaneText}>
+                {t("lane.emptyHint")}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+export const KanbanLaneView = memo(KanbanLaneViewInner);

package/client/kanban-overlay.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useRef, useSyncExternalStore, memo } from "react";
+import { Animated, View, StyleSheet } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { KanbanTask } from "../shared/kanban";
+import { KanbanCardPreview } from "./kanban-card";
+import type { UseKanbanDragReturn } from "./kanban-drag";
+
+type PluginTheme = PluginSurfaceProps["theme"];
+
+const AnimatedView = (Animated && Animated.View) || View;
+
+export interface KanbanDragOverlayProps {
+  drag: UseKanbanDragReturn;
+  theme: PluginTheme;
+  layout: { compact: boolean };
+  task?: KanbanTask | null;
+  projectDisplayName?: string | null;
+}
+
+function KanbanDragOverlayInner({
+  drag,
+  theme,
+  layout,
+  task: propTask,
+  projectDisplayName: propProjectName,
+}: KanbanDragOverlayProps) {
+  const liveFeedback = useSyncExternalStore(
+    drag.controller ? drag.controller.subscribe : (() => () => {}),
+    drag.controller ? drag.controller.getFeedback : (() => drag.feedback),
+    drag.controller ? drag.controller.getFeedback : (() => drag.feedback)
+  );
+
+  const curDropping = useSyncExternalStore(
+    drag.controller ? drag.controller.subscribeDrop : (() => () => {}),
+    drag.controller ? drag.controller.getDroppingState : (() => drag.droppingState),
+    drag.controller ? drag.controller.getDroppingState : (() => drag.droppingState)
+  );
+  const animPos = useRef(Animated?.ValueXY ? new Animated.ValueXY({ x: 0, y: 0 }) : null).current;
+  const animRotate = useRef(Animated?.Value ? new Animated.Value(1) : null).current;
+  const animScale = useRef(Animated?.Value ? new Animated.Value(1.03) : null).current;
+  const droppingHandledRef = useRef<string | null>(null);
+  const lastOpIdRef = useRef<string | null>(null);
+
+  if (curDropping && animPos && animRotate && animScale && lastOpIdRef.current !== curDropping.operationId) {
+    lastOpIdRef.current = curDropping.operationId;
+    animPos.setValue({ x: curDropping.fromX, y: curDropping.fromY });
+    animRotate.setValue(1);
+    animScale.setValue(1.03);
+  } else if (!curDropping) {
+    lastOpIdRef.current = null;
+  }
+
+  useEffect(() => {
+    if (!curDropping) {
+      droppingHandledRef.current = null;
+      return;
+    }
+
+    const dropKey = curDropping.operationId || `${curDropping.taskId}_${curDropping.targetLaneId}_${curDropping.targetIndex}`;
+    if (droppingHandledRef.current === dropKey) {
+      return;
+    }
+    droppingHandledRef.current = dropKey;
+
+    if (!Animated || !animPos || !animRotate || !animScale) {
+      drag.commitDrop();
+      return;
+    }
+
+    animPos.setValue({ x: curDropping.fromX, y: curDropping.fromY });
+    animRotate.setValue(1);
+    animScale.setValue(1.03);
+
+    Animated.parallel([
+      Animated.spring(animPos, {
+        toValue: { x: curDropping.toX, y: curDropping.toY },
+        useNativeDriver: false,
+        friction: 9,
+        tension: 90,
+        restDisplacementThreshold: 1,
+        restSpeedThreshold: 1,
+      }),
+      Animated.timing(animRotate, {
+        toValue: 0,
+        duration: 160,
+        useNativeDriver: false,
+      }),
+      Animated.timing(animScale, {
+        toValue: 1,
+        duration: 160,
+        useNativeDriver: false,
+      }),
+    ]).start((result) => {
+      if (result === undefined || result?.finished) {
+        drag.commitDrop();
+      } else {
+        drag.abortDrop?.();
+      }
+    });
+  }, [curDropping, drag, animPos, animRotate, animScale]);
+
+  const activeTask =
+    curDropping?.task ??
+    propTask ??
+    (curDropping?.taskId && drag.getTaskPreview
+      ? drag.getTaskPreview(curDropping.taskId)?.task
+      : null) ??
+    (liveFeedback.draggingTaskId && drag.getTaskPreview
+      ? drag.getTaskPreview(liveFeedback.draggingTaskId)?.task
+      : null);
+  const activeProjectName =
+    curDropping?.projectName ??
+    propProjectName ??
+    (curDropping?.taskId && drag.getTaskPreview
+      ? drag.getTaskPreview(curDropping.taskId)?.projectDisplayName
+      : null) ??
+    (liveFeedback.draggingTaskId && drag.getTaskPreview
+      ? drag.getTaskPreview(liveFeedback.draggingTaskId)?.projectDisplayName
+      : null);
+
+  const isVisible =
+    (liveFeedback.isDragging && typeof liveFeedback.pointerX === "number" && activeTask !== null) ||
+    (curDropping !== null && activeTask !== null);
+
+  if (!isVisible || !activeTask) {
+    return null;
+  }
+
+  const containerBounds = drag.controller?.getContainerBounds?.() ?? null;
+  const containerX = containerBounds?.x ?? 0;
+  const containerY = containerBounds?.y ?? 0;
+  const cardHalfWidth = layout.compact ? 125 : 140;
+
+  let overlayStyle: any;
+  if (curDropping && animPos && animRotate && animScale) {
+    overlayStyle = {
+      left: animPos.x,
+      top: animPos.y,
+      transform: [
+        {
+          rotate: animRotate.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "2.5deg"],
+          }),
+        },
+        { scale: animScale },
+      ],
+    };
+  } else if (typeof liveFeedback.pointerX === "number" && typeof liveFeedback.pointerY === "number") {
+    overlayStyle = {
+      left: liveFeedback.pointerX - containerX - cardHalfWidth,
+      top: liveFeedback.pointerY - containerY - 20,
+      transform: [{ rotate: "2.5deg" }, { scale: 1.03 }],
+    };
+  } else {
+    return null;
+  }
+
+  return (
+    <AnimatedView
+      pointerEvents="none"
+      style={[
+        styles.dragOverlay,
+        overlayStyle,
+      ]}
+    >
+      <KanbanCardPreview
+        task={activeTask}
+        projectDisplayName={activeProjectName ?? null}
+        theme={theme}
+        layout={layout}
+        animated={true}
+      />
+    </AnimatedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  dragOverlay: {
+    position: "absolute",
+    zIndex: 9999,
+    pointerEvents: "none",
+  },
+});
+
+export const KanbanDragOverlay = memo(KanbanDragOverlayInner);