Replace areas

2025-02-13 01:15:04 +02:00 · 2025-02-13 01:15:04 +02:00 · cdd4f6da0b
commit cdd4f6da0b
parent f38f63977f
9 changed files with 347 additions and 198 deletions
--- a/app/frontend/Layout.tsx
+++ b/app/frontend/Layout.tsx
@ -15,6 +15,7 @@ import { Project } from "./entities/Project";
 import { Task } from "./entities/Task";
 import { useDataContext } from "./contexts/DataContext";
 import { User } from "./entities/User";
+import { useStore } from "./store/useStore";

 interface LayoutProps {
  currentUser: User;
@ -42,6 +43,8 @@ const Layout: React.FC<LayoutProps> = ({
  const [selectedTag, setSelectedTag] = useState<Tag | null>(null);
  const [newTask, setNewTask] = useState<Task | null>(null);

+  const { areasStore: { create, update }} = useStore();
+
  const {
    tags,
    areas,
@ -52,9 +55,6 @@ const Layout: React.FC<LayoutProps> = ({
    createNote,
    updateNote,
    deleteNote,
-    createArea,
-    updateArea,
-    deleteArea,
    createTag,
    updateTag,
    deleteTag,
@ -186,9 +186,9 @@ const Layout: React.FC<LayoutProps> = ({
  const handleSaveArea = async (areaData: Area) => {
    try {
      if (areaData.id) {
-        await updateArea(areaData.id, areaData);
+        await update(areaData.id, areaData);
      } else {
-        await createArea(areaData);
+        await create(areaData);
      }
    } catch (error) {
      console.error("Error saving area:", error);
--- a/app/frontend/components/Area/AreaModal.tsx
+++ b/app/frontend/components/Area/AreaModal.tsx
@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Area } from '../../entities/Area';
-import { useDataContext } from '../../contexts/DataContext';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { useStore } from '../../store/useStore'; // Import Zustad store
 import { useToast } from '../Shared/ToastContext';

 interface AreaModalProps {
@ -12,18 +11,21 @@ interface AreaModalProps {
 }

 const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave }) => {
-  const { createArea, updateArea } = useDataContext();
+  const {
+    areasStore: { create, update }
+  } = useStore(); // Use Zustand store
  const [formData, setFormData] = useState<Area>({
    id: area?.id || 0,
    name: area?.name || '',
    description: area?.description || '',
  });
+
  const [error, setError] = useState<string | null>(null);
  const modalRef = useRef<HTMLDivElement>(null);
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [isClosing, setIsClosing] = useState(false);

-  const { showSuccessToast, showErrorToast } = useToast();
+  const { showSuccessToast, showErrorToast } = useToast(); // Toast for notifications

  useEffect(() => {
    if (isOpen) {
@ -60,6 +62,7 @@ const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave })
        handleClose();
      }
    };
+
    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
    }
@ -89,13 +92,13 @@ const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave })

    try {
      if (formData.id && formData.id !== 0) {
-        await updateArea(formData.id, formData);
+        await update(formData.id, formData);
        showSuccessToast('Area updated successfully!');
      } else {
-        await createArea(formData);
+        await create(formData);
        showSuccessToast('Area created successfully!');
      }
-      onSave(formData);
+      onSave(formData); // Callback to update parent component
      handleClose();
    } catch (err) {
      setError((err as Error).message);
@ -116,88 +119,86 @@ const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave })
  if (!isOpen) return null;

  return (
-    <>
+    <div
+      className={`fixed top-16 left-0 right-0 bottom-0 flex items-start sm:items-center justify-center bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 ${
+        isClosing ? 'opacity-0' : 'opacity-100'
+      }`}
+    >
      <div
-        className={`fixed top-16 left-0 right-0 bottom-0 flex items-start sm:items-center justify-center bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 ${
-          isClosing ? 'opacity-0' : 'opacity-100'
-        }`}
+        ref={modalRef}
+        className={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md overflow-hidden transform transition-transform duration-300 ${
+          isClosing ? 'scale-95' : 'scale-100'
+        } h-screen sm:h-auto flex flex-col`}
+        style={{
+          maxHeight: 'calc(100vh - 4rem)',
+        }}
      >
-        <div
-          ref={modalRef}
-          className={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md overflow-hidden transform transition-transform duration-300 ${
-            isClosing ? 'scale-95' : 'scale-100'
-          } h-screen sm:h-auto flex flex-col`}
-          style={{
-            maxHeight: 'calc(100vh - 4rem)',
-          }}
-        >
-          <form className="flex flex-col flex-1">
-            <fieldset className="flex flex-col flex-1">
-              <div className="p-4 space-y-3 flex-1 text-sm overflow-y-auto">
-                {/* Area Name */}
-                <div className="py-4">
-                  <input
-                    type="text"
-                    id="areaName"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    required
-                    className="block w-full text-xl font-semibold dark:bg-gray-800 text-black dark:text-white border-b-2 border-gray-200 dark:border-gray-900 focus:outline-none shadow-sm py-2"
-                    placeholder="Enter area name"
-                  />
-                </div>
-
-                {/* Area Description */}
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Description
-                  </label>
-                  <textarea
-                    id="areaDescription"
-                    name="description"
-                    value={formData.description}
-                    onChange={handleChange}
-                    rows={4}
-                    className="block w-full rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
-                    placeholder="Enter area description"
-                  />
-                </div>
-
-                {/* Error Message */}
-                {error && <div className="text-red-500">{error}</div>}
+        <form className="flex flex-col flex-1">
+          <fieldset className="flex flex-col flex-1">
+            <div className="p-4 space-y-3 flex-1 text-sm overflow-y-auto">
+              {/* Area Name */}
+              <div className="py-4">
+                <input
+                  type="text"
+                  id="areaName"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  required
+                  className="block w-full text-xl font-semibold dark:bg-gray-800 text-black dark:text-white border-b-2 border-gray-200 dark:border-gray-900 focus:outline-none shadow-sm py-2"
+                  placeholder="Enter area name"
+                />
              </div>

-              {/* Action Buttons */}
-              <div className="p-3 flex-shrink-0 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2">
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none transition duration-150 ease-in-out"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  onClick={handleSubmit}
-                  disabled={isSubmitting}
-                  className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out ${
-                    isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
-                  }`}
-                >
-                  {isSubmitting
-                    ? 'Submitting...'
-                    : formData.id && formData.id !== 0
-                    ? 'Update Area'
-                    : 'Create Area'}
-                </button>
+              {/* Area Description */}
+              <div className="pb-3">
+                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Description
+                </label>
+                <textarea
+                  id="areaDescription"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleChange}
+                  rows={4}
+                  className="block w-full rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                  placeholder="Enter area description"
+                />
              </div>
-            </fieldset>
-          </form>
-        </div>
+
+              {/* Error Message */}
+              {error && <div className="text-red-500">{error}</div>}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="p-3 flex-shrink-0 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2">
+              <button
+                type="button"
+                onClick={handleClose}
+                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none transition duration-150 ease-in-out"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out ${
+                  isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
+              >
+                {isSubmitting
+                  ? 'Submitting...'
+                  : formData.id && formData.id !== 0
+                  ? 'Update Area'
+                  : 'Create Area'}
+              </button>
+            </div>
+          </fieldset>
+        </form>
      </div>
-    </>
+    </div>
  );
 };

-export default AreaModal;
+export default AreaModal;
--- a/app/frontend/components/Areas.tsx
+++ b/app/frontend/components/Areas.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
  PencilSquareIcon,
@ -6,26 +6,35 @@ import {
  Squares2X2Icon,
 } from '@heroicons/react/24/solid'; 
 import ConfirmDialog from './Shared/ConfirmDialog';
-import AreaModal from './Area/AreaModal'; 
-import { useDataContext } from '../contexts/DataContext';
+import AreaModal from './Area/AreaModal';
+import { useStore } from '../store/useStore';
 import { Area } from '../entities/Area';

 const Areas: React.FC = () => {
-  const { areas, isLoading, isError, createArea, updateArea, deleteArea } = useDataContext();
-  const [isAreaModalOpen, setIsAreaModalOpen] = useState<boolean>(false);
+  const {
+    areasStore: { areas, create, update, delete: deleteArea, fetchAll },
+    isLoading,
+    isError
+  } = useStore();
+
+  const [isAreaModalOpen, setIsAreaModalOpen] = useState <boolean>(false);
  const [selectedArea, setSelectedArea] = useState<Area | null>(null);
  const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState<boolean>(false);
  const [areaToDelete, setAreaToDelete] = useState<Area | null>(null);

+  useEffect(() => {
+    fetchAll(); // Fetch all areas on component mount
+  }, [fetchAll]);
+
  const handleSaveArea = async (areaData: Area) => {
    try {
      if (areaData.id) {
-        await updateArea(areaData.id, {
+        await update(areaData.id, {
          name: areaData.name,
          description: areaData.description,
        });
      } else {
-        await createArea({
+        await create({
          name: areaData.name,
          description: areaData.description,
        });
@ -89,7 +98,7 @@ const Areas: React.FC = () => {
  }

  return (
-    <div className="flex justify-center px-4 lg:px-2  ">
+    <div className="flex justify-center px-4 lg:px-2">
      <div className="w-full max-w-5xl">
        {/* Areas Header */}
        <div className="flex items-center justify-between mb-4">
@ -174,4 +183,4 @@ const Areas: React.FC = () => {
  );
 };

-export default Areas;
+export default Areas;
--- a/app/frontend/contexts/DataContext.tsx
+++ b/app/frontend/contexts/DataContext.tsx
@ -2,7 +2,6 @@ import React, { createContext, useContext } from 'react';
 import useFetchTags from '../hooks/useFetchTags';
 import useFetchAreas from '../hooks/useFetchAreas';
 import useFetchProjects from '../hooks/useFetchProjects'; 
-import useManageAreas from '../hooks/useManageAreas';
 import useManageNotes from '../hooks/useManageNotes';
 import useManageProjects from '../hooks/useManageProjects';
 import useManageTags from '../hooks/useManageTags';
@ -20,9 +19,6 @@ interface DataContextProps {
  createNote: (noteData: any) => Promise<void>;
  updateNote: (noteId: number, noteData: any) => Promise<void>;
  deleteNote: (noteId: number) => Promise<void>;
-  createArea: (areaData: any) => Promise<void>;
-  updateArea: (areaId: number, areaData: any) => Promise<void>;
-  deleteArea: (areaId: number) => Promise<void>;
  createProject: (projectData: any) => Promise<Project>;
  updateProject: (projectId: number, projectData: any) => Promise<Project>;
  deleteProject: (projectId: number) => Promise<void>;
@ -57,7 +53,6 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
    isError: isErrorProjects,
    mutate: mutateProjects,
  } = useFetchProjects(); 
-  const { createArea, updateArea, deleteArea } = useManageAreas();
  const { createProject, updateProject, deleteProject } = useManageProjects();
  const { createTag, updateTag, deleteTag } = useManageTags();
  const {
@ -94,9 +89,6 @@ export const DataProvider: React.FC<{ children: React.ReactNode }> = ({ children
        createNote,
        updateNote,
        deleteNote,
-        createArea,
-        updateArea,
-        deleteArea,
        createProject,
        updateProject,
        deleteProject,
--- a/app/frontend/hooks/useManageAreas.ts
+++ b/app/frontend/hooks/useManageAreas.ts
@ -1,71 +0,0 @@
-import { useCallback } from 'react';
-import { useSWRConfig } from 'swr';
-import { Area } from '../entities/Area';
-
-const useManageAreas = () => {
-  const { mutate } = useSWRConfig();
-
-  const createArea = useCallback(async (areaData: Partial<Area>) => {
-    try {
-      const response = await fetch('/api/areas', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(areaData),
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to create area.');
-      }
-      const newArea: Area = await response.json();
-      mutate('/api/areas?active=true', (current: Area[] = []) => [...current, newArea], false);
-    } catch (error) {
-      console.error('Error creating area:', error);
-      throw error;
-    }
-  }, [mutate]);
-
-  const updateArea = useCallback(async (areaId: number, areaData: Partial<Area>) => {
-    try {
-      const response = await fetch(`/api/areas/${areaId}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(areaData),
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to update area.');
-      }
-      const updatedArea: Area = await response.json();
-      mutate('/api/areas?active=true', (current: Area[] = []) =>
-        current.map(area => (area.id === areaId ? updatedArea : area)),
-        false
-      );
-    } catch (error) {
-      console.error('Error updating area:', error);
-      throw error;
-    }
-  }, [mutate]);
-
-  const deleteArea = useCallback(async (areaId: number) => {
-    try {
-      const response = await fetch(`/api/areas/${areaId}`, {
-        method: 'DELETE',
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to delete area.');
-      }
-      mutate('/api/areas?active=true', (current: Area[] = []) =>
-        current.filter(area => area.id !== areaId),
-        false
-      );
-    } catch (error) {
-      console.error('Error deleting area:', error);
-      throw error;
-    }
-  }, [mutate]);
-
-  return { createArea, updateArea, deleteArea };
-};
-
-export default useManageAreas;
--- a/app/frontend/store/useStore.ts
+++ b/app/frontend/store/useStore.ts
@ -0,0 +1,166 @@
+import { create } from 'zustand';
+import { Project } from '../entities/Project';
+import { Note } from '../entities/Note';
+import { Area } from '../entities/Area';
+import { Task } from '../entities/Task';
+import { Tag } from '../entities/Tag';
+
+interface NotesStore {
+  notes: Note[];
+  create: (noteData: Note) => Promise<void>;
+  update: (noteId: number, noteData: Note) => Promise<void>;
+  delete: (noteId: number) => Promise<void>;
+  mutate: () => void;
+}
+
+interface AreasStore {
+  areas: Area[];
+  create: (areaData: Partial<Area>) => Promise<void>;
+  update: (areaId: number, areaData: Partial<Area>) => Promise<void>;
+  delete: (areaId: number) => Promise<void>;
+  fetchAll: () => Promise<void>;
+}
+
+interface ProjectsStore {
+  projects: Project[];
+  create: (projectData: Project) => Promise<void>;
+  update: (projectId: number, projectData: Project) => Promise<void>;
+  delete: (projectId: number) => Promise<void>;
+  mutate: () => void;
+}
+
+interface TagsStore {
+  tags: Tag[];
+  create: (tagData: Tag) => Promise<void>;
+  update: (tagId: number, tagData: Tag) => Promise<void>;
+  delete: (tagId: number) => Promise<void>;
+  mutate: () => void;
+}
+
+interface TasksStore {
+  tasks: Task[];
+  create: (taskData: Task) => Promise<void>;
+  update: (taskId: number, taskData: Task) => Promise<void>;
+  delete: (taskId: number) => Promise<void>;
+}
+
+interface StoreState {
+  isLoading: boolean;
+  isError: boolean;
+  notesStore: NotesStore;
+  areasStore: AreasStore;
+  projectsStore: ProjectsStore;
+  tagsStore: TagsStore;
+  tasksStore: TasksStore;
+}
+
+export const useStore = create<StoreState>((set) => ({
+  isLoading: false,
+  isError: false,
+
+  notesStore: {
+    notes: [],
+    create: async (noteData) => { /* Implementation */ },
+    update: async (noteId, noteData) => { /* Implementation */ },
+    delete: async (noteId) => { /* Implementation */ },
+    mutate: () => { /* Implementation */ },
+  },
+
+  areasStore: {
+    areas: [],
+
+    fetchAll: async () => {
+      try {
+        const response = await fetch('/api/areas?active=true');
+        const areas = await response.json();
+        set((state) => ({
+          areasStore: {
+            ...state.areasStore,
+            areas,
+          },
+        }));
+      } catch (error) {
+        console.error('Failed to fetch areas:', error);
+      }
+    },
+
+    create: async (areaData) => {
+      try {
+        const response = await fetch('/api/areas', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(areaData),
+        });
+        const newArea = await response.json();
+        set((state) => ({
+          areasStore: {
+            ...state.areasStore,
+            areas: [...state.areasStore.areas, newArea],
+          },
+        }));
+      } catch (error) {
+        console.error('Error creating area:', error);
+      }
+    },
+
+    update: async (areaId, areaData) => {
+      try {
+        const response = await fetch(`/api/areas/${areaId}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(areaData),
+        });
+        const updatedArea = await response.json();
+        set((state) => ({
+          areasStore: {
+            ...state.areasStore,
+            areas: state.areasStore.areas.map((area) =>
+              area.id === areaId ? updatedArea : area
+            ),
+          },
+        }));
+      } catch (error) {
+        console.error('Error updating area:', error);
+      }
+    },
+
+    delete: async (areaId) => {
+      try {
+        await fetch(`/api/areas/${areaId}`, {
+          method: 'DELETE',
+        });
+        set((state) => ({
+          areasStore: {
+            ...state.areasStore,
+            areas: state.areasStore.areas.filter((area) => area.id !== areaId),
+          },
+        }));
+      } catch (error) {
+        console.error('Error deleting area:', error);
+      }
+    },
+  },
+
+  projectsStore: {
+    projects: [],
+    create: async (projectData) => { /* Implementation */ },
+    update: async (projectId, projectData) => { /* Implementation */ },
+    delete: async (projectId) => { /* Implementation */ },
+    mutate: () => { /* Implementation */ },
+  },
+
+  tagsStore: {
+    tags: [],
+    create: async (tagData) => { /* Implementation */ },
+    update: async (tagId, tagData) => { /* Implementation */ },
+    delete: async (tagId) => { /* Implementation */ },
+    mutate: () => { /* Implementation */ },
+  },
+
+  tasksStore: {
+    tasks: [],
+    create: async (taskData) => { /* Implementation */ },
+    update: async (taskId, taskData) => { /* Implementation */ },
+    delete: async (taskId) => { /* Implementation */ },
+  },
+}));
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,8 @@
        "react-router-dom": "^6.26.2",
        "react-tagify": "^1.0.7",
        "swr": "^2.2.5",
-        "tagify": "^0.1.1"
+        "tagify": "^0.1.1",
+        "zustand": "^5.0.3"
      },
      "devDependencies": {
        "@babel/core": "^7.25.7",
@ -2545,7 +2546,7 @@
      "version": "15.7.13",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/qs": {
      "version": "6.9.16",
@ -2563,7 +2564,7 @@
      "version": "18.3.10",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz",
      "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@ -4170,7 +4171,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/data-view-buffer": {
      "version": "1.0.1",
@ -10297,6 +10298,34 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.3.tgz",
+      "integrity": "sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -54,6 +54,7 @@
    "react-router-dom": "^6.26.2",
    "react-tagify": "^1.0.7",
    "swr": "^2.2.5",
-    "tagify": "^0.1.1"
+    "tagify": "^0.1.1",
+    "zustand": "^5.0.3"
  }
 }
--- a/public/js/bundle.js
+++ b/public/js/bundle.js