ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(studio): remove section pinning from the flat inspector

Browse Source
This commit is contained in:
Vance Ingalls
2026-07-14 15:51:56 -07:00
parent 528f2be242
commit 2285b399e5
11 changed files with 22 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/PropertyPanel.test.tsx
+1 -47
View File
@@ -18,10 +18,6 @@ vi.mock("../../contexts/StudioContext", async () => {
afterEach(() => {
document.body.innerHTML = "";
// usePersistedPinnedGroups persists to localStorage; clear it so a pinned
// group from one test can't leak into the next (which would move a group out
// of the accordion and break an unrelated open-by-default assertion).
window.localStorage.clear();
vi.doUnmock("./manualEditingAvailability");
vi.resetModules();
});
@@ -813,47 +809,6 @@ describe("PropertyPanel — Media group (Plan 4)", () => {
);
});
describe("PropertyPanel — pinning", () => {
it(
"renders a pinned group first, always open, above the PinnedZoneDivider",
async () => {
const { host, root } = await renderPanel(true);
// Pin the Text group via its pin button.
const pinButton = host.querySelector<HTMLButtonElement>('[data-flat-group-pin="true"]');
if (!pinButton) throw new Error("expected a pin button on the open Text group");
act(() => pinButton.dispatchEvent(new MouseEvent("click", { bubbles: true })));
const pinnedRow = host.querySelector('[data-pinned-group="true"]');
expect(pinnedRow?.textContent).toContain("Text");
expect(pinnedRow?.textContent).toContain("Pinned");
// The divider must appear after the pinned zone.
const container = host.querySelector('[data-flat-panel-body="true"]');
const children = Array.from(container?.children ?? []);
const pinnedIndex = children.indexOf(pinnedRow as Element);
const dividerIndex = children.findIndex((el) => el.textContent?.includes("one open below"));
expect(pinnedIndex).toBeGreaterThanOrEqual(0);
expect(dividerIndex).toBeGreaterThan(pinnedIndex);
act(() => root.unmount());
},
RENDER_TIMEOUT_MS,
);
it(
"unpinning returns the group to its normal accordion stack position",
async () => {
const { host, root } = await renderPanel(true);
const pinButton = host.querySelector<HTMLButtonElement>('[data-flat-group-pin="true"]');
act(() => pinButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
const unpinButton = host.querySelector<HTMLButtonElement>('[data-pinned-group-unpin="true"]');
act(() => unpinButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(host.querySelector('[data-pinned-group="true"]')).toBeNull();
act(() => root.unmount());
},
RENDER_TIMEOUT_MS,
);
});
// design_handoff scrollable-open-section: collapsed headers before/after the
// open group render in normal document flow and never move (no sticky, no
// stacking offsets) — only the open group's own body content scrolls, in a
@@ -882,8 +837,7 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
if (child.matches('[data-flat-group-open="true"]')) return child.textContent ?? "";
return null;
});
// Filter to just the group entries (drop nulls from any divider, none
// expected here since no groups are pinned).
// Filter to just the group entries (drop any non-group nulls).
const groupTitles = titles.filter((t): t is string => t !== null);
expect(groupTitles).toHaveLength(6);
expect(groupTitles[0]).toContain("Text");
packages/studio/src/components/editor/PropertyPanel.tsx
+1 -1
View File
@@ -265,7 +265,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
if (STUDIO_FLAT_INSPECTOR_ENABLED) {
// Forward the raw props (handlers, ids, assets, recording, fonts, etc.) and
// the values the legacy path already computed above (so they aren't derived
// twice). PropertyPanelFlat owns the one-open/pin group state.
// twice). PropertyPanelFlat owns the one-open group state.
return (
<PropertyPanelFlat
{...props}
packages/studio/src/components/editor/PropertyPanelFlat.tsx
+8 -31
View File
@@ -6,7 +6,7 @@ import type { PropertyPanelProps } from "./propertyPanelHelpers";
import { formatPxMetricValue } from "./propertyPanelHelpers";
import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
import { FlatGroupHeader, PinnedGroupRow, PinnedZoneDivider } from "./propertyPanelFlatPrimitives";
import { FlatGroupHeader } from "./propertyPanelFlatPrimitives";
import { FlatTextSection } from "./propertyPanelFlatTextSection";
import { FlatStyleSection } from "./propertyPanelFlatStyleSections";
import { FlatLayoutSection } from "./propertyPanelFlatLayoutSection";
@@ -17,7 +17,6 @@ import { createGsapLivePreview } from "./gsapLivePreview";
import { formatTextFieldPreview } from "./propertyPanelSections";
import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
import { useColorGradingController } from "./useColorGradingController";
import { usePersistedPinnedGroups } from "../../hooks/usePersistedPinnedGroups";
import {
FlatColorGradingAccessory,
FlatColorGradingSection,
@@ -52,7 +51,7 @@ const EMPTY_GSAP_EFFECT_HANDLERS = {
*
* Extracted from PropertyPanel so that file stays under the 600-LOC gate
* (same one-directional-import precedent as FlatTextSection). Rendered only
* when STUDIO_FLAT_INSPECTOR_ENABLED is on; owns the one-open/pin group state.
* when STUDIO_FLAT_INSPECTOR_ENABLED is on; owns the one-open group state.
*
* The Text/Style/Layout/Motion/Media/Grade groups share the one-open accordion.
*/
@@ -252,7 +251,6 @@ export function PropertyPanelFlat({
const isTextEditable = isTextEditableSelection(element);
const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
const { pinnedGroupIds, togglePin } = usePersistedPinnedGroups(elementKind);
const toggleOpen = (groupId: string) =>
setOpenGroupId((current) => (current === groupId ? "" : groupId));
// Basis for the Layout keyframe gutter (X/Y/W/H/Angle + 3D Transform) —
@@ -311,9 +309,8 @@ export function PropertyPanelFlat({
const showMotionGroup = showMotionTiming || showMotionEffects;
// Ordered group descriptors — one per FlatGroup this panel renders, gated by
// the same conditions the inline JSX used. Partitioned into pinned/unpinned
// below so pinned groups render first (always open, no accordion) above the
// PinnedZoneDivider, with the rest in the one-open accordion beneath it.
// the same conditions the inline JSX used. Split below into before-open/
// open/after-open regions for the one-open accordion.
const groups: FlatGroupDescriptor[] = [];
if (isTextEditable) {
groups.push({
@@ -453,9 +450,6 @@ export function PropertyPanelFlat({
});
}
const pinned = groups.filter((g) => pinnedGroupIds.includes(g.id));
const unpinned = groups.filter((g) => !pinnedGroupIds.includes(g.id));
// Fixed-headers + scrollable-open-section layout (design_handoff
// scrollable-open-section, replaces the prior sticky-stacking mechanism):
// collapsed headers before/after the open group render in normal document
@@ -463,10 +457,10 @@ export function PropertyPanelFlat({
// a dedicated region between the two fixed header stacks. When no group is
// open, every group is just a collapsed header — there's no scrollable
// middle region at all, since nothing is expanded.
const openIndex = unpinned.findIndex((g) => g.id === openGroupId);
const beforeOpen = openIndex === -1 ? unpinned : unpinned.slice(0, openIndex);
const openGroup = openIndex === -1 ? null : unpinned[openIndex];
const afterOpen = openIndex === -1 ? [] : unpinned.slice(openIndex + 1);
const openIndex = groups.findIndex((g) => g.id === openGroupId);
const beforeOpen = openIndex === -1 ? groups : groups.slice(0, openIndex);
const openGroup = openIndex === -1 ? null : groups[openIndex];
const afterOpen = openIndex === -1 ? [] : groups.slice(openIndex + 1);
return (
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
@@ -487,25 +481,12 @@ export function PropertyPanelFlat({
showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
/>
<div data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-hidden">
{pinned.map((g) => (
<PinnedGroupRow
key={g.id}
title={g.title}
accessory={g.accessory}
onUnpin={() => togglePin(g.id)}
>
{g.content}
</PinnedGroupRow>
))}
{pinned.length > 0 && unpinned.length > 0 && <PinnedZoneDivider />}
{beforeOpen.map((g) => (
<FlatGroupHeader
key={g.id}
title={g.title}
isOpen={false}
isPinned={false}
onToggleOpen={() => toggleOpen(g.id)}
onTogglePin={() => togglePin(g.id)}
summary={g.summary}
/>
))}
@@ -514,9 +495,7 @@ export function PropertyPanelFlat({
<FlatGroupHeader
title={openGroup.title}
isOpen
isPinned={false}
onToggleOpen={() => toggleOpen(openGroup.id)}
onTogglePin={() => togglePin(openGroup.id)}
accessory={openGroup.accessory}
/>
<div className="min-h-0 flex-1 overflow-y-auto border-b border-panel-hairline px-4 py-3">
@@ -529,9 +508,7 @@ export function PropertyPanelFlat({
key={g.id}
title={g.title}
isOpen={false}
isPinned={false}
onToggleOpen={() => toggleOpen(g.id)}
onTogglePin={() => togglePin(g.id)}
summary={g.summary}
/>
))}
packages/studio/src/components/editor/PropertyPanelFlatFooter.test.tsx
+3 -4
View File
@@ -69,10 +69,9 @@ describe("PropertyPanelFlatFooter", () => {
// rounding gap) — is gone now that nothing above the footer is
// `position: sticky`. Live browser verification (p11 report) confirmed the
// boundary renders as a single clean hairline without it: whatever
// immediately precedes the footer (a collapsed FlatGroupHeader, the open
// group's scrollable body wrapper, or a PinnedGroupRow) already draws its
// own border-b in normal document flow, so the footer needs no border or
// seal of its own.
// immediately precedes the footer (a collapsed FlatGroupHeader, or the open
// group's scrollable body wrapper) already draws its own border-b in normal
// document flow, so the footer needs no border or seal of its own.
it("renders no seal overlay and no border of its own — the boundary line comes from whatever precedes it", () => {
const { host, root } = renderFooter({ onAskAgent: vi.fn() });
const footerRoot = host.firstElementChild as HTMLElement;
packages/studio/src/components/editor/PropertyPanelFlatFooter.tsx
+4 -4
View File
@@ -17,10 +17,10 @@ export function PropertyPanelFlatFooter({
return (
// No border-t here: every possible element immediately above this footer
// in the new fixed-headers + scrollable-open-section layout (a collapsed
// FlatGroupHeader, the open group's scrollable body wrapper, or a
// PinnedGroupRow) already draws its own border-b in normal document flow
// — nothing here is `position: sticky` anymore, so there's no rounding
// seam to seal (see p11-scrollable-open-section-report.md).
// FlatGroupHeader, or the open group's scrollable body wrapper) already
// draws its own border-b in normal document flow — nothing here is
// `position: sticky` anymore, so there's no rounding seam to seal (see
// p11-scrollable-open-section-report.md).
<div className="flex items-center justify-between bg-panel-bg px-4 py-[11px]">
<button
type="button"
packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+4 -56
View File
@@ -10,8 +10,6 @@ import {
FlatSelectRow,
FlatSlider,
FlatToggle,
PinnedGroupRow,
PinnedZoneDivider,
} from "./propertyPanelFlatPrimitives";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -110,22 +108,12 @@ describe("FlatSegmentedRow", () => {
});
describe("FlatGroupHeader", () => {
it("renders the open header (name + pin + caret), with no sticky-related props required", () => {
it("renders the open header (name + caret), with no sticky-related props required", () => {
const onToggleOpen = vi.fn();
const onTogglePin = vi.fn();
const { host, root } = renderInto(
<FlatGroupHeader
title="Text"
isOpen
isPinned={false}
onToggleOpen={onToggleOpen}
onTogglePin={onTogglePin}
/>,
<FlatGroupHeader title="Text" isOpen onToggleOpen={onToggleOpen} />,
);
expect(host.textContent).toContain("Text");
const pin = host.querySelector<HTMLButtonElement>('[data-flat-group-pin="true"]');
act(() => pin?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(onTogglePin).toHaveBeenCalledTimes(1);
const collapse = host.querySelector<HTMLButtonElement>('button[title="Collapse"]');
act(() => collapse?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(onToggleOpen).toHaveBeenCalledTimes(1);
@@ -138,9 +126,7 @@ describe("FlatGroupHeader", () => {
<FlatGroupHeader
title="Style"
isOpen={false}
isPinned={false}
onToggleOpen={onToggleOpen}
onTogglePin={vi.fn()}
summary="fill none · 100%"
/>,
);
@@ -154,13 +140,7 @@ describe("FlatGroupHeader", () => {
it("renders no inline position styling in either state (collapsed headers never move)", () => {
const { host: collapsedHost, root: collapsedRoot } = renderInto(
<FlatGroupHeader
title="Layout"
isOpen={false}
isPinned={false}
onToggleOpen={vi.fn()}
onTogglePin={vi.fn()}
/>,
<FlatGroupHeader title="Layout" isOpen={false} onToggleOpen={vi.fn()} />,
);
const row = collapsedHost.querySelector<HTMLButtonElement>(
'[data-flat-group-collapsed="true"]',
@@ -169,13 +149,7 @@ describe("FlatGroupHeader", () => {
act(() => collapsedRoot.unmount());
const { host: openHost, root: openRoot } = renderInto(
<FlatGroupHeader
title="Motion"
isOpen
isPinned={false}
onToggleOpen={vi.fn()}
onTogglePin={vi.fn()}
/>,
<FlatGroupHeader title="Motion" isOpen onToggleOpen={vi.fn()} />,
);
expect(openHost.textContent).toContain("Motion");
expect(openHost.querySelector("[style]")).toBeNull();
@@ -183,14 +157,6 @@ describe("FlatGroupHeader", () => {
});
});
describe("PinnedZoneDivider", () => {
it("renders the 'one open below' label", () => {
const { host, root } = renderInto(<PinnedZoneDivider />);
expect(host.textContent).toContain("one open below");
act(() => root.unmount());
});
});
describe("FlatSlider", () => {
it("renders the default tier with a dim knob at the correct position", () => {
const { host, root } = renderInto(
@@ -486,21 +452,3 @@ describe("FlatToggle", () => {
act(() => root.unmount());
});
});
describe("PinnedGroupRow", () => {
it("renders a 'Pinned' badge, filled pin icon, and always shows children", () => {
const onUnpin = vi.fn();
const { host, root } = renderInto(
<PinnedGroupRow title="Motion" onUnpin={onUnpin}>
<div data-testid="body">body</div>
</PinnedGroupRow>,
);
expect(host.textContent).toContain("Pinned");
expect(host.textContent).toContain("Motion");
expect(host.querySelector('[data-testid="body"]')).not.toBeNull();
const unpin = host.querySelector<HTMLButtonElement>('[data-pinned-group-unpin="true"]');
act(() => unpin?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
expect(onUnpin).toHaveBeenCalledTimes(1);
act(() => root.unmount());
});
});
packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+1 -76
View File
@@ -136,7 +136,7 @@ export function FlatSegmentedRow({
/* FlatGroupHeader — one-open-at-a-time accordion group header */
/* (fixed-headers + scrollable-open-section layout, design_handoff */
/* scrollable-open-section): renders ONLY the header bar — collapsed */
/* button, or open-state title bar with pin/collapse controls. Never */
/* button, or open-state title bar with the collapse control. Never */
/* positioned (no sticky, no stacking offsets) — it always sits in */
/* normal document flow. The open group's body content is rendered by */
/* PropertyPanelFlat.tsx directly, in a dedicated scrollable region, */
@@ -146,17 +146,13 @@ export function FlatSegmentedRow({
export function FlatGroupHeader({
title,
isOpen,
isPinned,
onToggleOpen,
onTogglePin,
accessory,
summary,
}: {
title: string;
isOpen: boolean;
isPinned: boolean;
onToggleOpen: () => void;
onTogglePin: () => void;
accessory?: ReactNode;
summary?: string;
}) {
@@ -194,17 +190,6 @@ export function FlatGroupHeader({
<span className="text-[12px] font-semibold text-panel-text-0">{title}</span>
<span className="flex items-center gap-2.5 text-panel-text-5">
{accessory}
<button
type="button"
data-flat-group-pin="true"
title={isPinned ? "Unpin" : "Pin"}
onClick={onTogglePin}
className={isPinned ? "text-panel-accent" : "text-panel-text-5 hover:text-panel-text-3"}
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M4 1h4v3.2l1.4 1.4V7H7v4L6 12l-1-1V7H2.6V5.6L4 4.2z" />
</svg>
</button>
<button type="button" onClick={onToggleOpen} title="Collapse" className="text-panel-text-3">
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M2 4l4 4 4-4z" />
@@ -215,22 +200,6 @@ export function FlatGroupHeader({
);
}
/* ------------------------------------------------------------------ */
/* PinnedZoneDivider */
/* ------------------------------------------------------------------ */
export function PinnedZoneDivider() {
return (
<div className="flex items-center gap-3 px-4 py-2">
<span className="h-px flex-1 bg-panel-hairline" aria-hidden="true" />
<span className="text-[8px] font-semibold uppercase tracking-[0.14em] text-panel-text-5">
one open below
</span>
<span className="h-px flex-1 bg-panel-hairline" aria-hidden="true" />
</div>
);
}
/* ------------------------------------------------------------------ */
/* FlatSlider — full-width label/track/value row */
/* ------------------------------------------------------------------ */
@@ -446,47 +415,3 @@ export function FlatToggle({
</div>
);
}
/* ------------------------------------------------------------------ */
/* PinnedGroupRow — always-open pinned group (design_handoff #8a) */
/* ------------------------------------------------------------------ */
export function PinnedGroupRow({
title,
accessory,
onUnpin,
children,
}: {
title: string;
accessory?: ReactNode;
onUnpin: () => void;
children: ReactNode;
}) {
return (
<div className="border-b border-panel-hairline px-4 py-3" data-pinned-group="true">
<div className="mb-2.5 flex items-center justify-between">
<span className="flex items-center gap-1.5">
<span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-panel-accent">
Pinned
</span>
<span className="text-[12px] font-semibold text-panel-text-0">{title}</span>
</span>
<span className="flex items-center gap-2.5 text-panel-text-5">
{accessory}
<button
type="button"
data-pinned-group-unpin="true"
title="Unpin — returns to the stack"
onClick={onUnpin}
className="text-panel-accent"
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M4 1h4v3.2l1.4 1.4V7H7v4L6 12l-1-1V7H2.6V5.6L4 4.2z" />
</svg>
</button>
</span>
</div>
{children}
</div>
);
}
packages/studio/src/hooks/usePersistedPinnedGroups.test.ts
-68
View File
@@ -1,68 +0,0 @@
// @vitest-environment happy-dom
import React, { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, describe, expect, it } from "vitest";
import { usePersistedPinnedGroups } from "./usePersistedPinnedGroups";
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
afterEach(() => {
document.body.innerHTML = "";
window.localStorage.clear();
});
function Harness({
elementKind,
onReady,
}: {
elementKind: string;
onReady: (api: ReturnType<typeof usePersistedPinnedGroups>) => void;
}) {
const api = usePersistedPinnedGroups(elementKind);
onReady(api);
return null;
}
function mount(elementKind: string) {
const host = document.createElement("div");
document.body.append(host);
const root = createRoot(host);
let api!: ReturnType<typeof usePersistedPinnedGroups>;
act(() => {
root.render(React.createElement(Harness, { elementKind, onReady: (a) => (api = a) }));
});
return {
host,
root,
get api() {
return api;
},
};
}
describe("usePersistedPinnedGroups", () => {
it("starts empty, toggling a pin adds it, toggling again removes it", () => {
const m = mount("text");
expect(m.api.pinnedGroupIds).toEqual([]);
act(() => m.api.togglePin("motion"));
expect(m.api.pinnedGroupIds).toEqual(["motion"]);
act(() => m.api.togglePin("motion"));
expect(m.api.pinnedGroupIds).toEqual([]);
act(() => m.root.unmount());
});
it("persists across remounts, scoped per element kind", () => {
const first = mount("text");
act(() => first.api.togglePin("motion"));
act(() => first.root.unmount());
const secondSameKind = mount("text");
expect(secondSameKind.api.pinnedGroupIds).toEqual(["motion"]);
act(() => secondSameKind.root.unmount());
const thirdOtherKind = mount("media");
expect(thirdOtherKind.api.pinnedGroupIds).toEqual([]);
act(() => thirdOtherKind.root.unmount());
});
});
packages/studio/src/hooks/usePersistedPinnedGroups.ts
-26
View File
@@ -1,26 +0,0 @@
import { useCallback, useState } from "react";
import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
export function usePersistedPinnedGroups(elementKind: string) {
const [pinnedGroupIds, setPinnedGroupIds] = useState<string[]>(
() => readStudioUiPreferences().pinnedGroupsByElementType?.[elementKind] ?? [],
);
const togglePin = useCallback(
(groupId: string) => {
setPinnedGroupIds((current) => {
const next = current.includes(groupId)
? current.filter((id) => id !== groupId)
: [...current, groupId];
const existing = readStudioUiPreferences().pinnedGroupsByElementType ?? {};
writeStudioUiPreferences({
pinnedGroupsByElementType: { ...existing, [elementKind]: next },
});
return next;
});
},
[elementKind],
);
return { pinnedGroupIds, togglePin };
}
packages/studio/src/utils/studioUiPreferences.test.ts
-45
View File
@@ -88,48 +88,3 @@ describe("timeline zoom pin persistence", () => {
expect(prefs.timelineManualZoomPercent).toBeUndefined();
});
});
function fakeStorage(): Storage {
const map = new Map<string, string>();
return {
getItem: (k) => map.get(k) ?? null,
setItem: (k, v) => void map.set(k, v),
removeItem: (k) => void map.delete(k),
clear: () => map.clear(),
key: () => null,
get length() {
return map.size;
},
} as Storage;
}
describe("pinnedGroupsByElementType", () => {
it("round-trips a per-element-type pin map", () => {
const storage = fakeStorage();
writeStudioUiPreferences(
{ pinnedGroupsByElementType: { text: ["motion"], media: ["grade"] } },
storage,
);
const read = readStudioUiPreferences(storage);
expect(read.pinnedGroupsByElementType).toEqual({ text: ["motion"], media: ["grade"] });
});
it("ignores a malformed pinnedGroupsByElementType (non-object, or non-string-array values)", () => {
const storage = fakeStorage();
storage.setItem(
"hf-studio-ui-preferences",
JSON.stringify({ pinnedGroupsByElementType: { text: "not-an-array", media: [1, 2] } }),
);
const read = readStudioUiPreferences(storage);
expect(read.pinnedGroupsByElementType).toEqual({ media: [] });
});
it("merges a pin-map patch without clobbering other preferences", () => {
const storage = fakeStorage();
writeStudioUiPreferences({ audioMuted: true }, storage);
writeStudioUiPreferences({ pinnedGroupsByElementType: { text: ["style"] } }, storage);
const read = readStudioUiPreferences(storage);
expect(read.audioMuted).toBe(true);
expect(read.pinnedGroupsByElementType).toEqual({ text: ["style"] });
});
});
packages/studio/src/utils/studioUiPreferences.ts
-10
View File
@@ -28,7 +28,6 @@ export interface StudioUiPreferences {
timelineZoomMode?: "fit" | "manual";
/** Manual timeline zoom percent, paired with `timelineZoomMode: "manual"`. */
timelineManualZoomPercent?: number;
pinnedGroupsByElementType?: Record<string, string[]>;
}
const STUDIO_UI_PREFERENCES_KEY = "hf-studio-ui-preferences";
@@ -116,15 +115,6 @@ function readStorage(storage: Storage | null): StudioUiPreferences {
) {
preferences.timelineManualZoomPercent = parsed.timelineManualZoomPercent;
}
if (isRecord(parsed.pinnedGroupsByElementType)) {
const map: Record<string, string[]> = {};
for (const [kind, ids] of Object.entries(parsed.pinnedGroupsByElementType)) {
if (Array.isArray(ids)) {
map[kind] = ids.filter((id): id is string => typeof id === "string");
}
}
preferences.pinnedGroupsByElementType = map;
}
return preferences;
} catch {
return {};