delete modal + btn

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 = "") {

src/core/NotesAPI.js

@@ -188,6 +188,7 @@ export default class NotesAPI {
 
     getNote(id) {
         const note = this.notesCache.get(id)
+        console.log(this.notesCache, id)
 
         return note ? { ...note } : null
     }

src/core/PluginManager.js

@@ -77,7 +77,6 @@ export const createPluginManagerClient = () => {
                 id,
                 config,
             )
-            console.log(test)
             return test
         },
     }

src/main/index.js

@@ -90,8 +90,6 @@ app.whenReady().then(async () => {
     )
 
     ipcMain.handle('pluginManager:call', async (_, method, ...args) => {
-        console.log(method, ...args)
-
         const methodCall = await pluginManager[method](...args)
 
         if (method === 'setActivePlugin') {

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,6 +1,19 @@
 <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)">
                 {{ note.title }}
@@ -13,24 +26,45 @@
                 (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,14 +106,32 @@ const moveActive = computed(() => route.query.move === props.note.id)
             }
         }
     }
-    &:hover,
-    &.move-active {
-        color: var(--theme-accent);
 
-        .title-actions .action {
-            opacity: 1;
+    &.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);
+
+            .title-actions .action {
+                opacity: 1;
+            }
+        }
+    }
+
     &.move-active {
         .title-actions .move {
             color: var(--theme-accent);

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/Storage.vue

@@ -109,7 +109,6 @@ const validate = async () => {
 
         // Test connection
         const testResult = await testPlugin(plugin.id, adapterConfig)
-        console.log(testResult)
         if (!testResult) {
             throw new Error(`Failed to connect to ${plugin.name}`)
         }

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,7 @@ export default () => {
     }
     const loadNote = async (id) => {
         const api = await getNotesAPI()
-        return api.getNote(id)
+        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/libs/theme.js

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

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"
         />
 
-        <h2 v-if="notes?.length" class="label">Summarium</h2>
+        <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,10 +92,16 @@ main.directory {
     padding-top: var(--nav-height);
     padding-bottom: 60px;
 
-    .label {
-        text-transform: uppercase;
+    .bar {
+        display: flex;
+        align-items: center;
+        gap: 27px;
         margin: 17px 0 24px;
-        @include p;
+
+        .label {
+            text-transform: uppercase;
+            @include p;
+        }
     }
     .notes {
         display: flex;

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;