added a Toast on the main page to call for feedback

webclient/src/components/Toast.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    msg: string;
+    msg?: string;
     level?: "error" | "warning" | "info" | "default";
   }>(),
   { level: "default" },
@@ -15,10 +15,11 @@ const props = withDefaults(
     :class="{
       'text-red-900 bg-red-100 border-red-300': props.level === 'error',
       'text-orange-900 bg-orange-100 border-orange-300': props.level === 'warning',
-      'text-blue-900 bg-blue-100 border-blue-300': props.level === 'info',
+      'text-tumBlue-900 bg-tumBlue-100 border-tumBlue-300': props.level === 'info',
       'text-zinc-900 bg-zinc-100 border-zinc-300': props.level === 'default',
     }"
   >
+    <slot />
     {{ props.msg }}
   </div>
 </template>

webclient/src/pages/index.vue

@@ -8,15 +8,29 @@ import { ArrowRightIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from
 import { ref } from "vue";
 import Btn from "@/components/Btn.vue";
 import Spinner from "@/components/Spinner.vue";
+import Toast from "@/components/Toast.vue";
+import { useGlobalStore } from "@/stores/global";
 type RootResponse = components["schemas"]["RootResponse"];
 
 const { t } = useI18n({ useScope: "local" });
 const { data } = useFetch<RootResponse>(`/api/get/root`, (d) => setTitle(d.name));
 const openPanels = ref<(boolean | undefined)[]>([]);
+const global = useGlobalStore();
 </script>
 
 <template>
-  <div class="flex flex-row justify-between pt-8">
+  <div class="flex flex-col justify-between gap-3 pt-8">
+    <Toast level="info">
+      {{ t("toast.released_many_changes") }}
+      <Btn
+        variant="link"
+        size="ms-0 rounded-sm"
+        :aria-label="t('feedback.open')"
+        @click="global.openFeedback('general', t('toast.feedback_subject'), t('toast.feedback_body'))"
+      >
+        {{ t("toast.call_to_action") }}
+      </Btn>
+    </Toast>
     <div class="text-zinc-600 !text-lg font-semibold">{{ t("sites") }}</div>
     <!-- <a href="#" class="flex flex-row"><MapPinIcon class="h-4 w-4" /> {{ t("overview_map") }}</a> -->
   </div>
@@ -89,6 +103,18 @@ de:
   "Loading data...": Lädt daten...
   show_details_for_campus: show the details for the campus '{0}'
   show_details_for_building: show the details for the building '{0}'
+  toast:
+    released_many_changes: Wir haben vor ein paar Tagen eine neue Version unseres Frontends mit einer Vielzahl von Änderungen veröffentlicht.
+    feedback_subject: Feedback zum neuen Frontend
+    feedback_body: |
+      Es gefällt mir, dass:
+      - Detail 1
+      - Einzelheit 2
+
+      Ich denke, das sollte verbessert werden:
+      - Verbesserung 1
+      - Verbesserung 2
+    call_to_action: Gibt es etwas, das du nicht gut findest? Erzähle uns bitte davon!
 en:
   less: less
   less_aria: show more buildings
@@ -99,4 +125,16 @@ en:
   "Loading data...": Loading data...
   show_details_for_campus: show the details for the campus '{0}'
   show_details_for_building: show the details for the building '{0}'
+  toast:
+    released_many_changes: We have recently released a new version of our frontend with a ton of changes.
+    feedback_subject: Feedback about new Frontend
+    feedback_body: |
+      I like:
+      - detail 1
+      - detail 2
+
+      I think this should be improved:
+      - improvement 1
+      - improvement 2
+    call_to_action: Is there something you don't like? Please tell us about it!
 </i18n>