feat: Handle timeline selection state in editor UI actions

apps/desktop/src/routes/editor/ConfigSidebar.tsx

@@ -242,10 +242,10 @@ export function ConfigSidebar() {
 
 	return (
 		<KTabs
-			value={state.selectedTab}
+			value={editorState.timeline.selection ? undefined : state.selectedTab}
 			class="flex flex-col min-h-0 shrink-0 flex-1 max-w-[26rem] overflow-hidden rounded-xl z-10 relative bg-gray-1 dark:bg-gray-2 border border-gray-3"
 		>
-			<KTabs.List class="flex overflow-hidden sticky top-0 z-30 flex-row items-center h-16 text-lg border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
+			<KTabs.List class="flex overflow-hidden sticky top-0 z-[60] flex-row items-center h-16 text-lg border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
 				<For
 					each={[
 						{ id: TAB_IDS.background, icon: IconCapImage },
@@ -274,8 +274,17 @@ export function ConfigSidebar() {
 					{(item) => (
 						<KTabs.Trigger
 							value={item.id}
-							class="flex relative z-10 flex-1 justify-center items-center px-4 py-2 transition-colors text-gray-11 group ui-selected:text-gray-12 disabled:opacity-50 focus:outline-none"
+							class={cx(
+								"flex relative z-10 flex-1 justify-center items-center px-4 py-2 transition-colors group disabled:opacity-50 focus:outline-none",
+								editorState.timeline.selection
+									? "text-gray-11"
+									: "text-gray-11 ui-selected:text-gray-12",
+							)}
 							onClick={() => {
+								// Clear any active selection first
+								if (editorState.timeline.selection) {
+									setEditorState("timeline", "selection", null);
+								}
 								setState("selectedTab", item.id);
 								scrollRef.scrollTo({
 									top: 0,
@@ -297,9 +306,11 @@ export function ConfigSidebar() {
 				</For>
 
 				{/** Center the indicator with the icon */}
-				<KTabs.Indicator class="absolute top-0 left-0 w-full h-full transition-transform duration-200 ease-in-out pointer-events-none will-change-transform">
-					<div class="absolute top-1/2 left-1/2 rounded-lg transform -translate-x-1/2 -translate-y-1/2 bg-gray-3 will-change-transform size-9" />
-				</KTabs.Indicator>
+				<Show when={!editorState.timeline.selection}>
+					<KTabs.Indicator class="absolute top-0 left-0 w-full h-full transition-transform duration-200 ease-in-out pointer-events-none will-change-transform">
+						<div class="absolute top-1/2 left-1/2 rounded-lg transform -translate-x-1/2 -translate-y-1/2 bg-gray-3 will-change-transform size-9" />
+					</KTabs.Indicator>
+				</Show>
 			</KTabs.List>
 			<div
 				ref={scrollRef}
@@ -583,7 +594,7 @@ export function ConfigSidebar() {
 						style={{
 							"--margin-top-scroll": "5px",
 						}}
-						class="absolute custom-scroll p-5 inset-0 text-[0.875rem] space-y-4 bg-gray-1 dark:bg-gray-2 z-50 animate-in slide-in-from-bottom-2 fade-in"
+						class="absolute custom-scroll p-5 top-16 left-0 right-0 bottom-0 text-[0.875rem] space-y-4 bg-gray-1 dark:bg-gray-2 z-50 animate-in slide-in-from-bottom-2 fade-in"
 					>
 						<Suspense>
 							<Show

apps/desktop/src/routes/editor/Header.tsx

@@ -52,6 +52,8 @@ export function Header() {
 		exportState,
 		setExportState,
 		customDomain,
+		editorState,
+		setEditorState,
 	} = useEditorContext();
 
 	let unlistenTitlebar: UnlistenFn | undefined;
@@ -72,20 +74,38 @@ export function Header() {
 				{ostype() === "macos" && <div class="h-full w-[4rem]" />}
 				<EditorButton
 					onClick={async () => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+
 						if (!(await ask("Are you sure you want to delete this recording?")))
 							return;
 
 						await commands.editorDeleteProject();
 					}}
-					tooltipText="Delete recording"
+					tooltipText={
+						editorState.timeline.selection
+							? "Close selection"
+							: "Delete recording"
+					}
 					leftIcon={<IconCapTrash class="w-5" />}
 				/>
 				<EditorButton
 					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+
 						console.log({ path: `${editorInstance.path}/` });
 						revealItemInDir(`${editorInstance.path}/`);
 					}}
-					tooltipText="Open recording bundle"
+					tooltipText={
+						editorState.timeline.selection
+							? "Close selection"
+							: "Open recording bundle"
+					}
 					leftIcon={<IconLucideFolder class="w-5" />}
 				/>
 
@@ -95,14 +115,30 @@ export function Header() {
 				</div>
 				<div data-tauri-drag-region class="flex-1 h-full" />
 				<EditorButton
-					tooltipText="Captions"
+					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+					}}
+					tooltipText={
+						editorState.timeline.selection ? "Close selection" : "Captions"
+					}
 					leftIcon={<IconCapCaptions class="w-5" />}
-					comingSoon
+					comingSoon={!editorState.timeline.selection}
 				/>
 				<EditorButton
-					tooltipText="Performance"
+					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+					}}
+					tooltipText={
+						editorState.timeline.selection ? "Close selection" : "Performance"
+					}
 					leftIcon={<IconCapGauge class="w-[18px]" />}
-					comingSoon
+					comingSoon={!editorState.timeline.selection}
 				/>
 			</div>
 
@@ -121,15 +157,35 @@ export function Header() {
 				)}
 			>
 				<EditorButton
-					onClick={() => projectHistory.undo()}
-					disabled={!projectHistory.canUndo()}
-					tooltipText="Undo"
+					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+						projectHistory.undo();
+					}}
+					disabled={
+						!projectHistory.canUndo() && !editorState.timeline.selection
+					}
+					tooltipText={
+						editorState.timeline.selection ? "Close selection" : "Undo"
+					}
 					leftIcon={<IconCapUndo class="w-5" />}
 				/>
 				<EditorButton
-					onClick={() => projectHistory.redo()}
-					disabled={!projectHistory.canRedo()}
-					tooltipText="Redo"
+					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+						projectHistory.redo();
+					}}
+					disabled={
+						!projectHistory.canRedo() && !editorState.timeline.selection
+					}
+					tooltipText={
+						editorState.timeline.selection ? "Close selection" : "Redo"
+					}
 					leftIcon={<IconCapRedo class="w-5" />}
 				/>
 				<div data-tauri-drag-region class="flex-1 h-full" />
@@ -140,6 +196,11 @@ export function Header() {
 					variant="dark"
 					class="flex gap-1.5 justify-center h-[40px] w-full max-w-[100px]"
 					onClick={() => {
+						if (editorState.timeline.selection) {
+							setEditorState("timeline", "selection", null);
+							return;
+						}
+
 						trackEvent("export_button_clicked");
 						if (exportState.type === "done") setExportState({ type: "idle" });
 

apps/desktop/src/routes/editor/ShareButton.tsx

@@ -20,7 +20,8 @@ import {
 } from "./ui";
 
 function ShareButton() {
-	const { editorInstance, meta, customDomain } = useEditorContext();
+	const { editorInstance, meta, customDomain, editorState, setEditorState } =
+		useEditorContext();
 	const projectPath = editorInstance.path;
 
 	const upload = createMutation(() => ({
@@ -189,7 +190,13 @@ function ShareButton() {
 							>
 								<Button
 									disabled={upload.isPending}
-									onClick={() => upload.mutate()}
+									onClick={() => {
+										if (editorState.timeline.selection) {
+											setEditorState("timeline", "selection", null);
+											return;
+										}
+										upload.mutate();
+									}}
 									variant="dark"
 									class="flex justify-center items-center size-[41px] !px-0 !py-0 space-x-1"
 								>

apps/desktop/src/utils/tauri.ts

@@ -263,8 +263,8 @@ async displayInformation(displayId: string) : Promise<DisplayInformation> {
 async getWindowIcon(windowId: string) : Promise<string | null> {
     return await TAURI_INVOKE("get_window_icon", { windowId });
 },
-async editorDeleteProject() : Promise<void> {
-    await TAURI_INVOKE("editor_delete_project");
+async editorDeleteProject() : Promise<null> {
+    return await TAURI_INVOKE("editor_delete_project");
 }
 }