Skip to content

feat(web): widget navigation, projects and workspace settings #59

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

Merged
sanchitrk merged 11 commits into from
Oct 10, 2026
Merged

feat(web): widget navigation, projects and workspace settings #59

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d135842
feat(web): open widgets by address with projects and sessions
sanchitrk Oct 9, 2026
0699785
feat(web): replace detail frames in place on plain click
sanchitrk Oct 9, 2026
cb07277
feat(web): let widgets set frame title and icon
sanchitrk Oct 9, 2026
b67a2da
fix(web): stop layout jitter in small windows
sanchitrk Oct 9, 2026
efd6df5
style(web): narrow scrollbars to 6px
sanchitrk Oct 9, 2026
dd85099
feat(web): add settings with workspace management
sanchitrk Oct 9, 2026
62d48a5
style(web): widen settings sidebar to 20rem
sanchitrk Oct 9, 2026
3b0709f
fix(web): make settings responsive
sanchitrk Oct 9, 2026
1865019
feat(web): restyle settings after Codex
sanchitrk Oct 9, 2026
e8ccc3e
style(web): use Inter and refine settings typography
sanchitrk Oct 9, 2026
6841c0a
style(web): restyle dialogs after T3 Code
sanchitrk Oct 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
Prev Previous commit
Next Next commit
style(web): use Inter and refine settings typography 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
  • Loading branch information
@sanchitrk @claude
sanchitrk and claude committed Oct 9, 2026
commit e8ccc3e8149cc767e627b85ed362fe4c095ce61c
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"dependencies": {
"@codeworksh/server": "workspace:*",
"@effect/atom-react": "4.0.1",
"@fontsource-variable/inter": "^5.3.0",
"@pierre/trees": "1.0.0-beta.6",
"@tanstack/react-router": "^1.161.0",
"class-variance-authority": "^0.7.1",
Expand Down
16 changes: 8 additions & 8 deletions apps/web/src/settings/blocks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export function Page({
children: ReactNode;
}) {
return (
<div className="mx-auto flex max-w-3xl flex-col gap-8 px-4 py-8 md:px-10 md:py-12">
<header className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
<div className="mx-auto flex max-w-3xl flex-col gap-10 px-4 py-8 text-[14px] md:px-10 md:py-14">
<header className="flex flex-col gap-2">
<h1 className="text-[28px]/tight font-semibold tracking-tight">{title}</h1>
{description !== undefined && <p className="text-ink-muted">{description}</p>}
</header>
{children}
Expand All @@ -24,8 +24,8 @@ export function Page({

export function Section({ title, children }: { title: string; children: ReactNode }) {
return (
<section className="flex flex-col gap-2">
<h2 className="font-medium">{title}</h2>
<section className="flex flex-col gap-3">
<h2 className="text-[15px] font-semibold">{title}</h2>
{children}
</section>
);
Expand All @@ -49,10 +49,10 @@ export function Row({
children?: ReactNode;
}) {
return (
<div className="flex items-center gap-4 px-4 py-3">
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex items-center gap-4 px-5 py-4">
<div className="flex min-w-0 flex-1 flex-col gap-1">
<span className="font-medium">{title}</span>
{description !== undefined && <span className="text-ink-muted">{description}</span>}
{description !== undefined && <span className="text-[13px] text-ink-muted">{description}</span>}
</div>
{children}
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/src/settings/workspaces.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,13 @@ export function WorkspacesSettings() {
title="Workspaces"
description="Each workspace is a tab in the title bar. Its place in the list is its keyboard shortcut."
>
<Section title="Your workspaces">
<Section title="Your Workspaces">
<Group>
{listed.map((workspace, index) => (
<div
key={workspace.id}
data-workspace={workspace.id}
className={`flex items-center gap-2 px-2 py-2 ${dragging === workspace.id ? "opacity-50" : ""}`}
className={`flex items-center gap-2 px-3 py-2.5 ${dragging === workspace.id ? "opacity-50" : ""}`}
onDragOver={(event) => {
event.preventDefault();
dragOver(workspace.id);
Expand Down Expand Up @@ -127,7 +127,7 @@ export function WorkspacesSettings() {
type="button"
disabled={workspaces.length >= MAX}
title={workspaces.length >= MAX ? `All ${MAX} workspaces are in use` : undefined}
className="flex items-center gap-2 rounded-b-xl px-4 py-3 text-ink-muted transition-colors hover:bg-ink/4 hover:text-ink disabled:pointer-events-none disabled:opacity-50"
className="flex items-center gap-2 rounded-b-xl px-5 py-4 text-ink-muted transition-colors hover:bg-ink/4 hover:text-ink disabled:pointer-events-none disabled:opacity-50"
onClick={addWorkspace}
>
<Plus className="size-4" />
Expand Down
9 changes: 8 additions & 1 deletion apps/web/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@import "tailwindcss";
/* Self-hosted so it works offline; the optical-size axis tunes glyphs for small text vs titles. */
@import "@fontsource-variable/inter/opsz.css";

/* `--cw-*` are the theme contract widgets style against; Tailwind colors map onto
them so light/dark switches in one place. */
Expand Down Expand Up @@ -35,6 +37,11 @@
}
}

/* One token for interface text, so a different face is a one-line change. */
@theme {
--font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@theme inline {
--color-desktop: var(--cw-desktop);
--color-frame: var(--cw-frame);
Expand Down Expand Up @@ -89,7 +96,7 @@
}

body {
@apply bg-desktop text-[13px]/[1.4] text-ink;
@apply bg-desktop text-[13px]/[1.4] text-ink antialiased;
}

/* A 6px rounded thumb on a clear track, widget content included. The standard
Expand Down
10 changes: 9 additions & 1 deletion pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.