heartbeads 0.4.0

package/components/MobileActionSheet.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { useEffect } from "react";
+import type { GraphNode } from "@/lib/types";
+
+interface MobileActionSheetProps {
+  node: GraphNode;
+  onShowDescription?: () => void;
+  onAddComment: () => void;
+  onClaimTask?: () => void;
+  onUnclaimTask?: () => void;
+  onCollapseEpic?: () => void;
+  onUncollapseEpic?: () => void;
+  onFocusEpic?: () => void;
+  onExitFocusEpic?: () => void;
+  onClose: () => void;
+}
+
+export function MobileActionSheet({
+  node,
+  onShowDescription,
+  onAddComment,
+  onClaimTask,
+  onUnclaimTask,
+  onCollapseEpic,
+  onUncollapseEpic,
+  onFocusEpic,
+  onExitFocusEpic,
+  onClose,
+}: MobileActionSheetProps) {
+  // Escape key dismissal
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-[99] bg-black/30"
+        onClick={onClose}
+      />
+
+      {/* Action sheet */}
+      <div className="fixed inset-x-0 bottom-0 z-[100] bg-white rounded-t-2xl shadow-2xl max-h-[70vh] overflow-y-auto animate-slide-up-sheet">
+        {/* Drag handle */}
+        <div className="w-10 h-1 bg-zinc-300 rounded-full mx-auto mt-3 mb-2" />
+
+        {/* Node info header */}
+        <div className="px-5 py-3 border-b border-zinc-100">
+          <div className="flex items-center gap-2">
+            <span className="text-[11px] font-mono text-zinc-400">{node.id}</span>
+          </div>
+          <div className="text-sm font-medium text-zinc-700 truncate mt-0.5">
+            {node.title}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="py-1">
+          {onShowDescription && (
+            <button
+              onClick={onShowDescription}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-zinc-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                />
+              </svg>
+              Show description
+            </button>
+          )}
+
+          <button
+            onClick={onAddComment}
+            className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+          >
+            <svg
+              className="w-4 h-4 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z"
+              />
+            </svg>
+            Add comment
+          </button>
+
+          {onClaimTask && (
+            <button
+              onClick={onClaimTask}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-zinc-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
+              </svg>
+              Claim task
+            </button>
+          )}
+
+          {onUnclaimTask && (
+            <button
+              onClick={onUnclaimTask}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-red-500 active:bg-red-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-red-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
+                />
+              </svg>
+              Unclaim task
+            </button>
+          )}
+
+          {onCollapseEpic && (
+            <button
+              onClick={onCollapseEpic}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-zinc-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25"
+                />
+              </svg>
+              Collapse epic
+            </button>
+          )}
+
+          {onUncollapseEpic && (
+            <button
+              onClick={onUncollapseEpic}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-zinc-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+                />
+              </svg>
+              Uncollapse epic
+            </button>
+          )}
+
+          {onFocusEpic && (
+            <button
+              onClick={onFocusEpic}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-zinc-700 active:bg-zinc-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-zinc-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5M16.5 20.25H18A2.25 2.25 0 0020.25 18v-1.5M7.5 20.25H6A2.25 2.25 0 013.75 18v-1.5"
+                />
+              </svg>
+              Focus on epic
+            </button>
+          )}
+
+          {onExitFocusEpic && (
+            <button
+              onClick={onExitFocusEpic}
+              className="w-full flex items-center gap-3 px-5 py-4 text-sm font-medium text-emerald-600 active:bg-emerald-50 transition-colors"
+            >
+              <svg
+                className="w-4 h-4 text-emerald-500"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+                />
+              </svg>
+              Show full graph
+            </button>
+          )}
+        </div>
+
+        {/* Cancel button */}
+        <div className="border-t border-zinc-100">
+          <button
+            onClick={onClose}
+            className="w-full py-4 text-sm font-medium text-zinc-400 active:bg-zinc-50 transition-colors"
+          >
+            Cancel
+          </button>
+        </div>
+
+        {/* Safe area padding for phones with home indicator */}
+        <div className="h-[env(safe-area-inset-bottom)]" />
+      </div>
+    </>
+  );
+}