preferences inputs WIP

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="preferences-directory-input">
+        <input v-model="model" type="text" />
+
+        <button @click="openDirectoryPicker">Browse</button>
+
+        <input
+            ref="fileInput"
+            type="file"
+            webkitdirectory
+            style="display: none"
+            @change="handleDirectoryChange"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const model = defineModel()
+const fileInput = ref(null)
+
+function openDirectoryPicker() {
+    fileInput.value?.click()
+}
+
+function handleDirectoryChange(event) {
+    const files = event.target.files
+    if (files.length > 0) {
+        const path = files[0].webkitRelativePath || files[0].path
+        const directoryPath = path.split('/').slice(0, -1).join('/')
+        model.value = directoryPath || files[0].path
+    }
+}
+</script>
+
+<style lang="scss">
+.preferences-directory-input {
+}
+</style>

src/renderer/src/components/preferences/Encryption.vue

@@ -0,0 +1,38 @@
+<template>
+    <div v-if="config" class="preferences-encryption">
+        <h2 class="section-title h1 mono">Encryption</h2>
+
+        <preferences-text-input
+            v-model.trim="config.encryptionKey"
+            type="text"
+            label="Encryption Key"
+            key="encryptionKey"
+            required
+        />
+    </div>
+</template>
+
+<script setup>
+import PreferencesTextInput from '@/components/preferences/TextInput.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-encryption {
+}
+</style>

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

@@ -0,0 +1,153 @@
+<template>
+    <div v-if="config" class="preferences-storage">
+        <h2 class="section-title h1 mono">Storage Plugin</h2>
+
+        <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"
+                    >
+                        <!-- Inputs -->
+                        <text-input
+                            v-if="
+                                [
+                                    'text',
+                                    'email',
+                                    'password',
+                                    'number',
+                                ].includes(field.type)
+                            "
+                            v-model="config.adapters[plugin.id][field.key]"
+                            v-bind="field"
+                        />
+                        <directory-input
+                            v-else-if="field.type === 'directory'"
+                            v-model="config.adapters[plugin.id][field.key]"
+                            v-bind="field"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import DirectoryInput from '@/components/preferences/DirectoryInput.vue'
+import TextInput from '@/components/preferences/TextInput.vue'
+import usePlugins from '@/composables/usePlugins'
+import useConfig from '@/composables/useConfig'
+import { ref, computed, onMounted } from 'vue'
+
+const { plugins, setActivePlugin, testPlugin } = await usePlugins()
+const { config, ensureConfig } = useConfig()
+
+onMounted(async () => {
+    await ensureConfig()
+
+    // Make sure every plugin config has defaults set
+    const normalizeConfig = () => {
+        if (!config.value.adapters) {
+            config.value.adapters = {}
+        }
+
+        for (const plugin of plugins.value) {
+            if (!config.value.adapters[plugin.id]) {
+                config.value.adapters[plugin.id] = {}
+            }
+
+            for (const field of plugin.configSchema) {
+                if (config.value.adapters[plugin.id][field.key] === undefined) {
+                    config.value.adapters[plugin.id][field.key] =
+                        field.default ?? ''
+                }
+            }
+        }
+    }
+    normalizeConfig()
+})
+
+// Track selected plugin
+const selectedPluginId = ref(config.value.activeAdapter)
+const selectedPlugin = computed(() => {
+    return plugins.value.find((p) => p.id === selectedPluginId.value)
+})
+
+// Validation for parent
+const validate = async () => {
+    const plugin = selectedPlugin.value
+    const adapterConfig = config.value.adapters[plugin.id] || {}
+
+    if (plugin && plugin.configSchema.length) {
+        // Check required fields
+        for (const field of plugin.configSchema) {
+            if (field.required && !adapterConfig[field.key]) {
+                throw new Error(
+                    `Please fill in all required fields for ${plugin.name}`,
+                )
+            }
+        }
+
+        // Test connection
+        // const testResult = await testPlugin(plugin.id, adapterConfig)
+        // console.log(testResult)
+        // if (!testResult) {
+        //     validationError.value = `Failed to connect to ${plugin.name}`
+        // }
+    }
+
+    await setActivePlugin(selectedPluginId.value, adapterConfig)
+}
+
+defineExpose({ validate })
+</script>
+
+<style lang="scss">
+.preferences-storage {
+    .plugin {
+        display: flex;
+        margin-bottom: 16px;
+    }
+
+    input[type='radio'] {
+        display: block;
+        flex-shrink: 0;
+        width: 10px;
+        height: 10px;
+        margin-right: 10px;
+        border: 1px solid var(--theme-fg);
+        cursor: pointer;
+
+        &:checked {
+            background-color: var(--theme-fg);
+        }
+    }
+
+    .info {
+        .description {
+            color: var(--grey-100);
+            margin-top: 6px;
+        }
+    }
+
+    .config {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+    }
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+    <div class="preferences-text-input">
+        <label :for="key"> {{ label }}{{ required ? '*' : '' }} </label>
+
+        <input
+            v-model="model"
+            :id="key"
+            :type="type"
+            :placeholder="default"
+            :required="required"
+        />
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    label: String,
+    key: String,
+    required: Boolean,
+    type: String,
+    default: String,
+})
+
+const model = defineModel()
+</script>
+
+<style lang="scss">
+.preferences-text-input {
+    label {
+        display: block;
+        margin-bottom: 6px;
+    }
+    input {
+        width: 100%;
+        border: 1px solid var(--grey-100);
+        border-radius: 0.2em;
+        padding: 0.2em 0.5em;
+    }
+}
+</style>