Preferences config WIP

out/main/index.js

@@ -168,7 +168,6 @@ app.whenReady().then(async () => {
       return await adapter[method](...args);
     });
     broadcastNoteChange("plugin-changed", pluginId);
-    console.log("activePlugin: ", pluginId);
     return true;
   };
   await setActivePlugin(initialConfig.activeAdapter);

src/renderer/src/components/note/Editor.vue

@@ -116,7 +116,8 @@ onBeforeUnmount(() => {
         font-weight: 700;
     }
     p em {
-        font-style: italic;
+        /* font-style: italic; */
+        color: var(--grey-100);
     }
     hr {
         border: 1px dashed currentColor;

src/renderer/src/content/instructions.md

@@ -0,0 +1,28 @@
+Medieval Translation
+
+Nota = Note
+Capitulum = Category
+Intructio = Instructions
+Tabula = Index/Overview
+
+\*This can be disabled via toolbar
+
+---
+
+Program Key Commands
+
+cmd + s = save
+cmd + t = new capitulum
+cmd + n = new nota
+cmd + x = close window
+dbl click = change name / open nota
+paste hyperlink twice = activated url
+
+---
+
+Text Markdowns
+
+cmd + b = Bold
+cmd + u = underline
+--- = ---------- (ruled line break)
+/_text_/ = Desaturated text

src/renderer/src/views/Preferences.vue

@@ -12,10 +12,29 @@
                 :id="plugin.id"
                 :value="plugin.id"
             />
-            <label :for="plugin.id">
+            <div class="info">
                 <p class="name bold">{{ plugin.name }}</p>
                 <p class="description">{{ plugin.description }}</p>
-            </label>
+
+                <form v-if="plugin.configSchema.length" class="config">
+                    <div
+                        v-for="field in plugin.configSchema"
+                        class="config-field"
+                        :key="field.key"
+                    >
+                        <label :for="field.key">
+                            {{ field.label }}
+                        </label>
+                        <input
+                            v-model="config.adapters[plugin.id][field.key]"
+                            :id="field.key"
+                            :type="field.type"
+                            :placeholder="field.default"
+                            :required="field.required"
+                        />
+                    </div>
+                </form>
+            </div>
         </div>
     </main>
 </template>
@@ -23,20 +42,16 @@
 <script setup>
 import usePlugins from '@/composables/usePlugins'
 import useConfig from '@/composables/useConfig'
-import { ref, onMounted, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const { plugins, setActivePlugin } = await usePlugins()
 const { config, ensureConfig } = useConfig()
+await ensureConfig()
 
-const activePluginId = ref(plugins.value[0].id)
+const activePluginId = ref(config.value.activeAdapter)
 
-onMounted(async () => {
-    await ensureConfig()
-    activePluginId.value = config.value.activeAdapter
-
-    watch(activePluginId, async (id) => {
-        await setActivePlugin(id)
-    })
+watch(activePluginId, async (id) => {
+    await setActivePlugin(id)
 })
 </script>
 
@@ -52,7 +67,7 @@ onMounted(async () => {
     }
 
     h1 {
-        margin-bottom: 15px;
+        margin-bottom: 20px;
     }
 
     .plugin {
@@ -74,13 +89,30 @@ onMounted(async () => {
         }
     }
 
-    label {
-        cursor: pointer;
-
+    .info {
         .description {
             color: var(--grey-100);
             margin-top: 6px;
         }
     }
+
+    .config {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+    }
+    .config-field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        input {
+            width: 100%;
+            border: 1px solid var(--grey-100);
+            border-radius: 0.2em;
+            padding: 0.2em 0.5em;
+        }
+    }
 }
 </style>