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,
-    height: 549,
+    width: DEFAULT_WINDOW_SIZE.width,
+    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,
-    height: 549,
+    width: DEFAULT_WINDOW_SIZE.width,
+    height: DEFAULT_WINDOW_SIZE.height,
     autoHideMenuBar: true,
     webPreferences: {
       preload: preloadPath,
@@ -186,6 +188,26 @@ app.whenReady().then(async () => {
   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

@@ -21,6 +21,12 @@ const api = {
   },
   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>
-      <link rel="stylesheet" crossorigin href="./assets/index-CVyE7-c9.css">
+      <script type="module" crossorigin src="./assets/index-CzxWU9vx.js"></script>
+      <link rel="stylesheet" crossorigin href="./assets/index-NYhAwsHy.css">
     </head>
 
     <body>

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,
-        height: 549,
+        width: DEFAULT_WINDOW_SIZE.width,
+        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,
-        height: 549,
+        width: DEFAULT_WINDOW_SIZE.width,
+        height: DEFAULT_WINDOW_SIZE.height,
         autoHideMenuBar: true,
         webPreferences: {
             preload: preloadPath,
@@ -138,6 +141,30 @@ app.whenReady().then(async () => {
         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

@@ -25,6 +25,12 @@ const api = {
     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

@@ -3,7 +3,11 @@
         <Nav />
 
         <Suspense>
-            <router-view :key="$route.fullPath" />
+            <div class="layout-container">
+                <router-view :key="$route.fullPath" />
+
+                <MoveMenu />
+            </div>
         </Suspense>
 
         <Menu />
@@ -18,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'
 
@@ -67,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

@@ -64,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>
-    </button>
+        <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 {
-        width: calc(100% - 43.2px);
-        position: relative;
+    .title-actions {
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+        align-items: flex-start;
+        gap: 2px;
 
-        &::after {
-            content: '(open)';
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            transform: translateX(100%);
-            font-weight: 700;
+        .action {
             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/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/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/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,7 +7,7 @@
             :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" />
@@ -46,7 +46,7 @@ watch(notesChangeCount, async () => {
 
 <style lang="scss">
 main.directory {
-    padding-top: 18px;
+    padding-top: 26px;
     padding-bottom: 30px;
 
     .label {

src/renderer/src/views/Instructions.vue

@@ -16,6 +16,8 @@ const renderedContent = md.render(content)
 
 <style lang="scss">
 main.instructions {
+    padding-top: 1.2em;
+
     .back-link {
         opacity: 0.25;
         display: block;

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

@@ -6,7 +6,7 @@
 
         <div v-for="plugin in plugins" class="plugin" :key="plugin.id">
             <input
-                v-model="activePluginId"
+                v-model="selectedPluginId"
                 name="plugins"
                 type="radio"
                 :id="plugin.id"
@@ -16,14 +16,14 @@
                 <p class="name bold">{{ plugin.name }}</p>
                 <p class="description">{{ plugin.description }}</p>
 
-                <form v-if="plugin.configSchema.length" class="config">
+                <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.label }} {{ field.required ? '*' : '' }}
                         </label>
                         <input
                             v-model="config.adapters[plugin.id][field.key]"
@@ -33,31 +33,67 @@
                             :required="field.required"
                         />
                     </div>
-                </form>
+                </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, watch } from 'vue'
+import { ref, computed } from 'vue'
 
 const { plugins, setActivePlugin } = await usePlugins()
 const { config, ensureConfig } = useConfig()
 await ensureConfig()
 
-const activePluginId = ref(config.value.activeAdapter)
+const selectedPluginId = ref(config.value.activeAdapter)
+const validationError = ref('')
 
-watch(activePluginId, async (id) => {
-    await setActivePlugin(id)
+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: 8px;
+    padding-top: 1.2em;
+    padding-bottom: 60px;
 
     .back {
         opacity: 0.25;
@@ -114,5 +150,29 @@ watch(activePluginId, async (id) => {
             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

@@ -54,6 +54,8 @@ const onInput = _debounce(async () => {
 
 <style lang="scss">
 main.search {
+    padding-top: 1.2em;
+
     .back {
         display: block;
         opacity: 0.25;