feat: more options

src/components/FileEditor.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Button from 'primevue/button';
+import * as path from '@tauri-apps/api/path';
+import { open } from '@tauri-apps/plugin-dialog';
+import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
+import { invoke } from '../invoke';
+
+const props = defineProps({
+    filename: String,
+    promptname: String,
+    extension: String,
+});
+
+const exists = ref(false);
+const contents = ref('');
+const enabled = ref(false);
+const target_path = ref('');
+
+const load = async (p: string) => {
+    try {
+        contents.value = await readTextFile(p);
+        exists.value = true;
+    } catch (_) {
+        exists.value = false;
+    }
+};
+
+const save = async () => {
+    if (target_path.value.length > 0) {
+        await writeTextFile(target_path.value, contents.value);
+    }
+};
+
+const filePick = async () => {
+    const p = await open({
+        multiple: false,
+        directory: false,
+        filters:
+            props.promptname && props.extension
+                ? [
+                      {
+                          name: props.promptname,
+                          extensions: [props.extension],
+                      },
+                  ]
+                : [],
+    });
+    if (p != null) {
+        await load(p);
+        await save();
+    }
+};
+
+(async () => {
+    const profileDir: string = await invoke('get_current_profile_dir');
+
+    if (props.filename === undefined) {
+        throw new Error('FileEditor without a filename');
+    }
+
+    target_path.value = await path.join(profileDir, props.filename);
+    await load(target_path.value);
+})();
+</script>
+
+<template>
+    <Button v-if="!exists" icon="pi pi-plus" size="small" @click="filePick" />
+    <div v-else>
+        <Button
+            v-if="exists"
+            icon="pi pi-pen-to-square"
+            size="small"
+            @click="enabled = true"
+        />
+        <div v-if="enabled" class="backdrop">
+            <textarea
+                class="primitive-editor"
+                @vue:mounted="$event.el.focus()"
+                @input="(event) => (contents = (event.target as any).value)"
+                @focusout="
+                    save();
+                    enabled = false;
+                "
+                >{{ contents }}</textarea
+            >
+        </div>
+    </div>
+</template>
+
+<style lang="css">
+.backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 900;
+    width: 100vw;
+    background-color: rgba(1, 1, 1, 0.7);
+    height: 100vh;
+}
+
+.primitive-editor {
+    font-family: monospace;
+    white-space: nowrap;
+    position: fixed;
+    top: 10vh;
+    left: 10vw;
+    height: 80vh;
+    width: 80vw;
+    z-index: 1000;
+    background-color: #151515;
+    color: #ddd;
+}
+</style>