copyToClipboard(file.localPath)}
>
{file.localPath.split("/").pop()}
@@ -108,7 +108,7 @@ function FileTime({ file }: { file: TelegramFile }) {
+
{formatDistanceToNow(new Date(file.date * 1000), {
addSuffix: true,
})}
@@ -126,7 +126,7 @@ function FileTime({ file }: { file: TelegramFile }) {
+
{formatDistanceToNow(new Date(file.completionDate), {
addSuffix: true,
})}
diff --git a/web/src/components/file-list.tsx b/web/src/components/file-list.tsx
index 89a58d1..e512845 100644
--- a/web/src/components/file-list.tsx
+++ b/web/src/components/file-list.tsx
@@ -280,7 +280,7 @@ export function FileList({ accountId, chatId }: FileListProps) {
{isLoading && (
-
+
-
+
-
+
= ({ telegramId }) => {
// Render an error message if the API call fails
if (error) {
return (
-
+
@@ -87,7 +87,7 @@ const FileStatistics: React.FC
= ({ telegramId }) => {
// Render a loading indicator while the data is being fetched
if (!data) {
return (
-
+
= ({ telegramId }) => {
];
return (
-
-
+
+
-
+
Download Statistics
-
+
- Total Files
+
+ Total Files
+
-
-
+
Downloading
+
+ Downloading
+
-
-
+
-
-
+
Completed
+
+ Completed
+
-
-
-
-
-
+
+
+
Speed Statistics
- ({data.speedStats.interval / 60} minute interval)
+
+ ({data.speedStats.interval / 60} minute interval)
+
{avgStatFields.map((stat, index) => (
-
{stat.value}
+
+ {stat.value}
+
))}
-
-
+
+
Completed by Type
@@ -262,13 +277,15 @@ const FileStatistics: React.FC
= ({ telegramId }) => {
{completedTypes.map((type) => (
{type.icon}
- {type.label}
+
+ {type.label}
+
-
+
{type.value}
@@ -276,21 +293,21 @@ const FileStatistics: React.FC
= ({ telegramId }) => {
-
+
+
Network Statistics
-
+
+
{prettyBytes(data.networkStatistics.sentBytes)}
-
+
+
{prettyBytes(data.networkStatistics.receivedBytes)}
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
index 9977f02..ae62a00 100644
--- a/web/src/components/header.tsx
+++ b/web/src/components/header.tsx
@@ -34,6 +34,7 @@ import AutoDownloadDialog from "@/components/auto-download-dialog";
import useIsMobile from "@/hooks/use-is-mobile";
import { useState } from "react";
import { Button } from "@/components/ui/button";
+import ThemeToggleButton from "@/components/theme-toggle-button";
export function Header() {
const { isLoading, getAccounts, accountId, account, handleAccountChange } =
@@ -114,7 +115,7 @@ export function Header() {
)}
-
+
@@ -155,6 +156,8 @@ export function Header() {
)}
+
diff --git a/web/src/components/proxy-ping.tsx b/web/src/components/proxy-ping.tsx
index 5d2cfab..8a19924 100644
--- a/web/src/components/proxy-ping.tsx
+++ b/web/src/components/proxy-ping.tsx
@@ -22,7 +22,7 @@ export default function ProxyPing({ accountId }: { accountId: string }) {
{
if (isLoading) return;
void mutate(undefined, true);
@@ -30,12 +30,14 @@ export default function ProxyPing({ accountId }: { accountId: string }) {
>
{isLoading && (
-
+
)}
{!isLoading && error &&
Connection error }
{!isLoading && data && (
- {(data.ping * 1000).toFixed(0)} ms
+
+ {(data.ping * 1000).toFixed(0)} ms
+
)}
{enableSelect && (
-
+
handleProxySubmit()}
>
diff --git a/web/src/components/settings-form.tsx b/web/src/components/settings-form.tsx
index 2296431..ca924bc 100644
--- a/web/src/components/settings-form.tsx
+++ b/web/src/components/settings-form.tsx
@@ -51,14 +51,14 @@ export default function SettingsForm() {
className="flex h-full flex-col overflow-hidden"
>
-
+
Your root path
- Submit
+ Submit
);
diff --git a/web/src/components/telegram-icon.tsx b/web/src/components/telegram-icon.tsx
index 5710556..9f2c26b 100644
--- a/web/src/components/telegram-icon.tsx
+++ b/web/src/components/telegram-icon.tsx
@@ -1,10 +1,12 @@
+import { cn } from "@/lib/utils";
+
export default function TelegramIcon({ className }: { className?: string }) {
return (
Telegram
(false);
+
+ useEffect(() => {
+ setIsMounted(true);
+ }, []);
+
+ if (!isMounted) {
+ return null;
+ }
+
+ return {children} ;
+}
diff --git a/web/src/components/theme-toggle-button.tsx b/web/src/components/theme-toggle-button.tsx
new file mode 100644
index 0000000..82ad76d
--- /dev/null
+++ b/web/src/components/theme-toggle-button.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { Toggle } from "@/components/ui/toggle";
+import { Moon, Sun } from "lucide-react";
+import {useTheme} from "next-themes";
+
+export default function ThemeToggleButton() {
+ const { theme, setTheme } = useTheme();
+
+ return (
+
+
+ setTheme((prev) => (prev === "dark" ? "light" : "dark"))
+ }
+ aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+ >
+
+
+ );
+}
diff --git a/web/src/components/ui/toggle.tsx b/web/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..bd19696
--- /dev/null
+++ b/web/src/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+ "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+ {
+ variants: {
+ variant: {
+ default: "bg-transparent",
+ outline:
+ "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+ },
+ size: {
+ default: "h-10 px-3 min-w-10",
+ sm: "h-9 px-2.5 min-w-9",
+ lg: "h-11 px-5 min-w-11",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+const Toggle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, variant, size, ...props }, ref) => (
+