welcome dialog; order UI facelift

src/components/OneTimeHint.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-tooltip v-model="show" :close-on-content-click="true"/>
+</template>
+
+<script setup>
+import {computed, ref} from "vue";
+import {usePrefStore} from "@/store/store.js";
+
+const prefs = usePrefStore()
+
+const modelValue = defineModel()
+const hasBeenShown = ref(false)
+
+const props = defineProps({
+  key: {type: String, required: true},
+  after: {type: String, default: null},
+})
+
+const show = computed({
+  get() {
+    const result = !prefs.hints[props.key] && modelValue.value && (props.after === null || prefs.hints[props.after])
+        && !props.finished
+    if (result)
+      hasBeenShown.value = true
+    else if (hasBeenShown.value)
+      prefs.hints[props.key] = true
+    return result
+  },
+  set(v) { if(!v) prefs.hints[props.key] = true}
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>