feat(SharePage): enhance sharing functionality with theme and language support

Author: Im-Not-God

components/routes/FileManager.tsx

@@ -41,6 +41,8 @@ import {
   TimeFilter,
 } from "../../types";
 import {
+  CONFIG_STORAGE_KEY,
+  THEME_STORAGE_KEY,
   CHUNK_SIZE,
   formatBytes,
   t,
@@ -74,9 +76,6 @@ import { PendingFileItem } from "../PendingFileItem";
 import { FilterMenu } from "../FilterMenu";
 import { SortMenu } from "../SortMenu";
 
-const CONFIG_STORAGE_KEY = "telecloud_config";
-const THEME_STORAGE_KEY = "telecloud_theme";
-
 // Breadcrumb item type
 interface Breadcrumb {
   id: number | null;

components/routes/SharePage.tsx

@@ -1,8 +1,14 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Download, File as FileIcon, Loader2, AlertCircle } from "lucide-react";
 import { AppConfig, WorkerResponse } from "../../types";
 import { DEFAULT_WORKER_URL } from "../../types";
+import {
+  CONFIG_STORAGE_KEY,
+  THEME_STORAGE_KEY,
+  t,
+  DEFAULT_LANG,
+} from "../../constants";
 
 // Helper to decode the share payload
 // payload = base64(json({ w: workerUrl, f: fileId, n: fileName }))
@@ -21,6 +27,55 @@ export function SharePage() {
   const [searchParams] = useSearchParams();
   const shareParam = searchParams.get("s");
 
+  // Theme State
+  type Theme = "light" | "dark" | "system";
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem(THEME_STORAGE_KEY);
+    // Migration: if saved is boolean (old), convert to 'light'/'dark'
+    if (saved === "true") return "dark";
+    if (saved === "false") return "light";
+    // Remove quotes if they exist (JSON.stringify adds them)
+    const cleanSaved = saved ? saved.replace(/"/g, "") : null;
+    return (cleanSaved as Theme) || "system";
+  });
+  useEffect(() => {
+    const applyTheme = () => {
+      const isDark =
+        theme === "dark" ||
+        (theme === "system" &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+      if (isDark) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    };
+
+    applyTheme();
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = () => applyTheme();
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    }
+  }, [theme]);
+
+  // Lang
+  const [language, setLanguage] = useState(() => {
+    const saved = localStorage.getItem(CONFIG_STORAGE_KEY);
+    return saved
+      ? JSON.parse(saved).language
+      : (navigator.languages?.[0] || navigator.language).split("-")[0] ||
+          DEFAULT_LANG;
+  });
+  useEffect(() => {
+    document.documentElement.lang = language;
+    localStorage.setItem(CONFIG_STORAGE_KEY, JSON.stringify({ language }));
+  }, [language]);
+
   const result = React.useMemo(() => {
     if (!shareParam) {
       return { error: "Invalid share link: Missing parameters" };
@@ -69,7 +124,9 @@ export function SharePage() {
     return (
       <div className="flex flex-col items-center justify-center h-screen bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-white p-4">
         <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
-        <h1 className="text-xl font-bold mb-2">Error</h1>
+        <h1 className="text-xl font-bold mb-2">
+          {t(language, "share_error_title")}
+        </h1>
         <p className="text-slate-500 dark:text-slate-400">{result.error}</p>
       </div>
     );
@@ -93,20 +150,24 @@ export function SharePage() {
         <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2 break-all">
           {result.fileInfo.fileName}
         </h2>
-        <p className="text-slate-500 dark:text-slate-400 mb-8">Shared File</p>
+        <p className="text-slate-500 dark:text-slate-400 mb-8">
+          {t(language, "share_file_label")}
+        </p>
 
         <a
           href={result.fileInfo.downloadUrl}
           className="block w-full py-4 bg-telegram-500 hover:bg-telegram-600 text-white rounded-xl font-bold text-lg shadow-lg shadow-telegram-500/20 transition-all transform hover:-translate-y-1 active:translate-y-0"
         >
           <div className="flex items-center justify-center gap-2">
             <Download className="w-6 h-6" />
-            Download
+            {t(language, "share_download_button")}
           </div>
         </a>
 
         <div className="mt-8 pt-6 border-t border-slate-100 dark:border-slate-700">
-          <p className="text-xs text-slate-400">Hosted via TeleCloud</p>
+          <p className="text-xs text-slate-400">
+            {t(language, "share_footer_hostedVia")}
+          </p>
         </div>
       </div>
     </div>

constants.ts

@@ -3,6 +3,9 @@ import ReactHtmlParser from "html-react-parser";
 
 export const TELEGRAM_API_BASE = "https://api.telegram.org";
 
+export const CONFIG_STORAGE_KEY = "telecloud_config";
+export const THEME_STORAGE_KEY = "telecloud_theme";
+
 export const CHUNK_SIZE = 20 * 1024 * 1024; // 20mb
 
 export const formatBytes = (bytes: number, decimals = 2) => {
@@ -180,6 +183,18 @@ export const translations = {
     filter_time_custom: "Custom Range",
     filter_custom_from: "From",
     filter_custom_to: "To",
+    share_error_title: "Error",
+    share_error_missingParams: "Invalid share link: Missing parameters",
+    share_error_malformedData: "Invalid share link: Malformed data",
+    share_loading: "Loading shared file…",
+    share_file_label: "Shared File",
+    share_download_button: "Download",
+    share_footer_hostedVia: "Hosted via TeleCloud",
+    share_error_generic: "Something went wrong",
+    share_error_expired: "This share link has expired",
+    share_error_notFound: "File not found",
+    share_error_permissionDenied:
+      "You do not have permission to access this file",
   },
   zh: {
     app_title: "TeleCloud",
@@ -315,6 +330,17 @@ export const translations = {
     filter_time_custom: "自定义范围",
     filter_custom_from: "从",
     filter_custom_to: "到",
+    share_error_title: "错误",
+    share_error_missingParams: "无效的分享链接：缺少参数",
+    share_error_malformedData: "无效的分享链接：数据格式错误",
+    share_loading: "正在加载分享文件…",
+    share_file_label: "已分享的文件",
+    share_download_button: "下载",
+    share_footer_hostedVia: "由 TeleCloud 提供",
+    share_error_generic: "发生未知错误",
+    share_error_expired: "该分享链接已失效",
+    share_error_notFound: "文件不存在",
+    share_error_permissionDenied: "你没有权限访问该文件",
   },
 };