Merge pull request #10 from pheuberger/claude/research-undo-implementation-e8Aky

Author: pheuberger

src/components/bookmarks/BookmarkList.jsx

@@ -1,7 +1,8 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
-import { useYjs } from '../../hooks/useYjs'
+import { useYjs, undo, redo } from '../../hooks/useYjs'
 import { useSearch, useDebounce } from '../../hooks/useSearch'
 import { useHotkeys } from '../../hooks/useHotkeys'
+import { useToast } from '../../hooks/useToast'
 import { BookmarkItem } from './BookmarkItem'
 import { BookmarkInlineCard } from './BookmarkInlineCard'
 import { InboxView } from './InboxView'
@@ -11,6 +12,7 @@ import { SettingsView } from '../ui/SettingsView'
 import { HelpModal } from '../ui/HelpModal'
 import { Modal } from '../ui/Modal'
 import { Button } from '../ui/Button'
+import { ToastContainer } from '../ui/Toast'
 import { PackageOpen } from '../ui/Icons'
 import {
   getAllBookmarks,
@@ -20,6 +22,7 @@ import {
 export function BookmarkList() {
   const { bookmarks: bookmarksMap, synced } = useYjs()
   const [bookmarks, setBookmarks] = useState([])
+  const { toasts, addToast, removeToast } = useToast()
   const [currentView, setCurrentView] = useState('bookmarks')
 
   useEffect(() => {
@@ -189,14 +192,35 @@ export function BookmarkList() {
 
   const confirmDelete = useCallback(() => {
     if (deleteConfirmBookmark) {
+      const bookmarkTitle = deleteConfirmBookmark.title
       try {
         deleteBookmark(deleteConfirmBookmark._id)
+        addToast({
+          message: `Deleted "${bookmarkTitle}"`,
+          action: () => {
+            undo()
+          },
+          actionLabel: 'Undo',
+          duration: 5000,
+        })
       } catch (error) {
         console.error('Failed to delete bookmark:', error)
       }
       setDeleteConfirmBookmark(null)
     }
-  }, [deleteConfirmBookmark])
+  }, [deleteConfirmBookmark, addToast])
+
+  const handleUndo = useCallback(() => {
+    if (undo()) {
+      addToast({ message: 'Undone', duration: 2000 })
+    }
+  }, [addToast])
+
+  const handleRedo = useCallback(() => {
+    if (redo()) {
+      addToast({ message: 'Redone', duration: 2000 })
+    }
+  }, [addToast])
 
   useEffect(() => {
     setSelectedIndex(-1)
@@ -228,6 +252,8 @@ export function BookmarkList() {
     'd': promptDeleteSelected,
     'mod+k': focusSearch,
     'q': exitInbox,
+    'mod+z': handleUndo,
+    'mod+shift+z': handleRedo,
   })
 
   const handleAddNew = openNewBookmarkForm
@@ -241,14 +267,24 @@ export function BookmarkList() {
     setEditingBookmarkId(null)
   }, [])
 
-  const handleDelete = (bookmarkId) => {
+  const handleDelete = useCallback((bookmarkId) => {
+    const bookmark = bookmarks.find(b => b._id === bookmarkId)
+    const bookmarkTitle = bookmark?.title || 'Bookmark'
     try {
       deleteBookmark(bookmarkId)
+      addToast({
+        message: `Deleted "${bookmarkTitle}"`,
+        action: () => {
+          undo()
+        },
+        actionLabel: 'Undo',
+        duration: 5000,
+      })
     } catch (error) {
       console.error('Failed to delete bookmark:', error)
-      alert('Failed to delete bookmark: ' + error.message)
+      addToast({ message: 'Failed to delete bookmark', duration: 3000 })
     }
-  }
+  }, [bookmarks, addToast])
 
   const handleTagClick = (tag) => {
     setFilterView('tag')
@@ -393,7 +429,7 @@ export function BookmarkList() {
         title="Delete bookmark?"
       >
         <p className="text-sm text-muted-foreground mb-4">
-          This will permanently delete "{deleteConfirmBookmark?.title}".
+          Delete "{deleteConfirmBookmark?.title}"? You can undo this action.
         </p>
         <div className="flex justify-end gap-2">
           <Button variant="ghost" onClick={() => setDeleteConfirmBookmark(null)}>
@@ -404,6 +440,8 @@ export function BookmarkList() {
           </Button>
         </div>
       </Modal>
+
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
     </div>
   )
 }

src/components/ui/Toast.jsx

@@ -0,0 +1,77 @@
+import { useEffect, useState, useCallback } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/utils/cn'
+
+export function Toast({ message, action, actionLabel = 'Undo', duration = 5000, onClose }) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [isLeaving, setIsLeaving] = useState(false)
+
+  const handleClose = useCallback(() => {
+    setIsLeaving(true)
+    setTimeout(() => {
+      setIsVisible(false)
+      onClose?.()
+    }, 150)
+  }, [onClose])
+
+  const handleAction = useCallback(() => {
+    action?.()
+    handleClose()
+  }, [action, handleClose])
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(handleClose, duration)
+      return () => clearTimeout(timer)
+    }
+  }, [duration, handleClose])
+
+  if (!isVisible) return null
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 left-1/2 -translate-x-1/2 z-50',
+        'flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg',
+        'bg-card border border-border text-foreground',
+        'transition-all duration-150',
+        isLeaving ? 'opacity-0 translate-y-2' : 'opacity-100 translate-y-0'
+      )}
+    >
+      <span className="text-sm">{message}</span>
+      {action && (
+        <button
+          onClick={handleAction}
+          className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
+        >
+          {actionLabel}
+        </button>
+      )}
+      <button
+        onClick={handleClose}
+        className="ml-1 p-1 rounded hover:bg-muted transition-colors"
+        aria-label="Dismiss"
+      >
+        <X className="w-4 h-4 text-muted-foreground" />
+      </button>
+    </div>
+  )
+}
+
+// Toast container that manages multiple toasts
+export function ToastContainer({ toasts, onRemove }) {
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 flex flex-col gap-2">
+      {toasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          message={toast.message}
+          action={toast.action}
+          actionLabel={toast.actionLabel}
+          duration={toast.duration}
+          onClose={() => onRemove(toast.id)}
+        />
+      ))}
+    </div>
+  )
+}

src/hooks/useToast.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from 'react'
+
+let toastId = 0
+
+export function useToast() {
+  const [toasts, setToasts] = useState([])
+
+  const addToast = useCallback(({ message, action, actionLabel, duration = 5000 }) => {
+    const id = ++toastId
+    setToasts((prev) => [...prev, { id, message, action, actionLabel, duration }])
+    return id
+  }, [])
+
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const clearToasts = useCallback(() => {
+    setToasts([])
+  }, [])
+
+  return {
+    toasts,
+    addToast,
+    removeToast,
+    clearToasts,
+  }
+}

src/hooks/useYjs.js

@@ -11,11 +11,55 @@ let webrtcProvider = null
 let indexeddbProvider = null
 let awareness = null
 let webrtcProviderListeners = []
+let undoManager = null
+let undoManagerListeners = []
+
+// Origin used for local bookmark operations (tracked by UndoManager)
+export const LOCAL_ORIGIN = 'local'
 
 function notifyWebrtcListeners() {
   webrtcProviderListeners.forEach(cb => cb(webrtcProvider))
 }
 
+function notifyUndoManagerListeners(event) {
+  undoManagerListeners.forEach(cb => cb(event))
+}
+
+export function subscribeToUndoManager(callback) {
+  undoManagerListeners.push(callback)
+  return () => {
+    undoManagerListeners = undoManagerListeners.filter(cb => cb !== callback)
+  }
+}
+
+export function getUndoManager() {
+  return undoManager
+}
+
+export function undo() {
+  if (undoManager && undoManager.canUndo()) {
+    undoManager.undo()
+    return true
+  }
+  return false
+}
+
+export function redo() {
+  if (undoManager && undoManager.canRedo()) {
+    undoManager.redo()
+    return true
+  }
+  return false
+}
+
+export function canUndo() {
+  return undoManager?.canUndo() ?? false
+}
+
+export function canRedo() {
+  return undoManager?.canRedo() ?? false
+}
+
 export function subscribeToWebrtcProvider(callback) {
   webrtcProviderListeners.push(callback)
   callback(webrtcProvider)
@@ -46,6 +90,25 @@ function initializeYjs(roomName = 'hypermark') {
     console.log('[Yjs] Initializing empty data structures')
   }
 
+  // Initialize UndoManager for bookmarks
+  const bookmarksMap = ydoc.getMap('bookmarks')
+  undoManager = new Y.UndoManager(bookmarksMap, {
+    trackedOrigins: new Set([LOCAL_ORIGIN]),
+    captureTimeout: 500, // Group rapid changes within 500ms
+  })
+
+  undoManager.on('stack-item-added', (event) => {
+    console.log('[Yjs] Undo stack item added:', event.type)
+    notifyUndoManagerListeners({ type: 'stack-item-added', ...event })
+  })
+
+  undoManager.on('stack-item-popped', (event) => {
+    console.log('[Yjs] Undo stack item popped:', event.type)
+    notifyUndoManagerListeners({ type: 'stack-item-popped', ...event })
+  })
+
+  console.log('[Yjs] UndoManager initialized')
+
   return ydoc
 }