ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): add styled Tooltip component to tabs and panels

Browse Source 
Create a Tooltip component with styled popover (dark bg, border,
shadow) that appears on hover with a 400ms delay. Applied to:
- Left sidebar tabs: Code, Comps, Assets, Catalog
- Right panel tabs: Design, Layers, Motion, Renders

Replaces native title attributes with proper styled tooltips.
This commit is contained in:
Miguel Ángel
2026-05-21 21:41:30 -04:00
parent 850ff9301f
commit 738523b721
4 changed files with 154 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/sidebar/LeftSidebar.tsx
+46 -41
View File
@@ -13,6 +13,7 @@ import { trackStudioEvent } from "../../utils/studioTelemetry";
import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
import { FileTree } from "../editor/FileTree";
import { STUDIO_BLOCKS_PANEL_ENABLED } from "../editor/manualEditingAvailability";
import { Tooltip } from "../ui";
export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
@@ -124,55 +125,59 @@ export const LeftSidebar = memo(
: "1fr 1fr 1fr",
}}
>
<button
type="button"
onClick={() => selectTab("code")}
title="Source code editor"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "code"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Code
</button>
<button
type="button"
onClick={() => selectTab("compositions")}
title="Composition layers and sub-compositions"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "compositions"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Comps
</button>
<button
type="button"
onClick={() => selectTab("assets")}
title="Media assets — videos, images, audio, fonts"
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "assets"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Assets
</button>
{STUDIO_BLOCKS_PANEL_ENABLED && (
<Tooltip label="Source code editor" side="bottom">
<button
type="button"
onClick={() => selectTab("blocks")}
title="Browse blocks, components, and templates from the registry"
onClick={() => selectTab("code")}
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "blocks"
tab === "code"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Catalog
Code
</button>
</Tooltip>
<Tooltip label="Compositions and sub-compositions" side="bottom">
<button
type="button"
onClick={() => selectTab("compositions")}
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "compositions"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Comps
</button>
</Tooltip>
<Tooltip label="Videos, images, audio, fonts" side="bottom">
<button
type="button"
onClick={() => selectTab("assets")}
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "assets"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Assets
</button>
</Tooltip>
{STUDIO_BLOCKS_PANEL_ENABLED && (
<Tooltip label="Browse blocks and components" side="bottom">
<button
type="button"
onClick={() => selectTab("blocks")}
className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
tab === "blocks"
? "bg-neutral-800 text-white"
: "text-neutral-500 hover:text-neutral-200"
}`}
>
Catalog
</button>
</Tooltip>
)}
</div>
{onToggleCollapse && (