From 0b335e80a6c752ae24f2db9a6047c048596879d6 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Fri, 11 Jul 2025 22:54:03 +0200
Subject: [PATCH] first help dialog draft

---
 vue3/src/apps/tandoor/Tandoor.vue             |  4 +-
 vue3/src/components/dialogs/HelpDialog.vue    | 70 +++++++++++++++----
 .../components/dialogs/VClosableCardTitle.vue | 12 ++--
 vue3/src/pages/HelpPage.vue                   |  5 --
 4 files changed, 68 insertions(+), 23 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index df14b1ee7..57e79b75b 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -144,8 +144,9 @@
             <template #append>
                 <v-list nav>
                     <v-list-item prepend-icon="fas fa-sliders" :title="$t('Settings')" :to="{ name: 'SettingsPage', params: {} }"></v-list-item>
-                    <v-list-item prepend-icon="fa-solid fa-heart" href="https://tandoor.dev" target="_blank">
+                    <v-list-item prepend-icon="fa-solid fa-heart" link>
                         Tandoor {{ useUserPreferenceStore().serverSettings.version }}
+                         <help-dialog></help-dialog>
                     </v-list-item>
                 </v-list>
             </template>
@@ -199,6 +200,7 @@ import {useDjangoUrls} from "@/composables/useDjangoUrls";
 import {onMounted} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
 import {useMediaQuery} from "@vueuse/core";
+import HelpDialog from "@/components/dialogs/HelpDialog.vue";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()
diff --git a/vue3/src/components/dialogs/HelpDialog.vue b/vue3/src/components/dialogs/HelpDialog.vue
index 0568b8705..a4725cbd0 100644
--- a/vue3/src/components/dialogs/HelpDialog.vue
+++ b/vue3/src/components/dialogs/HelpDialog.vue
@@ -1,18 +1,30 @@
 <template>
 
-    <v-dialog height="70vh" activator="parent">
+    <v-dialog height="70vh" activator="parent" v-model="dialog">
         <v-card>
-            <v-closable-card-title v-model="dialog" :title="$t('Help')" icon="fa-solid fa-question"></v-closable-card-title>
+            <v-closable-card-title v-model="dialog" :title="$t('Help')" icon="fa-solid fa-question">
+                <template #content>
+                    <div class="d-flex align-center">
+
+                        <v-btn variant="text" icon="fa-solid fa-bars" @click.stop="drawer = !drawer"></v-btn>
+                        <span>{{ $t('Help') }}</span>
+                    </div>
+                </template>
+            </v-closable-card-title>
             <v-divider></v-divider>
             <v-card-text class="pa-0">
                 <v-layout style="height: 100%">
-                    <v-navigation-drawer style="height: calc(100% + 0px)">
-                        <v-list-item>
-                            <v-text-field density="compact" variant="outlined" class="pt-2 pb-2" :label="$t('Search')" hide-details clearable ></v-text-field>
-                        </v-list-item>
-                        <v-divider></v-divider>
-                        <v-list-item link title="Start" @click="window = 'start'"></v-list-item>
-                        <v-list-item link title="Test" @click="window = 'test'"></v-list-item>
+
+                    <v-navigation-drawer style="height: calc(100% + 0px)" v-model="drawer">
+                        <v-list>
+
+                            <v-list-item>
+                                <v-text-field density="compact" variant="outlined" class="pt-2 pb-2" :label="$t('Search')" hide-details clearable></v-text-field>
+                            </v-list-item>
+                            <v-divider></v-divider>
+                            <v-list-item link title="Start" @click="window = 'start'"></v-list-item>
+                            <v-list-item link title="Space" @click="window = 'space'"></v-list-item>
+                        </v-list>
 
                     </v-navigation-drawer>
 
@@ -20,10 +32,43 @@
                         <v-container>
                             <v-window v-model="window">
                                 <v-window-item value="start">
-                                    Start
+                                    <h2>Welcome to Tandoor 2</h2>
+                                    <p class="mt-3">Tandoor is one of the most most powerful recipe management suits available. It has constantly been improved since its first
+                                        version in 2018.
+                                        This knowledgebase explains all important features and concepts. Explore it to find out how Tandoor can help you improve your daily cooking
+                                        routine or search
+                                        for specific features to help you understand them.</p>
+
+                                    <p class="mt-3">Some of the most important concepts are Spaces, Recipes, Foods and Units.</p>
+
+                                    <v-alert class="mt-3" border="start" variant="tonal" color="success">
+                                        <v-alert-title>Did you know?</v-alert-title>
+                                        Tandoor is Open Source and available to anyone for free to host on their own server. Thousands of hours have been spend
+                                        making Tandoor what it is today. You can help make Tandoor even better by contributing or helping financing the effort.
+                                        <br/>
+                                        <v-btn class="mt-2" href="https://docs.tandoor.dev/contribute/contribute/" target="_blank" prepend-icon="fa-solid fa-code-branch">
+                                            Contribute
+                                        </v-btn>
+                                        <v-btn class="mt-2 ms-2" href="https://github.com/sponsors/vabene1111" target="_blank" prepend-icon="fa-solid fa-dollar-sign">Sponsor
+                                        </v-btn>
+                                    </v-alert>
+
                                 </v-window-item>
-                                <v-window-item value="test">
-                                    Test
+                                <v-window-item value="space">
+                                    <p class="mt-3">All your data is stored in a Space where you can invite other people to collaborate on your recipe database. Typcially the members of a space
+                                        belong to one family/household/organization.</p>
+
+                                    <p class="mt-3">While everyone can access all recipes by default, Books, Shopping Lists and Mealplans are not shared by default. You can share them with other members of your space
+                                        using the settings.
+                                    </p>
+                                    <p class="mt-3">You can create and be a member of multiple spaces. Switch between them freely using the navigation or space settings. Depending
+                                        on the permission configured by the space owner you might not have access to all features of a space.</p>
+                                    <p class="mt-3"></p>
+
+                                    <v-btn color="primary" variant="tonal" prepend-icon="fa-solid fa-database" class="me-2" :to="{name: 'UserSpaceSettings'}">{{ $t('YourSpaces') }}</v-btn>
+                                    <v-btn color="primary" variant="tonal" prepend-icon="$settings" class="me-2" :to="{name: 'SpaceSettings'}">{{ $t('SpaceSettings') }}</v-btn>
+                                    <v-btn color="primary" variant="tonal" prepend-icon="fa-solid fa-users" class="me-2" :to="{name: 'SpaceMemberSettings'}">{{ $t('Invites') }}</v-btn>
+
                                 </v-window-item>
                             </v-window>
                         </v-container>
@@ -43,6 +88,7 @@ import {ref} from "vue";
 
 const dialog = ref(false)
 const window = ref('start')
+const drawer = ref(true)
 
 </script>
 
diff --git a/vue3/src/components/dialogs/VClosableCardTitle.vue b/vue3/src/components/dialogs/VClosableCardTitle.vue
index edc83d68c..25407adbd 100644
--- a/vue3/src/components/dialogs/VClosableCardTitle.vue
+++ b/vue3/src/components/dialogs/VClosableCardTitle.vue
@@ -1,10 +1,12 @@
 <template>
-    <v-card-title class="pb-0">
+    <v-card-title class="pb-1 pt-1 pl-1 pr-1">
         <v-row align="center">
-            <v-col cols="10" md="11" class="text-truncate">
-                <i :class="props.icon" v-if="props.icon != ''"></i>
-                {{ props.title }}
-                <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle }}</v-card-subtitle>
+            <v-col cols="10" md="11" class="text-truncate pt-0 pb-0">
+                <slot name="content">
+                    <i :class="props.icon" v-if="props.icon != ''"></i>
+                    {{ props.title }}
+                    <v-card-subtitle class="pa-0" v-if="props.subTitle != ''">{{ props.subTitle }}</v-card-subtitle>
+                </slot>
             </v-col>
             <v-col cols="2" md="1">
                 <v-btn class="float-right pr-2" icon="$close" variant="plain" @click="model = false; emit('close')" v-if="!props.hideClose"></v-btn>
diff --git a/vue3/src/pages/HelpPage.vue b/vue3/src/pages/HelpPage.vue
index 8ce257eab..691279cea 100644
--- a/vue3/src/pages/HelpPage.vue
+++ b/vue3/src/pages/HelpPage.vue
@@ -14,11 +14,6 @@
             </v-col>
         </v-row>
 
-        <v-btn>
-            Test Dialog
-            <help-dialog></help-dialog>
-        </v-btn>
-
         <v-row>
             <v-col>
                 <v-expansion-panels>