diff --git a/Justfile b/Justfile index 707a56c6cc..cade9a5d04 100644 --- a/Justfile +++ b/Justfile @@ -656,8 +656,8 @@ dev *ARGS: bootstrap _ensure-sidecar-stubs _ensure-migrations pnpm exec tauri dev ${FEATURES[@]+"${FEATURES[@]}"} --config "$BUZZ_TAURI_CONFIG" {{ARGS}} -# Run desktop-next in dev mode with the same local relay, services, ports, and identity as `dev`. -desktop-next-dev *ARGS: bootstrap _ensure-sidecar-stubs _ensure-migrations +# Run desktop-new in dev mode with the same local relay, services, ports, and identity as `dev`. +desktop-new-dev *ARGS: bootstrap _ensure-sidecar-stubs _ensure-migrations #!/usr/bin/env bash set -euo pipefail export PATH="{{justfile_directory()}}/bin:$PATH" @@ -711,7 +711,7 @@ desktop-next-dev *ARGS: bootstrap _ensure-sidecar-stubs _ensure-migrations exit 1 fi [[ -d desktop/node_modules ]] || pnpm --dir desktop install - [[ -d desktop-next/node_modules ]] || pnpm --dir desktop-next install + [[ -d desktop-new/node_modules ]] || pnpm --dir desktop-new install cd {{desktop_dir}} source ../scripts/instance-env.sh # Keep instance-env's worktree-specific identifier, ports, icon, reset URL, @@ -720,11 +720,11 @@ desktop-next-dev *ARGS: bootstrap _ensure-sidecar-stubs _ensure-migrations const config = JSON.parse(process.env.BUZZ_TAURI_CONFIG); config.productName = `Buzz Sessions (${process.env.BUZZ_WORKTREE_LABEL ?? "Dev"})`; config.build.devUrl = `http://localhost:${process.env.BUZZ_VITE_PORT}${process.env.BUZZ_RESET_WEBVIEW_STATE === "1" ? "?resetDevState=1" : ""}`; - config.build.beforeDevCommand = `exec pnpm --dir ../desktop-next exec vite --port ${process.env.BUZZ_VITE_PORT} --strictPort`; + config.build.beforeDevCommand = `exec pnpm --dir ../desktop-new exec vite --port ${process.env.BUZZ_VITE_PORT} --strictPort`; console.log(JSON.stringify(config)); ') INSTANCE_ID=$(node -e "console.log(JSON.parse(process.env.BUZZ_TAURI_CONFIG).identifier)") - echo "Starting desktop-next on Vite port ${BUZZ_VITE_PORT}, relay ${BUZZ_RELAY_URL}" + echo "Starting desktop-new on Vite port ${BUZZ_VITE_PORT}, relay ${BUZZ_RELAY_URL}" FEATURES=(); [[ -n "{{mesh}}" ]] && FEATURES=(--features mesh-llm) pnpm exec tauri dev ${FEATURES[@]+"${FEATURES[@]}"} --config "$BUZZ_TAURI_CONFIG" {{ARGS}} diff --git a/desktop-next/.gitignore b/desktop-new/.gitignore similarity index 100% rename from desktop-next/.gitignore rename to desktop-new/.gitignore diff --git a/desktop-next/AGENTS.md b/desktop-new/AGENTS.md similarity index 99% rename from desktop-next/AGENTS.md rename to desktop-new/AGENTS.md index a173d42126..6654001a0c 100644 --- a/desktop-next/AGENTS.md +++ b/desktop-new/AGENTS.md @@ -1,4 +1,4 @@ -# AGENTS.md — desktop-next +# AGENTS.md — desktop-new This is a **new Buzz desktop client, built from scratch.** It is not a fork of `desktop/` and not a migration target. The existing client stays untouched; this diff --git a/desktop-next/DESIGN.md b/desktop-new/DESIGN.md similarity index 100% rename from desktop-next/DESIGN.md rename to desktop-new/DESIGN.md diff --git a/desktop-next/biome.json b/desktop-new/biome.json similarity index 100% rename from desktop-next/biome.json rename to desktop-new/biome.json diff --git a/desktop-next/index.html b/desktop-new/index.html similarity index 100% rename from desktop-next/index.html rename to desktop-new/index.html diff --git a/desktop-next/package.json b/desktop-new/package.json similarity index 88% rename from desktop-next/package.json rename to desktop-new/package.json index 3c512d6e35..ade1557399 100644 --- a/desktop-next/package.json +++ b/desktop-new/package.json @@ -1,5 +1,5 @@ { - "name": "buzz-desktop-next", + "name": "buzz-desktop-new", "private": true, "version": "0.0.0", "type": "module", @@ -15,10 +15,10 @@ "check:contrast": "node scripts/check-contrast.mjs", "test": "vitest run src", "test:e2e": "playwright test", - "tauri:dev": "node ../desktop/scripts/tauri-command.mjs dev --config ../desktop-next/tauri.conf.json --config ../desktop/src-tauri/tauri.dev.conf.json" + "tauri:dev": "node ../desktop/scripts/tauri-command.mjs dev --config ../desktop-new/tauri.conf.json --config ../desktop/src-tauri/tauri.dev.conf.json" }, "dependencies": { - "@base-ui-components/react": "1.0.0-rc.0", + "@base-ui/react": "1.7.0", "@fontsource-variable/inter": "^5.2.8", "@fontsource/jetbrains-mono": "^5.3.0", "@tabler/icons-react": "^3.46.0", diff --git a/desktop-next/playwright.config.ts b/desktop-new/playwright.config.ts similarity index 100% rename from desktop-next/playwright.config.ts rename to desktop-new/playwright.config.ts diff --git a/desktop-next/postcss.config.js b/desktop-new/postcss.config.js similarity index 100% rename from desktop-next/postcss.config.js rename to desktop-new/postcss.config.js diff --git a/desktop-new/public/design-system/morgan.png b/desktop-new/public/design-system/morgan.png new file mode 100644 index 0000000000..2effb1eda7 Binary files /dev/null and b/desktop-new/public/design-system/morgan.png differ diff --git a/desktop-next/scripts/apca.mjs b/desktop-new/scripts/apca.mjs similarity index 100% rename from desktop-next/scripts/apca.mjs rename to desktop-new/scripts/apca.mjs diff --git a/desktop-next/scripts/check-contrast.mjs b/desktop-new/scripts/check-contrast.mjs similarity index 100% rename from desktop-next/scripts/check-contrast.mjs rename to desktop-new/scripts/check-contrast.mjs diff --git a/desktop-next/scripts/check-type.mjs b/desktop-new/scripts/check-type.mjs similarity index 100% rename from desktop-next/scripts/check-type.mjs rename to desktop-new/scripts/check-type.mjs diff --git a/desktop-next/src/app/routes/__root.tsx b/desktop-new/src/app/routes/__root.tsx similarity index 100% rename from desktop-next/src/app/routes/__root.tsx rename to desktop-new/src/app/routes/__root.tsx diff --git a/desktop-next/src/app/routes/design.tsx b/desktop-new/src/app/routes/design.tsx similarity index 100% rename from desktop-next/src/app/routes/design.tsx rename to desktop-new/src/app/routes/design.tsx diff --git a/desktop-next/src/app/routes/design/color.tsx b/desktop-new/src/app/routes/design/color.tsx similarity index 100% rename from desktop-next/src/app/routes/design/color.tsx rename to desktop-new/src/app/routes/design/color.tsx diff --git a/desktop-next/src/app/routes/design/color_.table.tsx b/desktop-new/src/app/routes/design/color_.table.tsx similarity index 100% rename from desktop-next/src/app/routes/design/color_.table.tsx rename to desktop-new/src/app/routes/design/color_.table.tsx diff --git a/desktop-new/src/app/routes/design/components.tsx b/desktop-new/src/app/routes/design/components.tsx new file mode 100644 index 0000000000..e6b185b224 --- /dev/null +++ b/desktop-new/src/app/routes/design/components.tsx @@ -0,0 +1,6 @@ +import { createFileRoute } from "@tanstack/react-router"; +import { ComponentsPage } from "@/features/design-system/ui/ComponentsPage"; + +export const Route = createFileRoute("/design/components")({ + component: ComponentsPage, +}); diff --git a/desktop-new/src/app/routes/design/components_.$component.tsx b/desktop-new/src/app/routes/design/components_.$component.tsx new file mode 100644 index 0000000000..cd4df735c4 --- /dev/null +++ b/desktop-new/src/app/routes/design/components_.$component.tsx @@ -0,0 +1,11 @@ +import { createFileRoute } from "@tanstack/react-router"; +import { ComponentDetailPage } from "@/features/design-system/ui/ComponentDetailPage"; + +export const Route = createFileRoute("/design/components_/$component")({ + component: ComponentRoute, +}); + +function ComponentRoute() { + const { component } = Route.useParams(); + return ; +} diff --git a/desktop-next/src/app/routes/design/elevation.tsx b/desktop-new/src/app/routes/design/elevation.tsx similarity index 100% rename from desktop-next/src/app/routes/design/elevation.tsx rename to desktop-new/src/app/routes/design/elevation.tsx diff --git a/desktop-next/src/app/routes/design/glass.tsx b/desktop-new/src/app/routes/design/glass.tsx similarity index 100% rename from desktop-next/src/app/routes/design/glass.tsx rename to desktop-new/src/app/routes/design/glass.tsx diff --git a/desktop-next/src/app/routes/design/growth.tsx b/desktop-new/src/app/routes/design/growth.tsx similarity index 100% rename from desktop-next/src/app/routes/design/growth.tsx rename to desktop-new/src/app/routes/design/growth.tsx diff --git a/desktop-next/src/app/routes/design/index.tsx b/desktop-new/src/app/routes/design/index.tsx similarity index 100% rename from desktop-next/src/app/routes/design/index.tsx rename to desktop-new/src/app/routes/design/index.tsx diff --git a/desktop-next/src/app/routes/design/motion.tsx b/desktop-new/src/app/routes/design/motion.tsx similarity index 100% rename from desktop-next/src/app/routes/design/motion.tsx rename to desktop-new/src/app/routes/design/motion.tsx diff --git a/desktop-next/src/app/routes/design/radius.tsx b/desktop-new/src/app/routes/design/radius.tsx similarity index 100% rename from desktop-next/src/app/routes/design/radius.tsx rename to desktop-new/src/app/routes/design/radius.tsx diff --git a/desktop-next/src/app/routes/design/spacing.tsx b/desktop-new/src/app/routes/design/spacing.tsx similarity index 100% rename from desktop-next/src/app/routes/design/spacing.tsx rename to desktop-new/src/app/routes/design/spacing.tsx diff --git a/desktop-next/src/app/routes/design/typography.tsx b/desktop-new/src/app/routes/design/typography.tsx similarity index 100% rename from desktop-next/src/app/routes/design/typography.tsx rename to desktop-new/src/app/routes/design/typography.tsx diff --git a/desktop-next/src/app/routes/design/vocabulary.tsx b/desktop-new/src/app/routes/design/vocabulary.tsx similarity index 100% rename from desktop-next/src/app/routes/design/vocabulary.tsx rename to desktop-new/src/app/routes/design/vocabulary.tsx diff --git a/desktop-next/src/app/routes/index.tsx b/desktop-new/src/app/routes/index.tsx similarity index 100% rename from desktop-next/src/app/routes/index.tsx rename to desktop-new/src/app/routes/index.tsx diff --git a/desktop-next/src/features/agents/runtime.ts b/desktop-new/src/features/agents/runtime.ts similarity index 100% rename from desktop-next/src/features/agents/runtime.ts rename to desktop-new/src/features/agents/runtime.ts diff --git a/desktop-next/src/features/agents/types.ts b/desktop-new/src/features/agents/types.ts similarity index 100% rename from desktop-next/src/features/agents/types.ts rename to desktop-new/src/features/agents/types.ts diff --git a/desktop-next/src/features/agents/ui/AgentsWorkspace.tsx b/desktop-new/src/features/agents/ui/AgentsWorkspace.tsx similarity index 100% rename from desktop-next/src/features/agents/ui/AgentsWorkspace.tsx rename to desktop-new/src/features/agents/ui/AgentsWorkspace.tsx diff --git a/desktop-next/src/features/design-system/ui/ColorTablePage.tsx b/desktop-new/src/features/design-system/ui/ColorTablePage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/ColorTablePage.tsx rename to desktop-new/src/features/design-system/ui/ColorTablePage.tsx diff --git a/desktop-next/src/features/design-system/ui/ColourPage.tsx b/desktop-new/src/features/design-system/ui/ColourPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/ColourPage.tsx rename to desktop-new/src/features/design-system/ui/ColourPage.tsx diff --git a/desktop-new/src/features/design-system/ui/ComponentDetailPage.tsx b/desktop-new/src/features/design-system/ui/ComponentDetailPage.tsx new file mode 100644 index 0000000000..73d537dcf3 --- /dev/null +++ b/desktop-new/src/features/design-system/ui/ComponentDetailPage.tsx @@ -0,0 +1,17 @@ +import { COMPONENTS } from "@/shared/ui/registry"; +import { COMPONENT_SPECIMENS } from "./componentSpecimens"; + +export function ComponentDetailPage({ slug }: { slug: string }) { + const component = COMPONENTS.find((candidate) => candidate.slug === slug); + if (!component) return null; + const Specimen = COMPONENT_SPECIMENS[component.slug]; + + return ( + <> +
+

{component.name}

+
+ {Specimen ? : null} + + ); +} diff --git a/desktop-new/src/features/design-system/ui/ComponentsPage.tsx b/desktop-new/src/features/design-system/ui/ComponentsPage.tsx new file mode 100644 index 0000000000..e942398a6f --- /dev/null +++ b/desktop-new/src/features/design-system/ui/ComponentsPage.tsx @@ -0,0 +1,32 @@ +import { Link } from "@tanstack/react-router"; +import { COMPONENTS } from "@/shared/ui/registry"; +import { COMPONENT_SPECIMENS } from "./componentSpecimens"; + +export function ComponentsPage() { + return ( + <> +
+

Components

+
+
+ {COMPONENTS.map((component) => { + const Specimen = COMPONENT_SPECIMENS[component.slug]; + return ( +
+
+ {Specimen ? : null} +
+ + {component.name} + +
+ ); + })} +
+ + ); +} diff --git a/desktop-next/src/features/design-system/ui/DesignSystemLayout.tsx b/desktop-new/src/features/design-system/ui/DesignSystemLayout.tsx similarity index 94% rename from desktop-next/src/features/design-system/ui/DesignSystemLayout.tsx rename to desktop-new/src/features/design-system/ui/DesignSystemLayout.tsx index a7aef5659d..f2a9fb3462 100644 --- a/desktop-next/src/features/design-system/ui/DesignSystemLayout.tsx +++ b/desktop-new/src/features/design-system/ui/DesignSystemLayout.tsx @@ -2,6 +2,7 @@ import { Link, Outlet } from "@tanstack/react-router"; import { Fragment, type ReactNode } from "react"; import { useColorScheme } from "@/shared/theme/useColorScheme"; +import { COMPONENTS } from "@/shared/ui/registry"; /** A nav entry, optionally with children shown indented beneath it. */ type NavItem = [label: string, to: string, children?: Array<[string, string]>]; @@ -31,7 +32,16 @@ const SECTIONS: Array<{ heading: string; items: NavItem[] }> = [ }, { heading: "Components", - items: [], + items: [ + [ + "Overview", + "/design/components", + COMPONENTS.map((component) => [ + component.name, + `/design/components/${component.slug}`, + ]), + ], + ], }, ]; diff --git a/desktop-next/src/features/design-system/ui/ElevationPage.tsx b/desktop-new/src/features/design-system/ui/ElevationPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/ElevationPage.tsx rename to desktop-new/src/features/design-system/ui/ElevationPage.tsx diff --git a/desktop-new/src/features/design-system/ui/FoundationScale.tsx b/desktop-new/src/features/design-system/ui/FoundationScale.tsx new file mode 100644 index 0000000000..9fad452bc9 --- /dev/null +++ b/desktop-new/src/features/design-system/ui/FoundationScale.tsx @@ -0,0 +1,22 @@ +type FoundationItem = { + token: string; + value: string; + use: string; +}; + +export function FoundationScale({ items }: { items: FoundationItem[] }) { + return ( +
+ {items.map((item) => ( +
+ {item.token} + {item.value} + {item.use} +
+ ))} +
+ ); +} diff --git a/desktop-next/src/features/design-system/ui/GlassPage.tsx b/desktop-new/src/features/design-system/ui/GlassPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/GlassPage.tsx rename to desktop-new/src/features/design-system/ui/GlassPage.tsx diff --git a/desktop-next/src/features/design-system/ui/GrowthPage.tsx b/desktop-new/src/features/design-system/ui/GrowthPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/GrowthPage.tsx rename to desktop-new/src/features/design-system/ui/GrowthPage.tsx diff --git a/desktop-new/src/features/design-system/ui/MotionPage.tsx b/desktop-new/src/features/design-system/ui/MotionPage.tsx new file mode 100644 index 0000000000..cbc182000d --- /dev/null +++ b/desktop-new/src/features/design-system/ui/MotionPage.tsx @@ -0,0 +1,43 @@ +import { MOTION } from "@/shared/tokens/registry"; +import { FoundationScale } from "./FoundationScale"; +import { PageHeader, Section } from "./primitives"; + +export function MotionPage() { + return ( + <> + + +
+ ({ + token: item.token, + value: item.value, + use: item.use, + }))} + /> +
+ +
+
    + {[ + "Direct manipulation follows the pointer exactly. Easing begins only after release.", + "Never animate blur. Change opacity when glass enters or leaves.", + "Reduced motion makes every transition immediate without changing state.", + "Motion explains selection, entry, exit, or changed geometry; it never decorates still content.", + ].map((rule) => ( +
  • + {rule} +
    • + ))} +
+
+ + ); +} diff --git a/desktop-next/src/features/design-system/ui/OverviewPage.tsx b/desktop-new/src/features/design-system/ui/OverviewPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/OverviewPage.tsx rename to desktop-new/src/features/design-system/ui/OverviewPage.tsx diff --git a/desktop-new/src/features/design-system/ui/RadiusPage.tsx b/desktop-new/src/features/design-system/ui/RadiusPage.tsx new file mode 100644 index 0000000000..dacfb27e54 --- /dev/null +++ b/desktop-new/src/features/design-system/ui/RadiusPage.tsx @@ -0,0 +1,39 @@ +import { RADII } from "@/shared/tokens/registry"; +import { FoundationScale } from "./FoundationScale"; +import { PageHeader, Section } from "./primitives"; + +export function RadiusPage() { + return ( + <> + + +
+ ({ + token: item.token, + value: item.value, + use: item.use, + }))} + /> +
+ +
+
+ {RADII.map((item) => ( +
+ {item.token} +
+ ))} +
+
+ + ); +} diff --git a/desktop-new/src/features/design-system/ui/SpacingPage.tsx b/desktop-new/src/features/design-system/ui/SpacingPage.tsx new file mode 100644 index 0000000000..398a887d1c --- /dev/null +++ b/desktop-new/src/features/design-system/ui/SpacingPage.tsx @@ -0,0 +1,38 @@ +import { SPACE, SPACE_ROLES } from "@/shared/tokens/registry"; +import { FoundationScale } from "./FoundationScale"; +import { PageHeader, Section } from "./primitives"; + +export function SpacingPage() { + return ( + <> + + +
+ ({ + token: `space ${item.step}`, + value: item.value, + use: item.use, + }))} + /> +
+ +
+ ({ + token: item.token, + value: item.pointsAt, + use: item.use, + }))} + /> +
+ + ); +} diff --git a/desktop-next/src/features/design-system/ui/TypographyPage.tsx b/desktop-new/src/features/design-system/ui/TypographyPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/TypographyPage.tsx rename to desktop-new/src/features/design-system/ui/TypographyPage.tsx diff --git a/desktop-next/src/features/design-system/ui/VocabularyPage.tsx b/desktop-new/src/features/design-system/ui/VocabularyPage.tsx similarity index 100% rename from desktop-next/src/features/design-system/ui/VocabularyPage.tsx rename to desktop-new/src/features/design-system/ui/VocabularyPage.tsx diff --git a/desktop-new/src/features/design-system/ui/componentSpecimens.tsx b/desktop-new/src/features/design-system/ui/componentSpecimens.tsx new file mode 100644 index 0000000000..5f88a9cbee --- /dev/null +++ b/desktop-new/src/features/design-system/ui/componentSpecimens.tsx @@ -0,0 +1,393 @@ +import { + IconDots, + IconHash, + IconMessageCircle, + IconPlus, + IconSettings, +} from "@tabler/icons-react"; +import type { ReactNode } from "react"; +import { useState } from "react"; +import { Avatar } from "@/shared/ui/Avatar"; +import { Button } from "@/shared/ui/Button"; +import { IconButton } from "@/shared/ui/IconButton"; +import { NavigatorRow } from "@/shared/ui/NavigatorRow"; +import { NavigatorSection } from "@/shared/ui/NavigatorSection"; +import { PanelHeader } from "@/shared/ui/PanelHeader"; +import { SearchField } from "@/shared/ui/SearchField"; +import { SegmentedNavigation } from "@/shared/ui/SegmentedNavigation"; +import { WorkspaceSurface } from "@/shared/ui/WorkspaceSurface"; + +const DESTINATIONS = [ + { value: "home", label: "Home" }, + { value: "messages", label: "Messages" }, + { value: "projects", label: "Projects" }, +] as const; + +type Destination = (typeof DESTINATIONS)[number]["value"]; + +function SpecimenFrame({ + children, + backdrop = false, +}: { + children: ReactNode; + backdrop?: boolean; +}) { + return ( +
+ {children} +
+ ); +} + +function SpecimenGroup({ + label, + children, +}: { + label: string; + children: ReactNode; +}) { + return ( +
+

{label}

+ {children} +
+ ); +} + +function ButtonSpecimen() { + return ( +
+ +
+ + + +
+ + +
+ + +
+ + +
+ + +
+ +
+ ); +} +function IconButtonSpecimen() { + const icons = { + add: