Skip to content

Commit c9e0d55

Browse files
hugotiburtinohugotiburtino
authored
Merge pull request #136 from edufeed-org/faq
feat: Add FAQ
2 parents 53d5c98 + fe39790 commit c9e0d55

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

‎src/routes/cardsboard/FAQDialog.svelte‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<script lang="ts">
2+
/**
3+
* FAQ Dialog
4+
* Zeigt häufig gestellte Fragen zur Anwendung
5+
*/
6+
7+
import * as Dialog from "$lib/components/ui/dialog/index.js";
8+
import { Button } from "$lib/components/ui/button/index.js";
9+
import { Separator } from "$lib/components/ui/separator/index.js";
10+
import HelpCircleIcon from "@lucide/svelte/icons/help-circle";
11+
import ExternalLinkIcon from "@lucide/svelte/icons/external-link";
12+
13+
let { open = $bindable(false) }: { open?: boolean } = $props();
14+
15+
const faqs = [
16+
{
17+
question: "Was ist dieses Kanban-Board?",
18+
answer: "Das Kanban-Board ist ein Tool zur visuellen Unterrichtsplanung für Lehrkräfte. Es kombiniert klassisches Kanban mit KI-Unterstützung und dezentraler Nostr-Technologie. Du kannst Ideen sammeln, strukturieren und mit anderen teilen – alles offline-fähig und datenschutzfreundlich."
19+
},
20+
{
21+
question: "Wie funktioniert die KI-Integration?",
22+
answer: "Die KI kann deine Boards verstehen und bearbeiten. Du kannst per Chat Spalten erstellen, Karten hinzufügen und verschieben usw. Erst konfiguriere die KI auf Dein Username > Applikation > KI-Anbindung."
23+
},
24+
{
25+
question: "Wie teile ich ein Board mit anderen?",
26+
answer: "Klicke auf 'Teilen' und dann 'Link für Beobachter'. Andere können diesen Link nutzen, um das Board zu öffnen, vorausgesetzt, du hast es als 'veröffentlicht' markiert (siehe Einstellungen)."
27+
},
28+
{
29+
question: "Wie können andere an einem Board von mir mitarbeiten?",
30+
answer: "Klicke auf 'Teilen' und dann 'Schreiberechte zuweisen'. Kopiere dann den npub-Schlüssel der/des Mitarbeitenden hinein und klicke auf 'Hinzufügen'. Das Board soll dann automatisch auf der Boardliste des/der Mitarbeitenden erscheinen"
31+
},
32+
{
33+
question: "Funktioniert das Board auch offline?",
34+
answer: "Ja! Das Board ist offline-first. Alle Änderungen werden lokal gespeichert. Sobald du wieder online bist, werden deine Daten automatisch mit den Servers synchronisiert."
35+
},
36+
{
37+
question: "Was ist der Unterschied zwischen 'veröffentlicht' und 'privat'?",
38+
answer: "'Published' Boards werden auf Nostr-Relays veröffentlicht und sind für andere sichtbar (wenn sie den Link haben). 'Private' Boards bleiben ausschließlich lokal auf deinem Gerät gespeichert."
39+
},
40+
{
41+
question: "Kann ich Boards exportieren/importieren?",
42+
answer: "Ja! Nutze das Import/Export-Feature im Board-Menü. Du kannst Boards als JSON-Datei herunterladen und auf anderen Geräten oder mit anderen Personen teilen. Beim Import kannst du wählen, ob du bestehende Boards ersetzen oder zusammenführen möchtest."
43+
},
44+
{
45+
question: "Oh Gott ich habe das Board gelöscht, wie bekomme ich es wieder?",
46+
answer: "Hoffentlich hast du es als json-Datei vorher exportiert, ansonsten ist es jetzt weg. Wenn du es exportiert hast und jetzt importierst, bekommst du eine Kopie des Boards, d.h. Kollaboratoren müssen wieder eingeladen werden"
47+
},
48+
{
49+
question: "Was sind Snapshots und wofür sind sie gut?",
50+
answer: "Snapshots sind automatische Sicherungspunkte deines Boards. Das System erstellt regelmäßig Momentaufnahmen, sodass du bei Bedarf zu früheren Versionen zurückkehren kannst - perfekt bei versehentlichen Löschungen von Karten oder zum Vergleich verschiedener Planungsstände."
51+
}
52+
];
53+
54+
const quickLinks = [
55+
{
56+
label: "Dokumentation",
57+
url: "https://github.com/edufeed-org/kanban-editor/tree/cardsboard/docs/MANUAL#readme"
58+
},
59+
{
60+
label: "Agent-Architektur",
61+
url: "https://github.com/edufeed-org/kanban-editor/blob/cardsboard/docs/ARCHITECTURE/AGENT/README.md"
62+
},
63+
{
64+
label: "Onboarding-Tool",
65+
url: "https://edufeed-org.github.io/onboarding-tool/"
66+
}
67+
];
68+
</script>
69+
70+
<Dialog.Root bind:open>
71+
<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
72+
<Dialog.Header>
73+
<div class="flex items-center gap-2">
74+
<HelpCircleIcon class="h-5 w-5 text-primary" />
75+
<Dialog.Title>Häufig gestellte Fragen (FAQ)</Dialog.Title>
76+
</div>
77+
<Dialog.Description>
78+
Hier findest du Antworten auf die wichtigsten Fragen zur Nutzung des Kanban-Boards.
79+
</Dialog.Description>
80+
</Dialog.Header>
81+
82+
<div class="space-y-4 py-4">
83+
<div class="space-y-4">
84+
{#each faqs as faq, index}
85+
<div class="space-y-2">
86+
<h4 class="text-sm font-semibold flex items-start gap-2">
87+
<span class="text-primary">{index + 1}.</span>
88+
{faq.question}
89+
</h4>
90+
<p class="text-sm text-muted-foreground pl-6">
91+
{faq.answer}
92+
</p>
93+
{#if index < faqs.length - 1}
94+
<Separator class="mt-3" />
95+
{/if}
96+
</div>
97+
{/each}
98+
</div>
99+
100+
<Separator class="my-6" />
101+
102+
<div>
103+
<h4 class="mb-3 text-sm font-semibold">Weitere Ressourcen</h4>
104+
<div class="flex flex-wrap gap-2">
105+
{#each quickLinks as link}
106+
<Button
107+
variant="outline"
108+
size="sm"
109+
onclick={() => window.open(link.url, "_blank")}
110+
class="gap-2"
111+
>
112+
{link.label}
113+
<ExternalLinkIcon class="h-3 w-3" />
114+
</Button>
115+
{/each}
116+
</div>
117+
</div>
118+
119+
<div class="mt-4 rounded-lg bg-muted/50 p-4 text-sm">
120+
<p class="mb-2 font-medium">Noch Fragen?</p>
121+
<p class="text-muted-foreground">
122+
Besuche unsere <a
123+
href="https://github.com/edufeed-org/kanban-editor/tree/cardsboard/docs/MANUAL#readme"
124+
target="_blank"
125+
rel="noreferrer"
126+
class="underline underline-offset-4 hover:text-foreground"
127+
>
128+
vollständige Dokumentation
129+
</a> oder öffne ein Issue auf GitHub.
130+
</p>
131+
</div>
132+
</div>
133+
134+
<Dialog.Footer>
135+
<Button variant="outline" onclick={() => (open = false)}>Schließen</Button>
136+
</Dialog.Footer>
137+
</Dialog.Content>
138+
</Dialog.Root>

‎src/routes/cardsboard/LeftSidebarFooter.svelte‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
import SettingsDialog from "./SettingsDialog.svelte";
1616
import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
1717
import RelayStatusInfo from "./RelayStatusInfo.svelte";
18+
import FAQDialog from "./FAQDialog.svelte";
1819
import LogInIcon from "@lucide/svelte/icons/log-in";
1920
import LogOutIcon from "@lucide/svelte/icons/log-out";
2021
import PlayIcon from "@lucide/svelte/icons/play";
@@ -26,6 +27,7 @@
2627
import FileTextIcon from "@lucide/svelte/icons/file-text";
2728
import BookIcon from "@lucide/svelte/icons/book";
2829
import InfoIcon from "@lucide/svelte/icons/info";
30+
import HelpCircleIcon from "@lucide/svelte/icons/help-circle";
2931
import { ProfileEditor } from '$lib/components/auth/index.js';
3032
3133
@@ -44,6 +46,7 @@
4446
let uiSettingsOpen = $state(false);
4547
let llmSettingsOpen = $state(false);
4648
let defaultsSettingsOpen = $state(false);
49+
let faqDialogOpen = $state(false);
4750
4851
// Demo-Error Message
4952
let demoErrorMessage = $state<string | null>(null);
@@ -172,6 +175,14 @@
172175
<InfoIcon class="h-4 w-4" />
173176
<span>Über</span>
174177
</DropdownMenu.Item>
178+
<DropdownMenu.Separator />
179+
<DropdownMenu.Item
180+
onclick={() => faqDialogOpen = true}
181+
class="gap-2 editor-menu-item"
182+
>
183+
<HelpCircleIcon class="h-4 w-4" />
184+
<span>FAQ</span>
185+
</DropdownMenu.Item>
175186
</DropdownMenu.SubContent>
176187
</DropdownMenu.Sub>
177188

@@ -234,6 +245,9 @@
234245
<!-- Login Dialog -->
235246
<LoginDialog bind:open={loginDialogOpen} />
236247

248+
<!-- FAQ Dialog -->
249+
<FAQDialog bind:open={faqDialogOpen} />
250+
237251
<ProfileEditor
238252
open={showProfileEditor}
239253
onClose={() => showProfileEditor = false}

0 commit comments

Comments
 (0)