new publishing flow - s3 compatible

src/main/index.js

@@ -1,6 +1,6 @@
 import 'dotenv/config'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, dialog } from 'electron'
 import filesystemPlugin from '@takerofnotes/plugin-filesystem'
 import supabasePlugin from '@takerofnotes/plugin-supabase'
 import s3Plugin from '@takerofnotes/plugin-s3'
@@ -137,6 +137,13 @@ app.whenReady().then(async () => {
         }
     })
 
+    ipcMain.handle('open-directory-dialog', async () => {
+        const result = await dialog.showOpenDialog({
+            properties: ['openDirectory'],
+        })
+        return result.canceled ? null : result.filePaths[0]
+    })
+
     electronApp.setAppUserModelId('com.electron')
 
     app.on('browser-window-created', (_, window) => {

src/preload/index.js

@@ -44,6 +44,9 @@ const api = {
     moveClosed: () => {
         ipcRenderer.invoke('move-closed')
     },
+    openDirectoryDialog: () => {
+        return ipcRenderer.invoke('open-directory-dialog')
+    },
 }
 
 if (process.contextIsolated) {

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

@@ -1,40 +1,58 @@
 <template>
     <div class="preferences-directory-input">
-        <input v-model="model" type="text" />
+        <label :for="key"> {{ label }}{{ required ? '*' : '' }} </label>
 
-        <button @click="openDirectoryPicker">Browse</button>
+        <div class="input-row">
+            <input
+                v-model="model"
+                :id="key"
+                type="text"
+                :placeholder="default"
+                :required="required"
+                readonly
+            />
 
-        <input
-            ref="fileInput"
-            type="file"
-            webkitdirectory
-            style="display: none"
-            @change="handleDirectoryChange"
-        />
+            <button @click="openDirectoryPicker" type="button">Browse</button>
+        </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+const props = defineProps({
+    label: String,
+    key: String,
+    required: Boolean,
+    default: String,
+})
 
 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
+const openDirectoryPicker = async () => {
+    const path = await window.api.openDirectoryDialog()
+    if (path) {
+        model.value = path
     }
 }
 </script>
 
 <style lang="scss">
 .preferences-directory-input {
+    label {
+        display: block;
+        margin-bottom: 6px;
+    }
+    .input-row {
+        display: flex;
+        gap: 8px;
+    }
+    input {
+        flex: 1;
+        border: 1px solid var(--grey-100);
+        border-radius: 0.2em;
+        padding: 0.2em 0.5em;
+    }
+    button {
+        padding: 0.2em 0.5em;
+    }
 }
 </style>

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

@@ -4,7 +4,7 @@
 
         <preferences-text-input
             v-model.trim="config.encryptionKey"
-            type="text"
+            type="password"
             label="Encryption Key"
             key="encryptionKey"
             required