bloby-bot 0.39.1 → 0.41.0

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

@@ -1,396 +0,0 @@
-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>
-  );
-}