Persist new tags on refresh

Implement functionality to ensure that newly added tags are persisted across page refreshes, preventing loss of data.
[skip gpt_engineer]

src/components/Sidebar.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { CircleUserRound, ChevronLeft, ChevronRight, Check, X, Plus } from 'lucide-react';
 import { useSupabaseAuth } from '../integrations/supabase';
 import { useNavigate } from 'react-router-dom';
-import { useNotes } from '../integrations/supabase';
+import { useNotes, useTags, useAddTag } from '../integrations/supabase';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,14 +21,16 @@ import { Button } from "@/components/ui/button";
 import { format } from 'date-fns';
 import AddTagModal from './AddTagModal';
 
-const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNewCategory }) => {
+const Sidebar = ({ activeFilters, toggleFilter, clearFilters, addNewCategory }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const { session, logout } = useSupabaseAuth();
   const navigate = useNavigate();
   const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
   const [isProfileDialogOpen, setIsProfileDialogOpen] = useState(false);
   const [isAddTagModalOpen, setIsAddTagModalOpen] = useState(false);
-  const { data: notes, isLoading } = useNotes();
+  const { data: notes, isLoading: notesLoading } = useNotes();
+  const { data: tags, isLoading: tagsLoading } = useTags();
+  const addTag = useAddTag();
 
   useEffect(() => {
     const handleResize = () => {
@@ -56,17 +58,21 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
   };
 
   const getCategoryCount = (categoryName) => {
-    if (isLoading || !notes) return 0;
+    if (notesLoading || !notes) return 0;
     return notes.filter(note => note.tag === categoryName).length;
   };
 
   const handleAddNewTag = (newTag) => {
-    addNewCategory(newTag);
+    addTag.mutate({ name: newTag.name, color: newTag.color });
     setIsAddTagModalOpen(false);
   };
 
+  if (tagsLoading) {
+    return <div>Loading tags...</div>;
+  }
+
   return (
-    <div className={`bg-gray-900 text-white p-6 flex flex-col h-screen transition-all duration-300 ${isCollapsed ? 'w-10 sm:w-20' : 'w-32 sm:w-64'}`}>
+    <div className={`bg-gray-900 text-white p-6 flex flex-col h-screen transition-all duration-300 ease-in-out ${isCollapsed ? 'w-10 sm:w-20' : 'w-32 sm:w-64'}`}>
       <div className="flex items-center mb-8 justify-between">
         {!isCollapsed && (
           <DropdownMenu>
@@ -92,7 +98,7 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
         </button>
       </div>
       <nav className="flex-grow">
-        {categories.map((category) => (
+        {tags.map((category) => (
           <div
             key={category.name}
             className="flex items-center mb-2 cursor-pointer hover:bg-gray-800 rounded-md p-2 transition-colors"
@@ -183,4 +189,4 @@ const Sidebar = ({ activeFilters, toggleFilter, clearFilters, categories, addNew
   );
 };
 
-export default Sidebar;
+export default Sidebar;

src/integrations/supabase/hooks/useTags.js

@@ -0,0 +1,23 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { supabase } from '../supabase';
+
+const fromSupabase = async (query) => {
+    const { data, error } = await query;
+    if (error) throw new Error(error.message);
+    return data;
+};
+
+export const useTags = () => useQuery({
+    queryKey: ['tags'],
+    queryFn: () => fromSupabase(supabase.from('tags').select('*')),
+});
+
+export const useAddTag = () => {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: (newTag) => fromSupabase(supabase.from('tags').insert([newTag])),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['tags'] });
+        },
+    });
+};

src/pages/Index.jsx

@@ -3,7 +3,7 @@ import Sidebar from '../components/Sidebar';
 import Header from '../components/Header';
 import NotesGrid from '../components/NotesGrid';
 import CreateNoteModal from '../components/CreateNoteModal';
-import { useSupabaseAuth, useNotes } from '../integrations/supabase';
+import { useSupabaseAuth, useNotes, useTags } from '../integrations/supabase';
 
 const IndexContent = () => {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -12,14 +12,7 @@ const IndexContent = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const { session } = useSupabaseAuth();
   const { data: notes, isLoading: notesLoading } = useNotes();
-  const [categories, setCategories] = useState([
-    { name: 'Videos', color: 'bg-purple-500' },
-    { name: 'Wishlist', color: 'bg-yellow-500' },
-    { name: 'Assignment', color: 'bg-blue-600' },
-    { name: 'Projects', color: 'bg-teal-500' },
-    { name: 'Work', color: 'bg-pink-500' },
-    { name: 'Study', color: 'bg-orange-500' },
-  ]);
+  const { data: tags, isLoading: tagsLoading } = useTags();
 
   const handleAddNote = () => {
     setIsCreateModalOpen(true);
@@ -52,11 +45,7 @@ const IndexContent = () => {
     toggleFilter(tag);
   };
 
-  const addNewCategory = (newCategory) => {
-    setCategories([...categories, newCategory]);
-  };
-
-  if (notesLoading) {
+  if (notesLoading || tagsLoading) {
     return <div className="flex justify-center items-center h-screen">Loading...</div>;
   }
 
@@ -66,8 +55,7 @@ const IndexContent = () => {
         activeFilters={activeFilters}
         toggleFilter={toggleFilter}
         clearFilters={clearFilters}
-        categories={categories}
-        addNewCategory={addNewCategory}
+        categories={tags}
       />
       <div className="flex-1 flex flex-col">
         <Header 
@@ -85,7 +73,7 @@ const IndexContent = () => {
         <CreateNoteModal
           isOpen={isCreateModalOpen}
           onClose={() => setIsCreateModalOpen(false)}
-          categories={categories}
+          categories={tags}
         />
       </div>
     </div>