add translations

frontend/components/deck/DeckList.tsx

@@ -65,7 +65,6 @@ export default function DeckList({
 				))}
 				{Children.map(children, (child) => {
 					if (!isValidElement(child)) return null;
-
 					return child;
 				})}
 			</div>

frontend/components/input/ActionBar.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
-import { ChangeEventHandler, MouseEventHandler, useState } from "react";
-import { ChevronRight, ChevronsUp, PlusSquare } from "react-feather";
+import { ChangeEventHandler, MouseEventHandler } from "react";
+import { ChevronsUp, PlusSquare } from "react-feather";
 
 import { SpeechBubble } from "./SpeechBubble";
 import { SpeechBubbleContent } from "./SpeechBubbleContent";

frontend/components/input/SpeechBubble.tsx

@@ -1,17 +1,8 @@
 import clsx from "clsx";
 import React, { Children, MouseEventHandler, isValidElement } from "react";
-import { JSXElementConstructor, ReactElement, ReactNode } from "react";
-import { ChevronUp } from "react-feather";
+import { ReactNode } from "react";
 
 interface SpeechBubbleProps {
-	/**
-	 * Value
-	 */
-	// value: ReactNode;
-	// /**
-	//  * Parent
-	//  */
-	// parent: ReactNode;
 	/**
 	 * Align
 	 */
@@ -38,8 +29,6 @@ interface SpeechBubbleProps {
  * UI component for displaying a Speech Bubble
  */
 export const SpeechBubble = ({
-	// value,
-	// parent,
 	align,
 	className = "",
 	show,
@@ -77,15 +66,15 @@ export const SpeechBubble = ({
 				<div className="absolute left-1/2 top-[100%] z-10 h-0 w-0 -translate-x-1/2 self-center border-b-[1rem] border-l-[0.75rem] border-r-[0.75rem] border-t-0 border-transparent border-b-black">
 					<div
 						className={clsx(
-							" absolute h-0 w-[50vw] translate-y-[0.75rem] sm:w-[50vw] md:w-[35vw] lg:w-[25vw] xl:w-[25vw] 2xl:w-[20vw]",
+							"absolute h-0 w-[50vw] translate-y-[0.75rem] sm:w-[50vw] md:w-[35vw] lg:w-[25vw] xl:w-[25vw] 2xl:w-[20vw]",
 							align === "center" && "left-1/2 -translate-x-1/2",
 							align === "left" && "-left-8 ",
 							align === "right" && "-right-8"
 						)}
 					>
 						<div
 							className={clsx(
-								"  w-fit min-w-[30%] max-w-full space-y-2 rounded-lg border-b border-l border-r border-neutral-100  bg-black  p-3 text-sm text-white",
+								"w-fit min-w-[30%] max-w-full space-y-2 rounded-lg border-b border-l border-r border-neutral-100 bg-black p-3 text-sm text-white",
 								align === "center" && "mx-auto",
 								align === "left" && "mr-auto",
 								align === "right" && "ml-auto"

frontend/components/navigation/Tabs/DashboardTab.tsx

@@ -1,10 +1,7 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { ChangeEvent, MouseEvent } from "react";
 
 import DeckList from "@/components/deck/DeckList";
-import { ActionBar } from "@/components/input/ActionBar";
-import { SpeechBubble } from "@/components/input/SpeechBubble";
 import { GenericPlaceholder } from "@/components/placeholders/GenericPlaceholder";
 import { useActiveDecks, useFavoriteDecks } from "@/util/swr";
 
@@ -28,17 +25,21 @@ export const DashboardTab = ({ className = "" }: DashboardTabProps) => {
 			<DeckList header={_(msg`Active Decks`)} decks={activeDecks}>
 				{activeDecks?.length === 0 && (
 					<GenericPlaceholder
-						title="Start learning!"
-						description="If you start learning, your active decks will appear here."
+						title={_(msg`Start learning!`)}
+						description={_(
+							msg`If you start learning, your active decks will appear here.`
+						)}
 						iconName="Activity"
 					></GenericPlaceholder>
 				)}
 			</DeckList>
 			<DeckList header={_(msg`Favorite Decks`)} decks={favoriteDecks}>
 				{favoriteDecks?.length === 0 && (
 					<GenericPlaceholder
-						title="Find your favorites!"
-						description="Click on the heart icon in the top right corner of a deck to add it to this list."
+						title={_(msg`Find your favorites!`)}
+						description={_(
+							msg`Click on the heart icon in the top right corner of a deck to add it to this list.`
+						)}
 						iconName="Heart"
 					></GenericPlaceholder>
 				)}

frontend/components/navigation/Tabs/DecksTab.tsx

@@ -1,11 +1,9 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { useState } from "react";
-import { PlusSquare } from "react-feather";
 
 import DeckList from "@/components/deck/DeckList";
 import { ActionBar } from "@/components/input/ActionBar";
-import { SpeechBubble } from "@/components/input/SpeechBubble";
 import { CreateDeckModal } from "@/components/modal/CreateDeckModal";
 import { GenericPlaceholder } from "@/components/placeholders/GenericPlaceholder";
 import { Group as GroupType } from "@/types/Group";
@@ -58,14 +56,16 @@ export const DecksTab = ({ group }: DecksTabProps) => {
 					onHide={() => {
 						setShowTutorial(false);
 					}}
-					tutorialText="Click here to add a new deck."
+					tutorialText={_(msg`Click here to add a new deck.`)}
 				/>
 				<DeckList decks={decks} filter={filter} reverse={reverse}>
 					{decks?.length === 0 && (
 						<GenericPlaceholder
-							title="No decks yet :("
-							description="Click on the plus icon to create your first deck!"
-							buttonText="Show me how"
+							title={_(msg`No decks yet :(`)}
+							description={_(
+								msg`Click on the plus icon to create your first deck!`
+							)}
+							buttonText={_(msg`Show me how`)}
 							iconName="Meh"
 							onClick={() => setShowTutorial(true)}
 						></GenericPlaceholder>

frontend/components/navigation/Tabs/GroupsTab.tsx

@@ -1,6 +1,6 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { MouseEvent, useState } from "react";
+import { useState } from "react";
 
 import GroupList from "@/components/group/GroupList";
 import { ActionBar } from "@/components/input/ActionBar";
@@ -56,9 +56,11 @@ export const GroupsTab = ({ groups, className = "" }: GroupsTabProps) => {
 				<GroupList groups={groups} filter={filter} reverse={reverse}>
 					{groups?.length === 1 && (
 						<GenericPlaceholder
-							title="No decks yet :("
-							description="Click on the plus icon to create your first deck!"
-							buttonText="Show me how"
+							title={_(msg`No decks yet :(`)}
+							description={_(
+								msg`Click on the plus icon to create your first deck!`
+							)}
+							buttonText={_(msg`Show me how`)}
 							iconName="Meh"
 							onClick={() => {
 								setShowTutorial(true);

frontend/components/placeholders/GenericPlaceholder.tsx

@@ -46,19 +46,18 @@ export const GenericPlaceholder = ({
 	return (
 		<div {...props} className={className}>
 			<div
-				className="flex min-h-[6.5rem] w-full flex-row gap-x-4 rounded-md border-2 border-dashed border-neutral-300 bg-gradient-to-l to-60% p-3	  hover:from-neutral-50 sm:min-h-28 md:min-h-32 lg:min-h-32
+				className="flex min-h-[6.5rem] w-full flex-row gap-x-4 rounded-md border-2 border-dashed border-neutral-300 bg-gradient-to-l to-60% p-3 hover:from-neutral-50 sm:min-h-28 md:min-h-32 lg:min-h-32
 			 "
 			>
 				<div className="flex self-center rounded-md bg-neutral-100 p-4">
 					<Icon
 						icon={iconName}
-						className=" mx-auto size-10
-					self-center stroke-neutral-600 stroke-2  p-0"
+						className=" mx-auto size-10 self-center stroke-neutral-600 stroke-2 p-0"
 					/>
 				</div>
 				<div className="flex w-full flex-col gap-1 self-center text-neutral-800">
-					<Text className=" text-base font-bold ">{title}</Text>
-					<Text className=" text-sm font-light">{description}</Text>
+					<Text className="text-base font-bold">{title}</Text>
+					<Text className="text-sm font-light">{description}</Text>
 					{buttonText && (
 						<button
 							onClick={onClick}

frontend/locales/de/messages.po

@@ -53,21 +53,17 @@ msgstr "Verfügbar"
 msgid "Back to Deck!"
 msgstr "Zurück zum Stapel!"
 
-#: components/modal/CreateCardModal.tsx:76
+#: components/modal/CreateCardModal.tsx:73
 #: components/modal/CreateDeckModal.tsx:91
 #: components/modal/CreateGroupModal.tsx:79
 msgid "Cancel"
 msgstr "Abbrechen"
 
-#: components/modal/CreateCardModal.tsx:59
+#: components/modal/CreateCardModal.tsx:56
 msgid "Card back"
 msgstr "Kartenrückseite"
 
-#: components/modal/CreateCardModal.tsx:113
-msgid "Card created!"
-msgstr "Karte erstellt!"
-
-#: components/modal/CreateCardModal.tsx:47
+#: components/modal/CreateCardModal.tsx:44
 msgid "Card front"
 msgstr "Kartenvorderseite"
 
@@ -93,10 +89,23 @@ msgstr "Ändere, wie andere der Gruppe beitreten können"
 msgid "Click again"
 msgstr "Nochmal klicken"
 
+#: components/navigation/Tabs/DecksTab.tsx:59
+msgid "Click here to add a new deck."
+msgstr "Klicke hier, um einen neuen Stapel zu erstellen."
+
 #: components/modal/InstallPWAModal.tsx:139
 msgid "Click on \"Add page to\""
 msgstr "Klicke auf \"Seite hinzufügen zu\""
 
+#: components/navigation/Tabs/DashboardTab.tsx:41
+msgid "Click on the heart icon in the top right corner of a deck to add it to this list."
+msgstr "Klicke auf das Herz Icon in der oberen rechten Ecke eines Stapels, um ihn dieser Liste hinzufügen."
+
+#: components/navigation/Tabs/DecksTab.tsx:66
+#: components/navigation/Tabs/GroupsTab.tsx:61
+msgid "Click on the plus icon to create your first deck!"
+msgstr "Klicke auf das Plus Icon, um deinen ersten Stapel zu erstellen!"
+
 #: pages/features.tsx:72
 msgid "Collaborate with your friends and fellow students in groups and work on shared decks. Learn together and motivate each other!"
 msgstr "Arbeite mit Deinen Freunden und Kommilitonen in Gruppen zusammen und bearbeitet gemeinsam eure Stapel. Lernt zusammen und motiviert Euch gegenseitig!"
@@ -117,7 +126,7 @@ msgstr "Glückwunsch!"
 msgid "Create and customize your own flashcards tailored to your needs and preferences. Set your own pace with our spaced repetition system to maximize your potential!"
 msgstr "Erstelle und individualisiere Karteikarten, die genau auf Deine Bedürfnisse und Vorlieben zugeschnitten sind. Bestimme Dein eigenes Tempo mit unserem Spaced Repetition System, um Dein Potenzial zu maximieren!"
 
-#: components/modal/CreateCardModal.tsx:87
+#: components/modal/CreateCardModal.tsx:90
 msgid "Create Card"
 msgstr "Karte erstellen"
 
@@ -129,7 +138,7 @@ msgstr "Stapel erstellen"
 msgid "Create Group"
 msgstr "Gruppe erstellen"
 
-#: components/modal/CreateCardModal.tsx:37
+#: components/modal/CreateCardModal.tsx:34
 msgid "Create new Card"
 msgstr "Neue Karte erstellen"
 
@@ -219,11 +228,11 @@ msgstr "Einfach"
 msgid "Email"
 msgstr "E-Mail"
 
-#: components/modal/CreateCardModal.tsx:61
+#: components/modal/CreateCardModal.tsx:58
 msgid "Enter card back"
 msgstr "Kartenrückseite eingeben"
 
-#: components/modal/CreateCardModal.tsx:50
+#: components/modal/CreateCardModal.tsx:47
 msgid "Enter card front"
 msgstr "Kartenvorderseite eingeben"
 
@@ -267,10 +276,14 @@ msgstr "Jeder kann anfragen, dieser Gruppe beizutreten"
 msgid "Everyone has to be invited to join this group"
 msgstr "Jeder muss eingeladen werden, um der Gruppe beizutreten"
 
-#: components/navigation/Tabs/DashboardTab.tsx:26
+#: components/navigation/Tabs/DashboardTab.tsx:36
 msgid "Favorite Decks"
 msgstr "Favoriten"
 
+#: components/navigation/Tabs/DashboardTab.tsx:39
+msgid "Find your favorites!"
+msgstr "Finde deine Favoriten!"
+
 #: components/statistics/StatisticOverview.tsx:31
 #: components/statistics/StatisticOverview.tsx:46
 msgid "from"
@@ -315,6 +328,10 @@ msgstr "Erfolgsquote"
 msgid "How to install Kioku"
 msgstr "So installiert man Kioku"
 
+#: components/navigation/Tabs/DashboardTab.tsx:30
+msgid "If you start learning, your active decks will appear here."
+msgstr "Wenn du anfängst zu lernen, werden deine aktiven Stapel hier erscheinen."
+
 #: pages/features.tsx:77
 msgid "Individual"
 msgstr "Individuell"
@@ -380,6 +397,11 @@ msgstr "Mittel"
 msgid "Minimum {passwordMinLength} characters"
 msgstr "Mindestens {passwordMinLength} Zeichen"
 
+#: components/navigation/Tabs/DecksTab.tsx:64
+#: components/navigation/Tabs/GroupsTab.tsx:59
+msgid "No decks yet :("
+msgstr "Noch keine Stapel :("
+
 #: components/navigation/Tabs/UserSettingsTab.tsx:94
 msgid "Notifications"
 msgstr "Benachrichtigungen"
@@ -442,15 +464,15 @@ msgstr "Anfrage ausstehend"
 msgid "Save"
 msgstr "Speichern"
 
-#: components/input/ActionBar.tsx:36
+#: components/input/ActionBar.tsx:52
 msgid "Search"
 msgstr "Suchen"
 
-#: components/navigation/Tabs/DecksTab.tsx:43
+#: components/navigation/Tabs/DecksTab.tsx:44
 msgid "Search decks..."
 msgstr "Stapel suchen..."
 
-#: components/navigation/Tabs/GroupsTab.tsx:39
+#: components/navigation/Tabs/GroupsTab.tsx:41
 msgid "Search groups..."
 msgstr "Gruppe suchen..."
 
@@ -476,6 +498,11 @@ msgstr "Wähle \"Installieren\""
 msgid "Settings"
 msgstr "Einstellungen"
 
+#: components/navigation/Tabs/DecksTab.tsx:68
+#: components/navigation/Tabs/GroupsTab.tsx:63
+msgid "Show me how"
+msgstr "Zeig mir wie"
+
 #: pages/login.tsx:205
 msgid "Sign in"
 msgstr "Einloggen"
@@ -504,6 +531,10 @@ msgstr "Da der Samsung Internet Browser PWAs nicht vollständig unterstützt, em
 msgid "so that we can support even more devices in the future. We recommend using Chrome on Android and Safari on iOS for the best experience."
 msgstr "gemeldet wird, damit wir in Zukunft noch mehr Geräte unterstützen können. Wir empfehlen die Verwendung von Chrome auf Android und Safari auf iOS für die beste Erfahrung."
 
+#: components/navigation/Tabs/DashboardTab.tsx:28
+msgid "Start learning!"
+msgstr "Fang an zu lernen!"
+
 #: pages/home.tsx:53
 msgid "Start your learning journey today with Kioku - the cloud native flashcard application that focusses on collaborative content creation"
 msgstr "Starte Deine Lernreise noch heute mit Kioku - der cloudbasierten Karteikarten Anwendung, die sich auf die kollaborative Erstellung von Lerninhalten konzentriert."