config system + move api to frontend

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,
+        ...parsed ? parsed : {},
-        adapterConfig: defaultConfig
+        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", () => {
+  mainWindow.on("ready-to-show", () => {
-    mainWindow2.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, {
+    noteWindow.loadFile(rendererPath, {
-      path: `/notes/${noteId}`
+      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 config = new Config(filesystemPlugin);
-  const plugin = registry.get(config.activeAdapter);
+  const initialConfig = await config.load();
-  const adapter = plugin.createAdapter(config.adapterConfig);
+  const setActivePlugin = async (pluginId) => {
-  const notesAPI = new NotesAPI(
+    const currentConfig = await config.load();
-    adapter,
+    await config.write({ ...currentConfig, activeAdapter: pluginId });
-    "729a0d21d783654c68f1a0123e2a0e986350de536b5324f1f35876ea12ffeaf5"
+    const plugin = registry.get(pluginId);
-  );
+    const adapterConfig = currentConfig.adapters[pluginId] || {};
-  await notesAPI.init();
+    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) => {
+  ipcMain.on("note-changed", (_, event, data) => {
-    if (!notesAPI[method]) {
+    broadcastNoteChange(event, data);
-      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;
   });
   electronApp.setAppUserModelId("com.electron");
   app.on("browser-window-created", (_, window) => {

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 = {
+const adapter = {
-  call: (method, ...args) => ipcRenderer.invoke("notesAPI:call", method, args)
+  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;
 }

out/renderer/assets/__vite-browser-external-2Ng8QIWW.js

@@ -0,0 +1,4 @@
+const __viteBrowserExternal = {};
+export {
+  __viteBrowserExternal as default
+};

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>
+      <script type="module" crossorigin src="./assets/index-CoqDP7Z2.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-D9ZUihqb.css">
+      <link rel="stylesheet" crossorigin href="./assets/index-CVyE7-c9.css">
     </head>
 
     <body>

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",

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",

src/main/core/Config.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 {

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,
+        }))
     }
 }

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 Config from './core/Config.js'
-import NotesAPI from './core/NotesAPI.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, {
+        noteWindow.loadFile(rendererPath, {
-            path: `/notes/${noteId}`,
+            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 setActivePlugin = async (pluginId) => {
-    const plugin = registry.get(config.activeAdapter)
+        const currentConfig = await config.load()
-    // const plugin = registry.get(supabasePlugin.id)
+        await config.write({ ...currentConfig, activeAdapter: pluginId })
-    const adapter = plugin.createAdapter(config.adapterConfig)
-    // const adapter = plugin.createAdapter({
-    //     supabaseKey: process.env.SUPABASE_KEY,
-    //     supabaseUrl: process.env.SUPABASE_URL,
-    // })
 
-    // Init Notes API
+        const plugin = registry.get(pluginId)
-    const notesAPI = new NotesAPI(
+        const adapterConfig = currentConfig.adapters[pluginId] || {}
-        adapter,
+        const adapter = plugin.createAdapter(adapterConfig)
-        '729a0d21d783654c68f1a0123e2a0e986350de536b5324f1f35876ea12ffeaf5',
+
-    )
+        // Initialize adapter
-    await notesAPI.init()
+        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
+    // Handle note change events from renderer
-    ipcMain.handle('notesAPI:call', async (_, method, args) => {
+    ipcMain.on('note-changed', (_, event, data) => {
-        if (!notesAPI[method]) {
+        broadcastNoteChange(event, data)
-            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
     })
 
     electronApp.setAppUserModelId('com.electron')

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

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;

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;

src/renderer/src/components/Menu.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-top: 3px;
-        padding-bottom: size-vw(10px);
+        padding-bottom: 10px;
 
         .menu-item {
-            display: block;
+            padding: 16px 0;
-            padding: size-vw(16px) 0;
             text-align: center;
 
             &:not(:last-child) {

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>

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 {

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;

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>

src/renderer/src/components/note/Editor.vue

@@ -1,89 +1,67 @@
 <template>
-    <main v-if="editor" class="editor layout-block">
+    <div v-if="editor" class="note-editor">
-        <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>
-
         <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 props = defineProps({
-const id = route.params.id
+    id: {
-
+        type: String,
-const { loadNote, updateNoteContent, updateNoteMetadata } = useNotes()
+        required: true,
-
+    },
-const CustomDocument = Document.extend({
-    content: 'heading block*',
 })
 
 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)
+    // Get doc title
-
+    let title
-    updateTitle(editor)
-}, 300)
-
-// Track title updates for file
-let lastTitle
-const updateTitle = _debounce(async (editor) => {
     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
+    await updateNote(props.id, {
-    lastTitle = newTitle
+        title,
-
+        content: json,
-    await updateNoteMetadata(id, { title: newTitle })
+        plainText: text,
+    })
 }, 300)
 
 onMounted(async () => {
-    const note = await loadNote(id)
+    const note = await loadNote(props.id)
-    lastTitle = note.title
 
     // 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 {
+.note-editor {
-    padding-top: size-vw(8px);
-    padding-bottom: size-vw(20px);
-
     h1 {
         font-weight: 700 !important;
         @include p;
@@ -143,9 +118,8 @@ main.editor {
     p em {
         font-style: italic;
     }
-    hr::before {
+    hr {
-        content: '----------------------------------------';
+        border: 1px dashed currentColor;
-        @include p;
     }
     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>

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>

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>

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,
+    }
+}

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
+}

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
-}

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() {
+const setupListeners = () => {
-    if (initialized || typeof window === 'undefined') return
+    if (listenersInitialized || typeof window === 'undefined') return
-    initialized = true
+    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(() => {
+    window.api.onNoteCreated(updateCacheCount)
-        notesChangeCount.value++
+    window.api.onNoteUpdated(updateCacheCount)
-    })
 
+    // Todo update cache
     window.api.onNoteDeleted(() => {
         notesChangeCount.value++
     })
 }
 
-export default () => {
+const broadcastChange = (event, data) => {
+    window.api.notifyNoteChanged(event, data)
+}
+
 setupListeners()
 
+export default () => {
     /* -------------------------
      Initialization
     --------------------------*/
-    async function loadCategories() {
+    const loadCategories = async () => {
-        categories.value = await window.notesAPI.call('getCategories')
+        const api = await getNotesAPI()
+        categories.value = api.getCategories()
     }
 
-    async function loadCategoryNotes(category = null) {
+    const loadCategoryNotes = async (category = null) => {
-        return await window.notesAPI.call('getCategoryNotes', category)
+        const api = await getNotesAPI()
+        return api.getCategoryNotes(category)
     }
 
-    async function loadNote(id) {
+    const loadNote = async (id) => {
-        return await window.notesAPI.call('getNote', id)
+        const api = await getNotesAPI()
+        return api.getNote(id)
     }
 
     /* -------------------------
      Create
     --------------------------*/
-    async function createNote(metadata, content) {
+    const createNote = async (metadata, content, plainText = '') => {
-        const note = await window.notesAPI.call('createNote', metadata, content)
+        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 updateNote = async (id, updates) => {
-        const note = await window.notesAPI.call('updateNote', id, content)
+        const api = await getNotesAPI()
-        return note
-    }
 
-    async function updateNoteMetadata(id, updates) {
+        const note = await api.updateNote(id, updates)
-        const note = await window.notesAPI.call(
+
-            'updateNoteMetadata',
+        if (updates.category !== undefined || updates.title !== undefined) {
-            id,
-            updates,
-        )
             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) => {
+        for (const note of notes) {
-            await updateNoteMetadata(note.id, { category: update })
+            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,
+        updateNote,
-        updateNoteMetadata,
         updateCategory,
+        deleteNote,
 
         search,
     }

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 environment = useEnvironment()
-        const isElectron =
-            typeof window !== 'undefined' &&
-            window.api &&
-            typeof window.api.openNoteWindow === 'function'
 
-        if (newWindow && isElectron) {
+        if (newWindow && environment === ENVIRONMENTS.ELECTRON) {
             window.api.openNoteWindow(noteId)
             return
         }

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,
+    }
+}

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,
-    }
-}

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 }
-}

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)
+    }
+}

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',
+            tokenize: 'forward',
-            resolution: 9,
         })
     }
 
@@ -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])
+        const combined = uint.concatUint8Arrays(nonce, ciphertext)
-        return combined.toString('base64')
+        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 = '') {
+    async createNote(metadata = {}, content = '', plainText = '') {
-        const id = crypto.randomUUID()
+        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
+        const allowedFields = ['title', 'category', 'content', 'plainText']
-        note.updatedAt = 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}`)
+                throw new Error(`Invalid update field: ${key}`)
             }
         }
 
-        if (updates.title !== undefined) {
+        const updatedNote = {
-            note.title = updates.title
+            ...note,
+            ...updates,
+            updatedAt: new Date().toISOString(),
         }
 
-        if (updates.category !== undefined) {
-            note.category = updates.category
-        }
-
-        note.updatedAt = new Date().toISOString()
-
         const encryptedNote = {
-            id: note.id,
+            id: updatedNote.id,
-            data: this._encrypt(note),
+            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))
     }
 }

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
+}

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,
     },
-}
+    light: {
-
+        bg: colors.white,
-const breakpoints = {
+        fg: colors.black,
-    mobile: 800,
+        accent: colors.green,
-}
+        link: colors.blue,
-
-const viewports = {
-    mobile: {
-        width: 200,
-        height: 956,
-    },
-    desktop: {
-        width: 354,
-        height: 549,
     },
 }
 
-export { colors, themes, breakpoints, viewports }
+export { colors, themes }
 
 export default {
     colors,
     themes,
-    breakpoints,
-    viewports,
 }

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
+}

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,
 })

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;
 }

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/neuefraktur.woff2') format('woff2'),
-        url('../../../../resources/fonts/leibniz-fraktur.woff') format('woff');
+        url('../../../../resources/fonts/neuefraktur.woff') format('woff');
 }
 
 /* Geist Mono */

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;
     }
 }

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,
+        6,
-        18,
     ),
     'columns-gap': (
-        20px,
+        10px,
-        20px,
     ),
     'margin': (
-        30px,
+        20px,
-        60px,
     ),
 );
 
 //internal process, do not touch
 :root {
     --layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
-    --layout-column-gap: #{size-vw(
+    --layout-column-gap: #{list.nth(map.get($layout, 'columns-gap'), 1)};
-            list.nth(map.get($layout, 'columns-gap'), 1)
+    --layout-margin: #{list.nth(map.get($layout, 'margin'), 1)};
-        )};
-    --layout-margin: #{size-vw(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);
-}

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;
-}

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;
-    }
-}

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);
 }

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);
+        gap: 14px;
-        margin-top: size-vw(9px);
+        margin-top: 9px;
     }
     .new-note {
         display: block;
-        margin: size-vw(50px) auto 0;
+        margin: 50px auto 0;
     }
 }
 </style>

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>

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>

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-top: 9px;
-        margin-bottom: size-vw(14px);
+        margin-bottom: 14px;
     }
 }
 </style>

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>

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>