fix: add functional language selection

nstr-dev · Sep 25, 2024 · d87ef04 · d87ef04
1 parent 9786724
commit d87ef04
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 972 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,6 +13,12 @@
     "components\\loadingscreen.tsx": [
       "\r\n            Grade\r\n            ",
       "\r\n            Calculator\r\n          "
+    ],
+    "components\\cookie-consent.tsx": [
+      "cookieConsent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"
+    ],
+    "components\\language-selection.tsx": [
+      "locale=${\r\n      selected?.key ?? \"en\"\r\n    }; expires=Fri, 31 Dec 9999 23:59:59 GMT"
     ]
   },
   "i18n-ally.extract.ignored": [

diff --git a/components/cookie-consent.tsx b/components/cookie-consent.tsx
@@ -2,6 +2,7 @@
 import { Highlight } from "@/components/ui/card-stack";
 import { cn } from "@/lib/utils";
 import { CheckIcon, CookieIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
@@ -11,6 +12,7 @@ export default function CookieConsent({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [hide, setHide] = useState(false);
+  const t = useTranslations();
 
   const accept = () => {
     setIsOpen(false);
@@ -57,17 +59,23 @@ export default function CookieConsent({
       <div className="bg-secondary rounded-md m-2">
         <div className="grid gap-2">
           <div className="border-b border-border h-14 flex items-center justify-between p-4">
-            <h1 className="text-lg font-medium">We use cookies</h1>
+            <h1 className="text-lg font-medium">
+              {t("cookie-policy.popup.title")}
+            </h1>
             <CookieIcon className="h-[1.2rem] w-[1.2rem]" />
           </div>
           <div className="p-4">
             <p className="text-sm font-normal">
-              We only use cookies{" "}
-              <Highlight colorName="yellow">necessary</Highlight> for this site
-              to work. For more information, please check{" "}
-              <Link href="/cookies" className="underline">
-                our cookie policy.
-              </Link>
+              {t.rich("cookie-policy.popup.description", {
+                highlight: (text) => (
+                  <Highlight colorName="yellow">{text}</Highlight>
+                ),
+                link: (text) => (
+                  <Link href="/cookies" className="underline">
+                    {text}
+                  </Link>
+                ),
+              })}
             </p>
           </div>
           <div className="flex gap-2 p-4 py-5 border-t border-border bg-background/20">

diff --git a/components/language-selection.tsx b/components/language-selection.tsx
@@ -15,9 +15,11 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { SheetDescription } from "@/components/ui/sheet";
 import { cn, truncateText } from "@/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check, ChevronsUpDown, LanguagesIcon, RefreshCw } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { isMobile } from "react-device-detect";
 
@@ -43,29 +45,37 @@ export function LanguageSelection({ className }: { className?: string }) {
     setSelected(findByKey(locale) ?? findByKey("en"));
   }, [locale]);
 
+  useEffect(() => {
+    if (selected?.key === undefined) return;
+    if (document.cookie.includes("locale=" + selected?.key)) return;
+
+    console.log("applying selected", selected);
+    document.cookie = `locale=${
+      selected?.key ?? "en"
+    }; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
+  }, [selected]);
+
   if (isDesktop) {
     return (
-      <div className="pt-4">
-        <Label>Language selection</Label>
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              className={cn("w-full justify-between", className)}
-            >
-              {selected?.name}
-              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-[200px] p-0" align="start">
-            <LanguageList
-              setOpen={setOpen}
-              selected={selected}
-              setSelected={setSelected}
-            />
-          </PopoverContent>
-        </Popover>
-      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className={cn("w-full justify-between", className)}
+          >
+            <LanguagesIcon className="mr-2 size-4" />
+            {selected?.name}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0" align="start">
+          <LanguageList
+            setOpen={setOpen}
+            selected={selected}
+            setSelected={setSelected}
+          />
+        </PopoverContent>
+      </Popover>
     );
   }
 
@@ -76,6 +86,7 @@ export function LanguageSelection({ className }: { className?: string }) {
         className={cn("w-full justify-between", className)}
       >
         <Button variant="outline">
+          <LanguagesIcon className="mr-2 size-4" />
           {selected?.name}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -133,3 +144,26 @@ function LanguageList({
     </Command>
   );
 }
+
+export function LanguageGroup() {
+  const t = useTranslations();
+  const router = useRouter();
+  return (
+    <div className="flex flex-col gap-3 my-4">
+      <Label>{t("generic.language")}</Label>
+      <SheetDescription>
+        {t("preferences.language.description")}
+      </SheetDescription>
+      <div className="flex-row flex w-full gap-3">
+        <LanguageSelection />
+        <Button
+          className="w-1/2"
+          variant={"secondary"}
+          onClick={() => router.refresh()}
+        >
+          <RefreshCw className="size-4 mr-2" /> {t("generic.reload")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/settings-modal.tsx b/components/settings-modal.tsx
@@ -7,7 +7,7 @@ import { AccountSection } from "@/components/account-section";
 import { CategoryGroup } from "@/components/category-group";
 import { ClearDataButton } from "@/components/clear-data-button";
 import { ImportExportButton } from "@/components/import-export-button";
-import { LanguageSelection } from "@/components/language-selection";
+import { LanguageGroup } from "@/components/language-selection";
 import { NewSemesterButton } from "@/components/new-semester-button";
 import { usePreferences } from "@/components/preferences-provider";
 import { ThemeSwitcher } from "@/components/theme-switcher";
@@ -682,7 +682,6 @@ export function SettingsModal({
                 </ClearDataButton>
                 <NewSemesterButton expanded />
                 <ViewArchiveButton />
-                <LanguageSelection />
               </div>
             </div>
             <Separator />
@@ -691,12 +690,13 @@ export function SettingsModal({
           <div className="my-5 flex-1 space-y-3">
             <NewSemesterButton />
             <ViewArchiveButton />
-            <LanguageSelection />
           </div>
         )}
         <Separator />
         <AccountSection />
         <Separator />
+        <LanguageGroup />
+        <Separator />
         <SettingsModalForm translations={translations} setOpen={setOpen} />
       </SheetContent>
     </Sheet>

diff --git a/i18n/request.ts b/i18n/request.ts
@@ -3,10 +3,6 @@ import { getRequestConfig } from "next-intl/server";
 import { cookies } from "next/headers";
 
 export default getRequestConfig(async () => {
-  // Provide a static locale, fetch a user setting,
-  // read from `cookies()`, `headers()`, etc.
-  // const locale = "en";
-  // const locale = "de";
   const locale = cookies().get("locale")?.value || "en";
 
   const userMessages = (await import(`../messages/${locale}.json`)).default;

diff --git a/messages/de.json b/messages/de.json
@@ -35,7 +35,9 @@
       "seconds": "{{count, plural, =1 {Sekunde} other {Sekunden}}}"
     },
     "true": "Wahr",
-    "yes": "Ja"
+    "yes": "Ja",
+    "language": "Sprache (Language)",
+    "reload": "Aktualisieren"
   },
   "grades": {
     "academic-relevance-title": "Relevant für die akademische Förderung",
@@ -176,7 +178,10 @@
     "passing-inverse": "Inverses Notensystem",
     "passing-inverse-description": "Wenn aktiviert, sind niedrigere Noten besser",
     "quick-settings": "Schnelleinstellungen",
-    "title": "Präferenzen"
+    "title": "Präferenzen",
+    "language": {
+      "description": "Diese Einstellung wird übernommen, sobald du die Seite aktualisierst (oder der Aktualisieren-Button betätigt wird)"
+    }
   },
   "privacy-policy": {
     "data-usage": {
@@ -382,6 +387,10 @@
       "nextauth-callback-url": "<code>next-auth.callback-url (session)</code>: Dieses Cookie wird verwendet, um nach der Anmeldung zur App zurückzuleiten.",
       "session-and-csrf-tokens": "<code>next-auth.csrf-token (session)</code> und <code>next-auth.session-token (persistent)</code>: Diese Cookies werden zur Authentifizierung verwendet.",
       "title": "Welche Cookies werden gespeichert?"
+    },
+    "popup": {
+      "description": "Wir verwenden nur Cookies, die <highlight>notwendig</highlight> sind, damit diese Website funktioniert. \nWeitere Informationen findest du in <link>unseren Cookie-Richtlinien</link>.",
+      "title": "Wir verwenden Cookies"
     }
   },
   "dashboard": {