refactor(web): finding 9 - simplify useBuilderSidebar selector

Remove generic selector overload from useBuilderSidebar; callers
destructure the full return object instead of using a selector that
provides no meaningful benefit (state is rebuilt on every render).

Claude-Session: https://claude.ai/code/session_012Bnvt1MghwHj4qQRxuQUGa

apps/web/src/routes/builder/$resumeId/-components/header.tsx

@@ -30,7 +30,7 @@ import {
 	DropdownMenuTrigger,
 } from "@reactive-resume/ui/components/dropdown-menu";
 import { useDialogStore } from "@/dialogs/store";
-import { useCurrentResume, usePatchResume, useSaveStatus } from "@/features/resume/builder/draft";
+import { useCurrentResume, usePatchResume, useResumeStore } from "@/features/resume/builder/draft";
 import { useResumeExport } from "@/features/resume/export/use-resume-export";
 import { useConfirm } from "@/hooks/use-confirm";
 import { getResumeErrorMessage } from "@/libs/error-message";
@@ -43,7 +43,7 @@ export function BuilderHeader() {
 	const resume = useCurrentResume();
 	const name = resume.name;
 	const isLocked = resume.isLocked;
-	const toggleSidebar = useBuilderSidebar((state) => state.toggleSidebar);
+	const { toggleSidebar } = useBuilderSidebar();
 
 	// Equal-width flex-1 side groups keep the center title group truly centered regardless of the
 	// wider Download button on the right.
@@ -149,7 +149,7 @@ function ResumeDownloadButton() {
 }
 
 function SaveStatusIndicator() {
-	const status = useSaveStatus();
+	const status = useResumeStore((state) => state.saveStatus);
 	if (status === "idle") return null;
 
 	const { icon, label } = match(status)

apps/web/src/routes/builder/$resumeId/-sidebar/left/index.tsx

@@ -123,7 +123,7 @@ function LockBanner() {
 }
 
 function SidebarEdge() {
-	const toggleSidebar = useBuilderSidebar((state) => state.toggleSidebar);
+	const { toggleSidebar } = useBuilderSidebar();
 
 	const scrollToSection = useCallback(
 		(section: LeftSidebarSection) => {

apps/web/src/routes/builder/$resumeId/-sidebar/right/index.tsx

@@ -66,7 +66,7 @@ export function BuilderSidebarRight() {
 }
 
 function SidebarEdge() {
-	const toggleSidebar = useBuilderSidebar((state) => state.toggleSidebar);
+	const { toggleSidebar } = useBuilderSidebar();
 
 	const scrollToSection = useCallback(
 		(section: RightSidebarSection) => {

apps/web/src/routes/builder/$resumeId/-store/sidebar.ts

@@ -100,7 +100,7 @@ type UseBuilderSidebarReturn = {
 	toggleSidebar: (side: "left" | "right", forceState?: boolean) => void;
 };
 
-export function useBuilderSidebar<T = UseBuilderSidebarReturn>(selector?: (builder: UseBuilderSidebarReturn) => T): T {
+export function useBuilderSidebar(): UseBuilderSidebarReturn {
 	const isMobile = useMediaQuery("(max-width: 767px)", { initializeWithValue: false });
 	const { width } = useWindowSize();
 
@@ -134,7 +134,8 @@ export function useBuilderSidebar<T = UseBuilderSidebarReturn>(selector?: (build
 		[expandSize],
 	);
 
-	const state = useMemo(() => {
+	// ponytail: memoized but callers destructure; selector removed (state rebuilt every render, zero benefit)
+	return useMemo(() => {
 		return {
 			maxSidebarSize,
 			minSidebarSize,
@@ -144,6 +145,4 @@ export function useBuilderSidebar<T = UseBuilderSidebarReturn>(selector?: (build
 			toggleSidebar,
 		};
 	}, [maxSidebarSize, minSidebarSize, collapsedSidebarSize, groupResizeBehavior, isCollapsed, toggleSidebar]);
-
-	return selector ? selector(state) : (state as T);
 }

apps/web/src/routes/builder/$resumeId/route.tsx

@@ -15,8 +15,6 @@ import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@reactive-re
 import { cn } from "@reactive-resume/utils/style";
 import {
 	useBuilderResumeUpdateSubscription,
-	useInitializeResumeStore,
-	useMergeResumeMetadata,
 	usePreviewPausedStore,
 	useResumeCleanup,
 	useResumeStore,
@@ -61,8 +59,8 @@ function RouteComponent() {
 
 	const { resumeId } = Route.useParams();
 	const { data: resume } = useSuspenseQuery(orpc.resume.getById.queryOptions({ input: { id: resumeId } }));
-	const initializeResumeStore = useInitializeResumeStore();
-	const mergeResumeMetadata = useMergeResumeMetadata();
+	const initializeResumeStore = useResumeStore((state) => state.initialize);
+	const mergeResumeMetadata = useResumeStore((state) => state.mergeResumeMetadata);
 	const isReady = useResumeStore((state) => state.isReady);
 	const initializedResumeId = useResumeStore((state) => state.resumeId);
 	const isInitialized = isReady && initializedResumeId === resumeId;
@@ -118,12 +116,7 @@ function DesktopBuilderShell({ initialLayout }: BuilderLayoutShellProps) {
 	const setRightSidebar = useBuilderSidebarStore((state) => state.setRightSidebar);
 	const setLayout = useBuilderSidebarStore((state) => state.setLayout);
 
-	const { maxSidebarSize, minSidebarSize, collapsedSidebarSize, groupResizeBehavior } = useBuilderSidebar((state) => ({
-		maxSidebarSize: state.maxSidebarSize,
-		minSidebarSize: state.minSidebarSize,
-		collapsedSidebarSize: state.collapsedSidebarSize,
-		groupResizeBehavior: state.groupResizeBehavior,
-	}));
+	const { maxSidebarSize, minSidebarSize, collapsedSidebarSize, groupResizeBehavior } = useBuilderSidebar();
 
 	useEffect(() => {
 		setLayout(initialLayout);