mirror of
https://github.com/Sea-Haven-Industries/open-swe.git
synced 2026-10-05 07:12:12 +00:00
9754c2d791
* Make dashboard UI mobile-friendly - Drop the thread title/repo header on the agent chat view. - Expanded sidebar becomes a full-screen overlay on mobile (<768px) instead of a squished column; resize handle hidden. - Default to collapsed on mobile first load so the chat stays visible; navigating a link/thread auto-collapses the overlay. * Fix settings rows and run cards overflowing on small screens - SettingsRow stacks label/control vertically below sm; reduce AppShell padding on mobile. - Truncate long model/repo names in AgentRunCard metadata so cards stay within bounds. * Keep collapsed-sidebar button from overlapping page titles on mobile * Render page titles below the sidebar button on mobile instead of indenting * Don't persist mobile auto-close to localStorage, preserving desktop preference --------- Co-authored-by: open-swe[bot] <215916821+open-swe[bot]@users.noreply.github.com>
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import {
|
|
IoArrowBackOutline,
|
|
IoCloudOutline,
|
|
IoGitPullRequestOutline,
|
|
IoOptionsOutline,
|
|
IoSettingsOutline,
|
|
} from "react-icons/io5";
|
|
import type { ComponentType, SVGProps } from "react";
|
|
|
|
import type { SessionUser } from "@/lib/api";
|
|
import { SidebarUserMenu } from "@/components/SidebarUserMenu";
|
|
import {
|
|
SidebarCollapseButton,
|
|
SidebarFrame,
|
|
useSidebarLayout,
|
|
} from "@/components/sidebar-layout";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type IconType = ComponentType<SVGProps<SVGSVGElement>>;
|
|
|
|
interface NavItem {
|
|
to: string;
|
|
label: string;
|
|
icon: IconType;
|
|
adminOnly?: boolean;
|
|
}
|
|
|
|
const NAV: Array<NavItem> = [
|
|
{ to: "/my-settings", label: "Profile Settings", icon: IoOptionsOutline },
|
|
{ to: "/cloud-agents", label: "Open SWE Agent", icon: IoCloudOutline },
|
|
{ to: "/review", label: "Open SWE Review", icon: IoGitPullRequestOutline },
|
|
{ to: "/admin", label: "Admin", icon: IoSettingsOutline, adminOnly: true },
|
|
];
|
|
|
|
export function AppSidebar({ user }: { user: SessionUser }) {
|
|
const layout = useSidebarLayout();
|
|
return (
|
|
<SidebarFrame {...layout} className="border-r border-border bg-sidebar text-sidebar-foreground">
|
|
<div className="flex items-center justify-between px-4 pt-5 pb-4">
|
|
<Link
|
|
to="/my-settings"
|
|
className="flex items-center gap-2 font-heading text-sm font-medium tracking-tight"
|
|
>
|
|
<img src="/logo-mark.png" alt="" className="size-5" />
|
|
open-swe
|
|
</Link>
|
|
<SidebarCollapseButton onToggle={layout.toggle} />
|
|
</div>
|
|
|
|
<nav className="flex flex-1 flex-col gap-0.5 px-2">
|
|
<Link
|
|
to="/agents"
|
|
onClick={layout.closeOnMobile}
|
|
className={cn(
|
|
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-xs/relaxed text-muted-foreground transition-colors",
|
|
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
)}
|
|
>
|
|
<IoArrowBackOutline className="size-4" />
|
|
<span>Back to Agents</span>
|
|
</Link>
|
|
{NAV.filter((n) => !n.adminOnly || user.is_admin).map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
onClick={layout.closeOnMobile}
|
|
className={cn(
|
|
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-xs/relaxed text-muted-foreground transition-colors",
|
|
"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
)}
|
|
activeProps={{
|
|
className: "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
|
|
}}
|
|
>
|
|
<Icon className="size-4" />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-2">
|
|
<SidebarUserMenu user={user} />
|
|
</div>
|
|
</SidebarFrame>
|
|
);
|
|
}
|