bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/StickyNotes/StickyNotesOverlay.tsx

@@ -0,0 +1,396 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { X, Plus, StickyNote } from 'lucide-react';
+
+// Adjust this if your workspace proxies API calls differently.
+// Default Bloby workspaces: '/app/api'. Direct backend: '/api'.
+const API_BASE = '/app/api';
+
+interface StickyNote {
+  id: number;
+  content: string;
+  color: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  visible: number;
+  created_at: string;
+}
+
+const PASTEL_COLORS = ['#E6C97A', '#D4A0B0', '#8BBD9F', '#8BAFC4', '#B0A0C8', '#D4AD8A'];
+
+function randomRotation(id: number): number {
+  const seed = ((id * 9301 + 49297) % 233280) / 233280;
+  return (seed - 0.5) * 6; // -3 to +3 degrees
+}
+
+export default function StickyNotesOverlay() {
+  const [notes, setNotes] = useState<StickyNote[]>([]);
+  const [allVisible, setAllVisible] = useState(true);
+  const [focusedId, setFocusedId] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const fetchNotes = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes`);
+      if (!res.ok) return;
+      const data: StickyNote[] = await res.json();
+      setNotes(data);
+      setAllVisible(data.length === 0 || data.some((n) => n.visible === 1));
+    } catch {
+      // silent
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchNotes();
+  }, [fetchNotes]);
+
+  const createNote = useCallback(async () => {
+    // If notes are hidden, turn visibility on first
+    if (!allVisible) {
+      try {
+        await fetch(`${API_BASE}/sticky-notes/toggle-visibility`, { method: 'POST' });
+      } catch { /* silent */ }
+    }
+    const color = PASTEL_COLORS[Math.floor(Math.random() * PASTEL_COLORS.length)];
+    const x = 60 + Math.floor(Math.random() * 300);
+    const y = 60 + Math.floor(Math.random() * 200);
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: '', color, x, y, width: 200, height: 180, visible: 1 }),
+      });
+      if (!res.ok) return;
+      const created = await res.json();
+      setAllVisible(true);
+      setFocusedId(created.id);
+      fetchNotes();
+    } catch {
+      // silent
+    }
+  }, [fetchNotes, allVisible]);
+
+  const toggleVisibility = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_BASE}/sticky-notes/toggle-visibility`, { method: 'POST' });
+      if (!res.ok) return;
+      const data = await res.json();
+      setNotes(data.notes);
+      setAllVisible(data.visible === 1);
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const deleteNote = useCallback(async (id: number) => {
+    try {
+      await fetch(`${API_BASE}/sticky-notes/${id}`, { method: 'DELETE' });
+      setNotes((prev) => prev.filter((n) => n.id !== id));
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const updateNote = useCallback(async (id: number, updates: Partial<StickyNote>) => {
+    try {
+      await fetch(`${API_BASE}/sticky-notes/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+      });
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const visibleNotes = notes.filter((n) => n.visible === 1);
+
+  return (
+    <div ref={containerRef} className="absolute inset-0 pointer-events-none hidden md:block" style={{ zIndex: 30 }}>
+      {visibleNotes.map((note) => (
+        <DraggableNote
+          key={note.id}
+          note={note}
+          containerRef={containerRef}
+          onDelete={deleteNote}
+          onUpdate={updateNote}
+          isFocused={focusedId === note.id}
+          onFocus={() => setFocusedId(note.id)}
+        />
+      ))}
+      <FAB onCreate={createNote} onToggle={toggleVisibility} allVisible={allVisible} noteCount={notes.length} />
+    </div>
+  );
+}
+
+function DraggableNote({
+  note,
+  containerRef,
+  onDelete,
+  onUpdate,
+  isFocused,
+  onFocus,
+}: {
+  note: StickyNote;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  onDelete: (id: number) => void;
+  onUpdate: (id: number, updates: Partial<StickyNote>) => void;
+  isFocused: boolean;
+  onFocus: () => void;
+}) {
+  const [pos, setPos] = useState({ x: note.x, y: note.y });
+  const [dragging, setDragging] = useState(false);
+  const dragOffset = useRef({ x: 0, y: 0 });
+  const noteRef = useRef<HTMLDivElement>(null);
+  const rotation = randomRotation(note.id);
+
+  useEffect(() => {
+    setPos({ x: note.x, y: note.y });
+  }, [note.x, note.y]);
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    onFocus();
+    if ((e.target as HTMLElement).closest('textarea') || (e.target as HTMLElement).closest('button')) return;
+    e.preventDefault();
+    const rect = noteRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragOffset.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    setDragging(true);
+  }, [onFocus]);
+
+  useEffect(() => {
+    if (!dragging) return;
+
+    const onMove = (e: MouseEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const cr = container.getBoundingClientRect();
+      const newX = Math.max(0, Math.min(e.clientX - cr.left - dragOffset.current.x, cr.width - note.width));
+      const newY = Math.max(0, Math.min(e.clientY - cr.top - dragOffset.current.y, cr.height - note.height));
+      setPos({ x: newX, y: newY });
+    };
+
+    const onUp = () => {
+      setDragging(false);
+      setPos((current) => {
+        onUpdate(note.id, { x: Math.round(current.x), y: Math.round(current.y) });
+        return current;
+      });
+    };
+
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [dragging, containerRef, note.id, note.width, note.height, onUpdate]);
+
+  // Touch support
+  const onTouchStart = useCallback((e: React.TouchEvent) => {
+    onFocus();
+    if ((e.target as HTMLElement).closest('textarea') || (e.target as HTMLElement).closest('button')) return;
+    const touch = e.touches[0];
+    const rect = noteRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragOffset.current = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
+    setDragging(true);
+  }, [onFocus]);
+
+  useEffect(() => {
+    if (!dragging) return;
+
+    const onTouchMove = (e: TouchEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const touch = e.touches[0];
+      const cr = container.getBoundingClientRect();
+      const newX = Math.max(0, Math.min(touch.clientX - cr.left - dragOffset.current.x, cr.width - note.width));
+      const newY = Math.max(0, Math.min(touch.clientY - cr.top - dragOffset.current.y, cr.height - note.height));
+      setPos({ x: newX, y: newY });
+    };
+
+    const onTouchEnd = () => {
+      setDragging(false);
+      setPos((current) => {
+        onUpdate(note.id, { x: Math.round(current.x), y: Math.round(current.y) });
+        return current;
+      });
+    };
+
+    window.addEventListener('touchmove', onTouchMove, { passive: false });
+    window.addEventListener('touchend', onTouchEnd);
+    return () => {
+      window.removeEventListener('touchmove', onTouchMove);
+      window.removeEventListener('touchend', onTouchEnd);
+    };
+  }, [dragging, containerRef, note.id, note.width, note.height, onUpdate]);
+
+  const handleBlur = useCallback((e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const newContent = e.target.value;
+    if (newContent !== note.content) {
+      onUpdate(note.id, { content: newContent });
+    }
+  }, [note.id, note.content, onUpdate]);
+
+  // Darken the pastel for text readability
+  const textColor = '#1a1a1a';
+
+  return (
+    <div
+      ref={noteRef}
+      className="absolute pointer-events-auto group"
+      style={{
+        left: pos.x,
+        top: pos.y,
+        width: note.width,
+        height: note.height,
+        zIndex: dragging ? 50 : isFocused ? 45 : 35,
+        transform: `rotate(${rotation}deg)`,
+        transition: dragging ? 'none' : 'box-shadow 0.2s',
+      }}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
+    >
+      <div
+        className="w-full h-full rounded-lg shadow-lg flex flex-col overflow-hidden"
+        style={{
+          backgroundColor: note.color,
+          boxShadow: dragging
+            ? '0 12px 28px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.2)'
+            : '0 4px 12px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.15)',
+          cursor: dragging ? 'grabbing' : 'grab',
+        }}
+      >
+        {/* Top bar with drag handle and delete */}
+        <div className="flex items-center justify-between px-2.5 pt-2 pb-1" style={{ color: textColor }}>
+          <div className="flex gap-0.5 opacity-40">
+            <span className="block w-1 h-1 rounded-full bg-current" />
+            <span className="block w-1 h-1 rounded-full bg-current" />
+            <span className="block w-1 h-1 rounded-full bg-current" />
+          </div>
+          <button
+            onClick={() => onDelete(note.id)}
+            className="opacity-0 group-hover:opacity-70 hover:!opacity-100 p-0.5 rounded transition-opacity"
+            style={{ color: textColor }}
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        {/* Content area */}
+        <textarea
+          defaultValue={note.content}
+          onBlur={handleBlur}
+          placeholder="Write something..."
+          className="flex-1 w-full px-2.5 pb-2.5 text-xs leading-relaxed resize-none bg-transparent border-none outline-none placeholder:opacity-40"
+          style={{ color: textColor, fontFamily: "'Caveat', 'Segoe Print', 'Comic Sans MS', cursive" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function FAB({
+  onCreate,
+  onToggle,
+  allVisible,
+  noteCount,
+}: {
+  onCreate: () => void;
+  onToggle: () => void;
+  allVisible: boolean;
+  noteCount: number;
+}) {
+  const [pressing, setPressing] = useState(false);
+  const [longPressed, setLongPressed] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const pressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const didLongPress = useRef(false);
+
+  const startPress = useCallback(() => {
+    didLongPress.current = false;
+    setPressing(true);
+    pressTimer.current = setTimeout(() => {
+      didLongPress.current = true;
+      setLongPressed(true);
+      onToggle();
+      setPressing(false);
+      setTimeout(() => setLongPressed(false), 600);
+    }, 500);
+  }, [onToggle]);
+
+  const endPress = useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+    if (!didLongPress.current) {
+      onCreate();
+    }
+    setPressing(false);
+  }, [onCreate]);
+
+  const cancelPress = useCallback(() => {
+    if (pressTimer.current) {
+      clearTimeout(pressTimer.current);
+      pressTimer.current = null;
+    }
+    setPressing(false);
+  }, []);
+
+  return (
+    <div className="absolute bottom-5 left-5 pointer-events-auto flex flex-col items-center gap-2">
+      {/* Tooltip on hover */}
+      <div
+        className="text-[9px] text-muted-foreground/60 bg-[#1a1a1a]/90 px-2.5 py-1 rounded-lg backdrop-blur-sm select-none transition-all duration-200 whitespace-nowrap"
+        style={{
+          opacity: hovered ? 1 : 0,
+          transform: hovered ? 'translateY(0)' : 'translateY(4px)',
+          pointerEvents: 'none',
+        }}
+      >
+        hold to toggle visibility
+      </div>
+      {noteCount > 0 && !hovered && (
+        <div className="text-[9px] text-muted-foreground/50 bg-[#1a1a1a]/80 px-2 py-0.5 rounded-full backdrop-blur-sm select-none">
+          {allVisible ? `${noteCount} note${noteCount !== 1 ? 's' : ''}` : 'hidden'}
+        </div>
+      )}
+      <div className="relative">
+        <button
+          onMouseDown={startPress}
+          onMouseUp={endPress}
+          onMouseLeave={() => { cancelPress(); setHovered(false); }}
+          onMouseEnter={() => setHovered(true)}
+          onTouchStart={startPress}
+          onTouchEnd={(e) => { e.preventDefault(); endPress(); }}
+          onTouchCancel={cancelPress}
+          className="h-11 w-11 rounded-xl flex items-center justify-center shadow-lg select-none"
+          style={{
+            background: 'linear-gradient(135deg, #E6C97A, #D4A0B0)',
+            transform: pressing ? 'scale(0.9)' : longPressed ? 'scale(1.15)' : 'scale(1)',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+            boxShadow: longPressed
+              ? '0 0 20px rgba(230, 201, 122, 0.4), 0 4px 16px rgba(0,0,0,0.3)'
+              : '0 4px 12px rgba(0,0,0,0.3)',
+          }}
+        >
+          <StickyNote className="h-5 w-5 text-white/90" />
+        </button>
+        {/* + badge on hover */}
+        <div
+          className="absolute -top-1.5 -right-1.5 h-4.5 w-4.5 rounded-full bg-white flex items-center justify-center shadow-md transition-all duration-200"
+          style={{
+            opacity: hovered && !pressing && !longPressed ? 1 : 0,
+            transform: hovered && !pressing && !longPressed ? 'scale(1)' : 'scale(0.5)',
+          }}
+        >
+          <Plus className="h-3 w-3 text-[#1a1a1a]" strokeWidth={3} />
+        </div>
+      </div>
+    </div>
+  );
+}