Refactor modal and notification components

- Deleted old modal components and styles, and created new modal components under the ui directory.
- Updated modal stories and tests to reflect the new structure.
- Refactored notification components, fixing import paths and correcting component names.
- Introduced context menu components with associated styles and types.
- Added dropdown components with stories and tests for better UI interaction.
- Updated app slice and selectors for better state management.
- Adjusted TypeScript configuration and Vite aliasing for improved module resolution.

Author: BluePixelDev

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 *storybook.log
+coverage

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "boardify",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,6 +10,7 @@
     "tauri": "tauri",
     "prepare": "husky",
     "test": "vitest",
+    "coverage": "vitest run --coverage",
     "test:watch": "vitest --watch"
   },
   "husky": {

package.json

@@ -11,7 +11,7 @@ import {
 import { AppLayout } from "./AppLayout"
 import Editor from "./Routes/Editor"
 import Home from "./Routes/Home"
-import { ContextMenuProvider } from "./features/app/context-menu"
+import { ContextMenuProvider } from "./ui/context-menu"
 
 function App() {
   return (

src/App.tsx

@@ -3,7 +3,7 @@ import { NotificationOverlay } from "./features/notifications"
 import { isSettingsModalOpen, SettingsModal, toggleSettingsModal } from "./features/settings"
 import CSSSnippets from "./features/snippets/Snippets"
 import { Titlebar, ToolbarProvider } from "./features/titlebar"
-import { ModalContainer } from "./features/modal"
+import { ModalContainer } from "./ui/modal"
 import { AppTheme } from "./features/theme"
 import { PluginManager } from "./features/plugins"
 import { useAppDispatch, useAppSelector } from "./store"

src/AppLayout.tsx

@@ -4,7 +4,7 @@ import DotGrid from "@/features/graph/grid/DotGrid";
 import NodeCanvas from "@/features/graph/renderer/components/NodesRenderer";
 import { AppDropzone } from "@/features/importing/filedrop";
 import SidebarButton, { Sidebar } from "@/features/sidebar";
-import { isSidebarOpen } from "@/features/app/selectors";
+import { isSidebarOpen } from "@/store/app/appSelectors";
 import { useSelector } from "react-redux";
 import { useAppDispatch, useAppSelector } from "@/store";
 import { addLayer, selectAllLayers, selectLayer, selectSelectedLayerId } from "@/features/graph";

src/Routes/Editor.tsx

@@ -7,7 +7,7 @@ import FileDropModal from "./FileDropModal"
 import { readFile } from "@tauri-apps/plugin-fs";
 import { basename } from "@tauri-apps/api/path";
 import { useAppDispatch } from "@/store"
-import { ModalContainer } from "@/features/modal"
+import { ModalContainer } from "@/ui/modal"
 
 export default function DragDropHandler(): JSX.Element {
     const [draggingFiles, setDraggingFiles] = useState(false)

src/features/app/context-menu/contextmenu.styles.css

@@ -1,6 +1,6 @@
 import { Icon } from "@iconify/react"
 import "./fildedrop.styles.css"
-import { Modal } from "@/features/modal";
+import { Modal } from "@/ui/modal";
 
 export default function FileDropModal() {
     return (

src/features/importing/filedrop/components/AppDropzone.tsx

@@ -7,7 +7,7 @@ import {
     markAllNodesSelected,
     updateNode,
 } from "@/features/graph/store/graphSlice"
-import { toggleSidebar } from "@/features/app/appSlice"
+import { toggleSidebar } from "@/store/app/appSlice"
 import { selectKeybinds } from "../store/keybindSelectors"
 import { KeyAction, Keybind } from "../types"
 import { selectSelectedNodes } from "@/features/graph"