feat(snippets): Refactor CSS snippets handling and add selectors

- Updated CSSSnippets component to use selectEnabledSnippets selector for better state management.
- Combined CSS snippets into a single string for rendering.
- Removed unused selectors file and added snippetSelectors for better organization.
- Enhanced snippetSlice to include an enabled property for snippets.
- Added SnippetCard and SnippetControls components for managing CSS snippets in settings.
- Implemented styles for snippet controls and cards.
- Introduced selectors for settings modal state management.
- Added plugin management system with PluginManager and related types for better extensibility.
- Implemented image and video plugins with importers and node renderers.
- Added support for GIF and image nodes with appropriate rendering and importing logic.
- Created note node with markdown support and text importing functionality.

Author: BluePixelDev

src-tauri/src/lib.rs

@@ -2,7 +2,13 @@
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_fs::init())
-        .plugin(tauri_plugin_log::Builder::new().build())
+        .plugin(
+            tauri_plugin_log::Builder::new()
+                .target(tauri_plugin_log::Target::new(
+                    tauri_plugin_log::TargetKind::Webview,
+                ))
+                .build(),
+        )
         .plugin(tauri_plugin_shell::init())
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

src/App.tsx

@@ -1,4 +1,3 @@
-import AppTheme from "@/features/theme/AppTheme"
 import { store } from "@store"
 import { Provider } from "react-redux"
 import "./App.css"
@@ -19,21 +18,19 @@ function App() {
   return (
     <Provider store={store}>
       <ContextMenuProvider>
-        <AppTheme>
-          <AppLayout>
-            <Router>
-              <Routes>
-                {/*TODO: Remove default redirect*/}
-                <Route path="/" element={<Navigate to="/editor" replace />} />
-                <Route path="/  " element={<Home />} />
-                <Route path="/editor" element={<Editor />} />
-              </Routes>
-            </Router>
-          </AppLayout>
-        </AppTheme>
+        <AppLayout>
+          <Router>
+            <Routes>
+              {/*TODO: Remove default redirect*/}
+              <Route path="/" element={<Navigate to="/editor" replace />} />
+              <Route path="/  " element={<Home />} />
+              <Route path="/editor" element={<Editor />} />
+            </Routes>
+          </Router>
+        </AppLayout>
       </ContextMenuProvider>
     </Provider>
   )
 }
 
-export default App
+export default App

src/AppLayout.tsx

@@ -1,29 +1,41 @@
 import { ToastContainer } from "react-toastify"
 import AppSetup from "./AppSetup"
 import { NotificationOverlay } from "./features/notifications"
-import { SettingsModal } from "./features/settings"
+import { isSettingsModalOpen, SettingsModal, toggleSettingsModal } from "./features/settings"
 import CSSSnippets from "./features/snippets/CSSSnippets"
 import { Titlebar, ToolbarProvider } from "./features/titlebar"
 import { ModalContainer } from "./features/modal"
+import { AppTheme } from "./features/theme"
+import { PluginManager } from "./features/plugins"
+import { useAppDispatch, useAppSelector } from "./store"
 
 interface AppLayoutProps {
     children: React.ReactNode
 }
 
 export const AppLayout = (({ children }: AppLayoutProps) => {
+
+    const settingsOpen = useAppSelector(isSettingsModalOpen)
+    const dispatch = useAppDispatch()
+
     return (
-        <ToolbarProvider>
-            <AppSetup />
-            <CSSSnippets />
-            <Titlebar />
-            <NotificationOverlay />
-            <ModalContainer className="modal-dim">
-                <SettingsModal onClose={() => console.log("Should close")} />
-            </ModalContainer>
-            <ToastContainer />
-            <div className="app-container">
-                {children}
-            </div>
-        </ToolbarProvider>
+        <PluginManager>
+            <AppTheme>
+                <ToolbarProvider>
+
+                    <AppSetup />
+                    <CSSSnippets />
+                    <Titlebar />
+                    <NotificationOverlay />
+                    <ModalContainer className="modal-dim settings-modal__container" show={settingsOpen}>
+                        <SettingsModal onClose={() => dispatch(toggleSettingsModal())} />
+                    </ModalContainer>
+                    <ToastContainer />
+                    <div className="app-container">
+                        {children}
+                    </div>
+                </ToolbarProvider>
+            </AppTheme>
+        </PluginManager>
     )
 })

src/Routes/Editor.tsx

@@ -1,23 +1,46 @@
 import KeybindControl from "@/features/keybinds/components/KeybindControl";
 import { GraphView } from "@/features/graph/graphview";
 import DotGrid from "@/features/graph/grid/DotGrid";
-import NodeCanvas from "@/features/graph/renderer/NodesRenderer";
+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 { useSelector } from "react-redux";
+import { useAppDispatch, useAppSelector } from "@/store";
+import { addLayer, selectAllLayers, selectLayer, selectSelectedLayerId } from "@/features/graph";
+import { v4 as uuidv4 } from "uuid"
 
 export default function Editor() {
+    const dispatch = useAppDispatch()
     const sidebarOpen = useSelector(isSidebarOpen)
+    const layers = useAppSelector(selectAllLayers)
+    const selectedLayerId = useAppSelector(selectSelectedLayerId)
+
+    const handleAddLayer = () => {
+        const newLayer = {
+            id: uuidv4(),
+            name: `Layer ${layers.length + 1}`,
+            color: "orange",
+            icon: "bxs:layer",
+        }
+        dispatch(addLayer(newLayer))
+        dispatch(selectLayer(newLayer.id))
+    }
 
     return (
         <div className="editor-container">
             <KeybindControl />
             <Sidebar isExpanded={sidebarOpen}>
-                <SidebarButton label="Hello" icon="mdi:close" selected={true} />
-                <SidebarButton label="Hello" selected={false} />
-                <SidebarButton label="Hello" selected={false} />
-                <SidebarButton label="Hello" selected={false} />
+                {layers.map((layer) => (
+                    <SidebarButton
+                        key={layer.id}
+                        label={layer.name}
+                        icon={layer.icon}
+                        selected={selectedLayerId === layer.id}
+                        onClick={() => dispatch(selectLayer(layer.id))}
+                    />
+                ))}
+                <SidebarButton className="add-layer__button" onClick={handleAddLayer} label={"+"} selected={true}/>
             </Sidebar>
             <div className="expand-box">
                 <AppDropzone />

src/assets/styles/base.css

@@ -37,6 +37,9 @@ body,
     --sidebar-bg: #2c2c2c;
     --separator-color: #444;
     --text-color: #f6f6f6;
+    --card-color: #333436;
+
+    --graph-bg: #222224;
 
     /* Spacing */
     --input-padding: 10px;

src/assets/styles/inputs.css

@@ -51,6 +51,7 @@ input[type="range"] {
     border-radius: 3px;
     appearance: none;
     cursor: pointer;
+    padding: initial;
 }
 
 input[type="range"]::-webkit-slider-thumb {
@@ -61,35 +62,39 @@ input[type="range"]::-webkit-slider-thumb {
     background: var(--accent-color);
     border-radius: 50%;
     border: none;
-    margin-top: -6px;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 }
 
 input[type="range"]::-moz-range-thumb {
     width: var(--slider-thumb-size);
     height: var(--slider-thumb-size);
-    background: var(--accent-color);
+    background: red;
     border: none;
     border-radius: 50%;
 }
 
 /* Text Inputs */
+input,
 input[type="text"],
 input[type="email"],
-input[type="password"] {
-    width: 100%;
+input[type="password"],
+textarea {
     padding: var(--input-padding);
     border: 1px solid var(--separator-color);
     border-radius: var(--border-radius);
     background-color: var(--sidebar-bg);
     color: var(--text-color);
     font-size: 1rem;
     transition: border 0.2s, box-shadow 0.2s;
+    resize: none;
+    margin: 0.1rem;
 }
 
+input:focus,
 input[type="text"]:focus,
 input[type="email"]:focus,
-input[type="password"]:focus {
+input[type="password"]:focus,
+textarea:focus {
     outline: none;
     border-color: var(--accent-color);
     box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);

src/features/graph/graphview/graph.styles.css

@@ -5,7 +5,7 @@
     overflow: hidden;
     width: 100%;
     height: 100%;
-    background-color: #222224;
+    background-color: var(--graph-bg, #222224);
 }
 
 .graph-view__content {