Skip to content

feat(studio): redesign left panel — Code tab, Renders header, Lint bottom#141

Merged
miguel-heygen merged 6 commits intomainfrom
feat/studio-left-panel
Mar 31, 2026
Merged

feat(studio): redesign left panel — Code tab, Renders header, Lint bottom#141
miguel-heygen merged 6 commits intomainfrom
feat/studio-left-panel

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

@miguel-heygen miguel-heygen commented Mar 30, 2026

Summary

Major layout redesign matching the Paper mockup. The Code editor moves to the left panel, Renders moves to the header, and interactions are simplified.

Layout changes

Before After
Left: Compositions | Assets Left: Code | Compositions | Assets
Right: Code | Renders tabs Right: Renders-only (hidden by default)
Header: Projects ← / Lint / panel toggles Header: title / sidebar toggle / Renders button
Lint: header button Lint: pinned to bottom of left panel

Interaction changes

  • Renders panel opens via a dedicated header button (teal when active), hidden by default
  • ExpandOnHover removed — replaced with inline autoplay on thumbnails:
    • Compositions: hover shows a tiny iframe (1920px scaled to 80px, 300ms debounce)
    • Assets: hover shows <video autoPlay muted loop> in the thumbnail cell
  • Deleted ExpandOnHover.tsx (194 lines) and ExpandedVideoPreview.tsx (35 lines)
  • Left panel max width: 50% viewport, auto-expands to 50% when opening a file in Code tab

Visual polish

  • Equal-width tabs (Code | Compositions | Assets)
  • Sidebar toggle button highlighted when panel is open
  • Phosphor duotone file-type icons (FileHtml, FileCss, FileJs, FileTs, etc.)
  • "FILES" header removed from file tree
  • Redundant "RENDERS (N)" title removed from renders panel

🤖 Generated with Claude Code

@miguel-heygen miguel-heygen force-pushed the feat/studio-left-panel branch from c76cfb8 to 644953c Compare March 30, 2026 23:19
@miguel-heygen miguel-heygen changed the title feat(studio): Code tab in left panel, Renders via header, Lint at bottom feat(studio): redesign left panel — Code tab, Renders header, Lint bottom Mar 30, 2026
@miguel-heygen miguel-heygen changed the base branch from feat/studio-no-home to graphite-base/141 March 31, 2026 01:51
miguel-heygen and others added 5 commits March 31, 2026 01:52
… at bottom

Move Code editor/file-tree to a new Code tab in LeftSidebar; replace right
panel's Code+Renders tabs with a Renders-only panel toggled by a header
Renders button; pin Lint button at the bottom of LeftSidebar; remove Projects
back button from header.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
@miguel-heygen miguel-heygen force-pushed the feat/studio-left-panel branch from 644953c to 4fb6d44 Compare March 31, 2026 01:52
@graphite-app graphite-app bot changed the base branch from graphite-base/141 to main March 31, 2026 01:52
…nails

Delete ExpandOnHover.tsx and ExpandedVideoPreview.tsx — replaced with
simpler inline hover patterns:
- CompositionsTab: hover shows a small iframe playing the composition
  in the same thumbnail cell (scaled 1920→80px)
- AssetsTab: hover shows autoplay <video> on video assets
- No more spring-animated overlay/backdrop/expansion
- motion/react dependency no longer imported
@miguel-heygen miguel-heygen force-pushed the feat/studio-left-panel branch from 4fb6d44 to 60fec9f Compare March 31, 2026 01:52
@miguel-heygen miguel-heygen merged commit 7b18c03 into main Mar 31, 2026
15 checks passed
Copy link
Copy Markdown
Collaborator Author

Merge activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants