config system + move api to frontend

search WIP
theme switcher
2026-03-11 12:26:40 -04:00 · 2026-03-10 12:10:52 -04:00 · 2026-03-10 11:11:22 -04:00 · 2026-03-06 09:59:24 -05:00 · 2026-03-06 09:56:54 -05:00 · 2026-03-03 20:58:31 -05:00
57 changed files with 19511 additions and 10657 deletions
--- a/out/main/index.js
+++ b/out/main/index.js
@@ -5,9 +5,6 @@ import filesystemPlugin from "@takerofnotes/plugin-filesystem";
 import supabasePlugin from "@takerofnotes/plugin-supabase";
 import fs from "fs/promises";
 import path, { join } from "path";
-import { Index } from "flexsearch";
-import crypto from "crypto";
-import sodium from "libsodium-wrappers";
 import __cjs_mod__ from "node:module";
 const __filename = import.meta.filename;
 const __dirname = import.meta.dirname;
@@ -26,16 +23,21 @@ class PluginRegistry {
    return this.plugins.get(id);
  }
  list() {
-    return Array.from(this.plugins.values());
+    return Array.from(this.plugins.values()).map((plugin) => ({
+      id: plugin.id,
+      name: plugin.name,
+      description: plugin.description,
+      configSchema: plugin.configSchema
+    }));
  }
 }
 const USER_DATA_STRING = "__DEFAULT_USER_DATA__";
-class PluginConfig {
+class Config {
  constructor(defaultPlugin) {
    this.defaultPlugin = defaultPlugin;
    this.configPath = path.join(app.getPath("userData"), "config.json");
  }
-  // Helper to replace placeholders with dynamic values, recursively
+  // Helper to replace placeholders with dynamic values
  _resolveDefaults(config) {
    if (Array.isArray(config)) {
      return config.map((item) => this._resolveDefaults(item));
@@ -65,9 +67,10 @@ class PluginConfig {
        defaultConfig[field.key] = field.default ?? null;
      }
      parsed = {
-        activeAdapter: this.defaultPlugin.id,
-        adapterConfig: defaultConfig
+        ...parsed ? parsed : {},
+        activeAdapter: this.defaultPlugin.id
      };
+      parsed.adapters[this.defaultPlugin.id] = defaultConfig;
      await this.write(parsed);
    } else {
      parsed.adapterConfig = this._resolveDefaults(parsed.adapterConfig);
@@ -88,192 +91,10 @@ class PluginConfig {
    );
  }
 }
-class NotesAPI {
-  constructor(adapter, encryptionKey = null) {
-    if (!adapter) {
-      throw new Error("NotesAPI requires a storage adapter");
-    }
-    this.adapter = adapter;
-    this.notesCache = /* @__PURE__ */ new Map();
-    this.encryptionKey = encryptionKey || process.env.NOTES_ENCRYPTION_KEY;
-    this._sodiumReady = false;
-    this.index = new Index({
-      tokenize: "tolerant",
-      resolution: 9
-    });
-  }
-  async _initSodium() {
-    if (!this._sodiumReady) {
-      await sodium.ready;
-      this._sodiumReady = true;
-    }
-  }
-  _encrypt(note) {
-    if (!this.encryptionKey) {
-      throw new Error("Encryption key not set");
-    }
-    const key = Buffer.from(this.encryptionKey, "hex");
-    if (key.length !== 32) {
-      throw new Error(
-        "Encryption key must be 64 hex characters (32 bytes)"
-      );
-    }
-    const nonce = sodium.randombytes_buf(sodium.crypto_secretbox_NONCEBYTES);
-    const message = JSON.stringify(note);
-    const ciphertext = sodium.crypto_secretbox_easy(
-      Buffer.from(message),
-      nonce,
-      key
-    );
-    const combined = Buffer.concat([nonce, ciphertext]);
-    return combined.toString("base64");
-  }
-  _decrypt(encryptedData) {
-    if (!this.encryptionKey) {
-      throw new Error("Encryption key not set");
-    }
-    const key = Buffer.from(this.encryptionKey, "hex");
-    if (key.length !== 32) {
-      throw new Error(
-        "Encryption key must be 64 hex characters (32 bytes)"
-      );
-    }
-    let combined;
-    try {
-      combined = Buffer.from(encryptedData, "base64");
-    } catch (e) {
-      throw new Error("Invalid encrypted data: not valid base64");
-    }
-    if (combined.length < sodium.crypto_secretbox_NONCEBYTES + sodium.crypto_secretbox_MACBYTES) {
-      throw new Error("Invalid encrypted data: too short");
-    }
-    const nonce = combined.slice(0, sodium.crypto_secretbox_NONCEBYTES);
-    const ciphertext = combined.slice(sodium.crypto_secretbox_NONCEBYTES);
-    let decrypted;
-    try {
-      decrypted = sodium.crypto_secretbox_open_easy(
-        ciphertext,
-        nonce,
-        key
-      );
-    } catch (e) {
-      throw new Error("Decryption failed: wrong key or corrupted data");
-    }
-    if (!decrypted) {
-      throw new Error("Decryption failed: no data returned");
-    }
-    const decryptedStr = Buffer.from(decrypted).toString("utf8");
-    try {
-      return JSON.parse(decryptedStr);
-    } catch (e) {
-      throw new Error(
-        `Decryption succeeded but invalid JSON: ${decryptedStr}`
-      );
-    }
-  }
-  async init() {
-    await this._initSodium();
-    await this.adapter.init();
-    const encryptedNotes = await this.adapter.getAll();
-    for (const encryptedNote of encryptedNotes) {
-      try {
-        const note = this._decrypt(encryptedNote.data || encryptedNote);
-        this.notesCache.set(note.id, note);
-        this.index.add(note.id, note.title + "\n" + note.content);
-      } catch (error) {
-        console.error("Failed to decrypt note:", error);
-      }
-    }
-  }
-  /* -----------------------
-       Public API
-      ------------------------*/
-  getCategories() {
-    const categories = /* @__PURE__ */ new Set();
-    for (const note of this.notesCache.values()) {
-      if (note.category) {
-        categories.add(note.category);
-      }
-    }
-    return Array.from(categories).sort();
-  }
-  getCategoryNotes(categoryName) {
-    return Array.from(this.notesCache.values()).filter((n) => n.category === categoryName).sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
-  }
-  getNote(id) {
-    return this.notesCache.get(id) ?? null;
-  }
-  async createNote(metadata = {}, content = "") {
-    const id = crypto.randomUUID();
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const note = {
-      id,
-      title: metadata.title || "Untitled",
-      category: metadata.category || null,
-      createdAt: now,
-      updatedAt: now,
-      content
-    };
-    const encryptedNote = {
-      id: note.id,
-      data: this._encrypt(note)
-    };
-    this.notesCache.set(id, note);
-    this.index.add(id, note.title + "\n" + content);
-    await this.adapter.create(encryptedNote);
-    return note;
-  }
-  async deleteNote(id) {
-    await this.adapter.delete(id);
-    this.notesCache.delete(id);
-    this.index.remove(id);
-  }
-  async updateNote(id, content) {
-    const note = this.notesCache.get(id);
-    if (!note) throw new Error("Note not found");
-    note.content = content;
-    note.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    const encryptedNote = {
-      id: note.id,
-      data: this._encrypt(note)
-    };
-    this.index.update(id, note.title + "\n" + content);
-    await this.adapter.update(encryptedNote);
-    return note;
-  }
-  async updateNoteMetadata(id, updates = {}) {
-    const note = this.notesCache.get(id);
-    if (!note) throw new Error("Note not found");
-    const allowedFields = ["title", "category"];
-    for (const key of Object.keys(updates)) {
-      if (!allowedFields.includes(key)) {
-        throw new Error(`Invalid metadata field: ${key}`);
-      }
-    }
-    if (updates.title !== void 0) {
-      note.title = updates.title;
-    }
-    if (updates.category !== void 0) {
-      note.category = updates.category;
-    }
-    note.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
-    const encryptedNote = {
-      id: note.id,
-      data: this._encrypt(note)
-    };
-    this.index.update(id, note.title + "\n" + note.content);
-    await this.adapter.update(encryptedNote);
-    return note;
-  }
-  search(query) {
-    const ids = this.index.search(query);
-    return ids.map((id) => this.notesCache.get(id));
-  }
-}
 const preloadPath = join(__dirname, "../preload/index.mjs");
 const rendererPath = join(__dirname, "../renderer/index.html");
 function createWindow() {
-  const mainWindow2 = new BrowserWindow({
+  const mainWindow = new BrowserWindow({
    width: 354,
    height: 549,
    show: false,
@@ -283,17 +104,17 @@ function createWindow() {
      sandbox: false
    }
  });
-  mainWindow2.on("ready-to-show", () => {
-    mainWindow2.show();
+  mainWindow.on("ready-to-show", () => {
+    mainWindow.show();
  });
-  mainWindow2.webContents.setWindowOpenHandler((details) => {
+  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url);
    return { action: "deny" };
  });
  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
-    mainWindow2.loadURL(process.env["ELECTRON_RENDERER_URL"]);
+    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
  } else {
-    mainWindow2.loadFile(rendererPath);
+    mainWindow.loadFile(rendererPath);
  }
 }
 function createNoteWindow(noteId) {
@@ -310,11 +131,11 @@ function createNoteWindow(noteId) {
  });
  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
    noteWindow.loadURL(
-      `${process.env["ELECTRON_RENDERER_URL"]}/note/${noteId}`
+      `${process.env["ELECTRON_RENDERER_URL"]}/#/note/${noteId}`
    );
  } else {
-    mainWindow.loadFile(rendererPath, {
-      path: `/notes/${noteId}`
+    noteWindow.loadFile(rendererPath, {
+      hash: `/note/${noteId}`
    });
  }
 }
@@ -325,34 +146,44 @@ app.whenReady().then(async () => {
  const registry = new PluginRegistry();
  registry.register(filesystemPlugin);
  registry.register(supabasePlugin);
-  const config = await new PluginConfig(filesystemPlugin).load();
-  const plugin = registry.get(config.activeAdapter);
-  const adapter = plugin.createAdapter(config.adapterConfig);
-  const notesAPI = new NotesAPI(
-    adapter,
-    "729a0d21d783654c68f1a0123e2a0e986350de536b5324f1f35876ea12ffeaf5"
-  );
-  await notesAPI.init();
+  const config = new Config(filesystemPlugin);
+  const initialConfig = await config.load();
+  const setActivePlugin = async (pluginId) => {
+    const currentConfig = await config.load();
+    await config.write({ ...currentConfig, activeAdapter: pluginId });
+    const plugin = registry.get(pluginId);
+    const adapterConfig = currentConfig.adapters[pluginId] || {};
+    const adapter = plugin.createAdapter(adapterConfig);
+    await adapter.init();
+    ipcMain.removeHandler("adapter:call");
+    ipcMain.handle("adapter:call", async (_, method, args) => {
+      if (!adapter[method]) {
+        throw new Error(`Invalid adapter method: ${method}`);
+      }
+      return await adapter[method](...args);
+    });
+    return true;
+  };
+  await setActivePlugin(initialConfig.activeAdapter);
+  ipcMain.handle("getConfig", async () => {
+    return await config.load();
+  });
+  ipcMain.handle("setConfig", async (_, newConfig) => {
+    await config.write(newConfig);
+  });
+  ipcMain.handle("listPlugins", async () => {
+    return registry.list();
+  });
+  ipcMain.handle("setActivePlugin", async (_, pluginId) => {
+    return await setActivePlugin(pluginId);
+  });
  const broadcastNoteChange = (event, data) => {
    BrowserWindow.getAllWindows().forEach((win) => {
      win.webContents.send(event, data);
    });
  };
-  ipcMain.handle("notesAPI:call", async (_, method, args) => {
-    if (!notesAPI[method]) {
-      throw new Error("Invalid method");
-    }
-    const result = await notesAPI[method](...args);
-    if (method === "createNote") {
-      broadcastNoteChange("note-created", result);
-    } else if (method === "updateNote") {
-      broadcastNoteChange("note-updated", result);
-    } else if (method === "updateNoteMetadata") {
-      broadcastNoteChange("note-updated", result);
-    } else if (method === "deleteNote") {
-      broadcastNoteChange("note-deleted", { id: args[0] });
-    }
-    return result;
+  ipcMain.on("note-changed", (_, event, data) => {
+    broadcastNoteChange(event, data);
  });
  electronApp.setAppUserModelId("com.electron");
  app.on("browser-window-created", (_, window) => {
--- a/out/preload/index.mjs
+++ b/out/preload/index.mjs
@@ -1,5 +1,9 @@
 import { contextBridge, ipcRenderer } from "electron";
 const api = {
+  getConfig: () => ipcRenderer.invoke("getConfig"),
+  setConfig: (config) => ipcRenderer.invoke("setConfig", config),
+  listPlugins: () => ipcRenderer.invoke("listPlugins"),
+  setActivePlugin: (pluginId) => ipcRenderer.invoke("setActivePlugin", pluginId),
  openNoteWindow: (noteId) => {
    ipcRenderer.send("open-note-window", noteId);
  },
@@ -11,18 +15,22 @@ const api = {
  },
  onNoteDeleted: (callback) => {
    ipcRenderer.on("note-deleted", (_, data) => callback(data));
+  },
+  notifyNoteChanged: (event, data) => {
+    ipcRenderer.send("note-changed", event, data);
  }
 };
-const notesAPI = {
-  call: (method, ...args) => ipcRenderer.invoke("notesAPI:call", method, args)
+const adapter = {
+  call: (method, ...args) => ipcRenderer.invoke("adapter:call", method, args)
 };
 if (process.contextIsolated) {
  try {
    contextBridge.exposeInMainWorld("api", api);
-    contextBridge.exposeInMainWorld("notesAPI", notesAPI);
+    contextBridge.exposeInMainWorld("adapter", adapter);
  } catch (error) {
    console.error(error);
  }
 } else {
  window.api = api;
+  window.adapter = adapter;
 }
--- a/out/renderer/assets/__vite-browser-external-2Ng8QIWW.js
+++ b/out/renderer/assets/__vite-browser-external-2Ng8QIWW.js
@@ -0,0 +1,4 @@
+const __viteBrowserExternal = {};
+export {
+  __viteBrowserExternal as default
+};
--- a/out/renderer/assets/index-CVyE7-c9.css
+++ b/out/renderer/assets/index-CVyE7-c9.css
--- a/out/renderer/assets/index-CoqDP7Z2.js
+++ b/out/renderer/assets/index-CoqDP7Z2.js
--- a/out/renderer/assets/leibniz-fraktur-BqdMSuEI.woff2
+++ b/out/renderer/assets/leibniz-fraktur-BqdMSuEI.woff2
--- a/out/renderer/assets/leibniz-fraktur-CvnkUeBX.woff
+++ b/out/renderer/assets/leibniz-fraktur-CvnkUeBX.woff
--- a/out/renderer/assets/neuefraktur-A4S1ACH2.woff2
+++ b/out/renderer/assets/neuefraktur-A4S1ACH2.woff2
--- a/out/renderer/assets/neuefraktur-CwjUIZ0G.woff
+++ b/out/renderer/assets/neuefraktur-CwjUIZ0G.woff
--- a/out/renderer/index.html
+++ b/out/renderer/index.html
@@ -8,8 +8,8 @@
            http-equiv="Content-Security-Policy"
            content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
        />
-    <script type="module" crossorigin src="./assets/index-GKstRZpo.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-D9ZUihqb.css">
+      <script type="module" crossorigin src="./assets/index-CoqDP7Z2.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-CVyE7-c9.css">
    </head>

    <body>
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
                "fecha": "^4.2.3",
                "flexsearch": "^0.8.212",
                "gsap": "^3.14.2",
-                "lenis": "^1.3.17",
                "libsodium-wrappers": "^0.8.2",
                "lodash": "^4.17.23",
                "lowlight": "^3.3.0",
@@ -6117,32 +6116,6 @@
            "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
            "license": "MIT"
        },
-        "node_modules/lenis": {
-            "version": "1.3.17",
-            "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.17.tgz",
-            "integrity": "sha512-k9T9rgcxne49ggJOvXCraWn5dt7u2mO+BNkhyu6yxuEnm9c092kAW5Bus5SO211zUvx7aCCEtzy9UWr0RB+oJw==",
-            "license": "MIT",
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/darkroomengineering"
-            },
-            "peerDependencies": {
-                "@nuxt/kit": ">=3.0.0",
-                "react": ">=17.0.0",
-                "vue": ">=3.0.0"
-            },
-            "peerDependenciesMeta": {
-                "@nuxt/kit": {
-                    "optional": true
-                },
-                "react": {
-                    "optional": true
-                },
-                "vue": {
-                    "optional": true
-                }
-            }
-        },
        "node_modules/libsodium": {
            "version": "0.8.2",
            "resolved": "https://registry.npmjs.org/libsodium/-/libsodium-0.8.2.tgz",
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
        "fecha": "^4.2.3",
        "flexsearch": "^0.8.212",
        "gsap": "^3.14.2",
-        "lenis": "^1.3.17",
        "libsodium-wrappers": "^0.8.2",
        "lodash": "^4.17.23",
        "lowlight": "^3.3.0",
--- a/resources/fonts/leibniz-fraktur.woff
+++ b/resources/fonts/leibniz-fraktur.woff
--- a/resources/fonts/leibniz-fraktur.woff2
+++ b/resources/fonts/leibniz-fraktur.woff2
--- a/resources/fonts/neuefraktur.woff
+++ b/resources/fonts/neuefraktur.woff
--- a/resources/fonts/neuefraktur.woff2
+++ b/resources/fonts/neuefraktur.woff2
--- a/src/main/core/PluginConfig.js
+++ b/src/main/core/PluginConfig.js
@@ -4,13 +4,13 @@ import { app } from 'electron'

 const USER_DATA_STRING = '__DEFAULT_USER_DATA__'

-export default class PluginConfig {
+export default class Config {
    constructor(defaultPlugin) {
        this.defaultPlugin = defaultPlugin
        this.configPath = path.join(app.getPath('userData'), 'config.json')
    }

-    // Helper to replace placeholders with dynamic values, recursively
+    // Helper to replace placeholders with dynamic values
    _resolveDefaults(config) {
        if (Array.isArray(config)) {
            return config.map((item) => this._resolveDefaults(item))
@@ -48,9 +48,10 @@ export default class PluginConfig {
            }

            parsed = {
+                ...(parsed ? parsed : {}),
                activeAdapter: this.defaultPlugin.id,
-                adapterConfig: defaultConfig,
            }
+            parsed.adapters[this.defaultPlugin.id] = defaultConfig

            await this.write(parsed)
        } else {
--- a/src/main/core/PluginRegistry.js
+++ b/src/main/core/PluginRegistry.js
@@ -16,6 +16,11 @@ export default class PluginRegistry {
    }

    list() {
-        return Array.from(this.plugins.values())
+        return Array.from(this.plugins.values()).map((plugin) => ({
+            id: plugin.id,
+            name: plugin.name,
+            description: plugin.description,
+            configSchema: plugin.configSchema,
+        }))
    }
 }
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -4,8 +4,7 @@ import { app, shell, BrowserWindow, ipcMain } from 'electron'
 import filesystemPlugin from '@takerofnotes/plugin-filesystem'
 import supabasePlugin from '@takerofnotes/plugin-supabase'
 import PluginRegistry from './core/PluginRegistry.js'
-import PluginConfig from './core/PluginConfig.js'
-import NotesAPI from './core/NotesAPI.js'
+import Config from './core/Config.js'
 import { join } from 'path'

 const preloadPath = join(__dirname, '../preload/index.mjs')
@@ -56,11 +55,11 @@ function createNoteWindow(noteId) {

    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
        noteWindow.loadURL(
-            `${process.env['ELECTRON_RENDERER_URL']}/note/${noteId}`,
+            `${process.env['ELECTRON_RENDERER_URL']}/#/note/${noteId}`,
        )
    } else {
-        mainWindow.loadFile(rendererPath, {
-            path: `/notes/${noteId}`,
+        noteWindow.loadFile(rendererPath, {
+            hash: `/note/${noteId}`,
        })
    }
 }
@@ -79,23 +78,51 @@ app.whenReady().then(async () => {
    registry.register(supabasePlugin)

    // Pull plugin config
-    const config = await new PluginConfig(filesystemPlugin).load()
+    const config = new Config(filesystemPlugin)
+    const initialConfig = await config.load()

-    // Create instance of active adapter
-    const plugin = registry.get(config.activeAdapter)
-    // const plugin = registry.get(supabasePlugin.id)
-    const adapter = plugin.createAdapter(config.adapterConfig)
-    // const adapter = plugin.createAdapter({
-    //     supabaseKey: process.env.SUPABASE_KEY,
-    //     supabaseUrl: process.env.SUPABASE_URL,
-    // })
+    const setActivePlugin = async (pluginId) => {
+        const currentConfig = await config.load()
+        await config.write({ ...currentConfig, activeAdapter: pluginId })

-    // Init Notes API
-    const notesAPI = new NotesAPI(
-        adapter,
-        '729a0d21d783654c68f1a0123e2a0e986350de536b5324f1f35876ea12ffeaf5',
-    )
-    await notesAPI.init()
+        const plugin = registry.get(pluginId)
+        const adapterConfig = currentConfig.adapters[pluginId] || {}
+        const adapter = plugin.createAdapter(adapterConfig)
+
+        // Initialize adapter
+        await adapter.init()
+
+        // Handle adapter methods via IPC
+        ipcMain.removeHandler('adapter:call')
+        ipcMain.handle('adapter:call', async (_, method, args) => {
+            if (!adapter[method]) {
+                throw new Error(`Invalid adapter method: ${method}`)
+            }
+
+            return await adapter[method](...args)
+        })
+
+        return true
+    }
+
+    // Set active plugin
+    await setActivePlugin(initialConfig.activeAdapter)
+
+    // Get/set config
+    ipcMain.handle('getConfig', async () => {
+        return await config.load()
+    })
+    ipcMain.handle('setConfig', async (_, newConfig) => {
+        await config.write(newConfig)
+    })
+
+    // Get/set plugins
+    ipcMain.handle('listPlugins', async () => {
+        return registry.list()
+    })
+    ipcMain.handle('setActivePlugin', async (_, pluginId) => {
+        return await setActivePlugin(pluginId)
+    })

    // Broadcast note changes to all windows
    const broadcastNoteChange = (event, data) => {
@@ -104,26 +131,9 @@ app.whenReady().then(async () => {
        })
    }

-    // Handle Notes API
-    ipcMain.handle('notesAPI:call', async (_, method, args) => {
-        if (!notesAPI[method]) {
-            throw new Error('Invalid method')
-        }
-
-        const result = await notesAPI[method](...args)
-
-        // Broadcast changes to all windows
-        if (method === 'createNote') {
-            broadcastNoteChange('note-created', result)
-        } else if (method === 'updateNote') {
-            broadcastNoteChange('note-updated', result)
-        } else if (method === 'updateNoteMetadata') {
-            broadcastNoteChange('note-updated', result)
-        } else if (method === 'deleteNote') {
-            broadcastNoteChange('note-deleted', { id: args[0] })
-        }
-
-        return result
+    // Handle note change events from renderer
+    ipcMain.on('note-changed', (_, event, data) => {
+        broadcastNoteChange(event, data)
    })

    electronApp.setAppUserModelId('com.electron')
--- a/src/preload/index.js
+++ b/src/preload/index.js
@@ -2,6 +2,11 @@ import { contextBridge, ipcRenderer } from 'electron'

 // Custom APIs for renderer
 const api = {
+    getConfig: () => ipcRenderer.invoke('getConfig'),
+    setConfig: (config) => ipcRenderer.invoke('setConfig', config),
+    listPlugins: () => ipcRenderer.invoke('listPlugins'),
+    setActivePlugin: (pluginId) =>
+        ipcRenderer.invoke('setActivePlugin', pluginId),
    openNoteWindow: (noteId) => {
        ipcRenderer.send('open-note-window', noteId)
    },
@@ -14,21 +19,24 @@ const api = {
    onNoteDeleted: (callback) => {
        ipcRenderer.on('note-deleted', (_, data) => callback(data))
    },
+    notifyNoteChanged: (event, data) => {
+        ipcRenderer.send('note-changed', event, data)
+    },
 }

-// Implement notes API
-const notesAPI = {
-    call: (method, ...args) =>
-        ipcRenderer.invoke('notesAPI:call', method, args),
+// Implement adapter API - communicates with plugin adapter in main process
+const adapter = {
+    call: (method, ...args) => ipcRenderer.invoke('adapter:call', method, args),
 }

 if (process.contextIsolated) {
    try {
        contextBridge.exposeInMainWorld('api', api)
-        contextBridge.exposeInMainWorld('notesAPI', notesAPI)
+        contextBridge.exposeInMainWorld('adapter', adapter)
    } catch (error) {
        console.error(error)
    }
 } else {
    window.api = api
+    window.adapter = adapter
 }
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -14,16 +14,20 @@
 import { ref, computed, onMounted } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
 import { useWindowSize } from '@vueuse/core'
-import Menu from '@/components/menu/Index.vue'
+import Menu from '@/components/Menu.vue'
 import Nav from '@/components/Nav.vue'
-import ScrollBar from './components/ScrollBar.vue'
+import ScrollBar from '@/components/ScrollBar.vue'
+import useConfig from '@/composables/useConfig'

 const { height } = useWindowSize()

+// Theme state
+const { config } = useConfig()
+
 const classes = computed(() => [
    'container',
    { 'fonts-ready': !fontsLoading.value },
-    'theme-dark',
+    `theme-${config.value?.theme || 'dark'}`,
 ])

 const fontsLoading = ref(true)
@@ -59,7 +63,7 @@ const styles = computed(() => ({
    overflow-x: clip;
    background: var(--theme-bg);
    color: var(--theme-fg);
-    transition: opacity 1000ms;
+    transition: opacity 400ms;

    &:not(.fonts-ready) {
        opacity: 0;
--- a/src/renderer/src/components/CategoryRow.vue
+++ b/src/renderer/src/components/CategoryRow.vue
@@ -77,15 +77,16 @@ const wrapper = computed(() => {
 <style lang="scss">
 .category-row {
    display: grid;
-    grid-template-columns: size-vw(26px) 1fr auto;
+    grid-template-columns: 26px 1fr auto;
    align-items: flex-start;
    width: 100%;
    position: relative;
-    padding: size-vw(5px) 0 size-vw(15px);
+    padding: 8px 0 6px;
+    border-bottom: 1px dashed currentColor;
    cursor: pointer;

    .index {
-        margin-top: size-vw(19px);
+        margin-top: 19px;
        @include p;
    }
    .title {
@@ -120,13 +121,6 @@ const wrapper = computed(() => {
            pointer-events: auto;
        }
    }
-    &::after {
-        content: '----------------------------------------';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        @include p;
-    }
    &.router-link-exact-active,
    &.editable {
        cursor: default;
--- a/src/renderer/src/components/menu/Index.vue
+++ b/src/renderer/src/components/menu/Index.vue
@@ -3,12 +3,12 @@
        <div v-if="menuOpen" class="menu" ref="container">
            <Nav />

-            <div class="menu-wrap layout-block-inner">
+            <div class="menu-wrap layout-block">
                <new-note class="menu-item" @noteOpened="closeMenu" />
                <router-link class="menu-item" to="/category"
                    >+ New Capitulum</router-link
                >
-                <button class="menu-item">Change Theme</button>
+                <theme-switcher class="menu-item" />
                <router-link class="menu-item" to="/instructions"
                    >Instructio</router-link
                >
@@ -21,9 +21,10 @@

 <script setup>
 import NewNote from '@/components/NewNote.vue'
+import ThemeSwitcher from '@/components/ThemeSwitcher.vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, watch } from 'vue'
-import Nav from '../Nav.vue'
+import Nav from './Nav.vue'
 import useMenu from '@/composables/useMenu'
 import { useRoute } from 'vue-router'

@@ -60,12 +61,11 @@ const openNewCategory = () => {}
    .menu-wrap {
        display: flex;
        flex-direction: column;
-        padding-top: size-vw(3px);
-        padding-bottom: size-vw(10px);
+        padding-top: 3px;
+        padding-bottom: 10px;

        .menu-item {
-            display: block;
-            padding: size-vw(16px) 0;
+            padding: 16px 0;
            text-align: center;

            &:not(:last-child) {
--- a/src/renderer/src/components/Nav.vue
+++ b/src/renderer/src/components/Nav.vue
@@ -1,6 +1,8 @@
 <template>
-    <nav class="nav layout-block-inner">
+    <nav class="nav layout-block">
        <button @click="toggleMenu">Menu</button>
+
+        <router-link to="/search">Search</router-link>
    </nav>
 </template>

@@ -29,7 +31,10 @@ onMounted(() => {

 <style lang="scss">
 .nav {
-    padding-top: size-vw(9px);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-top: 9px;
    color: var(--grey-100);
 }
 </style>
--- a/src/renderer/src/components/NoteRow.vue
+++ b/src/renderer/src/components/NoteRow.vue
@@ -23,11 +23,12 @@ const formatDate = (date) => {
 .note-row {
    grid-template-columns: auto 1fr;
    display: grid;
-    gap: size-vw(20px);
+    width: 100%;
+    gap: 20px;
    cursor: pointer;

    .title {
-        width: size-vw(159px);
+        width: calc(100% - 43.2px);
        position: relative;

        &::after {
--- a/src/renderer/src/components/ScrollBar.vue
+++ b/src/renderer/src/components/ScrollBar.vue
@@ -75,7 +75,7 @@ watch(
    top: 0;
    right: 0;
    bottom: 0;
-    width: size-vw(8px);
+    width: 8px;
    will-change: transform;
    border-left: 1px solid var(--grey-100);

@@ -85,7 +85,7 @@ watch(

        .handle {
            width: 100%;
-            height: size-vw(388px);
+            height: 388px;
            background: var(--grey-100);
            border-radius: 20px;
            position: absolute;
--- a/src/renderer/src/components/ThemeSwitcher.vue
+++ b/src/renderer/src/components/ThemeSwitcher.vue
@@ -0,0 +1,49 @@
+<template>
+    <div v-if="config" class="theme-switcher">
+        <span>Change Theme</span>
+
+        <button
+            v-for="(value, key) in themes"
+            :class="[`theme-${key}`, { active: config.theme === key }]"
+            @click="setTheme(key)"
+        />
+    </div>
+</template>
+
+<script setup>
+import useConfig from '@/composables/useConfig'
+import { themes } from '@/libs/theme'
+
+const { config } = useConfig()
+
+const setTheme = (value) => {
+    if (!config.value) return
+    config.value.theme = value
+}
+</script>
+
+<style lang="scss">
+.theme-switcher {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    button {
+        background: var(--theme-bg);
+        display: block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+
+        &.active {
+            border: 1px solid var(--theme-fg);
+        }
+    }
+    &:hover {
+        color: var(--theme-fg) !important;
+    }
+}
+</style>
--- a/src/renderer/src/components/note/Editor.vue
+++ b/src/renderer/src/components/note/Editor.vue
@@ -1,89 +1,67 @@
 <template>
-    <main v-if="editor" class="editor layout-block">
-        <bubble-menu :editor="editor">
-            <div class="bubble-menu">
-                <button
-                    @click="editor.chain().focus().toggleBold().run()"
-                    :class="{ active: editor.isActive('bold') }"
-                >
-                    Bold
-                </button>
-                <button
-                    @click="editor.chain().focus().toggleItalic().run()"
-                    :class="{ active: editor.isActive('italic') }"
-                >
-                    Italic
-                </button>
-                <button
-                    @click="editor.chain().focus().toggleHighlight().run()"
-                    :class="{ active: editor.isActive('highlight') }"
-                >
-                    Highlight
-                </button>
-            </div>
-        </bubble-menu>
-
+    <div v-if="editor" class="note-editor">
        <editor-content :editor="editor" class="editor-wrap" />
-    </main>
+
+        <editor-menu :editor="editor" />
+    </div>
 </template>

 <script setup>
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
+import { TaskList, TaskItem } from '@tiptap/extension-list'
+import { Highlight } from '@tiptap/extension-highlight'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import { Placeholder } from '@tiptap/extensions'
-import StarterKit from '@tiptap/starter-kit'
-import { TaskList, TaskItem } from '@tiptap/extension-list'
-import { Highlight } from '@tiptap/extension-highlight'
-import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
-import { BubbleMenu } from '@tiptap/vue-3/menus'
 import { all, createLowlight } from 'lowlight'
 import useNotes from '@/composables/useNotes'
-import { useRoute } from 'vue-router'
+import StarterKit from '@tiptap/starter-kit'
 import _debounce from 'lodash/debounce'
+import EditorMenu from './Menu.vue'

-const route = useRoute()
-const id = route.params.id
-
-const { loadNote, updateNoteContent, updateNoteMetadata } = useNotes()
-
-const CustomDocument = Document.extend({
-    content: 'heading block*',
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
 })

 const editor = shallowRef()

-const updateNote = _debounce(async ({ editor }) => {
+const { loadNote, updateNote } = useNotes()
+
+const onUpdate = _debounce(async ({ editor }) => {
    const json = editor.getJSON()
+    const text = editor.getText()

-    await updateNoteContent(id, json)
-
-    updateTitle(editor)
-}, 300)
-
-// Track title updates for file
-let lastTitle
-const updateTitle = _debounce(async (editor) => {
+    // Get doc title
+    let title
    const doc = editor.state.doc

    const firstNode = doc.firstChild
-    if (!firstNode || firstNode.type.name !== 'heading') return
+    if (!firstNode || firstNode.type.name !== 'heading') title = 'Untitled'

-    const newTitle = firstNode.textContent.trim() || 'Untitled'
+    title = firstNode.textContent.trim() || 'Untitled'

-    if (newTitle === lastTitle) return
-    lastTitle = newTitle
-
-    await updateNoteMetadata(id, { title: newTitle })
+    await updateNote(props.id, {
+        title,
+        content: json,
+        plainText: text,
+    })
 }, 300)

 onMounted(async () => {
-    const note = await loadNote(id)
-    lastTitle = note.title
+    const note = await loadNote(props.id)

    // Lowlight setup
    const lowlight = createLowlight(all)

+    // Force note format
+    const CustomDocument = Document.extend({
+        content: 'heading block*',
+    })
+
    editor.value = new Editor({
        extensions: [
            CustomDocument,
@@ -110,7 +88,7 @@ onMounted(async () => {
            }),
        ],
        content: note.content || [],
-        onUpdate: updateNote,
+        onUpdate: onUpdate,
    })
 })
 onBeforeUnmount(() => {
@@ -119,10 +97,7 @@ onBeforeUnmount(() => {
 </script>

 <style lang="scss">
-main.editor {
-    padding-top: size-vw(8px);
-    padding-bottom: size-vw(20px);
-
+.note-editor {
    h1 {
        font-weight: 700 !important;
        @include p;
@@ -143,9 +118,8 @@ main.editor {
    p em {
        font-style: italic;
    }
-    hr::before {
-        content: '----------------------------------------';
-        @include p;
+    hr {
+        border: 1px dashed currentColor;
    }
    ul {
        list-style-type: disc;
@@ -153,6 +127,10 @@ main.editor {
        li {
            display: list-item;
            margin-left: 1em;
+
+            *:not(:last-child) {
+                margin-bottom: 0.5em;
+            }
        }
    }
    ol {
@@ -167,6 +145,9 @@ main.editor {
            }
        }
    }
+    li:not(:last-child) {
+        margin-bottom: 0.5em;
+    }
    a {
        color: var(--theme-link);
        cursor: pointer;
@@ -174,7 +155,7 @@ main.editor {
    code {
        border: 1px solid var(--grey-100);
        color: var(--theme-accent);
-        padding: 0.2em;
+        padding: 0 0.2em;
        border-radius: 0.2em;
    }
    pre code {
@@ -249,51 +230,73 @@ main.editor {
            top: 50%;
            left: 0;
            right: 0;
-            height: size-vw(1px);
+            height: 1px;
            background: currentColor;
        }
    }
    mark {
        background: var(--theme-accent);
        color: var(--theme-bg);
-        padding: 0.2em;
+        padding: 0 0.2em;
+    }
+
+    ul[data-type='taskList'] {
+        list-style: none;
+        margin-left: 0;
+        padding: 0;
+
+        li {
+            align-items: center;
+            display: flex;
+            margin-left: 0;
+
+            > label {
+                flex: 0 0 auto;
+                margin-right: 0.5rem;
+                user-select: none;
+                margin-bottom: 0;
+
+                input {
+                    margin: 0;
+                }
+            }
+
+            > div {
+                flex: 1 1 auto;
+            }
+        }
+        input[type='checkbox'] {
+            cursor: pointer;
+            display: block;
+            width: 1.5em;
+            height: 1.5em;
+            border: 1px solid var(--grey-100);
            border-radius: 0.2em;
+
+            &::after {
+                content: '✓';
+                font-size: 1.5em;
+                opacity: 0;
+            }
+            &:checked::after {
+                opacity: 1;
+            }
+        }
+        ul[data-type='taskList'] {
+            margin: 0;
+        }
    }

    .editor-wrap {
        > div {
            display: flex;
            flex-direction: column;
-            gap: size-vw(20px);
+            gap: 20px;

            &:focus {
                outline: none;
            }
        }
    }
-
-    .bubble-menu {
-        display: flex;
-        gap: size-vw(5px);
-        border: 1px solid var(--grey-100);
-        color: var(--grey-100);
-        border-radius: 0.2em;
-        background: var(--theme-bg);
-
-        button {
-            cursor: pointer;
-            padding: 0.2em;
-            border-radius: 0.2em;
-
-            &:hover {
-                background: var(--grey-100);
-                color: var(--theme-bg);
-            }
-            &.active {
-                background: var(--theme-fg);
-                color: var(--theme-bg);
-            }
-        }
-    }
 }
 </style>
--- a/src/renderer/src/components/note/Find.vue
+++ b/src/renderer/src/components/note/Find.vue
@@ -0,0 +1,12 @@
+<template>
+    <div class="note-find"></div>
+</template>
+
+<script setup>
+const props = defineProps({})
+</script>
+
+<style lang="scss">
+.note-find {
+}
+</style>
--- a/src/renderer/src/components/note/Menu.vue
+++ b/src/renderer/src/components/note/Menu.vue
@@ -0,0 +1,61 @@
+<template>
+    <bubble-menu v-if="editor" :editor="editor">
+        <div class="note-menu">
+            <button
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="{ active: editor.isActive('bold') }"
+            >
+                Bold
+            </button>
+            <button
+                @click="editor.chain().focus().toggleItalic().run()"
+                :class="{ active: editor.isActive('italic') }"
+            >
+                Italic
+            </button>
+            <button
+                @click="editor.chain().focus().toggleHighlight().run()"
+                :class="{ active: editor.isActive('highlight') }"
+            >
+                Highlight
+            </button>
+        </div>
+    </bubble-menu>
+</template>
+
+<script setup>
+import { BubbleMenu } from '@tiptap/vue-3/menus'
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true,
+    },
+})
+</script>
+
+<style lang="scss">
+.note-menu {
+    display: flex;
+    gap: 5px;
+    border: 1px solid var(--grey-100);
+    color: var(--grey-100);
+    border-radius: 0.2em;
+    background: var(--theme-bg);
+
+    button {
+        cursor: pointer;
+        padding: 0.2em;
+        border-radius: 0.2em;
+
+        &:hover {
+            background: var(--grey-100);
+            color: var(--theme-bg);
+        }
+        &.active {
+            background: var(--theme-fg);
+            color: var(--theme-bg);
+        }
+    }
+}
+</style>
--- a/src/renderer/src/composables/useConfig.js
+++ b/src/renderer/src/composables/useConfig.js
@@ -0,0 +1,36 @@
+import { ref, watch, toRaw, onMounted } from 'vue'
+
+const config = ref()
+let configResolve = null
+const configPromise = new Promise((resolve) => {
+    configResolve = resolve
+})
+
+export default () => {
+    onMounted(async () => {
+        if (config.value) {
+            configResolve()
+            return
+        }
+        config.value = await window.api.getConfig()
+        configResolve()
+    })
+
+    watch(
+        config,
+        async (newValue) => {
+            await window.api.setConfig(toRaw(newValue))
+        },
+        { deep: true },
+    )
+
+    const ensureConfig = async () => {
+        if (config.value) return config.value
+        return configPromise
+    }
+
+    return {
+        config,
+        ensureConfig,
+    }
+}
--- a/src/renderer/src/composables/useEnvironment.ts
+++ b/src/renderer/src/composables/useEnvironment.ts
@@ -0,0 +1,41 @@
+export enum ENVIRONMENTS {
+    ELECTRON = 'electron',
+    WEB = 'web',
+}
+
+export const useEnvironment = (): ENVIRONMENTS => {
+    function isElectron() {
+        // Renderer process
+        if (
+            typeof window !== 'undefined' &&
+            typeof window.process === 'object' &&
+            window.process.type === 'renderer'
+        ) {
+            return true
+        }
+
+        // Main process
+        if (
+            typeof process !== 'undefined' &&
+            typeof process.versions === 'object' &&
+            !!process.versions.electron
+        ) {
+            return true
+        }
+
+        // Detect the user agent when the `nodeIntegration` option is set to true
+        if (
+            typeof navigator === 'object' &&
+            typeof navigator.userAgent === 'string' &&
+            navigator.userAgent.indexOf('Electron') >= 0
+        ) {
+            return true
+        }
+
+        return false
+    }
+
+    const environment = isElectron() ? ENVIRONMENTS.ELECTRON : ENVIRONMENTS.WEB
+
+    return environment
+}
--- a/src/renderer/src/composables/useLenis.js
+++ b/src/renderer/src/composables/useLenis.js
@@ -1,14 +0,0 @@
-import { inject, onBeforeUnmount } from 'vue'
-
-export default (callback = () => {}, instanceId) => {
-    const instanceKey = `lenis${instanceId ? `-${instanceId}` : ''}`
-    const lenis = inject(instanceKey)
-
-    if (lenis.value) {
-        lenis.value.on('scroll', callback)
-    }
-
-    onBeforeUnmount(() => lenis.value?.off('scroll', callback))
-
-    return lenis
-}
--- a/src/renderer/src/composables/useNotes.js
+++ b/src/renderer/src/composables/useNotes.js
@@ -1,93 +1,121 @@
+import _omit from 'lodash/omit'
 import { ref } from 'vue'
+import { getNotesAPI } from '@/libs/core/getNotesAPI'

 const categories = ref([])
 const searchResults = ref([])
 const notesChangeCount = ref(0)

-let initialized = false
+let listenersInitialized = false

-function setupListeners() {
-    if (initialized || typeof window === 'undefined') return
-    initialized = true
+const setupListeners = () => {
+    if (listenersInitialized || typeof window === 'undefined') return
+    listenersInitialized = true
+
+    const updateCacheCount = async (note) => {
+        const api = await getNotesAPI()
+        await api.updateNote(
+            note.id,
+            _omit(note, ['id', 'createdAt', 'updatedAt']),
+        )

-    window.api.onNoteCreated(() => {
        notesChangeCount.value++
-    })
+    }

-    window.api.onNoteUpdated(() => {
-        notesChangeCount.value++
-    })
+    window.api.onNoteCreated(updateCacheCount)
+    window.api.onNoteUpdated(updateCacheCount)

+    // Todo update cache
    window.api.onNoteDeleted(() => {
        notesChangeCount.value++
    })
 }

-export default () => {
-    setupListeners()
+const broadcastChange = (event, data) => {
+    window.api.notifyNoteChanged(event, data)
+}

+setupListeners()
+
+export default () => {
    /* -------------------------
     Initialization
    --------------------------*/
-    async function loadCategories() {
-        categories.value = await window.notesAPI.call('getCategories')
+    const loadCategories = async () => {
+        const api = await getNotesAPI()
+        categories.value = api.getCategories()
    }

-    async function loadCategoryNotes(category = null) {
-        return await window.notesAPI.call('getCategoryNotes', category)
+    const loadCategoryNotes = async (category = null) => {
+        const api = await getNotesAPI()
+        return api.getCategoryNotes(category)
    }

-    async function loadNote(id) {
-        return await window.notesAPI.call('getNote', id)
+    const loadNote = async (id) => {
+        const api = await getNotesAPI()
+        return api.getNote(id)
    }

    /* -------------------------
     Create
    --------------------------*/
-    async function createNote(metadata, content) {
-        const note = await window.notesAPI.call('createNote', metadata, content)
+    const createNote = async (metadata, content, plainText = '') => {
+        const api = await getNotesAPI()
+        const note = await api.createNote(metadata, content, plainText)
        await loadCategories()
+        broadcastChange('note-created', note)
        return note
    }

    /* -------------------------
     Update
    --------------------------*/
-    async function updateNoteContent(id, content) {
-        const note = await window.notesAPI.call('updateNote', id, content)
-        return note
-    }
+    const updateNote = async (id, updates) => {
+        const api = await getNotesAPI()

-    async function updateNoteMetadata(id, updates) {
-        const note = await window.notesAPI.call(
-            'updateNoteMetadata',
-            id,
-            updates,
-        )
+        const note = await api.updateNote(id, updates)
+
+        if (updates.category !== undefined || updates.title !== undefined) {
            await loadCategories()
+        }
+
+        broadcastChange('note-updated', note)
+
        return note
    }

-    async function updateCategory(category, update) {
+    const updateCategory = async (category, update) => {
        const notes = await loadCategoryNotes(category)

-        notes.forEach(async (note) => {
-            await updateNoteMetadata(note.id, { category: update })
-        })
+        for (const note of notes) {
+            await updateNote(note.id, { category: update })
+        }

        await loadCategories()
    }

+    /* -------------------------
+     Delete
+    --------------------------*/
+    const deleteNote = async (id) => {
+        const api = await getNotesAPI()
+        await api.deleteNote(id)
+        await loadCategories()
+        broadcastChange('note-deleted', { id })
+    }
+
    /* -------------------------
     Search
    --------------------------*/
-    async function search(query) {
+    const search = async (query) => {
+        const api = await getNotesAPI()
+
        if (!query) {
            searchResults.value = []
            return
        }

-        searchResults.value = await window.notesAPI.call('search', query)
+        searchResults.value = api.search(query)
    }

    return {
@@ -100,9 +128,9 @@ export default () => {
        loadNote,

        createNote,
-        updateNoteContent,
-        updateNoteMetadata,
+        updateNote,
        updateCategory,
+        deleteNote,

        search,
    }
--- a/src/renderer/src/composables/useOpenNote.js
+++ b/src/renderer/src/composables/useOpenNote.js
@@ -1,4 +1,5 @@
 import { useRouter } from 'vue-router'
+import { useEnvironment, ENVIRONMENTS } from './useEnvironment'

 export default () => {
    const router = useRouter()
@@ -6,13 +7,9 @@ export default () => {
    function openNote(noteId, options = {}) {
        const { newWindow = true } = options

-        // Electron environment check
-        const isElectron =
-            typeof window !== 'undefined' &&
-            window.api &&
-            typeof window.api.openNoteWindow === 'function'
+        const environment = useEnvironment()

-        if (newWindow && isElectron) {
+        if (newWindow && environment === ENVIRONMENTS.ELECTRON) {
            window.api.openNoteWindow(noteId)
            return
        }
--- a/src/renderer/src/composables/usePlugins.js
+++ b/src/renderer/src/composables/usePlugins.js
@@ -0,0 +1,18 @@
+import { ref, onMounted } from 'vue'
+
+export default () => {
+    const plugins = ref([])
+
+    onMounted(async () => {
+        plugins.value = await window.api.listPlugins()
+    })
+
+    const setActivePlugin = async (pluginId) => {
+        await window.api.setActivePlugin(pluginId)
+    }
+
+    return {
+        plugins,
+        setActivePlugin,
+    }
+}
--- a/src/renderer/src/composables/useRelativeSize.js
+++ b/src/renderer/src/composables/useRelativeSize.js
@@ -1,29 +0,0 @@
-import { useWindowSize } from '@vueuse/core'
-import { viewports } from '@/libs/theme'
-
-const { width: wWidth, height: wHeight } = useWindowSize()
-
-export default () => {
-    // Desktop
-    const dvw = (pixels) => {
-        return (pixels / viewports.desktop.width) * wWidth.value
-    }
-    const dvh = (pixels) => {
-        return (pixels / viewports.desktop.height) * wHeight.value
-    }
-
-    // Mobile
-    const mvw = (pixels) => {
-        return (pixels / viewports.mobile.width) * wWidth.value
-    }
-    const mvh = (pixels) => {
-        return (pixels / viewports.mobile.height) * wHeight.value
-    }
-
-    return {
-        dvw,
-        dvh,
-        mvw,
-        mvh,
-    }
-}
--- a/src/renderer/src/composables/useScrollProgress.js
+++ b/src/renderer/src/composables/useScrollProgress.js
@@ -1,46 +0,0 @@
-import {
-    useElementBounding,
-    useIntersectionObserver,
-    useWindowSize,
-} from '@vueuse/core'
-import { ref } from 'vue'
-import { mapRange, clamp } from '@/libs/math'
-import useLenis from '@/composables/useLenis'
-
-const { height: wHeight } = useWindowSize()
-
-export const useScrollProgress = (el, callback, entry = 0.5, exit = 0.5) => {
-    const isActive = ref(true)
-    const smoothProgress = ref(0)
-
-    const { height, top } = useElementBounding(el)
-
-    const isIntersected = ref(false)
-    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
-        isIntersected.value = isIntersecting
-    })
-
-    useLenis(({ scroll }) => {
-        if (!isActive.value) return
-        if (!height.value || !wHeight.value) return
-        if (!isIntersected.value) return
-
-        const pageTop = scroll + top.value
-
-        const start = pageTop - wHeight.value * entry
-        const end = pageTop + height.value - wHeight.value * exit
-
-        let rawProgress = mapRange(start, end, scroll, 0, 1)
-        rawProgress = clamp(0, rawProgress, 1)
-
-        smoothProgress.value += (rawProgress - smoothProgress.value) * 0.1
-        callback?.(smoothProgress.value)
-    })
-
-    const destroy = () => {
-        isActive.value = false
-        stop?.()
-    }
-
-    return { destroy }
-}
--- a/src/renderer/src/libs/core/IpcAdapter.js
+++ b/src/renderer/src/libs/core/IpcAdapter.js
@@ -0,0 +1,25 @@
+export default class IpcAdapter {
+    constructor() {
+        this._methods = ['init', 'getAll', 'create', 'update', 'delete']
+    }
+
+    async init() {
+        return await window.adapter.call('init')
+    }
+
+    async getAll() {
+        return await window.adapter.call('getAll')
+    }
+
+    async create(note) {
+        return await window.adapter.call('create', note)
+    }
+
+    async update(note) {
+        return await window.adapter.call('update', note)
+    }
+
+    async delete(id) {
+        return await window.adapter.call('delete', id)
+    }
+}
--- a/src/renderer/src/libs/core/NotesAPI.js
+++ b/src/renderer/src/libs/core/NotesAPI.js
@@ -1,6 +1,7 @@
-import { Index } from 'flexsearch'
-import crypto from 'crypto'
 import sodium from 'libsodium-wrappers'
+import { v4 as uuidv4 } from 'uuid'
+import { Index } from 'flexsearch'
+import * as uint from '@/libs/uint'

 export default class NotesAPI {
    constructor(adapter, encryptionKey = null) {
@@ -10,12 +11,11 @@ export default class NotesAPI {

        this.adapter = adapter
        this.notesCache = new Map()
-        this.encryptionKey = encryptionKey || process.env.NOTES_ENCRYPTION_KEY
+        this.encryptionKey = encryptionKey
        this._sodiumReady = false

        this.index = new Index({
-            tokenize: 'tolerant',
-            resolution: 9,
+            tokenize: 'forward',
        })
    }

@@ -31,7 +31,7 @@ export default class NotesAPI {
            throw new Error('Encryption key not set')
        }

-        const key = Buffer.from(this.encryptionKey, 'hex')
+        const key = uint.hexToUint8Array(this.encryptionKey)
        if (key.length !== 32) {
            throw new Error(
                'Encryption key must be 64 hex characters (32 bytes)',
@@ -42,13 +42,13 @@ export default class NotesAPI {
        const message = JSON.stringify(note)

        const ciphertext = sodium.crypto_secretbox_easy(
-            Buffer.from(message),
+            new TextEncoder().encode(message),
            nonce,
            key,
        )

-        const combined = Buffer.concat([nonce, ciphertext])
-        return combined.toString('base64')
+        const combined = uint.concatUint8Arrays(nonce, ciphertext)
+        return uint.uint8ArrayToBase64(combined)
    }

    _decrypt(encryptedData) {
@@ -56,7 +56,7 @@ export default class NotesAPI {
            throw new Error('Encryption key not set')
        }

-        const key = Buffer.from(this.encryptionKey, 'hex')
+        const key = uint.hexToUint8Array(this.encryptionKey)
        if (key.length !== 32) {
            throw new Error(
                'Encryption key must be 64 hex characters (32 bytes)',
@@ -65,7 +65,7 @@ export default class NotesAPI {

        let combined
        try {
-            combined = Buffer.from(encryptedData, 'base64')
+            combined = uint.base64ToUint8Array(encryptedData)
        } catch (e) {
            throw new Error('Invalid encrypted data: not valid base64')
        }
@@ -96,7 +96,7 @@ export default class NotesAPI {
            throw new Error('Decryption failed: no data returned')
        }

-        const decryptedStr = Buffer.from(decrypted).toString('utf8')
+        const decryptedStr = new TextDecoder().decode(decrypted)

        try {
            return JSON.parse(decryptedStr)
@@ -118,13 +118,28 @@ export default class NotesAPI {
                const note = this._decrypt(encryptedNote.data || encryptedNote)

                this.notesCache.set(note.id, note)
-                this.index.add(note.id, note.title + '\n' + note.content)
+                const searchText =
+                    note.plainText || this._extractPlainText(note.content)
+                this.index.add(note.id, note.title + '\n' + searchText)
            } catch (error) {
                console.error('Failed to decrypt note:', error)
            }
        }
    }

+    _extractPlainText(content) {
+        if (!content) return ''
+        if (typeof content === 'string') return content
+
+        const extractText = (node) => {
+            if (typeof node === 'string') return node
+            if (!node || !node.content) return ''
+            return node.content.map(extractText).join(' ')
+        }
+
+        return extractText(content)
+    }
+
    /* -----------------------
         Public API
        ------------------------*/
@@ -140,18 +155,20 @@ export default class NotesAPI {
        return Array.from(categories).sort()
    }

-    getCategoryNotes(categoryName) {
+    getCategoryNotes(categoryName = null) {
        return Array.from(this.notesCache.values())
            .filter((n) => n.category === categoryName)
            .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+            .map((n) => ({ ...n }))
    }

    getNote(id) {
-        return this.notesCache.get(id) ?? null
+        const note = this.notesCache.get(id)
+        return note ? { ...note } : null
    }

-    async createNote(metadata = {}, content = '') {
-        const id = crypto.randomUUID()
+    async createNote(metadata = {}, content = '', plainText = '') {
+        const id = uuidv4()
        const now = new Date().toISOString()

        const note = {
@@ -161,6 +178,7 @@ export default class NotesAPI {
            createdAt: now,
            updatedAt: now,
            content,
+            plainText,
        }

        const encryptedNote = {
@@ -169,7 +187,7 @@ export default class NotesAPI {
        }

        this.notesCache.set(id, note)
-        this.index.add(id, note.title + '\n' + content)
+        this.index.add(id, note.title + '\n' + plainText)

        await this.adapter.create(encryptedNote)

@@ -183,60 +201,46 @@ export default class NotesAPI {
        this.index.remove(id)
    }

-    async updateNote(id, content) {
+    async updateNote(id, updates = {}) {
        const note = this.notesCache.get(id)
        if (!note) throw new Error('Note not found')

-        note.content = content
-        note.updatedAt = new Date().toISOString()
+        const allowedFields = ['title', 'category', 'content', 'plainText']

-        const encryptedNote = {
-            id: note.id,
-            data: this._encrypt(note),
-        }
-
-        this.index.update(id, note.title + '\n' + content)
-
-        await this.adapter.update(encryptedNote)
-
-        return note
-    }
-
-    async updateNoteMetadata(id, updates = {}) {
-        const note = this.notesCache.get(id)
-        if (!note) throw new Error('Note not found')
-
-        const allowedFields = ['title', 'category']
        for (const key of Object.keys(updates)) {
            if (!allowedFields.includes(key)) {
-                throw new Error(`Invalid metadata field: ${key}`)
+                throw new Error(`Invalid update field: ${key}`)
            }
        }

-        if (updates.title !== undefined) {
-            note.title = updates.title
+        const updatedNote = {
+            ...note,
+            ...updates,
+            updatedAt: new Date().toISOString(),
        }

-        if (updates.category !== undefined) {
-            note.category = updates.category
-        }
-
-        note.updatedAt = new Date().toISOString()
-
        const encryptedNote = {
-            id: note.id,
-            data: this._encrypt(note),
+            id: updatedNote.id,
+            data: this._encrypt(updatedNote),
        }

-        this.index.update(id, note.title + '\n' + note.content)
+        this.notesCache.set(id, updatedNote)
+
+        const searchText =
+            updatedNote.plainText || this._extractPlainText(updatedNote.content)
+
+        this.index.update(id, updatedNote.title + '\n' + searchText)

        await this.adapter.update(encryptedNote)

-        return note
+        return updatedNote
    }

    search(query) {
-        const ids = this.index.search(query)
+        const ids = this.index.search(query, {
+            limit: 50,
+            suggest: true,
+        })
        return ids.map((id) => this.notesCache.get(id))
    }
 }
--- a/src/renderer/src/libs/core/getNotesAPI.js
+++ b/src/renderer/src/libs/core/getNotesAPI.js
@@ -0,0 +1,48 @@
+import NotesAPI from '@/libs/core/NotesAPI.js'
+import IpcAdapter from '@/libs/core/IpcAdapter.js'
+import useConfig from '@/composables/useConfig.js'
+
+// Singleton pattern to make sure only one instance of NotesAPI exists
+
+let notesAPI = null
+let initPromise = null
+
+const generateEncryptionKey = () => {
+    const array = new Uint8Array(32)
+    crypto.getRandomValues(array)
+    return Array.from(array)
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('')
+}
+
+const createInstance = async () => {
+    const { config, ensureConfig } = useConfig()
+    await ensureConfig()
+
+    let encryptionKey = config.value?.encryptionKey
+
+    if (!encryptionKey) {
+        encryptionKey = generateEncryptionKey()
+        config.value.encryptionKey = encryptionKey
+    }
+
+    const adapter = new IpcAdapter()
+    const api = new NotesAPI(adapter, encryptionKey)
+
+    await api.init()
+
+    return api
+}
+
+export const getNotesAPI = async () => {
+    if (notesAPI) return notesAPI
+
+    if (!initPromise) {
+        initPromise = createInstance().then((api) => {
+            notesAPI = api
+            return api
+        })
+    }
+
+    return initPromise
+}
--- a/src/renderer/src/libs/theme.js
+++ b/src/renderer/src/libs/theme.js
@@ -7,40 +7,23 @@ const colors = {
 }

 const themes = {
-    light: {
-        bg: colors.white,
-        fg: colors.black,
-        accent: colors.green,
-        link: colors.blue,
-    },
    dark: {
        bg: colors.black,
        fg: colors.white,
        accent: colors.green,
        link: colors.blue,
    },
-}
-
-const breakpoints = {
-    mobile: 800,
-}
-
-const viewports = {
-    mobile: {
-        width: 200,
-        height: 956,
-    },
-    desktop: {
-        width: 354,
-        height: 549,
+    light: {
+        bg: colors.white,
+        fg: colors.black,
+        accent: colors.green,
+        link: colors.blue,
    },
 }

-export { colors, themes, breakpoints, viewports }
+export { colors, themes }

 export default {
    colors,
    themes,
-    breakpoints,
-    viewports,
 }
--- a/src/renderer/src/libs/uint.js
+++ b/src/renderer/src/libs/uint.js
@@ -0,0 +1,35 @@
+export const hexToUint8Array = (hex) => {
+    const bytes = new Uint8Array(hex.length / 2)
+    for (let i = 0; i < hex.length; i += 2) {
+        bytes[i / 2] = parseInt(hex.substring(i, i + 2), 16)
+    }
+    return bytes
+}
+
+export const base64ToUint8Array = (base64) => {
+    const binary = atob(base64)
+    const bytes = new Uint8Array(binary.length)
+    for (let i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i)
+    }
+    return bytes
+}
+
+export const uint8ArrayToBase64 = (bytes) => {
+    let binary = ''
+    for (let i = 0; i < bytes.length; i++) {
+        binary += String.fromCharCode(bytes[i])
+    }
+    return btoa(binary)
+}
+
+export const concatUint8Arrays = (...arrays) => {
+    const totalLength = arrays.reduce((sum, arr) => sum + arr.length, 0)
+    const result = new Uint8Array(totalLength)
+    let offset = 0
+    for (const arr of arrays) {
+        result.set(arr, offset)
+        offset += arr.length
+    }
+    return result
+}
--- a/src/renderer/src/plugins/router.js
+++ b/src/renderer/src/plugins/router.js
@@ -1,20 +1,22 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'

 import Directory from '@/views/Directory.vue'
-import Editor from '@/views/Editor.vue'
+import Note from '@/views/Note.vue'
 import CreateCategory from '@/views/CreateCategory.vue'
 import Category from '@/views/Category.vue'
 import Instructions from '@/views/Instructions.vue'
+import Search from '@/views/Search.vue'

 const routes = [
    { path: '/', name: 'directory', component: Directory },
-    { path: '/note/:id', name: 'note', component: Editor },
+    { path: '/note/:id', name: 'note', component: Note },
    { path: '/category', name: 'create-category', component: CreateCategory },
    { path: '/category/:id', name: 'category', component: Category },
    { path: '/instructions', name: 'instructions', component: Instructions },
+    { path: '/search', name: 'search', component: Search },
 ]

 export const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
    routes,
 })
--- a/src/renderer/src/styles/_font-style.scss
+++ b/src/renderer/src/styles/_font-style.scss
@@ -5,19 +5,19 @@
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
-    font-size: size-vw(30px);
+    font-size: 30px;
 }

@mixin h1-mono {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1;
-    font-size: size-vw(22px);
+    font-size: 22px;
 }

@mixin p {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1;
-    font-size: size-vw(12px);
+    font-size: 12px;
 }
--- a/src/renderer/src/styles/_fonts.scss
+++ b/src/renderer/src/styles/_fonts.scss
@@ -17,8 +17,8 @@
    font-style: normal;
    font-weight: 400;
    src:
-        url('../../../../resources/fonts/leibniz-fraktur.woff2') format('woff2'),
-        url('../../../../resources/fonts/leibniz-fraktur.woff') format('woff');
+        url('../../../../resources/fonts/neuefraktur.woff2') format('woff2'),
+        url('../../../../resources/fonts/neuefraktur.woff') format('woff');
 }

 /* Geist Mono */
--- a/src/renderer/src/styles/_functions.scss
+++ b/src/renderer/src/styles/_functions.scss
@@ -1,58 +1,3 @@
-@use 'sass:math';
-
-/* Breakpoints */
-$mobile-breakpoint: get('breakpoints.mobile');
-
-// Viewport Sizes
-$desktop-width: get('viewports.desktop.width');
-$desktop-height: get('viewports.desktop.height');
-
-$mobile-width: get('viewports.mobile.width');
-$mobile-height: get('viewports.mobile.height');
-
-// Breakpoint
-@mixin mobile {
-    @media (max-width: #{$mobile-breakpoint * 1px - 1px}) {
-        @content;
-    }
-}
-
-@mixin desktop {
-    @media (min-width: #{$mobile-breakpoint * 1px}) {
-        @content;
-    }
-}
-
-@function mobile-vw($pixels, $base-vw: $mobile-width) {
-    $px: math.div($pixels, $base-vw);
-    $perc: math.div($px, 1px);
-    @return calc($perc * 100vw);
-}
-
-@function mobile-vh($pixels, $base-vh: $mobile-height) {
-    $px: math.div($pixels, $base-vh);
-    $perc: math.div($px, 1px);
-    @return calc($perc * 100vh);
-}
-
-@function desktop-vw($pixels, $base-vw: $desktop-width) {
-    $px: math.div($pixels, $base-vw);
-    $perc: math.div($px, 1px);
-    @return calc($perc * 100vw);
-}
-
-@function desktop-vh($pixels, $base-vh: $desktop-height) {
-    $px: math.div($pixels, $base-vh);
-    $perc: math.div($px, 1px);
-    @return calc($perc * 100vh);
-}
-
-@function size-vw($pixels, $base-vw: 354) {
-    $px: math.div($pixels, $base-vw);
-    $perc: math.div($px, 1px);
-    @return calc($perc * 100vw);
-}
-
@function columns($columns) {
    @return calc(
        (#{$columns} * var(--layout-column-width)) +
@@ -72,14 +17,6 @@ $mobile-height: get('viewports.mobile.height');
    }
 }

-@mixin fill($position: absolute) {
-    position: #{$position};
-    bottom: 0;
-    right: 0;
-    left: 0;
-    top: 0;
-}
-
@mixin fade-on-ready($class: 'ready', $duration: 400ms) {
    opacity: 0;
    transition: opacity $duration ease;
@@ -90,90 +27,12 @@ $mobile-height: get('viewports.mobile.height');
 }

 // Clamp text block to number of lines
-@mixin line-clamp($lines: 3, $mobile-lines: $lines) {
+@mixin line-clamp($lines: 3) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $lines;
-
-    @include mobile {
-        -webkit-line-clamp: $mobile-lines;
-    }
-}
-
-// Flip animations
-@keyframes flip-r {
-    50% {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-    51% {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-}
-@keyframes flip-l {
-    50% {
-        transform: translateX(-100%);
-        opacity: 0;
-    }
-    51% {
-        transform: translateX(100%);
-        opacity: 0;
-    }
-}
-@keyframes flip-d {
-    50% {
-        transform: translateY(100%);
-        opacity: 0;
-    }
-    51% {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-}
-@keyframes flip-u {
-    50% {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-    51% {
-        transform: translateY(100%);
-        opacity: 0;
-    }
-}
-
-@mixin flip-animation(
-    $direction: 'r',
-    $duration: 600ms,
-    $easing: var(--ease-out-expo),
-    $iteration-count: 1
-) {
-    overflow: hidden;
-    animation: flip-#{$direction} $duration $easing $iteration-count forwards;
-}
-
-@mixin link-hover {
-    position: relative;
-
-    &::before {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: var(--theme-fg);
-        transform-origin: left;
-        transform: scaleX(0);
-        transition: transform 300ms var(--ease-out-quad);
-    }
-    @include desktop {
-        &:hover::before {
-            transform: scaleX(1);
-        }
-    }
 }

@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
@@ -185,20 +44,18 @@ $mobile-height: get('viewports.mobile.height');
 }

@mixin hover {
-    @include desktop {
    &:hover {
        @content;
    }
-    }
 }

@mixin drop-cap() {
    font-family: var(--font-mono);
-    font-size: size-vw(12px);
+    font-size: 12px;
    font-weight: 400 !important;

    &:first-child::first-letter {
        font-family: var(--font-display);
-        font-size: size-vw(42px);
+        font-size: 42px;
    }
 }
--- a/src/renderer/src/styles/_layout.scss
+++ b/src/renderer/src/styles/_layout.scss
@@ -10,9 +10,7 @@

 // css classes exposed globally:
 // .layout-block: element takes the whole layout width
-// .layout-block-inner: same as .layout-block but using padding instead of margin
 // .layout-grid: extends .layout-block with grid behaviour using layout settings
-// .layout-grid-inner: same as .layout-grid but using padding instead of margin

@use 'sass:map';

@@ -20,26 +18,21 @@
 // 'variable': (mobile, desktop)
 $layout: (
    'columns-count': (
-        5,
-        18,
+        6,
    ),
    'columns-gap': (
-        20px,
-        20px,
+        10px,
    ),
    'margin': (
-        30px,
-        60px,
+        20px,
    ),
 );

 //internal process, do not touch
 :root {
    --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
-    --layout-column-gap: #{size-vw(
-            list.nth(map.get($layout, 'columns-gap'), 1)
-        )};
-    --layout-margin: #{size-vw(list.nth(map.get($layout, 'margin'), 1))};
+    --layout-column-gap: #{list.nth(map.get($layout, 'columns-gap'), 1)};
+    --layout-margin: #{list.nth(map.get($layout, 'margin'), 1)};
    --layout-width: calc(100vw - (2 * var(--layout-margin)));
    --layout-column-width: calc(
        (
@@ -54,13 +47,6 @@ $layout: (
 }

 .layout-block {
-    max-width: var(--layout-width);
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-}
-
-.layout-block-inner {
    padding-left: var(--layout-margin);
    padding-right: var(--layout-margin);
    width: 100%;
@@ -73,11 +59,3 @@ $layout: (
    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
    grid-gap: var(--layout-column-gap);
 }
-
-.layout-grid-inner {
-    @extend .layout-block-inner;
-
-    display: grid;
-    grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
-    grid-gap: var(--layout-column-gap);
-}
--- a/src/renderer/src/styles/_scroll.scss
+++ b/src/renderer/src/styles/_scroll.scss
@@ -10,23 +10,3 @@ html {
        }
    }
 }
-
-html.lenis {
-    height: auto;
-}
-
-.lenis.lenis-smooth {
-    scroll-behavior: auto;
-}
-
-.lenis.lenis-smooth [data-lenis-prevent] {
-    overscroll-behavior: contain;
-}
-
-.lenis.lenis-stopped {
-    overflow: hidden;
-}
-
-.lenis.lenis-scrolling iframe {
-    pointer-events: none;
-}
--- a/src/renderer/src/styles/_utils.scss
+++ b/src/renderer/src/styles/_utils.scss
@@ -17,26 +17,8 @@
    position: relative;
 }

-.mobile-only {
-    @include desktop {
-        display: none !important;
-    }
-}
-
-.desktop-only {
-    @include mobile {
-        display: none !important;
-    }
-}
-
 html:not(.has-scroll-smooth) {
    .hide-on-native-scroll {
        display: none;
    }
 }
-
-html.has-scroll-smooth {
-    .hide-on-smooth-scroll {
-        display: none;
-    }
-}
--- a/src/renderer/src/styles/main.scss
+++ b/src/renderer/src/styles/main.scss
@@ -46,7 +46,8 @@ p,
 a,
 button,
 input,
-pre {
+pre,
+span {
    @include p;
 }
 .bold {
@@ -64,9 +65,9 @@ button {
 // Text selection
 ::selection {
    color: var(--theme-bg);
-    background: var(--theme-accent);
+    background: var(--theme-fg);
 }
 ::-moz-selection {
    color: var(--theme-bg);
-    background: var(--theme-accent);
+    background: var(--theme-fg);
 }
--- a/src/renderer/src/views/Category.vue
+++ b/src/renderer/src/views/Category.vue
@@ -64,20 +64,20 @@ main.category {
    .back {
        display: block;
        opacity: 0.25;
-        margin-top: size-vw(9px);
+        margin-top: 9px;
    }
    .category-row {
-        margin-top: size-vw(4px);
+        margin-top: 4px;
    }
    .notes {
        display: flex;
        flex-direction: column;
-        gap: size-vw(14px);
-        margin-top: size-vw(9px);
+        gap: 14px;
+        margin-top: 9px;
    }
    .new-note {
        display: block;
-        margin: size-vw(50px) auto 0;
+        margin: 50px auto 0;
    }
 }
 </style>
--- a/src/renderer/src/views/CreateCategory.vue
+++ b/src/renderer/src/views/CreateCategory.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="create-category layout-block-inner">
+    <main class="create-category layout-block">
        <category-row :index="1" editable @edited="onCategoryEdited" />
    </main>
 </template>
--- a/src/renderer/src/views/Directory.vue
+++ b/src/renderer/src/views/Directory.vue
@@ -12,11 +12,24 @@
        <div class="notes">
            <note-row v-for="note in notes" :note="note" :key="note.id" />
        </div>
+
+        <div v-for="plugin in plugins" :key="plugin.id">
+            <input
+                v-model="activePlugin"
+                type="radio"
+                name="plugins"
+                :value="plugin.id"
+                :id="plugin.id"
+            />
+            <label :for="plugin.id">{{ plugin.name }}</label>
+        </div>
    </main>
 </template>

 <script setup>
 import useNotes from '@/composables/useNotes'
+import usePlugins from '@/composables/usePlugins'
+import useConfig from '@/composables/useConfig'
 import { onMounted, ref, watch } from 'vue'
 import CategoryRow from '@/components/CategoryRow.vue'
 import NoteRow from '@/components/NoteRow.vue'
@@ -24,6 +37,11 @@ import NoteRow from '@/components/NoteRow.vue'
 const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
    useNotes()

+const { config } = useConfig()
+const { plugins, setActivePlugin } = usePlugins()
+
+const activePlugin = ref(config.value?.activeAdapter)
+
 const notes = ref()

 async function refreshNotes() {
@@ -38,21 +56,38 @@ onMounted(async () => {
 watch(notesChangeCount, async () => {
    await refreshNotes()
 })
+watch(activePlugin, async (pluginId) => {
+    await setActivePlugin(pluginId)
+    await refreshNotes()
+})
 </script>

 <style lang="scss">
 main.directory {
-    padding-top: size-vw(18px);
+    padding-top: 18px;
+    padding-bottom: 30px;
+
+    input[type='radio'] {
+        display: block;
+        width: 10px;
+        height: 10px;
+        margin-right: 10px;
+        border: 1px solid white;
+
+        &:checked {
+            background-color: white;
+        }
+    }

    .label {
        text-transform: uppercase;
-        margin: size-vw(17px) 0 size-vw(24px);
+        margin: 17px 0 24px;
        @include p;
    }
    .notes {
        display: flex;
        flex-direction: column;
-        gap: size-vw(14px);
+        gap: 14px;
    }
 }
 </style>
--- a/src/renderer/src/views/Instructions.vue
+++ b/src/renderer/src/views/Instructions.vue
@@ -1,5 +1,5 @@
 <template>
-    <main class="instructions layout-block-inner">
+    <main class="instructions layout-block">
        <router-link class="back-link" to="/"><- Go Back</router-link>

        <p>
@@ -67,8 +67,8 @@ main.instructions {
    .back-link {
        opacity: 0.25;
        display: block;
-        margin-top: size-vw(9px);
-        margin-bottom: size-vw(14px);
+        margin-top: 9px;
+        margin-bottom: 14px;
    }
 }
 </style>
--- a/src/renderer/src/views/Note.vue
+++ b/src/renderer/src/views/Note.vue
@@ -0,0 +1,29 @@
+<template>
+    <main class="note layout-block">
+        <note-editor :id="id" />
+    </main>
+</template>
+
+<script setup>
+import { watchEffect } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useRoute } from 'vue-router'
+import NoteEditor from '@/components/note/Editor.vue'
+
+const route = useRoute()
+const id = route.params.id
+
+const { ctrl, f } = useMagicKeys()
+watchEffect(() => {
+    if (ctrl.value && f.value) {
+        console.log('find')
+    }
+})
+</script>
+
+<style lang="scss">
+main.note {
+    padding-top: 8px;
+    padding-bottom: 20px;
+}
+</style>
--- a/src/renderer/src/views/Search.vue
+++ b/src/renderer/src/views/Search.vue
@@ -0,0 +1,105 @@
+<template>
+    <main class="search layout-block">
+        <router-link class="back" to="/"><- Back</router-link>
+
+        <form @submit.prevent="onSearch">
+            <div class="input-wrap">
+                <input
+                    v-model="query"
+                    type="text"
+                    placeholder="Search"
+                    ref="searchInput"
+                    @input="onInput"
+                />
+            </div>
+        </form>
+
+        <div class="results">
+            <note-row
+                v-for="note in searchResults"
+                :key="note.id"
+                :note="note"
+            />
+        </div>
+    </main>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import useNotes from '@/composables/useNotes'
+import NoteRow from '@/components/NoteRow.vue'
+import _debounce from 'lodash/debounce'
+
+const query = ref('')
+const searchInput = ref()
+
+const { search, searchResults } = useNotes()
+
+onMounted(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 100))
+    searchInput.value?.focus()
+})
+
+const onSearch = async () => {
+    await search(query.value)
+}
+const onInput = _debounce(async () => {
+    await search(query.value)
+}, 300)
+</script>
+
+<style lang="scss">
+main.search {
+    .back {
+        display: block;
+        opacity: 0.25;
+        margin-top: 9px;
+    }
+    .input-wrap {
+        margin-top: 19px;
+        position: relative;
+
+        input {
+            display: block;
+            width: 100%;
+            position: relative;
+            padding: 5px 15px 6px;
+            background: var(--theme-bg);
+            --clip-start: 16px;
+            clip-path: polygon(
+                var(--clip-start) 1px,
+                calc(100% - var(--clip-start)) 1px,
+                calc(100% - 1.5px) 50%,
+                calc(100% - var(--clip-start)) calc(100% - 1px),
+                var(--clip-start) calc(100% - 1px),
+                1.5px 50%
+            );
+        }
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--theme-fg);
+            --clip-start: 15px;
+            clip-path: polygon(
+                var(--clip-start) 0,
+                calc(100% - var(--clip-start)) 0,
+                100% 50%,
+                calc(100% - var(--clip-start)) 100%,
+                var(--clip-start) 100%,
+                0% 50%
+            );
+        }
+    }
+
+    .results {
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+    }
+}
+</style>
Author	SHA1	Message	Date
nicwands	a1b339f668	config system + move api to frontend	2026-03-11 12:26:40 -04:00
nicwands	efc9c73751	search WIP	2026-03-10 12:10:52 -04:00
nicwands	77b8ad2dcd	theme switcher	2026-03-10 11:11:22 -04:00
nicwands	23054d4981	update blackletter	2026-03-06 09:59:24 -05:00
nicwands	a3bb474399	update sizing	2026-03-06 09:56:54 -05:00
nicwands	e48779e8e0	fix prod bug Some checks failed Build Electron App / build (macos-latest, build:mac) (push) Has been cancelled Details Build Electron App / build (ubuntu-latest, build:linux) (push) Has been cancelled Details Build Electron App / build (windows-latest, build:win) (push) Has been cancelled Details	2026-03-03 20:58:31 -05:00