ABOCN/TelegramBot
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

add initial complete webui, more ai commands for moderation, add api

Browse source
This commit is contained in:
Aidan 2025-07-05 14:36:17 -04:00
parent 19e794e34c
commit 173d4e7a52
112 changed files with 8176 additions and 780 deletions
Download patch file Download diff file Expand all files Collapse all files

232
webui/components/app-sidebar.tsx Executable file
View file

@ -0,0 +1,232 @@
"use client";
import * as React from "react"
import {
Home,
MessageSquare,
Users,
Sparkles,
User,
Trash2,
LogOut
} from "lucide-react"
import Link from "next/link"
import Image from "next/image"
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar"
import { ThemeToggle } from "@/components/theme-toggle"
import { SiYoutube } from "react-icons/si"
import { RiTelegram2Line } from "react-icons/ri"
import { useAuth } from "@/contexts/auth-context"
import { Badge } from "@/components/ui/badge"
interface AccountItem {
title: string;
url: string;
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
danger?: boolean;
}
const navigation = [
{
title: "Home",
url: "/",
icon: Home,
},
{
title: "About",
url: "/about",
icon: MessageSquare,
},
]
const features = [
{
title: "AI Commands",
url: "/#ai-features",
icon: Sparkles,
},
{
title: "Video Download",
url: "/#youtube-features",
icon: SiYoutube,
},
{
title: "User Accounts & UI",
url: "/#user-features",
icon: Users,
},
]
export function AppSidebar() {
const { isAuthenticated, loading, logout } = useAuth();
const { setOpenMobile, isMobile } = useSidebar();
const handleMenuItemClick = () => {
if (isMobile) {
setOpenMobile(false);
}
};
const accountItems: AccountItem[] = React.useMemo(() => {
if (loading) {
return [];
}
if (isAuthenticated) {
return [
{
title: "My Account",
url: "/account",
icon: User,
},
{
title: "Logout",
url: "#",
icon: LogOut,
danger: true,
},
{
title: "Delete Account",
url: "/account/delete",
icon: Trash2,
danger: true,
},
];
} else {
return [
{
title: "Sign in with Telegram",
url: "/login",
icon: RiTelegram2Line,
},
];
}
}, [isAuthenticated, loading]);
return (
<Sidebar variant="inset">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<div className="flex flex-row justify-between gap-3">
<Link href="/" className="flex flex-row gap-2" onClick={handleMenuItemClick}>
<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary/10 p-1">
<Image
src="/kowalski.svg"
alt="Kowalski Logo"
width={20}
height={20}
className="dark:invert -mt-1"
/>
</div>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold text-lg">Kowalski</span>
</div>
</Link>
<Badge className="text-xs">Beta</Badge>
</div>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{navigation.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link href={item.url} onClick={handleMenuItemClick}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
{!loading && (
<SidebarGroup>
<SidebarGroupLabel>Account</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{accountItems.map((item) => (
<SidebarMenuItem key={item.title}>
{item.title === "Logout" ? (
<SidebarMenuButton
onClick={() => {
logout();
handleMenuItemClick();
}}
className={item.danger ? "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300" : ""}
>
<item.icon />
<span>{item.title}</span>
</SidebarMenuButton>
) : (
<SidebarMenuButton asChild>
<Link
href={item.url}
onClick={handleMenuItemClick}
className={item.danger ? "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300" : ""}
>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
)}
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
)}
<SidebarGroup>
<SidebarGroupLabel>Features</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{features.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<Link href={item.url} onClick={handleMenuItemClick}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<div className="flex items-center justify-end">
<ThemeToggle />
</div>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
)
}