functionality updates for preferences

2026-04-09 14:58:06 -04:00
parent b4b627b6bb
commit 1806a612b6
13 changed files with 207 additions and 21 deletions
--- a/bin/uploadArtifacts.js
+++ b/bin/uploadArtifacts.js
@@ -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})`,
--- a/src/core/ConfigManager.js
+++ b/src/core/ConfigManager.js
@@ -6,6 +6,8 @@ const getDefaultConfig = () => {
    return {
        activeAdapter: 'browser',
        theme: 'dark',
+        enableBlackletter: 'true',
+        openNotesInNewWindow: 'true',
    }
 }

--- a/src/core/PluginManager.js
+++ b/src/core/PluginManager.js
@@ -72,7 +72,13 @@ export const createPluginManagerClient = () => {
        },

        async testPlugin(id, config) {
-            return window.api.pluginManagerCall('testPlugin', { id, config })
+            const test = await window.api.pluginManagerCall(
+                'testPlugin',
+                id,
+                config,
+            )
+            console.log(test)
+            return test
        },
    }
 }
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -90,6 +90,8 @@ app.whenReady().then(async () => {
    )

    ipcMain.handle('pluginManager:call', async (_, method, ...args) => {
+        console.log(method, ...args)
+
        const methodCall = await pluginManager[method](...args)

        if (method === 'setActivePlugin') {
--- a/src/renderer/src/components/PageLoading.vue
+++ b/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;
--- a/src/renderer/src/components/preferences/BooleanInput.vue
+++ b/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>
--- a/src/renderer/src/components/preferences/DirectoryInput.vue
+++ b/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>
--- a/src/renderer/src/components/preferences/General.vue
+++ b/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>
--- a/src/renderer/src/components/preferences/Storage.vue
+++ b/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,11 @@ 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)
+        console.log(testResult)
+        if (!testResult) {
+            throw new Error(`Failed to connect to ${plugin.name}`)
+        }
    }

    await setActivePlugin(selectedPluginId.value, adapterConfig)
@@ -137,6 +143,8 @@ defineExpose({ validate })
    }

    .info {
+        flex: 1;
+
        .description {
            color: var(--grey-100);
            margin-top: 6px;
@@ -146,7 +154,7 @@ defineExpose({ validate })
    .config {
        display: flex;
        flex-direction: column;
-        gap: 10px;
+        gap: 16px;
        margin-top: 16px;
    }
 }
--- a/src/renderer/src/components/preferences/TextInput.vue
+++ b/src/renderer/src/components/preferences/TextInput.vue
@@ -2,17 +2,30 @@
    <div class="preferences-text-input">
        <label :for="key"> {{ label }}{{ required ? '*' : '' }} </label>

-        <input
-            v-model="model"
-            :id="key"
-            :type="type"
-            :placeholder="default"
-            :required="required"
-        />
+        <div class="input-wrapper">
+            <input
+                v-model="model"
+                :id="key"
+                :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>
--- a/src/renderer/src/composables/usePlugins.js
+++ b/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 {
--- a/src/renderer/src/styles/_layers.scss
+++ b/src/renderer/src/styles/_layers.scss
@@ -1,4 +1,7 @@
 // z-index
 .menu {
+    z-index: 20;
+}
+.nav {
    z-index: 10;
 }
--- a/src/renderer/src/views/Preferences.vue
+++ b/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 {