jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-03 07:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polish desktop navigation chrome (#1238)

Browse Source
This commit is contained in:
klopez4212
2026-06-24 20:54:05 +01:00
committed by GitHub
parent 2e426b2fdd
commit 092546495d
26 changed files with 198 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
desktop/src/shared/ui/ViewLoadingFallback.tsx
View File

@@ -1,9 +1,8 @@
import { Card } from "@/shared/ui/card";
import { Skeleton } from "@/shared/ui/skeleton";
import { cn } from "@/shared/lib/cn";
import { channelChrome, topChromeInset } from "@/shared/layout/chromeLayout";
import { channelChrome } from "@/shared/layout/chromeLayout";
import { TopChromeInsetHeader } from "@/shared/layout/TopChromeInsetHeader";
import { TopChromeBackdrop } from "@/shared/ui/TopChromeBackdrop";
type ViewLoadingFallbackKind =
| "agents"
@@ -21,16 +20,18 @@ type ViewLoadingFallbackProps = {
function LoadingHeaderSkeleton() {
return (
<TopChromeInsetHeader data-tauri-drag-region flush>
<header className="flex min-h-14 min-w-0 cursor-default select-none items-center gap-2.5 px-5 py-2">
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-center gap-1 overflow-hidden">
<Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
<Skeleton className="h-4 w-28 max-w-[50vw]" />
<header className="min-w-0 cursor-default select-none px-5 py-2">
<div className="flex h-9 min-w-0 items-center gap-2.5">
<div className="min-w-0 flex-1">
<div className="flex min-w-0 items-center gap-1 overflow-hidden">
<Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
<Skeleton className="h-4 w-28 max-w-[50vw]" />
</div>
</div>
<div className="hidden shrink-0 items-center gap-1 sm:flex">
<Skeleton className="h-8 w-16 rounded-lg" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
</div>
<div className="hidden shrink-0 items-center gap-1 sm:flex">
<Skeleton className="h-8 w-16 rounded-lg" />
<Skeleton className="h-8 w-8 rounded-lg" />
</div>
</header>
</TopChromeInsetHeader>
@@ -260,12 +261,7 @@ function AgentTeamsSkeleton() {
function AgentsLoadingBody() {
return (
<div
className={cn(
"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 sm:px-6",
topChromeInset.padding,
)}
>
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden overscroll-contain px-4 pb-4 pt-4 sm:px-6">
<div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
<div className="flex flex-col gap-6">
<AgentsLibrarySkeleton />
@@ -278,12 +274,7 @@ function AgentsLoadingBody() {
function CardListLoadingBody() {
return (
<div
className={cn(
"flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 sm:px-6",
topChromeInset.padding,
)}
>
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto px-4 pb-4 pt-4 sm:px-6">
<div className="mb-4 flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Skeleton className="h-6 w-28" />
@@ -408,11 +399,7 @@ export function ViewLoadingFallback({
return (
<div className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
{shouldShowChannelHeader ? (
<LoadingHeaderSkeleton />
) : includeHeader ? (
<TopChromeBackdrop />
) : null}
{shouldShowChannelHeader ? <LoadingHeaderSkeleton /> : null}
{kind === "agents" ? <AgentsLoadingBody /> : null}
{kind === "workflows" ? <CardListLoadingBody /> : null}
{kind === "projects" ? <CardListLoadingBody /> : null}