- Began implementing command palette

- Improved plugin system

Author: BluePixelDev

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,7 +24,8 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
+
+- OS: [e.g. iOS]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

.prettierrc

@@ -1,6 +1,6 @@
 {
-    "semi": true,
-    "singleQuote": false,
-    "tabWidth": 2,
-    "trailingComma": "es5"
+  "semi": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "useTabs": false
 }

README.md

@@ -80,4 +80,3 @@ We welcome contributions from the community! Whether it's a bug fix, feature req
 ---
 
 > "Boardify is a desktop app for organizing reference material such as images, videos, and other media on an infinite board."
-

src-tauri/capabilities/default.json

@@ -2,9 +2,7 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "Capability for the main window",
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "core:default",
     "shell:allow-open",
@@ -16,4 +14,4 @@
     "log:default",
     "fs:default"
   ]
-}
+}

src/assets/styles/base.css

@@ -1,97 +1,102 @@
 /* Global Reset */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html,
 body {
-    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    color: var(--text-color, #f6f6f6);
-    background-color: transparent;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  color: var(--text-color, #f6f6f6);
+  background-color: transparent;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
 }
 
 body,
 #root {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 :root {
-    /* Colors */
-    --text-color: #f6f6f6;
-    --card-color: #333436;
-    --graph-bg: #222224;
+  /* Colors */
+  --text-color: #f6f6f6;
+  --card-color: #333436;
+  --graph-bg: #222224;
 
-    /* Spacing */
-    --input-padding: 10px;
-    --border-radius: 6px;
+  /* Spacing */
+  --input-padding: 10px;
+  --border-radius: 6px;
 
-    /* Sizes */
-    --slider-thumb-size: 18px;
+  /* Sizes */
+  --slider-thumb-size: 18px;
 
-    --z-index-base: 0;
-    --z-index-sidebar: 10;
-    --z-index-titlebar: 20;
-    --z-index-dropdown: 30;
-    --z-index-modal: 40;
-    --z-index-settings: 50;
-    --z-index-toast: 60;
-    --z-index-tooltip: 70;
-    --z-index-overlay: 80;
-    --z-index-always-on-top: 9999;
+  --z-index-base: 0;
+  --z-index-sidebar: 10;
+  --z-index-titlebar: 20;
+  --z-index-dropdown: 30;
+  --z-index-modal: 40;
+  --z-index-settings: 50;
+  --z-index-toast: 60;
+  --z-index-tooltip: 70;
+  --z-index-overlay: 80;
+  --z-index-always-on-top: 9999;
 }
 
 *:focus-visible {
-    outline: none;
-    box-shadow:
-        0 0 0 3px rgba(255, 255, 255, 0.5),
-        0 2px 4px rgba(0, 0, 0, 0.2);
+  outline: none;
+  box-shadow:
+    0 0 0 3px rgba(255, 255, 255, 0.5),
+    0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 body,
 button,
 input,
 select,
 textarea {
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    color: var(--text-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  color: var(--text-color);
 }
 
 li {
-    border: none;
-    outline: none;
+  border: none;
+  outline: none;
+}
+
+button {
+  border: none;
+  cursor: pointer;
 }
 
 .expand-box {
-    position: relative;
-    display: flex;
-    flex: 1;
+  position: relative;
+  display: flex;
+  flex: 1;
 }
 
 .app-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }
 
 .editor-container {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
 }

src/features/command-palette/CommandRegistry.ts

@@ -0,0 +1,70 @@
+import { store } from "@/store";
+import { Command, ICommandRegistry } from "./types";
+
+type CommandRegistryEvent = "commandAdded" | "commandRemoved";
+type CommandRegistryListener = (commands: Command[]) => void;
+
+export class CommandRegistry implements ICommandRegistry {
+  private commands: Map<string, Command>;
+  private listeners = new Map<
+    CommandRegistryEvent,
+    Set<CommandRegistryListener>
+  >();
+
+  constructor() {
+    this.commands = new Map<string, Command>();
+  }
+
+  private emit(event: CommandRegistryEvent) {
+    const listeners = this.listeners.get(event);
+    if (!listeners) return;
+    const commands = this.getCommands();
+    for (const listener of listeners) {
+      listener(commands);
+    }
+  }
+
+  on(event: CommandRegistryEvent, listener: CommandRegistryListener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event)!.add(listener);
+  }
+
+  off(event: CommandRegistryEvent, listener: CommandRegistryListener) {
+    this.listeners.get(event)?.delete(listener);
+  }
+
+  async executeCommand(commandId: string): Promise<void> {
+    const command = this.commands.get(commandId);
+    if (!command) {
+      throw new Error(`Command with id ${commandId} does not exist.`);
+    }
+    await command.action({
+      dispatch: store.dispatch,
+      getState: store.getState,
+    });
+  }
+
+  addCommand(command: Command): void {
+    if (this.commands.has(command.id)) {
+      throw new Error(`Command with id ${command.id} already exists.`);
+    }
+    this.commands.set(command.id, command);
+    this.emit("commandAdded");
+  }
+
+  removeCommand(commandId: string): void {
+    if (!this.commands.has(commandId)) {
+      throw new Error(`Command with id ${commandId} does not exist.`);
+    }
+    this.commands.delete(commandId);
+    this.emit("commandRemoved");
+  }
+
+  getCommands(): Command[] {
+    return Array.from(this.commands.values());
+  }
+}
+
+export const commandRegistry = new CommandRegistry();

src/features/command-palette/components/CommandList.tsx

@@ -0,0 +1,21 @@
+import { commandRegistry } from "../CommandRegistry";
+import { useCommands } from "../hooks/useCommands";
+
+export const CommandList = () => {
+  const commands = useCommands();
+
+  function executeCommand(id: string) {
+    commandRegistry.executeCommand(id);
+  }
+
+  return (
+    <div className="command-list">
+      <h1>Command List</h1>
+      {commands.map((command) => (
+        <button key={command.id} onClick={() => executeCommand(command.id)}>
+          {command.name}
+        </button>
+      ))}
+    </div>
+  );
+};

src/features/command-palette/hooks/useCommands.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { Command } from "../types";
+import { commandRegistry } from "../CommandRegistry";
+
+export function useCommands(): Command[] {
+  const [commands, setCommands] = useState<Command[]>(
+    commandRegistry.getCommands()
+  );
+
+  useEffect(() => {
+    const update = (cmds: Command[]) => setCommands(cmds);
+    commandRegistry.on("commandAdded", update);
+    commandRegistry.on("commandRemoved", update);
+
+    return () => {
+      commandRegistry.off("commandAdded", update);
+      commandRegistry.off("commandRemoved", update);
+    };
+  }, []);
+
+  return commands;
+}

src/features/command-palette/index.ts

@@ -0,0 +1,4 @@
+export { commandRegistry } from "./CommandRegistry";
+export * from "./types";
+export { useCommands } from "./hooks/useCommands";
+export { CommandPalette } from "./components/CommandPalette";