Skip to content

feat: move Workspaces and Worker Logs to sidebar bottom section #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
trepechov wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: move Workspaces and Worker Logs to sidebar bottom section #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59b5bb9
feat: move Workspaces and Worker Logs to sidebar bottom
trepechov Apr 9, 2026
0650836
fix: address PR review issues in Sidebar
trepechov Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
310 changes: 248 additions & 62 deletions apps/webapp/app/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,56 @@
"use client";

import md5 from "md5";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useSidebar } from "./SidebarContext";
import { useEffect, useRef, useState } from "react";
import { trpc } from "../../utils/trpc";
import md5 from "md5";
import { useSidebar } from "./SidebarContext";

const dashboardIconPath =
"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6";
const uploadIconPath =
"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12";
const editorIconPath =
"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z";
const chatIconPath =
"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z";
const dataSourcesIconPath =
"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4";
const workspacesIconPath =
"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10";
const workerLogsIconPath =
"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z";
const profileSettingsIconPath =
"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z";
const profileSettingsUserIconPath = "M15 12a3 3 0 11-6 0 3 3 0 016 0z";
const logoutIconPath =
"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1";

const navItems = [
{ href: "/dashboard", label: "Dashboard", icon: dashboardIconPath },
{ href: "/upload", label: "Upload Files", icon: uploadIconPath },
{ href: "/editor", label: "Editor", icon: editorIconPath },
{ href: "/chat", label: "Chat", icon: chatIconPath },
{ href: "/data-sources", label: "Data Sources", icon: dataSourcesIconPath },
];

const bottomQuickActions = [
{ id: "workspaces", href: "/workspaces", label: "Workspaces", iconPath: workspacesIconPath },
{ id: "worker-logs", href: "/worker-logs", label: "Worker Logs", iconPath: workerLogsIconPath },
];

const getGravatarUrl = (email: string, size: number = 80) => {
const hash = md5(email.toLowerCase().trim());
return `https://www.gravatar.com/avatar/${hash}?s=${size}&d=identicon`;
};

const navItems = [
{ href: "/dashboard", label: "Dashboard", icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" },
{ href: "/upload", label: "Upload Files", icon: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" },
{ href: "/editor", label: "Editor", icon: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" },
{ href: "/chat", label: "Chat", icon: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" },
{ href: "/workspaces", label: "Workspaces", icon: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" },
{ href: "/worker-logs", label: "Worker Logs", icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" },
{ href: "/data-sources", label: "Data Sources", icon: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" },
];

export function Sidebar() {
const pathname = usePathname();
const router = useRouter();
const { isCollapsed, setIsCollapsed } = useSidebar();
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const profileMenuRef = useRef<HTMLDivElement | null>(null);

const { data: userData } = trpc.auth.me.useQuery();
const logoutMutation = trpc.auth.logout.useMutation({
Expand All @@ -39,17 +65,73 @@ export function Sidebar() {

const isActive = (path: string) => pathname === path;

useEffect(() => {
if (!isProfileMenuOpen) return;

const onMouseDown = (event: MouseEvent) => {
const target = event.target as Node | null;
if (!target) return;
if (profileMenuRef.current?.contains(target)) return;
setIsProfileMenuOpen(false);
};

const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") setIsProfileMenuOpen(false);
};

document.addEventListener("mousedown", onMouseDown);
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("mousedown", onMouseDown);
document.removeEventListener("keydown", onKeyDown);
};
}, [isProfileMenuOpen]);

if (!userData?.user) return null;

const user = userData.user;

const profileMenuItems = (
<>
<Link
role="menuitem"
href="/profile"
onClick={() => setIsProfileMenuOpen(false)}
className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-mono transition-colors ${
isActive("/profile") ? "bg-primary/10 text-primary" : "hover:bg-base-200"
}`}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={profileSettingsIconPath} />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={profileSettingsUserIconPath} />
</svg>
<span>Profile Settings</span>
</Link>
<button
role="menuitem"
type="button"
onClick={() => {
setIsProfileMenuOpen(false);
handleLogout();
}}
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-mono hover:bg-error/10 hover:text-error transition-colors"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={logoutIconPath} />
</svg>
<span>Logout</span>
</button>
</>
);

return (
<aside
className={`h-full min-h-screen bg-base-100 border-r border-base-300 transition-all duration-300 ease-in-out flex flex-col pt-16
${isCollapsed ? "w-24" : "w-72"}
`}
style={{
backgroundImage: 'radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 70%)',
backgroundImage:
"radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.03) 0%, transparent 70%)",
}}
>
{/* Collapse Toggle Button - Desktop only */}
Expand All @@ -64,7 +146,12 @@ export function Sidebar() {
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M15 19l-7-7 7-7" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={3}
d="M15 19l-7-7 7-7"
/>
</svg>
</button>

Expand All @@ -74,8 +161,18 @@ export function Sidebar() {
className="lg:hidden btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
aria-label="Close menu"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</label>

Expand All @@ -90,29 +187,37 @@ export function Sidebar() {
className={`
group relative flex items-center gap-4 px-4 py-3.5 rounded-lg
transition-all duration-200 font-mono text-sm
${active
? "bg-primary/10 text-primary shadow-sm border border-primary/20"
: "hover:bg-base-200 text-base-content/70 hover:text-base-content border border-transparent"
${
active
? "bg-primary/10 text-primary shadow-sm border border-primary/20"
: "hover:bg-base-200 text-base-content/70 hover:text-base-content border border-transparent"
}
${isCollapsed ? "justify-center" : ""}
`}
title={isCollapsed ? item.label : undefined}
>
{/* Icon */}
<svg
className={`flex-shrink-0 transition-all duration-200 ${
className={`shrink-0 transition-all duration-200 ${
active ? "w-6 h-6" : "w-5 h-5 group-hover:w-6 group-hover:h-6"
}`}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d={item.icon}
/>
</svg>

{/* Label */}
{!isCollapsed && (
<span className={`font-medium ${active ? "font-semibold" : ""}`}>
<span
className={`font-medium ${active ? "font-semibold" : ""}`}
>
{item.label}
</span>
)}
Expand All @@ -130,55 +235,136 @@ export function Sidebar() {
<div className="mt-auto border-t border-base-300">
{!isCollapsed ? (
<div className="p-3">
{/* Profile Info */}
<div className="flex items-center gap-3 p-3 rounded-lg bg-base-200/50 mb-2">
<img
src={getGravatarUrl(user.email)}
alt={user.username}
className="w-10 h-10 rounded-full ring-2 ring-primary/20"
/>
<div className="flex-1 min-w-0">
<p className="text-sm font-semibold font-mono text-base-content truncate">
{user.username}
</p>
<p className="text-xs text-base-content/60 font-mono truncate">
{user.email}
</p>
</div>
{/* Bottom Quick Actions */}
<div className="space-y-1">
{bottomQuickActions.map((action) => {
const active = isActive(action.href);
const baseClass =
"flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-mono transition-colors";
const className = `${baseClass} ${
active ? "bg-primary/10 text-primary" : "hover:bg-base-200"
}`;

const icon = (
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d={action.iconPath}
/>
</svg>
);

return (
<Link
key={action.id}
href={action.href}
className={className}
>
{icon}
<span>{action.label}</span>
</Link>
);
})}
</div>

{/* Profile Actions */}
<div className="space-y-1">
<Link
href="/profile"
className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-mono hover:bg-base-200 transition-colors"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span>Profile Settings</span>
</Link>
{/* Profile Card (last) */}
<div className="relative mt-2" ref={profileMenuRef}>
<button
onClick={handleLogout}
className="w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-mono hover:bg-error/10 hover:text-error transition-colors"
type="button"
onClick={() => setIsProfileMenuOpen((v) => !v)}
className="w-full flex items-center gap-3 p-3 rounded-lg bg-base-200/50 hover:bg-base-200 transition-colors"
aria-haspopup="menu"
aria-expanded={isProfileMenuOpen}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
<img
src={getGravatarUrl(user.email)}
alt={user.username}
className="w-10 h-10 rounded-full ring-2 ring-primary/20"
/>
<div className="flex-1 min-w-0 text-left">
<p className="text-sm font-semibold font-mono text-base-content truncate">
{user.username}
</p>
<p className="text-xs text-base-content/60 font-mono truncate">
{user.email}
</p>
</div>
<svg
className="w-4 h-4 opacity-60"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
<span>Logout</span>
</button>

{isProfileMenuOpen && (
<div
role="menu"
className="absolute bottom-full left-0 mb-2 w-full rounded-lg border border-base-300 bg-base-100 shadow-xl p-1 z-50"
>
{profileMenuItems}
</div>
)}
</div>
</div>
) : (
// Collapsed state - just show avatar
<div className="p-3 flex justify-center">
<img
src={getGravatarUrl(user.email)}
alt={user.username}
className="w-10 h-10 rounded-full ring-2 ring-primary/20 cursor-pointer hover:ring-primary/40 transition-all"
title={user.username}
/>
<div className="p-3 flex flex-col items-center gap-2">
{/* Bottom Quick Actions */}
{bottomQuickActions.map((action) => {
const active = isActive(action.href);
const baseClass = "btn btn-ghost btn-sm btn-circle";
const className = `${baseClass} ${active ? "text-primary" : ""}`;

const icon = (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={action.iconPath} />
</svg>
);

return (
<Link key={action.id} href={action.href} className={className} title={action.label}>
{icon}
</Link>
);
})}

{/* Profile Card (last) */}
<div className="relative mt-1" ref={profileMenuRef}>
<button
type="button"
onClick={() => setIsProfileMenuOpen((v) => !v)}
className="rounded-full ring-2 ring-primary/20 hover:ring-primary/40 transition-all"
title={user.username}
aria-label={user.username}
aria-haspopup="menu"
aria-expanded={isProfileMenuOpen}
>
<img
src={getGravatarUrl(user.email)}
alt={user.username}
className="w-10 h-10 rounded-full"
/>
</button>

{isProfileMenuOpen && (
<div
role="menu"
className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-52 rounded-lg border border-base-300 bg-base-100 shadow-xl p-1 z-50"
>
{profileMenuItems}
</div>
)}
</div>
</div>
)}
</div>
Expand Down
Loading
Loading