Add support for Spanish

web/public/locales/en/common.json

@@ -108,7 +108,33 @@
     "languages": "Languages",
     "language": {
       "en": "English",
+      "es": "Español (Spanish)",
       "zhCN": "简体中文 (Simplified Chinese)",
+      "hi": "हिन्दी (Hindi)",
+      "fr": "Français (French)",
+      "ar": "العربية (Arabic)",
+      "pt": "Português (Portuguese)",
+      "ru": "Русский (Russian)",
+      "de": "Deutsch (German)",
+      "ja": "日本語 (Japanese)",
+      "tr": "Türkçe (Turkish)",
+      "it": "Italiano (Italian)",
+      "nl": "Nederlands (Dutch)",
+      "sv": "Svenska (Swedish)",
+      "cs": "Čeština (Czech)",
+      "nb": "Norsk Bokmål (Norwegian Bokmål)",
+      "ko": "한국어 (Korean)",
+      "vi": "Tiếng Việt (Vietnamese)",
+      "fa": "فارسی (Persian)",
+      "pl": "Polski (Polish)",
+      "uk": "Українська (Ukrainian)",
+      "he": "עברית (Hebrew)",
+      "el": "Ελληνικά (Greek)",
+      "ro": "Română (Romanian)",
+      "hu": "Magyar (Hungarian)",
+      "fi": "Suomi (Finnish)",
+      "da": "Dansk (Danish)",
+      "sk": "Slovenčina (Slovak)",
       "withSystem": {
         "label": "Use the system settings for language"
       }

web/src/components/menu/GeneralSettings.tsx

@@ -331,6 +331,24 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                       <span className="ml-6 mr-2">{t("menu.language.en")}</span>
                     )}
                   </MenuItem>
+                  <MenuItem
+                    className={
+                      isDesktop
+                        ? "cursor-pointer"
+                        : "flex items-center p-2 text-sm"
+                    }
+                    aria-label={t("menu.language.es")}
+                    onClick={() => setLanguage("es")}
+                  >
+                    {language === "es" ? (
+                      <>
+                        <LuLanguages className="mr-2 size-4" />
+                        {t("menu.language.es")}
+                      </>
+                    ) : (
+                      <span className="ml-6 mr-2">{t("menu.language.es")}</span>
+                    )}
+                  </MenuItem>
                   <MenuItem
                     className={
                       isDesktop

web/src/components/ui/calendar.tsx

@@ -1,19 +1,21 @@
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
-import { enUS, Locale, zhCN } from "date-fns/locale";
+import { enUS, Locale, zhCN, es } from "date-fns/locale";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import i18n from "@/utils/i18n";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-
 let locale: Locale;
-switch(i18n.language) {
+switch (i18n.language) {
   case "zh-CN":
     locale = zhCN;
     break;
+  case "es":
+    locale = es;
+    break;
   default:
     locale = enUS;
     break;