- Added new tests

- Removed react-tabs and replaced it with Headless-UI
- Added Tailwind (css files are stil preffered)
- Added classnames utility
- Added PluginDebugPanel
- Improved Settings Modal and UploadModal
- Simplified ImportEvent and removed getState() and dispatch() functions
- Improved API of rendererRegistry and importerRegistry

Author: BluePixelDev

packages/app/package.json

@@ -12,21 +12,24 @@
     "test:watch": "vitest --watch"
   },
   "dependencies": {
-    "@boardify/sdk": "workspace:*",
     "@boardify/core-plugins": "workspace:*",
+    "@boardify/sdk": "workspace:*",
     "@codemirror/lang-markdown": "^6.3.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/css": "^11.13.5",
+    "@headlessui/react": "^2.2.4",
     "@reduxjs/toolkit": "^2.4.0",
+    "@tailwindcss/vite": "^4.1.10",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-fs": "^2.2.1",
     "@tauri-apps/plugin-log": "^2.3.1",
     "@tauri-apps/plugin-shell": "^2",
     "@uiw/react-codemirror": "^4.23.10",
     "boardify": "file:",
+    "classnames": "^2.5.1",
     "file-type": "^20.4.1",
     "framer-motion": "^11.13.1",
     "fs-extra": "^11.3.0",
@@ -42,6 +45,7 @@
     "react-toastify": "^11.0.5",
     "remark-gfm": "^4.0.1",
     "reselect": "^5.1.1",
+    "tailwindcss": "^4.1.10",
     "tinycolor2": "^1.6.0",
     "uuid": "^11.0.3"
   },

packages/app/src/App.css

@@ -1 +1,2 @@
-@import "./assets/styles/index.css";
+@import "./assets/styles/index.css";
+@import "tailwindcss";

packages/app/src/AppLayout.tsx

@@ -2,12 +2,12 @@ import { ToastContainer } from "react-toastify";
 import { NotificationOverlay } from "./features/notifications";
 import {
   isSettingsModalOpen,
-  SettingsModal,
+  SettingsModalContent,
   toggleSettingsModal,
 } from "./features/settings";
 import CSSSnippets from "./features/snippets/Snippets";
 import { Titlebar, ToolbarProvider } from "./features/titlebar";
-import { ModalContainer } from "./ui/modal";
+import { Modal } from "./ui/modal";
 import { ThemeProvider } from "./features/theme";
 import { PluginProvider } from "./services/plugins";
 import { useAppDispatch, useAppSelector } from "./redux";
@@ -27,12 +27,14 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
           <CSSSnippets />
           <Titlebar />
           <NotificationOverlay />
-          <ModalContainer
-            className="modal-dim settings-modal__container"
-            show={settingsOpen}
+          <Modal
+            isOpen={settingsOpen}
+            onClose={() => dispatch(toggleSettingsModal())}
+            title="Settings"
+            className="settings__modal"
           >
-            <SettingsModal onClose={() => dispatch(toggleSettingsModal())} />
-          </ModalContainer>
+            <SettingsModalContent />
+          </Modal>
           <ToastContainer />
           <div className="app-container">{children}</div>
         </ToolbarProvider>

packages/app/src/assets/styles/buttons.css

@@ -3,11 +3,13 @@ button {
   color: var(--text-color, #f6f6f6);
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  padding: 5px 10px;
+  padding: 6px;
   border-radius: 5px;
   font-size: var(--font-size);
   cursor: pointer;
   transition: box-shadow 0.2s ease;
+  display: inline-grid;
+  place-items: center;
 }
 
 button:disabled {

packages/app/src/features/board/components/nodes/NodesRenderer.tsx

@@ -2,15 +2,16 @@ import { useAppSelector } from "@/redux";
 import { rendererRegistry } from "@/services/renderer";
 import { ErrorBoundary } from "react-error-boundary";
 import { FallbackNode } from "./FallbackNode";
-import { NodeData, selectVisibleNodes } from "../..";
+import { selectVisibleNodes } from "../..";
 
 export function NodesRenderer() {
-  const nodes = useAppSelector(selectVisibleNodes);
+  const visibleNodes = useAppSelector(selectVisibleNodes);
 
   return (
     <>
-      {nodes.map((node: NodeData<unknown>) => {
-        const Renderer = rendererRegistry.get(node.type);
+      {visibleNodes.map((node) => {
+        const Renderer = rendererRegistry.getRendererForNode(node);
+
         return (
           <ErrorBoundary
             key={node.id}

packages/app/src/features/board/store/nodes/nodesSelectors.ts

@@ -42,3 +42,13 @@ export const selectVisibleNodes = createSelector(
       .filter((n) => n.layerId === selLayer)
       .sort((a, b) => a.zIndex - b.zIndex)
 );
+
+export const selectVisibleNodesIds = createSelector(
+  selectAllNodes,
+  selectSelectedLayerId,
+  (nodes, selLayer) =>
+    nodes
+      .filter((n) => n.layerId === selLayer)
+      .sort((a, b) => a.zIndex - b.zIndex)
+      .map((ctx) => ctx.id)
+);

packages/app/src/features/settings/components/SettingsModal.stories.tsx

@@ -0,0 +1,65 @@
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import "react-tabs/style/react-tabs.css";
+import "./settingsModal.styles.css";
+import { SnippetControls } from "./snippets/SnippetControls";
+import { Toggle } from "@/ui/toggle/Toggle";
+import { useState } from "react";
+import { PluginDebugPanel } from "@/services/plugins";
+import classNames from "classnames";
+
+const tabLabels = ["General", "Appearance", "Shortcuts", "About"];
+export const SettingsModalContent = () => {
+  const [booleanValue, setBooleanValue] = useState(false);
+
+  return (
+    <TabGroup>
+      <div className="settings__tabs">
+        <TabList className="settings__tab-list">
+          {tabLabels.map((label) => (
+            <Tab
+              key={label}
+              className={({ selected }) =>
+                classNames("settings__tab", selected && "settings__tab--active")
+              }
+            >
+              {label}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels>
+          <TabPanel className="settings__panel">
+            <Toggle value={booleanValue} onChange={(e) => setBooleanValue(e)} />
+            <input type="text" id="language" />
+            <input type="range" />
+            <input type="checkbox" id="auto-launch" />
+            <input type="radio" name="theme" />
+
+            <button>Test</button>
+            <button className="accent">Test</button>
+            <p className="settings__panel-text">
+              Options like language, auto-launch, etc.
+            </p>
+          </TabPanel>
+
+          <TabPanel className="settings__panel">
+            <SnippetControls />
+          </TabPanel>
+
+          <TabPanel className="settings__panel">
+            <p className="settings__panel-text">
+              Customize keyboard shortcuts here.
+            </p>
+          </TabPanel>
+
+          <TabPanel className="settings__panel">
+            <p className="settings__panel-text">
+              App version, author info, and licensing.
+            </p>
+            <PluginDebugPanel />
+          </TabPanel>
+        </TabPanels>
+      </div>
+    </TabGroup>
+  );
+};

packages/app/src/features/settings/components/SettingsModal.tsx

@@ -2,77 +2,70 @@
   width: 600px;
   height: 80vh;
   padding: 24px;
+  background-color: #1e1e1e;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  color: #e0e0e0;
 }
 
 .settings__title {
   font-size: 22px;
   margin-bottom: 20px;
-  font-weight: bold;
+  font-weight: 600;
   text-align: center;
+  color: #ffffff;
 }
 
 .settings__tab-list {
   display: flex;
-  padding: 0;
-  border-bottom: 1px solid #444;
+  gap: 4px;
   margin-bottom: 16px;
+  padding: 4px;
+  background-color: #2a2a2a;
+  border-radius: 8px;
 }
 
 .settings__tab {
-  display: flex;
-  flex-grow: 1;
+  flex: 1;
   text-align: center;
-  flex-direction: column;
-  height: 100%;
-  padding: 8px 12px;
+  padding: 10px 0;
   border: none;
-  background: none;
-  color: #ccc;
+  background: transparent;
+  color: #aaa;
   cursor: pointer;
   font-size: 14px;
-  border-radius: 4px 4px 0 0;
-  transition: background-color 0.2s ease;
-  list-style-type: none;
-  user-select: none;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: background 0.2s ease, color 0.2s ease;
 }
 
-.settings__tab:not(.settings__tab--active):hover {
-  background-color: #2c2c2c;
+.settings__tab:hover {
+  background-color: #333;
 }
 
 .settings__tab--active {
-  background-color: var(--accent-color, #3c3c3c);
+  background-color: var(--accent-color, #3f51b5);
   color: #fff;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .settings__panel {
-  display: none;
-}
-
-.react-tabs__tab-panel--selected.settings__panel {
-  display: block;
-  padding: 12px 0;
+  padding-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .settings__panel-title {
   font-size: 18px;
   margin-bottom: 8px;
+  font-weight: 600;
+  color: #fff;
 }
 
 .settings__panel-text {
   font-size: 14px;
   color: #ccc;
-}
-
-.modal__close-button {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: none;
-  border: none;
-  color: #ccc;
-  font-size: 24px;
-  cursor: pointer;
-  transition: color 0.2s ease;
+  line-height: 1.5;
 }