bump version

README.md

@@ -32,3 +32,20 @@ $ npm run build:mac
 # For Linux
 $ npm run build:linux
 ```
+
+### Releasing Versions
+
+Before releasing a new version, make sure that all code is committed and pushed to the remote repository. Then, update the version number in `package.json`.
+
+Create a new release tag and push it to the remote repository.
+
+```bash
+$ git tag -a <version> -m "Release <version>"
+$ git push --tags
+```
+
+Run the release script to build and package the application and upload it to the SeaweedFS bucket.
+
+```bash
+$ npm run release:<platform>
+```

bin/uploadArtifacts.js

@@ -19,7 +19,7 @@ const client = new S3Client({
     },
 })
 
-function getContentType(file) {
+const getContentType = (file) => {
     if (file.endsWith('.yml')) return 'text/yaml'
     if (file.endsWith('.json')) return 'application/json'
     if (file.endsWith('.AppImage')) return 'application/octet-stream'
@@ -30,7 +30,7 @@ function getContentType(file) {
     return 'application/octet-stream'
 }
 
-function getCurrentTag() {
+const getCurrentTag = () => {
     try {
         const tag = execSync('git describe --tags --exact-match 2>/dev/null', {
             encoding: 'utf8',
@@ -42,7 +42,7 @@ function getCurrentTag() {
     }
 }
 
-function isGitTagDirty() {
+const isGitTagDirty = () => {
     try {
         const status = execSync('git status --porcelain', {
             encoding: 'utf8',
@@ -54,7 +54,7 @@ function isGitTagDirty() {
     }
 }
 
-async function uploadFile(filePath, platform, version) {
+const uploadFile = async (filePath, platform, version) => {
     const fileStream = fs.createReadStream(filePath)
     const fileName = path.basename(filePath)
     const key = `${platform}/${version}/${fileName}`
@@ -71,7 +71,7 @@ async function uploadFile(filePath, platform, version) {
     )
 }
 
-async function main() {
+const main = async () => {
     const platform = process.argv[2]
     const version = process.argv[3]
 
@@ -96,10 +96,10 @@ async function main() {
         return
     }
 
-    // if (isGitTagDirty()) {
-    //     console.log('Git working directory is dirty. Skipping upload.')
-    //     return
-    // }
+    if (isGitTagDirty()) {
+        console.log('Git working directory is dirty. Skipping upload.')
+        return
+    }
 
     console.log(
         `Uploading artifacts for ${platform} v${version} (tag: ${currentTag})`,

out/main/index.js

@@ -79,7 +79,9 @@ const ajv = new Ajv({ allErrors: true, strict: false });
 const getDefaultConfig = () => {
   return {
     activeAdapter: "browser",
-    theme: "dark"
+    theme: "dark",
+    enableBlackletter: "true",
+    openNotesInNewWindow: "true"
   };
 };
 const CONFIG_SCHEMA = {
@@ -313,6 +315,7 @@ class NotesAPI {
   }
   getNote(id) {
     const note = this.notesCache.get(id);
+    console.log(this.notesCache, id);
     return note ? { ...note } : null;
   }
   async createNote(metadata = {}, content = "", plainText = "") {
@@ -435,6 +438,7 @@ const initializeCore = async (runtime, { plugins }) => {
   let notesAPI = null;
   let initPromise = null;
   const getNotesAPI = async () => {
+    console.log("getNotesAPI before: ", notesAPI);
     if (notesAPI) return notesAPI;
     if (!initPromise) {
       initPromise = (async () => {
@@ -455,6 +459,7 @@ const initializeCore = async (runtime, { plugins }) => {
         );
         notesAPI = new NotesAPI(adapter, encryptionKey);
         await notesAPI.init();
+        console.log("getNotesAPI after: ", notesAPI);
         return notesAPI;
       })();
     }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "takerofnotes-app",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "An Electron application with Vue",
     "main": "./out/main/index.js",
     "author": "example.com",

src/core/ConfigManager.js

@@ -6,6 +6,8 @@ const getDefaultConfig = () => {
     return {
         activeAdapter: 'browser',
         theme: 'dark',
+        enableBlackletter: 'true',
+        openNotesInNewWindow: 'true',
     }
 }
 

src/core/PluginManager.js

@@ -72,7 +72,12 @@ export const createPluginManagerClient = () => {
         },
 
         async testPlugin(id, config) {
-            return window.api.pluginManagerCall('testPlugin', { id, config })
+            const test = await window.api.pluginManagerCall(
+                'testPlugin',
+                id,
+                config,
+            )
+            return test
         },
     }
 }

src/core/index.js

@@ -50,23 +50,9 @@ const initConfigManager = async (runtime, pluginManager) => {
     return createConfigManager(storage, pluginManager)
 }
 
-export const initializeCore = async (runtime, { plugins }) => {
-    const pluginManager = initPluginManager(runtime, plugins)
-    const configManager = await initConfigManager(runtime, pluginManager)
-    const config = await configManager.loadConfig()
-
-    // Set active plugin
-    const activeConfig = config.adapters?.[config.activeAdapter] || {}
-    pluginManager.setActivePlugin(config.activeAdapter, activeConfig)
-
-    // Create API instance
 let notesAPI = null
 let initPromise = null
-    const getNotesAPI = async () => {
-        if (notesAPI) return notesAPI
-
-        if (!initPromise) {
-            initPromise = (async () => {
+const initNotesAPI = async (configManager, pluginManager) => {
     // Get fresh config to ensure adapters are populated from main process
     const latestConfig = await configManager.loadConfig()
 
@@ -83,16 +69,31 @@ export const initializeCore = async (runtime, { plugins }) => {
     const pluginId = latestConfig?.activeAdapter || 'filesystem'
     const adapterConfig = latestConfig?.adapters?.[pluginId] || {}
 
-                const adapter = pluginManager.getAdapter(
-                    pluginId,
-                    adapterConfig,
-                )
+    const adapter = pluginManager.getAdapter(pluginId, adapterConfig)
 
-                notesAPI = new NotesAPI(adapter, encryptionKey)
-                await notesAPI.init()
+    const api = new NotesAPI(adapter, encryptionKey)
+    await api.init()
 
-                return notesAPI
-            })()
+    notesAPI = api
+
+    return api
+}
+
+export const initializeCore = async (runtime, { plugins }) => {
+    const pluginManager = initPluginManager(runtime, plugins)
+    const configManager = await initConfigManager(runtime, pluginManager)
+    const config = await configManager.loadConfig()
+
+    // Set active plugin
+    const activeConfig = config.adapters?.[config.activeAdapter] || {}
+    pluginManager.setActivePlugin(config.activeAdapter, activeConfig)
+
+    // Create API instance
+    const getNotesAPI = async () => {
+        if (notesAPI) return notesAPI
+
+        if (!initPromise) {
+            initPromise = initNotesAPI(configManager, pluginManager)
         }
 
         return initPromise

src/renderer/src/components/Btn.vue

@@ -0,0 +1,31 @@
+<template>
+    <component :is="tag" class="btn">
+        <svg-btn-outline />
+
+        <slot />
+    </component>
+</template>
+
+<script setup>
+import SvgBtnOutline from '@/components/svg/BtnOutline.vue'
+
+const props = defineProps({
+    tag: {
+        type: String,
+        default: 'button',
+    },
+})
+</script>
+
+<style lang="scss">
+.btn {
+    text-transform: uppercase;
+    padding: 5px 16px 6px;
+    color: var(--grey-100);
+    position: relative;
+
+    &:hover {
+        color: var(--theme-accent);
+    }
+}
+</style>

src/renderer/src/components/DeleteMenu.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="delete-menu">
+        <button
+            :class="['delete-button', { active: model }]"
+            @click="model = true"
+        >
+            Delete Items
+        </button>
+
+        <button v-if="model" class="close-button" @click="model = false">
+            X Close
+        </button>
+    </div>
+</template>
+
+<script setup>
+const model = defineModel()
+</script>
+
+<style lang="scss">
+.delete-menu {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .delete-button {
+        color: var(--grey-100);
+
+        &:hover,
+        &.active {
+            color: var(--red);
+        }
+    }
+}
+</style>

src/renderer/src/components/Modal.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="modal theme-dark">
+        <div class="modal-container" ref="container">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const container = ref(null)
+
+onClickOutside(container, () => {
+    emit('close')
+})
+</script>
+
+<style lang="scss">
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .modal-container {
+        background: var(--theme-bg);
+        color: var(--theme-fg);
+        border: 1px solid var(--grey-100);
+        border-radius: 16px;
+        padding: 27px 21px;
+        text-align: center;
+
+        .btn-row {
+            display: flex;
+            justify-content: center;
+            gap: 12px;
+            margin-top: 26px;
+
+            .btn {
+                min-width: 80px;
+            }
+        }
+    }
+}
+</style>

src/renderer/src/components/MoveMenu.vue

@@ -56,7 +56,11 @@ watch(open, async () => {
 <style lang="scss">
 .move-menu {
     width: 50vw;
-    height: 100%;
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    padding-bottom: 20px;
     border-left: 1px solid var(--grey-100);
     display: flex;
     flex-direction: column;

src/renderer/src/components/NewNote.vue

@@ -21,7 +21,7 @@ const onClick = async () => {
         },
         '',
     )
-    openNote(note.id)
+    await openNote(note.id)
     emit('noteOpened')
 }
 

src/renderer/src/components/NoteRow.vue

@@ -1,36 +1,76 @@
 <template>
-    <div :class="['note-row', { 'move-active': moveActive }]">
-        <span class="date">{{ formatDate(note.updatedAt) }}</span>
+    <div
+        :class="[
+            'note-row',
+            { 'move-active': moveActive, 'delete-active': deleteActive },
+        ]"
+    >
+        <button
+            v-if="deleteActive"
+            class="delete"
+            @click="deleteModalOpen = true"
+        >
+            Delete
+        </button>
+        <span v-else class="date">{{ formatDate(note.updatedAt) }}</span>
+
         <div class="title-actions">
-            <button class="title bold" @click="openNote(note.id)">
+            <button
+                class="title bold"
+                @click="!deleteActive && openNote(note.id)"
+            >
                 {{ note.title }}
             </button>
 
-            <button class="action bold" @click="openNote(note.id)">
+            <button
+                class="action bold"
+                @click="!deleteActive && openNote(note.id)"
+            >
                 (open)
             </button>
             <button class="action bold move" @click="onMoveOpened">
                 (move)
             </button>
         </div>
+
+        <teleport to="body">
+            <modal v-if="deleteModalOpen" @close="deleteModalOpen = false">
+                <p>Are you sure?</p>
+
+                <div class="btn-row">
+                    <btn @click="onDelete">Yes</btn>
+                    <btn @click="deleteModalOpen = false">No</btn>
+                </div>
+            </modal>
+        </teleport>
     </div>
 </template>
 
 <script setup>
 import useOpenNote from '@/composables/useOpenNote'
 import { useRoute, useRouter } from 'vue-router'
-import { computed } from 'vue'
+import useNotes from '@/composables/useNotes'
+import Modal from '@/components/Modal.vue'
+import Btn from '@/components/Btn.vue'
+import { computed, ref } from 'vue'
 import { format } from 'fecha'
 
-const props = defineProps({ note: Object })
+const props = defineProps({ note: Object, deleteActive: Boolean })
+
+const deleteModalOpen = ref(false)
 
 const { openNote } = useOpenNote()
+const { deleteNote } = useNotes()
 
 const formatDate = (date) => {
     const d = new Date(date)
     return format(d, 'MM/DD/YYYY')
 }
 
+const onDelete = async () => {
+    await deleteNote(props.note.id)
+}
+
 // Moving
 const route = useRoute()
 const router = useRouter()
@@ -72,6 +112,22 @@ const moveActive = computed(() => route.query.move === props.note.id)
             }
         }
     }
+
+    &.delete-active {
+        align-items: flex-start;
+
+        .title,
+        .action {
+            cursor: default;
+        }
+        .delete {
+            cursor: pointer;
+        }
+        &:hover {
+            color: var(--red);
+        }
+    }
+    &:not(.delete-active) {
         &:hover,
         &.move-active {
             color: var(--theme-accent);
@@ -80,6 +136,8 @@ const moveActive = computed(() => route.query.move === props.note.id)
                 opacity: 1;
             }
         }
+    }
+
     &.move-active {
         .title-actions .move {
             color: var(--theme-accent);

src/renderer/src/components/PageLoading.vue

@@ -15,6 +15,7 @@ import SvgSpinner from '@/components/svg/Spinner.vue'
     display: flex;
     justify-content: center;
     align-items: center;
+    pointer-events: none;
 
     svg {
         width: 20px;

src/renderer/src/components/SearchInput.vue

@@ -7,10 +7,13 @@
             ref="input"
             @input="emit('input', model.value)"
         />
+
+        <svg-btn-outline />
     </div>
 </template>
 
 <script setup>
+import SvgBtnOutline from '@/components/svg/BtnOutline.vue'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -38,37 +41,10 @@ defineExpose({
         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/preferences/BooleanInput.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="preferences-boolean-input">
+        <label :for="key">
+            {{ label }}
+        </label>
+
+        <button
+            :class="['toggle-container', { active: model === 'true' }]"
+            @click="onToggleClick"
+        >
+            <div class="toggle-button" />
+        </button>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    label: String,
+    key: String,
+    required: Boolean,
+    default: String,
+})
+
+const model = defineModel()
+
+const onToggleClick = () => {
+    if (model.value === 'true') {
+        model.value = 'false'
+    } else {
+        model.value = 'true'
+    }
+}
+</script>
+
+<style lang="scss">
+.preferences-boolean-input {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .toggle-container {
+        width: 26px;
+        height: 15px;
+        border-radius: 10px;
+        border: 1px solid var(--theme-fg);
+        position: relative;
+
+        .toggle-button {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 13px;
+            height: 13px;
+            border-radius: 50%;
+            background-color: var(--theme-fg);
+        }
+
+        &.active {
+            background: var(--grey-100);
+
+            .toggle-button {
+                transform: translateX(11px);
+            }
+        }
+    }
+}
+</style>

src/renderer/src/components/preferences/DirectoryInput.vue

@@ -53,6 +53,16 @@ const openDirectoryPicker = async () => {
     }
     button {
         padding: 0.2em 0.5em;
+        background: var(--theme-bg);
+        color: var(--theme-fg);
+        border: 1px solid var(--grey-100);
+        border-radius: 0.2em;
+
+        &:hover {
+            background: var(--theme-fg);
+            color: var(--theme-bg);
+            border-color: var(--theme-fg);
+        }
     }
 }
 </style>

src/renderer/src/components/preferences/General.vue

@@ -0,0 +1,48 @@
+<template>
+    <div v-if="config" class="preferences-general">
+        <h2 class="section-title h1 mono">General</h2>
+
+        <div class="options">
+            <preferences-boolean-input
+                v-model="config.enableBlackletter"
+                label="Enable Blackletter"
+                key="enableBlackletter"
+            />
+            <preferences-boolean-input
+                v-model="config.openNotesInNewWindow"
+                label="Open Notes in New Window"
+                key="openNotesInNewWindow"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import PreferencesBooleanInput from '@/components/preferences/BooleanInput.vue'
+import useConfig from '@/composables/useConfig'
+import { onMounted } from 'vue'
+
+const { config, ensureConfig } = useConfig()
+
+onMounted(async () => {
+    await ensureConfig()
+})
+
+const validate = async () => {
+    // if (!config.value.encryptionKey) {
+    //     throw new Error('Please fill in the encryption key')
+    // }
+}
+
+defineExpose({ validate })
+</script>
+
+<style lang="scss">
+.preferences-general {
+    .options {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
+}
+</style>

src/renderer/src/components/preferences/Storage.vue

@@ -38,6 +38,11 @@
                             v-model="config.adapters[plugin.id][field.key]"
                             v-bind="field"
                         />
+                        <boolean-input
+                            v-else-if="field.type === 'boolean'"
+                            v-model="config.adapters[plugin.id][field.key]"
+                            v-bind="field"
+                        />
                     </div>
                 </div>
             </div>
@@ -47,6 +52,7 @@
 
 <script setup>
 import DirectoryInput from '@/components/preferences/DirectoryInput.vue'
+import BooleanInput from '@/components/preferences/BooleanInput.vue'
 import TextInput from '@/components/preferences/TextInput.vue'
 import usePlugins from '@/composables/usePlugins'
 import useConfig from '@/composables/useConfig'
@@ -102,11 +108,10 @@ const validate = async () => {
         }
 
         // Test connection
-        // const testResult = await testPlugin(plugin.id, adapterConfig)
-        // console.log(testResult)
-        // if (!testResult) {
-        //     validationError.value = `Failed to connect to ${plugin.name}`
-        // }
+        const testResult = await testPlugin(plugin.id, adapterConfig)
+        if (!testResult) {
+            throw new Error(`Failed to connect to ${plugin.name}`)
+        }
     }
 
     await setActivePlugin(selectedPluginId.value, adapterConfig)
@@ -137,6 +142,8 @@ defineExpose({ validate })
     }
 
     .info {
+        flex: 1;
+
         .description {
             color: var(--grey-100);
             margin-top: 6px;
@@ -146,7 +153,7 @@ defineExpose({ validate })
     .config {
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 16px;
         margin-top: 16px;
     }
 }

src/renderer/src/components/preferences/TextInput.vue

@@ -2,17 +2,30 @@
     <div class="preferences-text-input">
         <label :for="key"> {{ label }}{{ required ? '*' : '' }} </label>
 
+        <div class="input-wrapper">
             <input
                 v-model="model"
                 :id="key"
-            :type="type"
+                :type="isPasswordVisible ? 'text' : type"
                 :placeholder="default"
                 :required="required"
             />
+
+            <button
+                v-if="type === 'password'"
+                type="button"
+                class="toggle-password"
+                @click="isPasswordVisible = !isPasswordVisible"
+            >
+                👁️
+            </button>
+        </div>
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+
 const props = defineProps({
     label: String,
     key: String,
@@ -22,6 +35,7 @@ const props = defineProps({
 })
 
 const model = defineModel()
+const isPasswordVisible = ref(false)
 </script>
 
 <style lang="scss">
@@ -30,11 +44,26 @@ const model = defineModel()
         display: block;
         margin-bottom: 6px;
     }
+    .input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+    }
     input {
         width: 100%;
         border: 1px solid var(--grey-100);
         border-radius: 0.2em;
         padding: 0.2em 0.5em;
+        padding-right: 2.5em;
+    }
+    .toggle-password {
+        position: absolute;
+        right: 0.5em;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        font-size: 1em;
     }
 }
 </style>

src/renderer/src/components/svg/BtnOutline.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="svg-btn-outline">
+        <svg
+            class="side left"
+            width="16"
+            height="28"
+            viewBox="0 0 16 28"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
+                stroke="currentColor"
+            />
+        </svg>
+
+        <div class="fill">
+            <div class="borders" />
+        </div>
+
+        <svg
+            class="side right"
+            width="16"
+            height="28"
+            viewBox="0 0 16 28"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M15.7207 0.5H14.7207L0.720634 14.8612L14.7207 27.5H15.7207"
+                stroke="currentColor"
+            />
+        </svg>
+    </div>
+</template>
+
+<style lang="scss">
+.svg-btn-outline {
+    grid-template-columns: auto 1fr auto;
+    display: grid;
+    align-items: center;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    .side {
+        height: 100%;
+
+        &.right {
+            transform: scaleX(-1);
+        }
+    }
+    .fill {
+        height: 100%;
+        position: relative;
+
+        .borders {
+            position: absolute;
+            inset: 0 -1px;
+            border: solid currentColor;
+            border-width: 1px 0;
+        }
+    }
+}
+</style>

src/renderer/src/composables/useNotes.js

@@ -12,6 +12,7 @@ export default () => {
     // Change listeners for electron
     const { setupListeners, broadcastChange, changeCount } = useNoteListeners()
     setupListeners()
+    getNotesAPI()
 
     const getDecryptionFailures = async () => {
         const api = await getNotesAPI()
@@ -30,7 +31,8 @@ export default () => {
     }
     const loadNote = async (id) => {
         const api = await getNotesAPI()
-        return api.getNote(id)
+        console.log(api)
+        return await api.getNote(id)
     }
 
     // Create

src/renderer/src/composables/useOpenNote.js

@@ -1,11 +1,15 @@
 import { useRouter } from 'vue-router'
 import { useEnvironment, ENVIRONMENTS } from './useEnvironment'
+import useConfig from '@/composables/useConfig'
 
 export default () => {
     const router = useRouter()
+    const { config, ensureConfig } = useConfig()
 
-    function openNote(noteId, options = {}) {
-        const { newWindow = true } = options
+    const openNote = async (noteId) => {
+        await ensureConfig()
+        const newWindow =
+            config.value.openNotesInNewWindow === 'true' ? true : false
 
         const environment = useEnvironment()
 

src/renderer/src/composables/usePlugins.js

@@ -16,7 +16,7 @@ export default async () => {
     }
 
     const testPlugin = async (pluginId, config = {}) => {
-        await pluginManager.testPlugin(pluginId, { ...config })
+        return await pluginManager.testPlugin(pluginId, { ...config })
     }
 
     return {

src/renderer/src/libs/theme.js

@@ -5,6 +5,7 @@ const colors = {
     green: '#87FF5B',
     blue: '#5B92FF',
     purple: '#94079E',
+    red: '#D40202',
 }
 
 const themes = {

src/renderer/src/styles/_layers.scss

@@ -1,4 +1,7 @@
 // z-index
 .menu {
+    z-index: 20;
+}
+.nav {
     z-index: 10;
 }

src/renderer/src/views/Category.vue

@@ -7,8 +7,15 @@
             @edited="onCategoryEdited"
         />
 
+        <delete-menu v-model="deleteActive" />
+
         <div class="notes">
-            <note-row v-for="note in notes" :note="note" :key="note.id" />
+            <note-row
+                v-for="note in notes"
+                :note="note"
+                :deleteActive="deleteActive"
+                :key="note.id"
+            />
         </div>
 
         <new-note :category="id" />
@@ -22,12 +29,14 @@ import useNotes from '@/composables/useNotes'
 import NoteRow from '@/components/NoteRow.vue'
 import CategoryRow from '@/components/CategoryRow.vue'
 import NewNote from '@/components/NewNote.vue'
+import DeleteMenu from '@/components/DeleteMenu.vue'
 
 const route = useRoute()
 const id = route.params?.id
 const router = useRouter()
 
 const notes = ref()
+const deleteActive = ref(false)
 
 const refreshNotes = async () => {
     if (id) {
@@ -48,7 +57,6 @@ onMounted(async () => {
 
     if (!categories.value?.length) {
         await loadCategories()
-        console.log(categories.value)
     }
 })
 
@@ -75,6 +83,9 @@ main.category {
     .category-row {
         margin-top: 4px;
     }
+    .delete-menu {
+        margin: 10px 0 12px;
+    }
     .notes {
         display: flex;
         flex-direction: column;

src/renderer/src/views/Directory.vue

@@ -10,10 +10,19 @@
             :key="category"
         />
 
+        <div class="bar">
             <h2 v-if="notes?.length" class="label">Summarium</h2>
 
+            <delete-menu v-model="deleteActive" />
+        </div>
+
         <div class="notes">
-            <note-row v-for="note in notes" :note="note" :key="note.id" />
+            <note-row
+                v-for="note in notes"
+                :note="note"
+                :deleteActive="deleteActive"
+                :key="note.id"
+            />
         </div>
 
         <new-note />
@@ -33,6 +42,7 @@ import DecryptionWarning from '@/components/DecryptionWarning.vue'
 import { onMounted, ref, watchEffect, watch } from 'vue'
 import CategoryRow from '@/components/CategoryRow.vue'
 import PageLoading from '@/components/PageLoading.vue'
+import DeleteMenu from '@/components/DeleteMenu.vue'
 import NoteRow from '@/components/NoteRow.vue'
 import useNotes from '@/composables/useNotes'
 import NewNote from '@/components/NewNote.vue'
@@ -51,6 +61,7 @@ const {
 
 const notes = ref()
 const loaded = ref(false)
+const deleteActive = ref(false)
 
 const refreshNotes = async () => {
     loaded.value = false
@@ -81,11 +92,17 @@ main.directory {
     padding-top: var(--nav-height);
     padding-bottom: 60px;
 
+    .bar {
+        display: flex;
+        align-items: center;
+        gap: 27px;
+        margin: 17px 0 24px;
+
         .label {
             text-transform: uppercase;
-        margin: 17px 0 24px;
             @include p;
         }
+    }
     .notes {
         display: flex;
         flex-direction: column;

src/renderer/src/views/Instructions.vue

@@ -15,6 +15,7 @@ const renderedContent = md.render(content)
 <style lang="scss">
 main.instructions {
     padding-top: var(--nav-height);
+    padding-bottom: 50px;
 
     .content {
         display: flex;

src/renderer/src/views/Note.vue

@@ -1,5 +1,9 @@
 <template>
-    <main class="note layout-block">
+    <main v-if="note" class="note layout-block">
+        <router-link v-if="!hideBack" class="back-link" to="/">
+            <- Back
+        </router-link>
+
         <note-download :title="editorRef?.title" :editor="editorRef?.editor" />
 
         <note-find
@@ -14,17 +18,24 @@
 </template>
 
 <script setup>
-import { ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useMagicKeys } from '@vueuse/core'
 import { useRoute } from 'vue-router'
 import useNotes from '@/composables/useNotes'
 import NoteEditor from '@/components/note/Editor.vue'
 import NoteFind from '@/components/note/Find.vue'
 import NoteDownload from '@/components/note/Download.vue'
+import useConfig from '@/composables/useConfig'
+import { useEnvironment } from '@/composables/useEnvironment'
 
 const route = useRoute()
 const id = route.params.id
 
+const { config, ensureConfig } = useConfig()
+await ensureConfig()
+
+const environment = useEnvironment()
+
 const { loadNote } = useNotes()
 const note = await loadNote(id)
 
@@ -52,6 +63,12 @@ const onTargetClick = () => {
         editorRef.value.editor.getText().length + 1,
     )
 }
+
+const hideBack = computed(
+    () =>
+        environment === 'electron' &&
+        config.value.openNotesInNewWindow === 'true',
+)
 </script>
 
 <style lang="scss">
@@ -61,6 +78,11 @@ main.note {
     grid-template-rows: auto auto 1fr;
     display: grid;
 
+    .back-link {
+        color: var(--grey-100);
+        margin-right: auto;
+        margin-bottom: 10px;
+    }
     .click-target {
         cursor: pointer;
         min-height: 1em;

src/renderer/src/views/Preferences.vue

@@ -3,6 +3,8 @@
         <h1 class="title">Preferences</h1>
 
         <div class="sections">
+            <preferences-general />
+
             <preferences-encryption ref="encryption" />
 
             <suspense @resolve="ready = true">
@@ -22,6 +24,7 @@
 
 <script setup>
 import PreferencesEncryption from '@/components/preferences/Encryption.vue'
+import PreferencesGeneral from '@/components/preferences/General.vue'
 import PreferencesStorage from '@/components/preferences/Storage.vue'
 import SvgSpinner from '@/components/svg/Spinner.vue'
 import { ref } from 'vue'
@@ -61,6 +64,7 @@ const save = async () => {
 .preferences {
     padding-top: var(--nav-height);
     padding-bottom: 60px;
+    position: relative;
 
     .title {
         margin-bottom: 25px;
@@ -69,14 +73,20 @@ const save = async () => {
         display: flex;
         flex-direction: column;
         gap: 30px;
+        max-width: 500px;
     }
     .section-title {
         margin-bottom: 20px;
     }
 
     .error {
-        color: red;
-        margin-top: 16px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background: #ba3632;
+        padding: 5px var(--layout-margin);
+        text-align: center;
     }
 
     .save-btn {