root/tgex-frontend
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: some ui updates

Browse Source
This commit is contained in:
ivannoskov
2026-01-07 15:46:30 +03:00
parent 3b6b97447b
commit 073be940b5
9 changed files with 840 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/layout/app-sidebar.tsx
View File

@@ -99,6 +99,7 @@ interface NavItem {
items?: {
title: string;
url: string;
icon?: LucideIcon;
}[];
}
@@ -325,6 +326,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
hasPermission,
isAdmin,
createWorkspace,
isDemoMode,
} = useWorkspace();
const { state: sidebarState } = useSidebar();
const isSidebarCollapsed = sidebarState === "collapsed";
@@ -422,10 +424,12 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
{
title: "По проектам",
url: buildRoute.analytics(workspaceId),
icon: Tv,
},
{
title: "По креативам",
url: buildRoute.analyticsCreatives(workspaceId),
icon: Folder,
},
],
});
@@ -777,7 +781,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
workspaces,
currentWorkspaceId: currentWorkspace?.id,
onSelect: (workspace) => handleWorkspaceSelect(workspace.id),
onCreate: () => setShowCreateDialog(true),
onCreate: isDemoMode ? undefined : () => setShowCreateDialog(true),
}}
/>
)}

60
components/nav-main.tsx
View File

@@ -45,6 +45,7 @@ export function NavMain({
items?: {
title: string;
url: string;
icon?: LucideIcon;
}[];
}[];
guideState?: NavGuideState;
@@ -79,7 +80,15 @@ export function NavMain({
isActive={isActive || hasActiveSubmenu}
className={cn(highlightedButtonClass)}
>
{item.icon && <item.icon />}
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
(isActive || hasActiveSubmenu) &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
@@ -94,13 +103,23 @@ export function NavMain({
<DropdownMenuItem key={subItem.title} asChild>
<Link
href={subItem.url}
className={
className={cn(
"flex items-center gap-2",
isSubActive
? "bg-accent text-accent-foreground"
: ""
}
)}
>
{subItem.title}
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4",
isSubActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
</DropdownMenuItem>
);
@@ -130,7 +149,15 @@ export function NavMain({
isActive={isActive || hasActiveSubmenu}
className={cn(highlightedButtonClass)}
>
{item.icon && <item.icon />}
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
(isActive || hasActiveSubmenu) &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
</SidebarMenuButton>
@@ -145,7 +172,16 @@ export function NavMain({
asChild
isActive={isSubActive}
>
<Link href={subItem.url}>
<Link href={subItem.url} className="flex items-center gap-2">
{subItem.icon && (
<subItem.icon
className={cn(
"h-4 w-4",
isSubActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{subItem.title}</span>
</Link>
</SidebarMenuSubButton>
@@ -162,8 +198,16 @@ export function NavMain({
isActive={isActive}
className={cn(highlightedButtonClass)}
>
<Link href={item.url}>
{item.icon && <item.icon />}
<Link href={item.url} className="flex items-center gap-2">
{item.icon && (
<item.icon
className={cn(
"h-4 w-4",
isActive &&
"text-[#2B1D49] dark:text-[#5F31F4]"
)}
/>
)}
<span>{item.title}</span>
</Link>
</SidebarMenuButton>

47
components/nav-user.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Building2, Check, LogOut, Plus } from "lucide-react";
import { Building2, Check, LogOut, Plus, Sparkles } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
@@ -19,6 +19,7 @@ import {
} from "@/components/ui/sidebar";
import { useAuth } from "@/components/auth/auth-provider";
import type { Workspace } from "@/lib/types/api";
import { DEMO_WORKSPACE_ID } from "@/lib/demo";
export function NavUser({
user,
@@ -104,21 +105,35 @@ export function NavUser({
Воркспейсы
</DropdownMenuLabel>
{workspaceSwitcher.workspaces.length > 0 ? (
workspaceSwitcher.workspaces.map((workspace) => (
<DropdownMenuItem
key={workspace.id}
onClick={() => workspaceSwitcher.onSelect(workspace)}
className="gap-2 p-2 text-sm"
>
<div className="flex size-6 items-center justify-center rounded-sm border">
<Building2 className="size-4 shrink-0" />
</div>
<span className="flex-1 truncate">{workspace.name}</span>
{workspaceSwitcher.currentWorkspaceId === workspace.id && (
<Check className="size-4 ml-auto" />
)}
</DropdownMenuItem>
))
workspaceSwitcher.workspaces.map((workspace) => {
const isDemo = workspace.id === DEMO_WORKSPACE_ID;
return (
<DropdownMenuItem
key={workspace.id}
onClick={() => workspaceSwitcher.onSelect(workspace)}
className="gap-2 p-2 text-sm"
>
<div className="flex size-6 items-center justify-center rounded-sm border">
{isDemo ? (
<Sparkles className="size-4 shrink-0 text-purple-500" />
) : (
<Building2 className="size-4 shrink-0" />
)}
</div>
<span className="flex-1 truncate">
{workspace.name}
{isDemo && (
<span className="ml-2 text-xs text-muted-foreground">
(Демо)
</span>
)}
</span>
{workspaceSwitcher.currentWorkspaceId === workspace.id && (
<Check className="size-4 ml-auto" />
)}
</DropdownMenuItem>
);
})
) : (
<div className="px-2 py-1.5 text-sm text-muted-foreground">
Нет доступных воркспейсов

25
components/providers/workspace-provider.tsx
View File

@@ -20,7 +20,8 @@ import type {
PermissionKey,
} from "@/lib/types/api";
import { STORAGE_KEYS } from "@/lib/utils/constants";
import { isDemoWorkspace, demoApi, demoWorkspace, demoProjects } from "@/lib/demo";
import { isDemoWorkspace, demoApi, demoWorkspace, demoProjects, DEMO_WORKSPACE_ID } from "@/lib/demo";
import { useAuth } from "@/components/auth/auth-provider";
// ============================================================================
// Types
@@ -96,6 +97,7 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
const params = useParams();
const router = useRouter();
const pathname = usePathname();
const { user } = useAuth();
// State
const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
@@ -170,12 +172,25 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
setIsLoading(true);
setError(null);
// Demo mode - use mock data
// Demo mode - use mock data, but also load real workspaces if user is logged in
if (isDemoMode) {
setWorkspaces([demoWorkspace]);
const allWorkspaces: Workspace[] = [demoWorkspace];
// If user is logged in, also load their real workspaces
if (user) {
try {
const response = await workspacesApi.list({ size: 100 });
allWorkspaces.push(...response.items);
} catch (err) {
// If loading real workspaces fails, just use demo workspace
console.warn("Failed to load real workspaces in demo mode:", err);
}
}
setWorkspaces(allWorkspaces);
setCurrentWorkspaceState(demoWorkspace);
setIsLoading(false);
return [demoWorkspace];
return allWorkspaces;
}
const response = await workspacesApi.list({ size: 100 });
@@ -218,7 +233,7 @@ export const WorkspaceProvider: React.FC<WorkspaceProviderProps> = ({
} finally {
setIsLoading(false);
}
}, [workspaceIdFromUrl, pathname, router, isDemoMode]);
}, [workspaceIdFromUrl, pathname, router, isDemoMode, user]);
// ============================================================================
// Load Projects & Permissions