Note moving

.vscode/extensions.json

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

out/main/index.js

@@ -91,12 +91,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 +121,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 +145,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 +169,7 @@ app.whenReady().then(async () => {
       }
       return await adapter[method](...args);
     });
+    broadcastNoteChange("plugin-changed", pluginId);
     return true;
   };
   await setActivePlugin(initialConfig.activeAdapter);
@@ -177,14 +185,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-NYhAwsHy.css

@@ -337,7 +337,9 @@ a,
 button,
 input,
 pre,
-span {
+span,
+label,
+li {
   font-family: var(--font-mono);
   font-weight: 400;
   line-height: 1;
@@ -603,7 +605,8 @@ main.directory .notes {
   font-weight: 700;
 }
 .note-editor p em {
-  font-style: italic;
+  /* font-style: italic; */
+  color: var(--grey-100);
 }
 .note-editor hr {
   border: 1px dashed currentColor;
@@ -789,6 +792,14 @@ main.category .new-note {
   display: block;
   margin-top: 9px;
   margin-bottom: 14px;
+}
+main.instructions .content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+main.instructions .content hr {
+  border-bottom: 1px dashed currentColor;
 }main.search .back {
   display: block;
   opacity: 0.25;
@@ -823,4 +834,74 @@ main.search .results {
   display: flex;
   flex-direction: column;
   gap: 14px;
+}.preferences {
+  padding-top: 8px;
+  padding-bottom: 60px;
+}
+.preferences .back {
+  opacity: 0.25;
+  display: block;
+  margin-top: 9px;
+  margin-bottom: 14px;
+}
+.preferences h1 {
+  margin-bottom: 20px;
+}
+.preferences .plugin {
+  display: flex;
+  margin-bottom: 16px;
+}
+.preferences input[type=radio] {
+  display: block;
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  border: 1px solid white;
+  cursor: pointer;
+}
+.preferences input[type=radio]:checked {
+  background-color: white;
+}
+.preferences .info .description {
+  color: var(--grey-100);
+  margin-top: 6px;
+}
+.preferences .config {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+.preferences .config-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.preferences .config-field input {
+  width: 100%;
+  border: 1px solid var(--grey-100);
+  border-radius: 0.2em;
+  padding: 0.2em 0.5em;
+}
+.preferences .error {
+  color: red;
+  margin-top: 16px;
+}
+.preferences .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);
+}
+.preferences .save-btn .svg-spinner {
+  width: 1em;
+  height: 1em;
+}
+.preferences .save-btn:hover {
+  color: var(--theme-accent);
 }

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-CzxWU9vx.js"></script>
-      <link rel="stylesheet" crossorigin href="./assets/index-CVyE7-c9.css">
+      <link rel="stylesheet" crossorigin href="./assets/index-NYhAwsHy.css">
     </head>
 
     <body>

package-lock.json

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

package.json

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

@@ -2,8 +2,14 @@
     <div :class="classes" :style="styles">
         <Nav />
 
+        <Suspense>
+            <div class="layout-container">
                 <router-view :key="$route.fullPath" />
 
+                <MoveMenu />
+            </div>
+        </Suspense>
+
         <Menu />
 
         <ScrollBar />
@@ -16,6 +22,7 @@ import loadFonts from '@fuzzco/font-loader'
 import { useWindowSize } 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'
 
@@ -65,6 +72,12 @@ const styles = computed(() => ({
     color: var(--theme-fg);
     transition: opacity 400ms;
 
+    .layout-container {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        min-height: calc(100 * var(--vh));
+    }
+
     &: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: 1.2em;
         padding-bottom: 10px;
 
         .menu-item {

src/renderer/src/components/MoveMenu.vue

@@ -0,0 +1,57 @@
+<template>
+    <div v-if="open" class="move-menu layout-block">
+        <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);
+}
+</style>

src/renderer/src/components/Nav.vue

@@ -8,7 +8,6 @@
 
 <script setup>
 import useMenu from '@/composables/useMenu'
-import { onMounted } from 'vue'
 
 const { menuOpen, closeMenu, openMenu } = useMenu()
 
@@ -19,18 +18,11 @@ 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;
     align-items: center;
     gap: 10px;

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/note/Editor.vue

@@ -116,7 +116,8 @@ onBeforeUnmount(() => {
         font-weight: 700;
     }
     p em {
-        font-style: italic;
+        /* font-style: italic; */
+        color: var(--grey-100);
     }
     hr {
         border: 1px dashed currentColor;

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/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/main.scss

@@ -47,7 +47,9 @@ a,
 button,
 input,
 pre,
-span {
+span,
+label,
+li {
     @include p;
 }
 .bold {

src/renderer/src/views/Category.vue

@@ -61,6 +61,8 @@ const categoryIndex = computed(() => {
 
 <style lang="scss">
 main.category {
+    padding-top: 1.24em;
+
     .back {
         display: block;
         opacity: 0.25;

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: 1.2em;
+}
+</style>

src/renderer/src/views/Directory.vue

@@ -7,22 +7,11 @@
             :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>
 </template>
 
@@ -38,9 +27,6 @@ const { categories, loadCategories, loadCategoryNotes, notesChangeCount } =
     useNotes()
 
 const { config } = useConfig()
-const { plugins, setActivePlugin } = usePlugins()
-
-const activePlugin = ref(config.value?.activeAdapter)
 
 const notes = ref()
 
@@ -56,29 +42,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: 26px;
     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

@@ -2,73 +2,37 @@
     <main class="instructions layout-block">
         <router-link class="back-link" to="/"><- Go Back</router-link>
 
-        <p>
+        <div class="content" v-html="renderedContent" />
-            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 {
+    padding-top: 1.2em;
+
     .back-link {
         opacity: 0.25;
         display: block;
         margin-top: 9px;
         margin-bottom: 14px;
     }
+
+    .content {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        hr {
+            border-bottom: 1px dashed currentColor;
+        }
+    }
 }
 </style>

src/renderer/src/views/Note.vue

@@ -23,7 +23,7 @@ watchEffect(() => {
 
 <style lang="scss">
 main.note {
-    padding-top: 8px;
+    padding-top: 2.2em;
     padding-bottom: 20px;
 }
 </style>

src/renderer/src/views/Preferences.vue

@@ -0,0 +1,178 @@
+<template>
+    <main class="preferences layout-block">
+        <router-link to="/" class="back"><- Back</router-link>
+
+        <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 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: 1.2em;
+    padding-bottom: 60px;
+
+    .back {
+        opacity: 0.25;
+        display: block;
+        margin-top: 9px;
+        margin-bottom: 14px;
+    }
+
+    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 white;
+        cursor: pointer;
+
+        &:checked {
+            background-color: white;
+        }
+    }
+
+    .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

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import useNotes from '@/composables/useNotes'
 import NoteRow from '@/components/NoteRow.vue'
 import _debounce from 'lodash/debounce'
@@ -39,6 +39,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,6 +54,8 @@ const onInput = _debounce(async () => {
 
 <style lang="scss">
 main.search {
+    padding-top: 1.2em;
+
     .back {
         display: block;
         opacity: 0.25;