download and find WIP

.gitignore

@@ -14,6 +14,7 @@ dist
 dist-ssr
 coverage
 *.local
+out
 
 # Editor directories and files
 .vscode/*

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-    "recommendations": ["dbaeumer.vscode-eslint"]
-}

out/main/index.js

@@ -68,12 +68,14 @@ class Config {
       }
       parsed = {
         ...parsed ? parsed : {},
-        activeAdapter: this.defaultPlugin.id
+        activeAdapter: this.defaultPlugin.id,
+        adapters: {}
       };
       parsed.adapters[this.defaultPlugin.id] = defaultConfig;
+      parsed[theme] = "dark";
       await this.write(parsed);
     } else {
-      parsed.adapterConfig = this._resolveDefaults(parsed.adapterConfig);
+      parsed.adapters = this._resolveDefaults(parsed.adapters);
     }
     return parsed;
   }
@@ -82,7 +84,7 @@ class Config {
     await fs.mkdir(dir, { recursive: true });
     const resolvedConfig = {
       ...configObject,
-      adapterConfig: this._resolveDefaults(configObject.adapterConfig)
+      adapters: this._resolveDefaults(configObject.adapters)
     };
     await fs.writeFile(
       this.configPath,
@@ -91,12 +93,14 @@ class Config {
     );
   }
 }
+const DEFAULT_WINDOW_SIZE = { width: 354, height: 549 };
+const DEFAULT_MOVE_WINDOW_SIZE = { width: 708, height: 549 };
 const preloadPath = join(__dirname, "../preload/index.mjs");
 const rendererPath = join(__dirname, "../renderer/index.html");
 function createWindow() {
   const mainWindow = new BrowserWindow({
-    width: 354,
+    width: DEFAULT_WINDOW_SIZE.width,
-    height: 549,
+    height: DEFAULT_WINDOW_SIZE.height,
     show: false,
     autoHideMenuBar: true,
     webPreferences: {
@@ -119,8 +123,8 @@ function createWindow() {
 }
 function createNoteWindow(noteId) {
   const noteWindow = new BrowserWindow({
-    width: 354,
+    width: DEFAULT_WINDOW_SIZE.width,
-    height: 549,
+    height: DEFAULT_WINDOW_SIZE.height,
     autoHideMenuBar: true,
     webPreferences: {
       preload: preloadPath,
@@ -143,6 +147,11 @@ app.whenReady().then(async () => {
   ipcMain.on("open-note-window", (_, noteId) => {
     createNoteWindow(noteId);
   });
+  const broadcastNoteChange = (event, data) => {
+    BrowserWindow.getAllWindows().forEach((win) => {
+      win.webContents.send(event, data);
+    });
+  };
   const registry = new PluginRegistry();
   registry.register(filesystemPlugin);
   registry.register(supabasePlugin);
@@ -162,6 +171,7 @@ app.whenReady().then(async () => {
       }
       return await adapter[method](...args);
     });
+    broadcastNoteChange("plugin-changed", pluginId);
     return true;
   };
   await setActivePlugin(initialConfig.activeAdapter);
@@ -177,14 +187,29 @@ app.whenReady().then(async () => {
   ipcMain.handle("setActivePlugin", async (_, pluginId) => {
     return await setActivePlugin(pluginId);
   });
-  const broadcastNoteChange = (event, data) => {
-    BrowserWindow.getAllWindows().forEach((win) => {
-      win.webContents.send(event, data);
-    });
-  };
   ipcMain.on("note-changed", (_, event, data) => {
     broadcastNoteChange(event, data);
   });
+  ipcMain.handle("move-opened", (_) => {
+    const activeWindow = BrowserWindow.getFocusedWindow();
+    const windowSize = activeWindow.getSize();
+    if (windowSize[0] < DEFAULT_MOVE_WINDOW_SIZE.width) {
+      activeWindow.setSize(
+        DEFAULT_MOVE_WINDOW_SIZE.width,
+        DEFAULT_MOVE_WINDOW_SIZE.height
+      );
+    }
+  });
+  ipcMain.handle("move-closed", (_) => {
+    const activeWindow = BrowserWindow.getFocusedWindow();
+    const windowSize = activeWindow.getSize();
+    if (windowSize[0] === 708) {
+      activeWindow.setSize(
+        DEFAULT_WINDOW_SIZE.width,
+        DEFAULT_WINDOW_SIZE.height
+      );
+    }
+  });
   electronApp.setAppUserModelId("com.electron");
   app.on("browser-window-created", (_, window) => {
     optimizer.watchWindowShortcuts(window);

out/preload/index.mjs

@@ -16,8 +16,17 @@ const api = {
   onNoteDeleted: (callback) => {
     ipcRenderer.on("note-deleted", (_, data) => callback(data));
   },
+  onPluginChanged: (callback) => {
+    ipcRenderer.on("plugin-changed", (_, data) => callback(data));
+  },
   notifyNoteChanged: (event, data) => {
     ipcRenderer.send("note-changed", event, data);
+  },
+  moveOpened: () => {
+    ipcRenderer.invoke("move-opened");
+  },
+  moveClosed: () => {
+    ipcRenderer.invoke("move-closed");
   }
 };
 const adapter = {

out/renderer/assets/index-CVyE7-c9.css

@@ -1,826 +0,0 @@
-@charset "UTF-8";
-:root {
-  --black: #181818;
-  --white: #D5D5D5;
-  --grey-100: #747474;
-  --green: #87FF5B;
-  --blue: #5B92FF;
-}
-
-:root .theme-dark {
-  --theme-bg: #181818;
-  --theme-fg: #D5D5D5;
-  --theme-accent: #87FF5B;
-  --theme-link: #5B92FF;
-}
-:root .theme-light {
-  --theme-bg: #D5D5D5;
-  --theme-fg: #181818;
-  --theme-accent: #87FF5B;
-  --theme-link: #5B92FF;
-}
-
-:root {
-  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-  --ease-custom: cubic-bezier(0.315, 0.365, 0.23, 0.985);
-}
-
-/***
-    The new CSS reset - version 1.9 (last updated 19.6.2023)
-    GitHub page: https://github.com/elad2412/the-new-css-reset
-***/
-/*
-    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-    - The "symbol *" part is to solve Firefox SVG sprite bug
-    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
- */
-*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-  all: unset;
-  display: revert;
-}
-
-/* Preferred box-sizing value */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Reapply the pointer cursor for anchor tags */
-a,
-button {
-  cursor: revert;
-}
-
-/* For images to not be able to exceed their container */
-img {
-  max-inline-size: 100%;
-  max-block-size: 100%;
-}
-
-/* removes spacing between cells in tables */
-table {
-  border-collapse: collapse;
-}
-
-/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input,
-textarea {
-  -webkit-user-select: auto;
-}
-
-/* revert the 'white-space' property for textarea elements on Safari */
-textarea {
-  white-space: revert;
-}
-
-/* minimum style to allow to style meter element */
-meter {
-  -webkit-appearance: revert;
-  appearance: revert;
-}
-
-/* preformatted text - use only for this feature */
-:where(pre) {
-  all: revert;
-}
-
-/* reset default text opacity of input placeholder */
-::placeholder {
-  color: unset;
-}
-
-/* remove default dot (•) sign */
-::marker {
-  content: initial;
-}
-
-/* fix the feature of 'hidden' attribute.
- display:revert; revert to element instead of attribute */
-:where([hidden]) {
-  display: none;
-}
-
-/* revert for bug in Chromium browsers
- - fix for the content editable attribute will work properly.
- - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-:where([contenteditable]:not([contenteditable=false])) {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-  overflow-wrap: break-word;
-  -webkit-line-break: after-white-space;
-  -webkit-user-select: auto;
-}
-
-/* apply back the draggable feature - exist only in Chromium and Safari */
-:where([draggable=true]) {
-  -webkit-user-drag: element;
-}
-
-/* Revert Modal native behavior */
-:where(dialog:modal) {
-  all: revert;
-}
-
-.menu {
-  z-index: 10;
-}
-
-.full-width {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin-left: -50vw;
-  margin-right: -50vw;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.relative {
-  position: relative;
-}
-
-html:not(.has-scroll-smooth) .hide-on-native-scroll {
-  display: none;
-}
-
-/*
-    Font Weights:
-        100 - Thin
-        200 - Extra Light (Ultra Light)
-        300 - Light
-        400 - Normal
-        500 - Medium
-        600 - Semi Bold (Demi Bold)
-        700 - Bold
-        800 - Extra Bold (Ultra Bold)
-        900 - Black (Heavy)
-*/
-/* Leibniz Fraktur */
-@font-face {
-  font-family: "Leibniz Fraktur";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./neuefraktur-A4S1ACH2.woff2") format("woff2"), url("./neuefraktur-CwjUIZ0G.woff") format("woff");
-}
-/* Geist Mono */
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 700;
-  src: url("./geist-mono-bold-CTLtpKvJ.woff2") format("woff2"), url("./geist-mono-bold-Bz_UliG4.woff") format("woff");
-}
-@font-face {
-  font-family: "Geist Mono";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./geist-mono-BzrJhchg.woff2") format("woff2"), url("./geist-mono-OFKGen7b.woff") format("woff");
-}
-:root {
-  --font-display: 'Leibniz Fraktur', serif;
-  --font-mono: 'Geist Mono', monospace;
-}
-
-:root {
-  --layout-column-count: 6;
-  --layout-column-gap: 10px;
-  --layout-margin: 20px;
-  --layout-width: calc(100vw - (2 * var(--layout-margin)));
-  --layout-column-width: calc(
-      (
-              var(--layout-width) -
-                  (
-                      (var(--layout-column-count) - 1) *
-                          var(--layout-column-gap)
-                  )
-          ) /
-          var(--layout-column-count)
-  );
-}
-
-.layout-block, .layout-grid {
-  padding-left: var(--layout-margin);
-  padding-right: var(--layout-margin);
-  width: 100%;
-}
-
-.layout-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
-  grid-gap: var(--layout-column-gap);
-}
-
-html,
-html * {
-  scrollbar-width: none !important;
-  -ms-overflow-style: none !important;
-}
-html::-webkit-scrollbar,
-html *::-webkit-scrollbar {
-  width: 0 !important;
-  height: 0 !important;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 400ms;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.quick-fade-enter-active,
-.quick-fade-leave-active {
-  transition: opacity 100ms;
-}
-
-.quick-fade-enter-from,
-.quick-fade-leave-to {
-  opacity: 0;
-}
-
-.slow-fade-enter-active,
-.slow-fade-leave-active {
-  transition: opacity 600ms;
-}
-
-.slow-fade-enter-from,
-.slow-fade-leave-to {
-  opacity: 0;
-}
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 400ms var(--ease-out-quad);
-}
-
-.slide-up-enter-from,
-.slide-up-leave-to {
-  transform: translateY(-100%);
-}
-
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: transform 400ms var(--ease-out-quad);
-}
-
-.slide-left-enter-from,
-.slide-left-leave-to {
-  transform: translateX(-100%);
-}
-
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  background: var(--black);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-}
-
-.h1,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-display);
-  font-weight: 400;
-  letter-spacing: -0.02em;
-  line-height: 1.3;
-  font-size: 30px;
-}
-.h1.mono,
-h1.mono,
-h2.mono,
-h3.mono,
-h4.mono,
-h5.mono,
-h6.mono {
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 22px;
-}
-
-.p,
-p,
-a,
-button,
-input,
-pre,
-span {
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 12px;
-}
-
-.bold {
-  font-weight: 700;
-}
-
-#app {
-  min-height: 100vh;
-}
-
-button {
-  cursor: pointer;
-}
-
-::selection {
-  color: var(--theme-bg);
-  background: var(--theme-fg);
-}
-
-::-moz-selection {
-  color: var(--theme-bg);
-  background: var(--theme-fg);
-}.theme-switcher {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-.theme-switcher button {
-  background: var(--theme-bg);
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  border: none;
-  cursor: pointer;
-}
-.theme-switcher button.active {
-  border: 1px solid var(--theme-fg);
-}
-.theme-switcher:hover {
-  color: var(--theme-fg) !important;
-}.nav {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding-top: 9px;
-  color: var(--grey-100);
-}.menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: var(--theme-bg);
-  border-bottom: 1px solid var(--grey-100);
-}
-.menu .menu-wrap {
-  display: flex;
-  flex-direction: column;
-  padding-top: 3px;
-  padding-bottom: 10px;
-}
-.menu .menu-wrap .menu-item {
-  padding: 16px 0;
-  text-align: center;
-}
-.menu .menu-wrap .menu-item:not(:last-child) {
-  border-bottom: 1px dashed currentColor;
-}
-.menu .menu-wrap .menu-item:hover {
-  color: var(--theme-accent);
-}
-.menu.menu-enter-active, .menu.menu-leave-active {
-  transition: transform 300ms var(--ease-out-expo);
-}
-.menu.menu-enter-from, .menu.menu-leave-to {
-  transform: translateY(-100%);
-}.scroll-bar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 8px;
-  will-change: transform;
-  border-left: 1px solid var(--grey-100);
-}
-.scroll-bar .inner {
-  height: 100%;
-  position: relative;
-}
-.scroll-bar .inner .handle {
-  width: 100%;
-  height: 388px;
-  background: var(--grey-100);
-  border-radius: 20px;
-  position: absolute;
-  right: 0;
-  will-change: transform;
-}.container {
-  min-height: calc(100 * var(--vh));
-  max-width: 100vw;
-  overflow-x: clip;
-  background: var(--theme-bg);
-  color: var(--theme-fg);
-  transition: opacity 400ms;
-}
-.container:not(.fonts-ready) {
-  opacity: 0;
-}.category-row {
-  display: grid;
-  grid-template-columns: 26px 1fr auto;
-  align-items: flex-start;
-  width: 100%;
-  position: relative;
-  padding: 8px 0 6px;
-  border-bottom: 1px dashed currentColor;
-  cursor: pointer;
-}
-.category-row .index {
-  margin-top: 19px;
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 12px;
-}
-.category-row .title {
-  display: block;
-  width: 100%;
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-.category-row .category-input {
-  display: block;
-  width: 100%;
-  font-family: var(--font-display);
-  font-weight: 400;
-  letter-spacing: -0.02em;
-  line-height: 1.3;
-  font-size: 30px;
-}
-.category-row .category-input:focus {
-  outline: none;
-}
-.category-row .edit-button,
-.category-row .save-button {
-  color: var(--grey-100);
-  cursor: pointer;
-  padding-right: 0.5em;
-  padding-left: 0.5em;
-  margin-top: 1.5em;
-}
-.category-row .edit-button {
-  opacity: 0;
-  pointer-events: none;
-}
-.category-row.editable:hover .edit-button {
-  opacity: 1;
-  pointer-events: auto;
-}
-.category-row.router-link-exact-active, .category-row.editable {
-  cursor: default;
-}
-.category-row:hover:not(.router-link-exact-active):not(.editable) {
-  color: var(--theme-accent);
-}.note-row {
-  grid-template-columns: auto 1fr;
-  display: grid;
-  width: 100%;
-  gap: 20px;
-  cursor: pointer;
-}
-.note-row .title {
-  width: calc(100% - 43.2px);
-  position: relative;
-}
-.note-row .title::after {
-  content: "(open)";
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  transform: translateX(100%);
-  font-weight: 700;
-  opacity: 0;
-}
-.note-row:hover {
-  color: var(--theme-accent);
-}
-.note-row:hover .title::after {
-  opacity: 1;
-}main.directory {
-  padding-top: 18px;
-  padding-bottom: 30px;
-}
-main.directory .label {
-  text-transform: uppercase;
-  margin: 17px 0 24px;
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 12px;
-}
-main.directory .notes {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}.note-menu {
-  display: flex;
-  gap: 5px;
-  border: 1px solid var(--grey-100);
-  color: var(--grey-100);
-  border-radius: 0.2em;
-  background: var(--theme-bg);
-}
-.note-menu button {
-  cursor: pointer;
-  padding: 0.2em;
-  border-radius: 0.2em;
-}
-.note-menu button:hover {
-  background: var(--grey-100);
-  color: var(--theme-bg);
-}
-.note-menu button.active {
-  background: var(--theme-fg);
-  color: var(--theme-bg);
-}
-.note-editor h1 {
-  font-weight: 700 !important;
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 12px;
-}
-.note-editor h1:first-child {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 400 !important;
-}
-.note-editor h1:first-child:first-child::first-letter {
-  font-family: var(--font-display);
-  font-size: 42px;
-}
-.note-editor h1.is-editor-empty:first-child::before {
-  color: var(--grey-100);
-  content: attr(data-placeholder);
-  pointer-events: none;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 400 !important;
-}
-.note-editor h1.is-editor-empty:first-child::before:first-child::first-letter {
-  font-family: var(--font-display);
-  font-size: 42px;
-}
-.note-editor p strong {
-  font-weight: 700;
-}
-.note-editor p em {
-  font-style: italic;
-}
-.note-editor hr {
-  border: 1px dashed currentColor;
-}
-.note-editor ul {
-  list-style-type: disc;
-}
-.note-editor ul li {
-  display: list-item;
-  margin-left: 1em;
-}
-.note-editor ul li *:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-.note-editor ol {
-  list-style-type: decimal;
-}
-.note-editor ol li {
-  display: list-item;
-  margin-left: 1.5em;
-}
-.note-editor ol li::marker {
-  font-family: var(--font-mono);
-  font-weight: 400;
-  line-height: 1;
-  font-size: 12px;
-}
-.note-editor li:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-.note-editor a {
-  color: var(--theme-link);
-  cursor: pointer;
-}
-.note-editor code {
-  border: 1px solid var(--grey-100);
-  color: var(--theme-accent);
-  padding: 0 0.2em;
-  border-radius: 0.2em;
-}
-.note-editor pre code {
-  display: block;
-  color: inherit;
-  padding: 1em;
-  /* Code styling */
-}
-.note-editor pre code .hljs-comment,
-.note-editor pre code .hljs-quote {
-  color: #616161;
-}
-.note-editor pre code .hljs-variable,
-.note-editor pre code .hljs-template-variable,
-.note-editor pre code .hljs-attribute,
-.note-editor pre code .hljs-tag,
-.note-editor pre code .hljs-name,
-.note-editor pre code .hljs-regexp,
-.note-editor pre code .hljs-link,
-.note-editor pre code .hljs-name,
-.note-editor pre code .hljs-selector-id,
-.note-editor pre code .hljs-selector-class {
-  color: #f98181;
-}
-.note-editor pre code .hljs-number,
-.note-editor pre code .hljs-meta,
-.note-editor pre code .hljs-built_in,
-.note-editor pre code .hljs-builtin-name,
-.note-editor pre code .hljs-literal,
-.note-editor pre code .hljs-type,
-.note-editor pre code .hljs-params {
-  color: #fbbc88;
-}
-.note-editor pre code .hljs-string,
-.note-editor pre code .hljs-symbol,
-.note-editor pre code .hljs-bullet {
-  color: #b9f18d;
-}
-.note-editor pre code .hljs-title,
-.note-editor pre code .hljs-section {
-  color: #faf594;
-}
-.note-editor pre code .hljs-keyword,
-.note-editor pre code .hljs-selector-tag {
-  color: #70cff8;
-}
-.note-editor pre code .hljs-emphasis {
-  font-style: italic;
-}
-.note-editor pre code .hljs-strong {
-  font-weight: 700;
-}
-.note-editor blockquote {
-  border-left: 4px solid var(--grey-100);
-  padding-left: 0.5em;
-}
-.note-editor s {
-  position: relative;
-}
-.note-editor s::after {
-  content: " ";
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: currentColor;
-}
-.note-editor mark {
-  background: var(--theme-accent);
-  color: var(--theme-bg);
-  padding: 0 0.2em;
-}
-.note-editor ul[data-type=taskList] {
-  list-style: none;
-  margin-left: 0;
-  padding: 0;
-}
-.note-editor ul[data-type=taskList] li {
-  align-items: center;
-  display: flex;
-  margin-left: 0;
-}
-.note-editor ul[data-type=taskList] li > label {
-  flex: 0 0 auto;
-  margin-right: 0.5rem;
-  user-select: none;
-  margin-bottom: 0;
-}
-.note-editor ul[data-type=taskList] li > label input {
-  margin: 0;
-}
-.note-editor ul[data-type=taskList] li > div {
-  flex: 1 1 auto;
-}
-.note-editor ul[data-type=taskList] input[type=checkbox] {
-  cursor: pointer;
-  display: block;
-  width: 1.5em;
-  height: 1.5em;
-  border: 1px solid var(--grey-100);
-  border-radius: 0.2em;
-}
-.note-editor ul[data-type=taskList] input[type=checkbox]::after {
-  content: "✓";
-  font-size: 1.5em;
-  opacity: 0;
-}
-.note-editor ul[data-type=taskList] input[type=checkbox]:checked::after {
-  opacity: 1;
-}
-.note-editor ul[data-type=taskList] ul[data-type=taskList] {
-  margin: 0;
-}
-.note-editor .editor-wrap > div {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-.note-editor .editor-wrap > div:focus {
-  outline: none;
-}main.note {
-  padding-top: 8px;
-  padding-bottom: 20px;
-}main.category .back {
-  display: block;
-  opacity: 0.25;
-  margin-top: 9px;
-}
-main.category .category-row {
-  margin-top: 4px;
-}
-main.category .notes {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  margin-top: 9px;
-}
-main.category .new-note {
-  display: block;
-  margin: 50px auto 0;
-}main.instructions .back-link {
-  opacity: 0.25;
-  display: block;
-  margin-top: 9px;
-  margin-bottom: 14px;
-}main.search .back {
-  display: block;
-  opacity: 0.25;
-  margin-top: 9px;
-}
-main.search .input-wrap {
-  margin-top: 19px;
-  position: relative;
-}
-main.search .input-wrap 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%);
-}
-main.search .input-wrap::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%);
-}
-main.search .results {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}

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

package-lock.json

@@ -18,6 +18,7 @@
                 "@tiptap/extension-document": "^3.19.0",
                 "@tiptap/extension-highlight": "^3.20.0",
                 "@tiptap/extension-list": "^3.20.0",
+                "@tiptap/markdown": "^3.20.4",
                 "@tiptap/starter-kit": "^3.19.0",
                 "@tiptap/vue-3": "^3.19.0",
                 "@vueuse/core": "^14.2.1",
@@ -29,6 +30,7 @@
                 "libsodium-wrappers": "^0.8.2",
                 "lodash": "^4.17.23",
                 "lowlight": "^3.3.0",
+                "markdown-it": "^14.1.1",
                 "sass": "^1.97.3",
                 "sass-embedded": "^1.97.3",
                 "tempus": "^1.0.0-dev.17",
@@ -2381,16 +2383,16 @@
             }
         },
         "node_modules/@tiptap/core": {
-            "version": "3.20.0",
+            "version": "3.20.4",
-            "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.20.0.tgz",
+            "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.20.4.tgz",
-            "integrity": "sha512-aC9aROgia/SpJqhsXFiX9TsligL8d+oeoI8W3u00WI45s0VfsqjgeKQLDLF7Tu7hC+7F02teC84SAHuup003VQ==",
+            "integrity": "sha512-3i/DG89TFY/b34T5P+j35UcjYuB5d3+9K8u6qID+iUqNPiza015HPIZLuPfE5elNwVdV3EXIoPo0LLeBLgXXAg==",
             "license": "MIT",
             "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/ueberdosis"
             },
             "peerDependencies": {
-                "@tiptap/pm": "^3.20.0"
+                "@tiptap/pm": "^3.20.4"
             }
         },
         "node_modules/@tiptap/extension-blockquote": {
@@ -2751,10 +2753,27 @@
                 "@tiptap/pm": "^3.19.0"
             }
         },
+        "node_modules/@tiptap/markdown": {
+            "version": "3.20.4",
+            "resolved": "https://registry.npmjs.org/@tiptap/markdown/-/markdown-3.20.4.tgz",
+            "integrity": "sha512-1ARtZzJ1skQCZi4LyVSmImgg6JIIMP5dEs0FvHXS3a7M3O+uMOUvY1sWeggVZExg8DXoVyHd7BjRIpm7uNRuSw==",
+            "license": "MIT",
+            "dependencies": {
+                "marked": "^17.0.1"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^3.20.4",
+                "@tiptap/pm": "^3.20.4"
+            }
+        },
         "node_modules/@tiptap/pm": {
-            "version": "3.20.0",
+            "version": "3.20.4",
-            "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.20.0.tgz",
+            "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.20.4.tgz",
-            "integrity": "sha512-jn+2KnQZn+b+VXr8EFOJKsnjVNaA4diAEr6FOazupMt8W8ro1hfpYtZ25JL87Kao/WbMze55sd8M8BDXLUKu1A==",
+            "integrity": "sha512-rCHYSBToilBEuI6PtjziHDdRkABH/XqwJ7dG4Amn/SD3yGiZKYCiEApQlTUS2zZeo8DsLeuqqqB4vEOeD4OEPg==",
             "license": "MIT",
             "dependencies": {
                 "prosemirror-changeset": "^2.3.0",
@@ -6309,6 +6328,18 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/marked": {
+            "version": "17.0.4",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.4.tgz",
+            "integrity": "sha512-NOmVMM+KAokHMvjWmC5N/ZOvgmSWuqJB8FoYI019j4ogb/PeRMKoKIjReZ2w3376kkA8dSJIP8uD993Kxc0iRQ==",
+            "license": "MIT",
+            "bin": {
+                "marked": "bin/marked.js"
+            },
+            "engines": {
+                "node": ">= 20"
+            }
+        },
         "node_modules/matcher": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",

package.json

@@ -34,6 +34,7 @@
         "@tiptap/extension-document": "^3.19.0",
         "@tiptap/extension-highlight": "^3.20.0",
         "@tiptap/extension-list": "^3.20.0",
+        "@tiptap/markdown": "^3.20.4",
         "@tiptap/starter-kit": "^3.19.0",
         "@tiptap/vue-3": "^3.19.0",
         "@vueuse/core": "^14.2.1",
@@ -45,6 +46,7 @@
         "libsodium-wrappers": "^0.8.2",
         "lodash": "^4.17.23",
         "lowlight": "^3.3.0",
+        "markdown-it": "^14.1.1",
         "sass": "^1.97.3",
         "sass-embedded": "^1.97.3",
         "tempus": "^1.0.0-dev.17",

src/main/core/Config.js

@@ -50,13 +50,16 @@ export default class Config {
             parsed = {
                 ...(parsed ? parsed : {}),
                 activeAdapter: this.defaultPlugin.id,
+                adapters: {},
             }
             parsed.adapters[this.defaultPlugin.id] = defaultConfig
 
+            parsed[theme] = 'dark'
+
             await this.write(parsed)
         } else {
             // Ensure any "__DEFAULT_USER_DATA__" values are resolved on load
-            parsed.adapterConfig = this._resolveDefaults(parsed.adapterConfig)
+            parsed.adapters = this._resolveDefaults(parsed.adapters)
         }
 
         return parsed
@@ -71,7 +74,7 @@ export default class Config {
         // Resolve defaults before writing
         const resolvedConfig = {
             ...configObject,
-            adapterConfig: this._resolveDefaults(configObject.adapterConfig),
+            adapters: this._resolveDefaults(configObject.adapters),
         }
 
         await fs.writeFile(

src/main/index.js

@@ -7,14 +7,17 @@ import PluginRegistry from './core/PluginRegistry.js'
 import Config from './core/Config.js'
 import { join } from 'path'
 
+const DEFAULT_WINDOW_SIZE = { width: 354, height: 549 }
+const DEFAULT_MOVE_WINDOW_SIZE = { width: 708, height: 549 }
+
 const preloadPath = join(__dirname, '../preload/index.mjs')
 const rendererPath = join(__dirname, '../renderer/index.html')
 
 // Main window
 function createWindow() {
     const mainWindow = new BrowserWindow({
-        width: 354,
+        width: DEFAULT_WINDOW_SIZE.width,
-        height: 549,
+        height: DEFAULT_WINDOW_SIZE.height,
         show: false,
         autoHideMenuBar: true,
         webPreferences: {
@@ -42,8 +45,8 @@ function createWindow() {
 // Open note in new window
 function createNoteWindow(noteId) {
     const noteWindow = new BrowserWindow({
-        width: 354,
+        width: DEFAULT_WINDOW_SIZE.width,
-        height: 549,
+        height: DEFAULT_WINDOW_SIZE.height,
         autoHideMenuBar: true,
         webPreferences: {
             preload: preloadPath,
@@ -70,6 +73,13 @@ app.whenReady().then(async () => {
         createNoteWindow(noteId)
     })
 
+    // Broadcast note changes to all windows
+    const broadcastNoteChange = (event, data) => {
+        BrowserWindow.getAllWindows().forEach((win) => {
+            win.webContents.send(event, data)
+        })
+    }
+
     // Create plugin registry
     const registry = new PluginRegistry()
 
@@ -102,6 +112,8 @@ app.whenReady().then(async () => {
             return await adapter[method](...args)
         })
 
+        broadcastNoteChange('plugin-changed', pluginId)
+
         return true
     }
 
@@ -124,18 +136,35 @@ app.whenReady().then(async () => {
         return await setActivePlugin(pluginId)
     })
 
-    // Broadcast note changes to all windows
-    const broadcastNoteChange = (event, data) => {
-        BrowserWindow.getAllWindows().forEach((win) => {
-            win.webContents.send(event, data)
-        })
-    }
-
     // Handle note change events from renderer
     ipcMain.on('note-changed', (_, event, data) => {
         broadcastNoteChange(event, data)
     })
 
+    // Handle resizing for note "move" functionality
+    ipcMain.handle('move-opened', (_) => {
+        const activeWindow = BrowserWindow.getFocusedWindow()
+        const windowSize = activeWindow.getSize()
+
+        if (windowSize[0] < DEFAULT_MOVE_WINDOW_SIZE.width) {
+            activeWindow.setSize(
+                DEFAULT_MOVE_WINDOW_SIZE.width,
+                DEFAULT_MOVE_WINDOW_SIZE.height,
+            )
+        }
+    })
+    ipcMain.handle('move-closed', (_) => {
+        const activeWindow = BrowserWindow.getFocusedWindow()
+        const windowSize = activeWindow.getSize()
+
+        if (windowSize[0] === 708) {
+            activeWindow.setSize(
+                DEFAULT_WINDOW_SIZE.width,
+                DEFAULT_WINDOW_SIZE.height,
+            )
+        }
+    })
+
     electronApp.setAppUserModelId('com.electron')
 
     app.on('browser-window-created', (_, window) => {

src/preload/index.js

@@ -19,9 +19,18 @@ const api = {
     onNoteDeleted: (callback) => {
         ipcRenderer.on('note-deleted', (_, data) => callback(data))
     },
+    onPluginChanged: (callback) => {
+        ipcRenderer.on('plugin-changed', (_, data) => callback(data))
+    },
     notifyNoteChanged: (event, data) => {
         ipcRenderer.send('note-changed', event, data)
     },
+    moveOpened: () => {
+        ipcRenderer.invoke('move-opened')
+    },
+    moveClosed: () => {
+        ipcRenderer.invoke('move-closed')
+    },
 }
 
 // Implement adapter API - communicates with plugin adapter in main process

src/renderer/src/App.vue

@@ -1,8 +1,15 @@
 <template>
     <div :class="classes" :style="styles">
-        <Nav />
+        <div class="layout">
-
+            <div class="page">
+                <Nav v-if="$route.name !== 'note'" ref="nav" />
+                <Suspense>
                     <router-view :key="$route.fullPath" />
+                </Suspense>
+            </div>
+
+            <MoveMenu />
+        </div>
 
         <Menu />
 
@@ -11,17 +18,19 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import loadFonts from '@fuzzco/font-loader'
-import { useWindowSize } from '@vueuse/core'
+import { useWindowSize, useElementBounding } from '@vueuse/core'
 import Menu from '@/components/Menu.vue'
 import Nav from '@/components/Nav.vue'
+import MoveMenu from '@/components/MoveMenu.vue'
 import ScrollBar from '@/components/ScrollBar.vue'
 import useConfig from '@/composables/useConfig'
 
-const { height } = useWindowSize()
+const nav = ref()
 
-// Theme state
+const { height } = useWindowSize()
+const { height: navHeight } = useElementBounding(nav)
 const { config } = useConfig()
 
 const classes = computed(() => [
@@ -53,6 +62,7 @@ onMounted(async () => {
 
 const styles = computed(() => ({
     '--vh': height.value ? height.value / 100 + 'px' : '100vh',
+    '--nav-height': navHeight.value + 'px',
 }))
 </script>
 
@@ -65,6 +75,16 @@ const styles = computed(() => ({
     color: var(--theme-fg);
     transition: opacity 400ms;
 
+    .layout {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        min-height: calc(100 * var(--vh));
+
+        .page {
+            position: relative;
+        }
+    }
+
     &:not(.fonts-ready) {
         opacity: 0;
     }

src/renderer/src/components/CategoryRow.vue

@@ -39,6 +39,7 @@ const props = defineProps({
         type: Boolean,
         default: () => false,
     },
+    wrapper: String,
 })
 
 const emit = defineEmits(['edited'])
@@ -70,7 +71,7 @@ const onSave = async () => {
 }
 
 const wrapper = computed(() => {
-    return props.editable ? 'div' : RouterLink
+    return props.wrapper || (props.editable ? 'div' : RouterLink)
 })
 </script>
 

src/renderer/src/components/Menu.vue

@@ -5,15 +5,18 @@
 
             <div class="menu-wrap layout-block">
                 <new-note class="menu-item" @noteOpened="closeMenu" />
-                <router-link class="menu-item" to="/category"
+                <router-link class="menu-item" to="/category">
-                    >+ New Capitulum</router-link
+                    + New Capitulum
-                >
+                </router-link>
                 <theme-switcher class="menu-item" />
-                <router-link class="menu-item" to="/instructions"
+                <router-link class="menu-item" to="/instructions">
-                    >Instructio</router-link
+                    Instructio
-                >
+                </router-link>
                 <button class="menu-item">Import</button>
                 <button class="menu-item">Export</button>
+                <router-link class="menu-item" to="/preferences">
+                    Preferences
+                </router-link>
             </div>
         </div>
     </transition>
@@ -61,7 +64,7 @@ const openNewCategory = () => {}
     .menu-wrap {
         display: flex;
         flex-direction: column;
-        padding-top: 3px;
+        padding-top: var(--nav-height);
         padding-bottom: 10px;
 
         .menu-item {

src/renderer/src/components/MoveMenu.vue

@@ -0,0 +1,64 @@
+<template>
+    <div v-if="open" class="move-menu layout-block">
+        <button class="cancel-button" @click="close">Cancel</button>
+
+        <template v-for="(category, i) in categories">
+            <category-row
+                v-if="category !== fromCategory"
+                :category="category"
+                :index="i"
+                wrapper="button"
+                @click="onCategoryClick(category)"
+                :key="category"
+            />
+        </template>
+    </div>
+</template>
+
+<script setup>
+import CategoryRow from '@/components/CategoryRow.vue'
+import { computed, onBeforeUnmount, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import useNotes from '@/composables/useNotes'
+import useState from '@/composables/useState'
+import _omit from 'lodash/omit'
+
+const { categories, updateNote } = useNotes()
+const route = useRoute()
+const router = useRouter()
+
+const open = computed(() => route.query.move !== undefined)
+const noteId = computed(() => route.query.move)
+const fromCategory = computed(() => route.params.id)
+
+const close = async () => {
+    await router.push({
+        query: _omit(route.query, ['move']),
+    })
+
+    await window.api.moveClosed()
+}
+const onCategoryClick = async (category) => {
+    if (!category || !noteId.value) return
+
+    await updateNote(noteId.value, { category: category })
+
+    await close()
+}
+watch(open, async () => {
+    if (!open.value) await close()
+})
+</script>
+
+<style lang="scss">
+.move-menu {
+    width: 50vw;
+    height: 100%;
+    border-left: 1px solid var(--grey-100);
+
+    .cancel-button {
+        color: var(--grey-100);
+        padding: 9px 0 16px;
+    }
+}
+</style>

src/renderer/src/components/Nav.vue

@@ -1,14 +1,29 @@
 <template>
     <nav class="nav layout-block">
+        <div class="left">
+            <router-link v-if="HAS_BACK_BUTTON.includes($route.name)" to="/"
+                ><- Back</router-link
+            >
+        </div>
+
+        <div class="right">
             <button @click="toggleMenu">Menu</button>
 
             <router-link to="/search">Search</router-link>
+        </div>
     </nav>
 </template>
 
 <script setup>
 import useMenu from '@/composables/useMenu'
-import { onMounted } from 'vue'
+
+const HAS_BACK_BUTTON = [
+    'category',
+    'create-category',
+    'instructions',
+    'search',
+    'preferences',
+]
 
 const { menuOpen, closeMenu, openMenu } = useMenu()
 
@@ -19,22 +34,22 @@ const toggleMenu = () => {
         openMenu()
     }
 }
-
-onMounted(() => {
-    // Initialize menu state or perform any other necessary setup
-    // Example: Check if the user is logged in and update menu accordingly
-    // if (isLoggedIn()) {
-    //     openMenu()
-    // }
-})
 </script>
 
 <style lang="scss">
 .nav {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    padding-top: 9px;
+    padding-bottom: 16px;
+    color: var(--grey-100);
+
+    .left,
+    .right {
         display: flex;
         align-items: center;
         gap: 10px;
-    padding-top: 9px;
+    }
-    color: var(--grey-100);
 }
 </style>

src/renderer/src/components/NoteRow.vue

@@ -1,12 +1,26 @@
 <template>
-    <button class="note-row" @click="openNote(note.id)">
+    <div :class="['note-row', { 'move-active': moveActive }]">
         <span class="date">{{ formatDate(note.createdAt) }}</span>
-        <span class="title bold">{{ note.title }}</span>
+        <div class="title-actions">
+            <button class="title bold" @click="openNote(note.id)">
+                {{ note.title }}
             </button>
+
+            <button class="action bold" @click="openNote(note.id)">
+                (open)
+            </button>
+            <button class="action bold move" @click="onMoveOpened">
+                (move)
+            </button>
+        </div>
+    </div>
 </template>
 
 <script setup>
 import useOpenNote from '@/composables/useOpenNote'
+import useState from '@/composables/useState'
+import { useRoute, useRouter } from 'vue-router'
+import { computed } from 'vue'
 import { format } from 'fecha'
 
 const props = defineProps({ note: Object })
@@ -17,6 +31,21 @@ const formatDate = (date) => {
     const d = new Date(date)
     return format(d, 'MM/DD/YYYY')
 }
+
+// Moving
+const route = useRoute()
+const router = useRouter()
+const onMoveOpened = async () => {
+    await window.api.moveOpened()
+    await router.push({
+        query: {
+            ...route.query,
+            move: props.note.id,
+        },
+    })
+    console.log(route.query)
+}
+const moveActive = computed(() => route.query.move === props.note.id)
 </script>
 
 <style lang="scss">
@@ -25,28 +54,33 @@ const formatDate = (date) => {
     display: grid;
     width: 100%;
     gap: 20px;
-    cursor: pointer;
 
-    .title {
+    .title-actions {
-        width: calc(100% - 43.2px);
+        display: grid;
-        position: relative;
+        grid-template-columns: 1fr auto auto;
+        align-items: flex-start;
+        gap: 2px;
 
-        &::after {
+        .action {
-            content: '(open)';
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            transform: translateX(100%);
-            font-weight: 700;
             opacity: 0;
+
+            &:not(:hover) {
+                color: var(--grey-100);
             }
         }
-    &:hover {
+    }
+    &:hover,
+    &.move-active {
         color: var(--theme-accent);
 
-        .title::after {
+        .title-actions .action {
             opacity: 1;
         }
     }
+    &.move-active {
+        .title-actions .move {
+            color: var(--theme-accent);
+        }
+    }
 }
 </style>

src/renderer/src/components/PageLoading.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="page-loading">
+        <svg-spinner />
+    </div>
+</template>
+
+<script setup>
+import SvgSpinner from '@/components/svg/Spinner.vue'
+</script>
+
+<style lang="scss">
+.page-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+</style>

src/renderer/src/components/SearchInput.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="search-input">
+        <input
+            v-model="model"
+            type="text"
+            :placeholder="placeholder"
+            ref="input"
+            @input="emit('input', model.value)"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+    placeholder: String,
+})
+
+const model = defineModel()
+
+const emit = defineEmits(['input'])
+
+const input = ref()
+
+defineExpose({
+    focus: () => input.value.focus(),
+})
+</script>
+
+<style lang="scss">
+.search-input {
+    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%
+        );
+
+        &::placeholder {
+            color: var(--grey-100);
+        }
+    }
+    &::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%
+        );
+    }
+}
+</style>

src/renderer/src/components/note/Download.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="note-download">
+        <button @click="download">{{ noteTitle }}.md ↓</button>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import _kebabCase from 'lodash/kebabCase'
+
+const DEFAULT_TITLE = 'Untitled'
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        required: true,
+    },
+})
+
+const noteTitle = computed(() => {
+    if (!props.editor) return DEFAULT_TITLE
+
+    let title
+    const doc = props.editor.state.doc
+
+    const firstNode = doc.firstChild
+    if (!firstNode || firstNode.type.name !== 'heading') title = DEFAULT_TITLE
+
+    title = firstNode.textContent.trim() || DEFAULT_TITLE
+
+    return _kebabCase(title)
+})
+
+const download = () => {
+    if (!props.editor) return
+
+    const content = props.editor.getMarkdown()
+    const blob = new Blob([content], { type: 'text/plain' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${noteTitle.value}.md`
+    a.click()
+    URL.revokeObjectURL(url)
+}
+</script>
+
+<style lang="scss">
+.note-download {
+    margin-bottom: 16px;
+    color: var(--grey-100);
+    display: flex;
+    justify-content: center;
+
+    button {
+        &:hover {
+            color: var(--theme-accent);
+        }
+    }
+}
+</style>

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

@@ -4,6 +4,8 @@
 
         <editor-menu :editor="editor" />
     </div>
+
+    <page-loading v-else />
 </template>
 
 <script setup>
@@ -11,6 +13,7 @@ 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 PageLoading from '@/components/PageLoading.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import Document from '@tiptap/extension-document'
 import { Placeholder } from '@tiptap/extensions'
@@ -18,6 +21,7 @@ import { all, createLowlight } from 'lowlight'
 import useNotes from '@/composables/useNotes'
 import StarterKit from '@tiptap/starter-kit'
 import _debounce from 'lodash/debounce'
+import { Markdown } from '@tiptap/markdown'
 import EditorMenu from './Menu.vue'
 
 const props = defineProps({
@@ -82,6 +86,7 @@ onMounted(async () => {
             TaskList,
             TaskItem,
             Highlight,
+            Markdown,
             CodeBlockLowlight.configure({
                 lowlight,
                 enableTabIndentation: true,
@@ -94,6 +99,10 @@ onMounted(async () => {
 onBeforeUnmount(() => {
     editor.value?.destroy?.()
 })
+
+defineExpose({
+    editor,
+})
 </script>
 
 <style lang="scss">
@@ -116,7 +125,8 @@ onBeforeUnmount(() => {
         font-weight: 700;
     }
     p em {
-        font-style: italic;
+        /* font-style: italic; */
+        color: var(--grey-100);
     }
     hr {
         border: 1px dashed currentColor;
@@ -138,7 +148,7 @@ onBeforeUnmount(() => {
 
         li {
             display: list-item;
-            margin-left: 1.5em;
+            margin-left: 1.75em;
 
             &::marker {
                 @include p;
@@ -162,59 +172,6 @@ onBeforeUnmount(() => {
         display: block;
         color: inherit;
         padding: 1em;
-
-        /* Code styling */
-        .hljs-comment,
-        .hljs-quote {
-            color: #616161;
-        }
-
-        .hljs-variable,
-        .hljs-template-variable,
-        .hljs-attribute,
-        .hljs-tag,
-        .hljs-name,
-        .hljs-regexp,
-        .hljs-link,
-        .hljs-name,
-        .hljs-selector-id,
-        .hljs-selector-class {
-            color: #f98181;
-        }
-
-        .hljs-number,
-        .hljs-meta,
-        .hljs-built_in,
-        .hljs-builtin-name,
-        .hljs-literal,
-        .hljs-type,
-        .hljs-params {
-            color: #fbbc88;
-        }
-
-        .hljs-string,
-        .hljs-symbol,
-        .hljs-bullet {
-            color: #b9f18d;
-        }
-
-        .hljs-title,
-        .hljs-section {
-            color: #faf594;
-        }
-
-        .hljs-keyword,
-        .hljs-selector-tag {
-            color: #70cff8;
-        }
-
-        .hljs-emphasis {
-            font-style: italic;
-        }
-
-        .hljs-strong {
-            font-weight: 700;
-        }
     }
     blockquote {
         border-left: 4px solid var(--grey-100);

src/renderer/src/components/note/Find.vue

@@ -1,12 +1,242 @@
 <template>
-    <div class="note-find"></div>
+    <div v-if="visible" class="note-find">
+        <div class="find-bar">
+            <!-- <input
+                @keydown.enter="findNext"
+                @keydown.escape="close"
+                ref="inputRef"
+            /> -->
+            <search-input
+                v-model="searchQuery"
+                placeholder="Find..."
+                ref="inputRef"
+            />
+            <span class="match-count">
+                {{ currentMatch + 1 }} / {{ matches.length }}
+            </span>
+            <button @click="findPrev" :disabled="matches.length === 0">
+                ↑
+            </button>
+            <button @click="findNext" :disabled="matches.length === 0">
+                ↓
+            </button>
+            <button @click="close">✕</button>
+        </div>
+    </div>
 </template>
 
 <script setup>
-const props = defineProps({})
+import { ref, watch, nextTick } from 'vue'
+import SearchInput from '@/components/SearchInput.vue'
+import { Highlight } from '@tiptap/extension-highlight'
+
+const props = defineProps({
+    editor: {
+        type: Object,
+        default: null,
+    },
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['close'])
+
+const searchQuery = ref('')
+const matches = ref([])
+const currentMatch = ref(0)
+const inputRef = ref(null)
+
+const findInDocument = () => {
+    if (!props.editor || !searchQuery.value) {
+        clearHighlights()
+        matches.value = []
+        return
+    }
+
+    clearHighlights()
+
+    const query = searchQuery.value.toLowerCase()
+    const doc = props.editor.state.doc
+    const foundMatches = []
+
+    doc.descendants((node, pos) => {
+        if (!node.isText || !node.text) return
+
+        const text = node.text.toLowerCase()
+        let start = 0
+        let index
+
+        while ((index = text.indexOf(query, start)) !== -1) {
+            foundMatches.push({
+                from: pos + index,
+                to: pos + index + query.length,
+            })
+            start = index + 1
+        }
+    })
+
+    matches.value = foundMatches
+    currentMatch.value = 0
+
+    if (foundMatches.length > 0) {
+        highlightMatch(0)
+        scrollToMatch(0)
+    }
+}
+
+const highlightMatch = (index) => {
+    if (!props.editor || !matches.value[index]) return
+
+    const { from, to } = matches.value[index]
+
+    props.editor
+        .chain()
+        .setTextSelection({ from, to })
+        .setHighlight({ color: 'var(--theme-accent)' })
+        .run()
+
+    inputRef.value?.focus()
+}
+
+const clearHighlights = () => {
+    if (!props.editor) return
+
+    const { state } = props.editor
+    const { doc } = state
+
+    doc.descendants((node, pos) => {
+        if (node.marks && node.marks.length > 0) {
+            node.marks.forEach((mark) => {
+                if (mark.type.name === 'highlight') {
+                    props.editor.chain().focus().unsetHighlight().run()
+                }
+            })
+        }
+    })
+
+    props.editor.commands.unsetHighlight()
+}
+
+const scrollToMatch = (index) => {
+    if (!props.editor || !matches.value[index]) return
+
+    const { from } = matches.value[index]
+    props.editor.commands.setTextSelection({ from, to: from })
+
+    const dom = props.editor.view.dom
+    const selection = window.getSelection()
+
+    if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0)
+        range.commonAncestorContainer.scrollIntoView({
+            behavior: 'smooth',
+            block: 'center',
+        })
+    }
+}
+
+const findNext = () => {
+    if (matches.value.length === 0) return
+
+    clearHighlights()
+    currentMatch.value = (currentMatch.value + 1) % matches.value.length
+    highlightMatch(currentMatch.value)
+    scrollToMatch(currentMatch.value)
+}
+
+const findPrev = () => {
+    if (matches.value.length === 0) return
+
+    clearHighlights()
+    currentMatch.value =
+        (currentMatch.value - 1 + matches.value.length) % matches.value.length
+    highlightMatch(currentMatch.value)
+    scrollToMatch(currentMatch.value)
+}
+
+const close = () => {
+    clearHighlights()
+    searchQuery.value = ''
+    matches.value = []
+    emit('close')
+}
+
+watch(
+    () => props.visible,
+    async (newVal) => {
+        if (newVal) {
+            await nextTick()
+            inputRef.value?.focus()
+            if (props.editor && searchQuery.value) {
+                console.log('visible change')
+                findInDocument()
+            }
+        }
+    },
+)
+
+watch(
+    () => props.editor,
+    (newEditor) => {
+        if (newEditor && props.visible && searchQuery.value) {
+            console.log('editor change')
+            findInDocument()
+        }
+    },
+)
+
+watch(searchQuery, () => {
+    console.log('search change')
+    findInDocument()
+})
 </script>
 
 <style lang="scss">
 .note-find {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
+
+    .find-bar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 4px;
+        background: var(--theme-bg);
+        border-bottom: 1px solid var(--grey-100);
+        padding: 12px 10px;
+
+        .search-input {
+            flex: 1;
+        }
+        .match-count {
+            font-size: 12px;
+            color: var(--grey-100);
+            min-width: 50px;
+            text-align: center;
+        }
+        button {
+            background: transparent;
+            border: 1px solid var(--grey-100);
+            border-radius: 4px;
+            color: var(--theme-fg);
+            cursor: pointer;
+            padding: 4px 8px;
+            font-size: 12px;
+
+            &:hover:not(:disabled) {
+                background: var(--grey-300);
+            }
+
+            &:disabled {
+                opacity: 0.4;
+                cursor: not-allowed;
+            }
+        }
+    }
 }
 </style>

src/renderer/src/components/svg/Spinner.vue

@@ -0,0 +1,32 @@
+<template>
+    <svg
+        class="svg-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        style="margin: auto; display: block"
+        width="18px"
+        height="18px"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+    >
+        <circle
+            cx="50"
+            cy="50"
+            r="40"
+            stroke-width="4"
+            stroke="currentColor"
+            stroke-dasharray="62 62"
+            fill="none"
+            stroke-linecap="round"
+        >
+            <animateTransform
+                attributeName="transform"
+                type="rotate"
+                repeatCount="indefinite"
+                dur="1s"
+                keyTimes="0;1"
+                values="0 50 50;360 50 50"
+            ></animateTransform>
+        </circle>
+    </svg>
+</template>

src/renderer/src/components/svg/icon/Hr.vue

@@ -1,10 +0,0 @@
-<template>
-    <svg
-        class="svg-icon-hr"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-    >
-        <path d="M2 11H4V13H2V11ZM6 11H18V13H6V11ZM20 11H22V13H20V11Z"></path>
-    </svg>
-</template>

src/renderer/src/composables/useConfig.js

@@ -29,8 +29,14 @@ export default () => {
         return configPromise
     }
 
+    const refreshConfig = async () => {
+        config.value = await window.api.getConfig()
+        configResolve()
+    }
+
     return {
         config,
         ensureConfig,
+        refreshConfig,
     }
 }

src/renderer/src/composables/useNotes.js

@@ -24,6 +24,12 @@ const setupListeners = () => {
 
     window.api.onNoteCreated(updateCacheCount)
     window.api.onNoteUpdated(updateCacheCount)
+    window.api.onPluginChanged(async () => {
+        const api = await getNotesAPI()
+        await api.init()
+
+        notesChangeCount.value++
+    })
 
     // Todo update cache
     window.api.onNoteDeleted(() => {

src/renderer/src/composables/usePlugins.js

@@ -1,14 +1,16 @@
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
+import useConfig from './useConfig'
+
+export default async () => {
+    const { refreshConfig } = useConfig()
 
-export default () => {
     const plugins = ref([])
 
-    onMounted(async () => {
     plugins.value = await window.api.listPlugins()
-    })
 
     const setActivePlugin = async (pluginId) => {
         await window.api.setActivePlugin(pluginId)
+        await refreshConfig()
     }
 
     return {

src/renderer/src/composables/useState.js

@@ -0,0 +1,8 @@
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
+
+export default createGlobalState(() => {
+    const moveMenuOpen = ref(false)
+
+    return { moveMenuOpen }
+})

src/renderer/src/content/instructions.md

@@ -0,0 +1,28 @@
+Medieval Translation
+
+Nota = Note\
+Capitulum = Category\
+Intructio = Instructions\
+Tabula = Index/Overview
+
+\*This can be disabled via toolbar
+
+---
+
+Program Key Commands
+
+cmd + s = save\
+cmd + t = new capitulum\
+cmd + n = new nota\
+cmd + x = close window\
+dbl click = change name / open nota\
+paste hyperlink twice = activated url
+
+---
+
+Text Markdowns
+
+cmd + b = Bold\
+cmd + u = underline\
+--- = ---------- (ruled line break)\
+/_text_/ = Desaturated text

src/renderer/src/libs/core/NotesAPI.js

@@ -110,6 +110,7 @@ export default class NotesAPI {
     async init() {
         await this._initSodium()
         await this.adapter.init()
+        this.notesCache.clear()
 
         const encryptedNotes = await this.adapter.getAll()
 

src/renderer/src/libs/core/getNotesAPI.js

@@ -3,7 +3,6 @@ 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
 

src/renderer/src/libs/theme.js

@@ -4,6 +4,7 @@ const colors = {
     'grey-100': '#747474',
     green: '#87FF5B',
     blue: '#5B92FF',
+    purple: '#94079E',
 }
 
 const themes = {
@@ -16,7 +17,7 @@ const themes = {
     light: {
         bg: colors.white,
         fg: colors.black,
-        accent: colors.green,
+        accent: colors.purple,
         link: colors.blue,
     },
 }

src/renderer/src/plugins/router.js

@@ -6,6 +6,7 @@ import CreateCategory from '@/views/CreateCategory.vue'
 import Category from '@/views/Category.vue'
 import Instructions from '@/views/Instructions.vue'
 import Search from '@/views/Search.vue'
+import Preferences from '@/views/Preferences.vue'
 
 const routes = [
     { path: '/', name: 'directory', component: Directory },
@@ -14,6 +15,7 @@ const routes = [
     { path: '/category/:id', name: 'category', component: Category },
     { path: '/instructions', name: 'instructions', component: Instructions },
     { path: '/search', name: 'search', component: Search },
+    { path: '/preferences', name: 'preferences', component: Preferences },
 ]
 
 export const router = createRouter({

src/renderer/src/styles/_syntax.scss

@@ -0,0 +1,52 @@
+/* Code styling */
+.hljs-comment,
+.hljs-quote {
+    color: var(--grey-100);
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+    color: #ff5b69;
+}
+
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+    color: #ffa55b;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+    color: var(--theme-accent);
+}
+
+.hljs-title,
+.hljs-section {
+    color: #fcff5b;
+}
+
+.hljs-keyword,
+.hljs-selector-tag {
+    color: #5b9aff;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: 700;
+}

src/renderer/src/styles/main.scss

@@ -9,6 +9,7 @@
 @use 'font-style' as *;
 @use 'layout' as *;
 @use 'scroll' as *;
+@use 'syntax' as *;
 @use 'transitions' as *;
 
 :root {
@@ -47,7 +48,9 @@ a,
 button,
 input,
 pre,
-span {
+span,
+label,
+li {
     @include p;
 }
 .bold {

src/renderer/src/views/Category.vue

@@ -1,7 +1,5 @@
 <template>
     <main class="category layout-block">
-        <router-link class="back" to="/"><- Go Back</router-link>
-
         <category-row
             :index="categoryIndex"
             :category="id"
@@ -61,11 +59,8 @@ const categoryIndex = computed(() => {
 
 <style lang="scss">
 main.category {
-    .back {
+    padding-top: var(--nav-height);
-        display: block;
+
-        opacity: 0.25;
-        margin-top: 9px;
-    }
     .category-row {
         margin-top: 4px;
     }

src/renderer/src/views/CreateCategory.vue

@@ -14,3 +14,9 @@ const onCategoryEdited = (name) => {
     router.push({ name: 'category', params: { id: name } })
 }
 </script>
+
+<style lang="scss">
+.create-category {
+    padding-top: var(--nav-height);
+}
+</style>

src/renderer/src/views/Directory.vue

@@ -1,5 +1,5 @@
 <template>
-    <main class="directory layout-block">
+    <main v-if="loaded" class="directory layout-block">
         <category-row
             v-for="(category, i) in categories"
             :index="i"
@@ -7,23 +7,14 @@
             :key="category"
         />
 
-        <h2 class="label">Summarium</h2>
+        <h2 v-if="notes?.length" class="label">Summarium</h2>
 
         <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>
+
+    <page-loading v-else />
 </template>
 
 <script setup>
@@ -33,20 +24,21 @@ import useConfig from '@/composables/useConfig'
 import { onMounted, ref, watch } from 'vue'
 import CategoryRow from '@/components/CategoryRow.vue'
 import NoteRow from '@/components/NoteRow.vue'
+import PageLoading from '@/components/PageLoading.vue'
 
 const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
     useNotes()
 
 const { config } = useConfig()
-const { plugins, setActivePlugin } = usePlugins()
-
-const activePlugin = ref(config.value?.activeAdapter)
 
 const notes = ref()
+const loaded = ref(false)
 
-async function refreshNotes() {
+const refreshNotes = async () => {
+    loaded.value = false
     await loadCategories()
     notes.value = await loadCategoryNotes()
+    loaded.value = true
 }
 
 onMounted(async () => {
@@ -56,29 +48,13 @@ onMounted(async () => {
 watch(notesChangeCount, async () => {
     await refreshNotes()
 })
-watch(activePlugin, async (pluginId) => {
-    await setActivePlugin(pluginId)
-    await refreshNotes()
-})
 </script>
 
 <style lang="scss">
 main.directory {
-    padding-top: 18px;
+    padding-top: var(--nav-height);
     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: 17px 0 24px;

src/renderer/src/views/Instructions.vue

@@ -1,74 +1,29 @@
 <template>
     <main class="instructions layout-block">
-        <router-link class="back-link" to="/"><- Go Back</router-link>
+        <div class="content" v-html="renderedContent" />
-
-        <p>
-            Medieval Translation Nota = Note Capitulum = Category Intructio =
-            Instructions Tabula = Index/Overview *This can be disabled via
-            toolbar -------------------------------------------- Program Key
-            Commands cmd + s = save cmd + t = new capitulum cmd + n = new nota
-            cmd + x = close window dbl click = change name / open nota paste
-            hyperlink twice = activated url
-            -------------------------------------------- Text Markdowns cmd + b
-            = Bold cmd + u = underline --- = ---------- (ruled line break)
-            /*text*/ = Desaturated text
-        </p>
-        <p>
-            Medieval Translation Nota = Note Capitulum = Category Intructio =
-            Instructions Tabula = Index/Overview *This can be disabled via
-            toolbar -------------------------------------------- Program Key
-            Commands cmd + s = save cmd + t = new capitulum cmd + n = new nota
-            cmd + x = close window dbl click = change name / open nota paste
-            hyperlink twice = activated url
-            -------------------------------------------- Text Markdowns cmd + b
-            = Bold cmd + u = underline --- = ---------- (ruled line break)
-            /*text*/ = Desaturated text
-        </p>
-        <p>
-            Medieval Translation Nota = Note Capitulum = Category Intructio =
-            Instructions Tabula = Index/Overview *This can be disabled via
-            toolbar -------------------------------------------- Program Key
-            Commands cmd + s = save cmd + t = new capitulum cmd + n = new nota
-            cmd + x = close window dbl click = change name / open nota paste
-            hyperlink twice = activated url
-            -------------------------------------------- Text Markdowns cmd + b
-            = Bold cmd + u = underline --- = ---------- (ruled line break)
-            /*text*/ = Desaturated text
-        </p>
-        <p>
-            Medieval Translation Nota = Note Capitulum = Category Intructio =
-            Instructions Tabula = Index/Overview *This can be disabled via
-            toolbar -------------------------------------------- Program Key
-            Commands cmd + s = save cmd + t = new capitulum cmd + n = new nota
-            cmd + x = close window dbl click = change name / open nota paste
-            hyperlink twice = activated url
-            -------------------------------------------- Text Markdowns cmd + b
-            = Bold cmd + u = underline --- = ---------- (ruled line break)
-            /*text*/ = Desaturated text
-        </p>
-        <p>
-            Medieval Translation Nota = Note Capitulum = Category Intructio =
-            Instructions Tabula = Index/Overview *This can be disabled via
-            toolbar -------------------------------------------- Program Key
-            Commands cmd + s = save cmd + t = new capitulum cmd + n = new nota
-            cmd + x = close window dbl click = change name / open nota paste
-            hyperlink twice = activated url
-            -------------------------------------------- Text Markdowns cmd + b
-            = Bold cmd + u = underline --- = ---------- (ruled line break)
-            /*text*/ = Desaturated text
-        </p>
     </main>
 </template>
 
-<script setup></script>
+<script setup>
+import content from '@/content/instructions.md?raw'
+import MarkdownIt from 'markdown-it'
+
+const md = new MarkdownIt()
+const renderedContent = md.render(content)
+</script>
 
 <style lang="scss">
 main.instructions {
-    .back-link {
+    padding-top: var(--nav-height);
-        opacity: 0.25;
+
-        display: block;
+    .content {
-        margin-top: 9px;
+        display: flex;
-        margin-bottom: 14px;
+        flex-direction: column;
+        gap: 20px;
+
+        hr {
+            border-bottom: 1px dashed currentColor;
+        }
     }
 }
 </style>

src/renderer/src/views/Note.vue

@@ -1,22 +1,34 @@
 <template>
     <main class="note layout-block">
-        <note-editor :id="id" />
+        <note-download :editor="editorRef?.editor" />
+
+        <note-find
+            :editor="editorRef?.editor"
+            :visible="findVisible"
+            @close="findVisible = false"
+        />
+        <note-editor ref="editorRef" :id="id" />
     </main>
 </template>
 
 <script setup>
-import { watchEffect } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 import { useRoute } from 'vue-router'
 import NoteEditor from '@/components/note/Editor.vue'
+import NoteFind from '@/components/note/Find.vue'
+import NoteDownload from '@/components/note/Download.vue'
 
 const route = useRoute()
 const id = route.params.id
 
+const editorRef = ref(null)
+const findVisible = ref(false)
+
 const { ctrl, f } = useMagicKeys()
 watchEffect(() => {
     if (ctrl.value && f.value) {
-        console.log('find')
+        findVisible.value = !findVisible.value
     }
 })
 </script>

src/renderer/src/views/Preferences.vue

@@ -0,0 +1,189 @@
+<template>
+    <main class="preferences layout-block">
+        <h1 class="mono">Storage Plugin</h1>
+
+        <div v-for="plugin in plugins" class="plugin" :key="plugin.id">
+            <input
+                v-model="selectedPluginId"
+                name="plugins"
+                type="radio"
+                :id="plugin.id"
+                :value="plugin.id"
+            />
+            <div class="info">
+                <p class="name bold">{{ plugin.name }}</p>
+                <p class="description">{{ plugin.description }}</p>
+
+                <div v-if="plugin.configSchema.length" class="config">
+                    <div
+                        v-for="field in plugin.configSchema"
+                        class="config-field"
+                        :key="field.key"
+                    >
+                        <label :for="field.key">
+                            {{ field.label }} {{ field.required ? '*' : '' }}
+                        </label>
+                        <input
+                            v-model="config.adapters[plugin.id][field.key]"
+                            :id="field.key"
+                            :type="field.type"
+                            :placeholder="field.default"
+                            :required="field.required"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <p v-if="validationError" class="error">{{ validationError }}</p>
+
+        <button @click="save" class="save-btn">
+            <svg-spinner v-if="saving" />
+            <span v-else-if="saved">Saved</span>
+            <span v-else>Save</span>
+        </button>
+    </main>
+</template>
+
+<script setup>
+import SvgSpinner from '@/components/svg/Spinner.vue'
+import usePlugins from '@/composables/usePlugins'
+import useConfig from '@/composables/useConfig'
+import { ref, computed } from 'vue'
+
+const { plugins, setActivePlugin } = await usePlugins()
+const { config, ensureConfig } = useConfig()
+await ensureConfig()
+
+const normalizeConfig = () => {
+    if (!config.value.adapters) {
+        config.value.adapters = {}
+    }
+
+    for (const plugin of plugins.value) {
+        if (!config.value.adapters[plugin.id]) {
+            config.value.adapters[plugin.id] = {}
+        }
+
+        for (const field of plugin.configSchema) {
+            if (config.value.adapters[plugin.id][field.key] === undefined) {
+                config.value.adapters[plugin.id][field.key] =
+                    field.default ?? ''
+            }
+        }
+    }
+}
+normalizeConfig()
+
+const selectedPluginId = ref(config.value.activeAdapter)
+const validationError = ref('')
+
+const selectedPlugin = computed(() => {
+    return plugins.value.find((p) => p.id === selectedPluginId.value)
+})
+
+const saving = ref(false)
+const saved = ref(false)
+const save = async () => {
+    saving.value = true
+    validationError.value = ''
+
+    const plugin = selectedPlugin.value
+    if (plugin && plugin.configSchema.length) {
+        const adapterConfig = config.value.adapters[plugin.id] || {}
+        for (const field of plugin.configSchema) {
+            if (field.required && !adapterConfig[field.key]) {
+                validationError.value = `Please fill in all required fields for ${plugin.name}`
+                return
+            }
+        }
+    }
+
+    await setActivePlugin(selectedPluginId.value)
+    saving.value = false
+    saved.value = true
+    setTimeout(() => {
+        saved.value = false
+    }, 2000)
+}
+</script>
+
+<style lang="scss">
+.preferences {
+    padding-top: var(--nav-height);
+    padding-bottom: 60px;
+
+    h1 {
+        margin-bottom: 20px;
+    }
+
+    .plugin {
+        display: flex;
+        margin-bottom: 16px;
+    }
+
+    input[type='radio'] {
+        display: block;
+        flex-shrink: 0;
+        width: 10px;
+        height: 10px;
+        margin-right: 10px;
+        border: 1px solid var(--theme-fg);
+        cursor: pointer;
+
+        &:checked {
+            background-color: var(--theme-fg);
+        }
+    }
+
+    .info {
+        .description {
+            color: var(--grey-100);
+            margin-top: 6px;
+        }
+    }
+
+    .config {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+    }
+    .config-field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        input {
+            width: 100%;
+            border: 1px solid var(--grey-100);
+            border-radius: 0.2em;
+            padding: 0.2em 0.5em;
+        }
+    }
+
+    .error {
+        color: red;
+        margin-top: 16px;
+    }
+
+    .save-btn {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 16px 0;
+        text-align: center;
+        border-top: 1px dashed currentColor;
+        background: var(--theme-bg);
+
+        .svg-spinner {
+            width: 1em;
+            height: 1em;
+        }
+        &:hover {
+            color: var(--theme-accent);
+        }
+    }
+}
+</style>

src/renderer/src/views/Search.vue

@@ -1,17 +1,12 @@
 <template>
     <main class="search layout-block">
-        <router-link class="back" to="/"><- Back</router-link>
-
         <form @submit.prevent="onSearch">
-            <div class="input-wrap">
+            <search-input
-                <input
                 v-model="query"
-                    type="text"
                 placeholder="Search"
                 ref="searchInput"
                 @input="onInput"
             />
-            </div>
         </form>
 
         <div class="results">
@@ -25,7 +20,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import SearchInput from '@/components/SearchInput.vue'
 import useNotes from '@/composables/useNotes'
 import NoteRow from '@/components/NoteRow.vue'
 import _debounce from 'lodash/debounce'
@@ -39,6 +35,10 @@ onMounted(async () => {
     await new Promise((resolve) => setTimeout(resolve, 100))
     searchInput.value?.focus()
 })
+onBeforeUnmount(() => {
+    query.value = ''
+    searchResults.value = []
+})
 
 const onSearch = async () => {
     await search(query.value)
@@ -50,50 +50,7 @@ const onInput = _debounce(async () => {
 
 <style lang="scss">
 main.search {
-    .back {
+    padding-top: var(--nav-height);
-        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;