init

2025-07-18 22:07:22 -03:00
commit d30fd8d30b
25 changed files with 3270 additions and 0 deletions
--- a/components/EditModal.tsx
+++ b/components/EditModal.tsx
@@ -0,0 +1,255 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from '@hello-pangea/dnd';
+import { getWebsiteIcon } from './utils/iconService';
+import { Category, Website } from '../types';
+import IconPicker from './IconPicker';
+import { icons } from 'lucide-react';
+
+interface EditModalProps {
+  categories: Category[];
+  onClose: () => void;
+  onSave: (categories: Category[]) => void;
+}
+
+const EditModal: React.FC<EditModalProps> = ({ categories, onClose, onSave }) => {
+  const [localCategories, setLocalCategories] = useState(categories);
+  const [selectedCategoryId, setSelectedCategoryId] = useState(categories[0]?.id || null);
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const [newWebsite, setNewWebsite] = useState({ name: '', url: '', icon: '' });
+  const [showIconPicker, setShowIconPicker] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
+
+  const handleOnDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const { source, destination } = result;
+
+    if (source.droppableId === destination.droppableId) {
+      const category = localCategories.find(cat => cat.id === source.droppableId);
+      if (category) {
+        const items = Array.from(category.websites);
+        const [reorderedItem] = items.splice(source.index, 1);
+        items.splice(destination.index, 0, reorderedItem);
+        const updatedCategories = localCategories.map(cat => 
+          cat.id === category.id ? { ...cat, websites: items } : cat
+        );
+        setLocalCategories(updatedCategories);
+      }
+    } else {
+      const sourceCategory = localCategories.find(cat => cat.id === source.droppableId);
+      const destCategory = localCategories.find(cat => cat.id === destination.droppableId);
+      if (sourceCategory && destCategory) {
+        const sourceItems = Array.from(sourceCategory.websites);
+        const [movedItem] = sourceItems.splice(source.index, 1);
+        const destItems = Array.from(destCategory.websites);
+        destItems.splice(destination.index, 0, { ...movedItem, categoryId: destCategory.id });
+
+        const updatedCategories = localCategories.map(cat => {
+          if (cat.id === sourceCategory.id) return { ...cat, websites: sourceItems };
+          if (cat.id === destCategory.id) return { ...cat, websites: destItems };
+          return cat;
+        });
+        setLocalCategories(updatedCategories);
+      }
+    }
+  };
+
+  const handleAddCategory = () => {
+    if (newCategoryName.trim() === '') return;
+    const newCategory: Category = {
+      id: Date.now().toString(),
+      name: newCategoryName,
+      websites: [],
+    };
+    setLocalCategories([...localCategories, newCategory]);
+    setNewCategoryName('');
+  };
+
+  const handleRemoveCategory = (id: string) => {
+    const updatedCategories = localCategories.filter(cat => cat.id !== id);
+    setLocalCategories(updatedCategories);
+    if (selectedCategoryId === id) {
+      setSelectedCategoryId(updatedCategories[0]?.id || null);
+    }
+  };
+
+  const handleAddWebsite = async () => {
+    if (!selectedCategoryId || !newWebsite.name || !newWebsite.url) return;
+
+    let icon = newWebsite.icon;
+    if (!icon || !Object.keys(icons).includes(icon)) {
+        icon = await getWebsiteIcon(newWebsite.url);
+    }
+
+    const newWebsiteData: Website = {
+      id: Date.now().toString(),
+      name: newWebsite.name,
+      url: newWebsite.url,
+      icon,
+      categoryId: selectedCategoryId,
+    };
+
+    const updatedCategories = localCategories.map(cat => {
+      if (cat.id === selectedCategoryId) {
+        return { ...cat, websites: [...cat.websites, newWebsiteData] };
+      }
+      return cat;
+    });
+
+    setLocalCategories(updatedCategories);
+    setNewWebsite({ name: '', url: '', icon: '' });
+  };
+
+  const handleRemoveWebsite = (categoryId: string, websiteId: string) => {
+    const updatedCategories = localCategories.map(cat => {
+      if (cat.id === categoryId) {
+        return { ...cat, websites: cat.websites.filter(web => web.id !== websiteId) };
+      }
+      return cat;
+    });
+    setLocalCategories(updatedCategories);
+  };
+
+  const selectedCategory = localCategories.find(cat => cat.id === selectedCategoryId);
+
+  return (
+    <div className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center z-50">
+      <div ref={modalRef} className="bg-black/25 backdrop-blur-md border border-white/10 rounded-2xl p-8 w-full max-w-4xl text-white">
+        <h2 className="text-3xl font-bold mb-6">Edit Bookmarks</h2>
+        <div className="grid grid-cols-3 gap-8">
+          <div className="col-span-1">
+            <h3 className="text-xl font-semibold mb-4">Categories</h3>
+            <div className="flex flex-col gap-2 mb-4">
+              {localCategories.map(category => (
+                <div 
+                  key={category.id} 
+                  className={`flex justify-between items-center p-3 rounded-lg cursor-pointer ${selectedCategoryId === category.id ? 'bg-cyan-500/50' : 'bg-white/10'}`}
+                  onClick={() => setSelectedCategoryId(category.id)}
+                >
+                  <span>{category.name}</span>
+                  <button onClick={() => handleRemoveCategory(category.id)} className="text-red-500 hover:text-red-400">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                  </button>
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                placeholder="New Category"
+                value={newCategoryName}
+                onChange={(e) => setNewCategoryName(e.target.value)}
+                className="bg-white/10 p-2 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-cyan-400"
+              />
+              <button onClick={handleAddCategory} className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-2 px-4 rounded-lg">
+                Add
+              </button>
+            </div>
+          </div>
+          <div className="col-span-2">
+            <h3 className="text-xl font-semibold mb-4">Websites</h3>
+            {selectedCategory && (
+              <DragDropContext onDragEnd={handleOnDragEnd}>
+                <Droppable droppableId={selectedCategory.id}>
+                  {(provided) => (
+                    <ul {...provided.droppableProps} ref={provided.innerRef} className="mb-8">
+                      {selectedCategory.websites.map((website, index) => (
+                        <Draggable key={website.id} draggableId={website.id} index={index}>
+                          {(provided) => (
+                            <li
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                              {...provided.dragHandleProps}
+                              className="flex items-center justify-between bg-white/10 p-3 rounded-lg mb-3"
+                            >
+                              <div className="flex items-center">
+                                {Object.keys(icons).includes(website.icon) ? (
+                                  React.createElement(icons[website.icon as keyof typeof icons], { className: "h-8 w-8 mr-4" })
+                                ) : (
+                                  <img src={website.icon} alt={website.name} className="h-8 w-8 mr-4" />
+                                )}
+                                <span>{website.name}</span>
+                              </div>
+                              <button onClick={() => handleRemoveWebsite(selectedCategory.id, website.id)} className="text-red-500 hover:text-red-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                              </button>
+                            </li>
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                    </ul>
+                  )}
+                </Droppable>
+              </DragDropContext>
+            )}
+            <div>
+              <h3 className="text-xl font-semibold mb-4">Add New Bookmark</h3>
+              <div className="flex flex-col gap-4">
+                <input
+                  type="text"
+                  placeholder="Name"
+                  value={newWebsite.name}
+                  onChange={(e) => setNewWebsite({ ...newWebsite, name: e.target.value })}
+                  className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
+                />
+                <input
+                  type="text"
+                  placeholder="URL"
+                  value={newWebsite.url}
+                  onChange={(e) => setNewWebsite({ ...newWebsite, url: e.target.value })}
+                  className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400"
+                />
+                <div className="flex items-center gap-2">
+                  <input
+                    type="text"
+                    placeholder="Icon URL or name"
+                    value={newWebsite.icon}
+                    onChange={(e) => setNewWebsite({ ...newWebsite, icon: e.target.value })}
+                    className="bg-white/10 p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-400 w-full"
+                  />
+                  <button onClick={() => setShowIconPicker(!showIconPicker)} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-3 px-4 rounded-lg">
+                    {showIconPicker ? 'Close' : 'Select Icon'}
+                  </button>
+                </div>
+                {showIconPicker && (
+                  <IconPicker
+                    onSelect={(iconName) => {
+                      setNewWebsite({ ...newWebsite, icon: iconName });
+                      setShowIconPicker(false);
+                    }}
+                  />
+                )}
+                <button onClick={handleAddWebsite} className="bg-cyan-500 hover:bg-cyan-400 text-white font-bold py-3 px-4 rounded-lg">
+                  Add Bookmark
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end gap-4 mt-8">
+          <button onClick={() => onSave(localCategories)} className="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-6 rounded-lg">
+            Save
+          </button>
+          <button onClick={onClose} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EditModal;