Skip to content

Commit 37e680d

Browse files
richiemcilroyrichiemcilroy
authored
feat: Handle timeline selection state in editor UI actions (#1030)
1 parent 428bb0e commit 37e680d

File tree

4 files changed

+102
-23
lines changed

4 files changed

+102
-23
lines changed

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -242,10 +242,10 @@ export function ConfigSidebar() {
242242

243243
return (
244244
<KTabs
245-
value={state.selectedTab}
245+
value={editorState.timeline.selection ? undefined : state.selectedTab}
246246
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"
247247
>
248-
<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">
248+
<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">
249249
<For
250250
each={[
251251
{ id: TAB_IDS.background, icon: IconCapImage },
@@ -274,8 +274,17 @@ export function ConfigSidebar() {
274274
{(item) => (
275275
<KTabs.Trigger
276276
value={item.id}
277-
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"
277+
class={cx(
278+
"flex relative z-10 flex-1 justify-center items-center px-4 py-2 transition-colors group disabled:opacity-50 focus:outline-none",
279+
editorState.timeline.selection
280+
? "text-gray-11"
281+
: "text-gray-11 ui-selected:text-gray-12",
282+
)}
278283
onClick={() => {
284+
// Clear any active selection first
285+
if (editorState.timeline.selection) {
286+
setEditorState("timeline", "selection", null);
287+
}
279288
setState("selectedTab", item.id);
280289
scrollRef.scrollTo({
281290
top: 0,
@@ -297,9 +306,11 @@ export function ConfigSidebar() {
297306
</For>
298307

299308
{/** Center the indicator with the icon */}
300-
<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">
301-
<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" />
302-
</KTabs.Indicator>
309+
<Show when={!editorState.timeline.selection}>
310+
<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">
311+
<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" />
312+
</KTabs.Indicator>
313+
</Show>
303314
</KTabs.List>
304315
<div
305316
ref={scrollRef}
@@ -583,7 +594,7 @@ export function ConfigSidebar() {
583594
style={{
584595
"--margin-top-scroll": "5px",
585596
}}
586-
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"
597+
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"
587598
>
588599
<Suspense>
589600
<Show

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

Lines changed: 73 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export function Header() {
5252
exportState,
5353
setExportState,
5454
customDomain,
55+
editorState,
56+
setEditorState,
5557
} = useEditorContext();
5658

5759
let unlistenTitlebar: UnlistenFn | undefined;
@@ -72,20 +74,38 @@ export function Header() {
7274
{ostype() === "macos" && <div class="h-full w-[4rem]" />}
7375
<EditorButton
7476
onClick={async () => {
77+
if (editorState.timeline.selection) {
78+
setEditorState("timeline", "selection", null);
79+
return;
80+
}
81+
7582
if (!(await ask("Are you sure you want to delete this recording?")))
7683
return;
7784

7885
await commands.editorDeleteProject();
7986
}}
80-
tooltipText="Delete recording"
87+
tooltipText={
88+
editorState.timeline.selection
89+
? "Close selection"
90+
: "Delete recording"
91+
}
8192
leftIcon={<IconCapTrash class="w-5" />}
8293
/>
8394
<EditorButton
8495
onClick={() => {
96+
if (editorState.timeline.selection) {
97+
setEditorState("timeline", "selection", null);
98+
return;
99+
}
100+
85101
console.log({ path: `${editorInstance.path}/` });
86102
revealItemInDir(`${editorInstance.path}/`);
87103
}}
88-
tooltipText="Open recording bundle"
104+
tooltipText={
105+
editorState.timeline.selection
106+
? "Close selection"
107+
: "Open recording bundle"
108+
}
89109
leftIcon={<IconLucideFolder class="w-5" />}
90110
/>
91111

@@ -95,14 +115,30 @@ export function Header() {
95115
</div>
96116
<div data-tauri-drag-region class="flex-1 h-full" />
97117
<EditorButton
98-
tooltipText="Captions"
118+
onClick={() => {
119+
if (editorState.timeline.selection) {
120+
setEditorState("timeline", "selection", null);
121+
return;
122+
}
123+
}}
124+
tooltipText={
125+
editorState.timeline.selection ? "Close selection" : "Captions"
126+
}
99127
leftIcon={<IconCapCaptions class="w-5" />}
100-
comingSoon
128+
comingSoon={!editorState.timeline.selection}
101129
/>
102130
<EditorButton
103-
tooltipText="Performance"
131+
onClick={() => {
132+
if (editorState.timeline.selection) {
133+
setEditorState("timeline", "selection", null);
134+
return;
135+
}
136+
}}
137+
tooltipText={
138+
editorState.timeline.selection ? "Close selection" : "Performance"
139+
}
104140
leftIcon={<IconCapGauge class="w-[18px]" />}
105-
comingSoon
141+
comingSoon={!editorState.timeline.selection}
106142
/>
107143
</div>
108144

@@ -121,15 +157,35 @@ export function Header() {
121157
)}
122158
>
123159
<EditorButton
124-
onClick={() => projectHistory.undo()}
125-
disabled={!projectHistory.canUndo()}
126-
tooltipText="Undo"
160+
onClick={() => {
161+
if (editorState.timeline.selection) {
162+
setEditorState("timeline", "selection", null);
163+
return;
164+
}
165+
projectHistory.undo();
166+
}}
167+
disabled={
168+
!projectHistory.canUndo() && !editorState.timeline.selection
169+
}
170+
tooltipText={
171+
editorState.timeline.selection ? "Close selection" : "Undo"
172+
}
127173
leftIcon={<IconCapUndo class="w-5" />}
128174
/>
129175
<EditorButton
130-
onClick={() => projectHistory.redo()}
131-
disabled={!projectHistory.canRedo()}
132-
tooltipText="Redo"
176+
onClick={() => {
177+
if (editorState.timeline.selection) {
178+
setEditorState("timeline", "selection", null);
179+
return;
180+
}
181+
projectHistory.redo();
182+
}}
183+
disabled={
184+
!projectHistory.canRedo() && !editorState.timeline.selection
185+
}
186+
tooltipText={
187+
editorState.timeline.selection ? "Close selection" : "Redo"
188+
}
133189
leftIcon={<IconCapRedo class="w-5" />}
134190
/>
135191
<div data-tauri-drag-region class="flex-1 h-full" />
@@ -140,6 +196,11 @@ export function Header() {
140196
variant="dark"
141197
class="flex gap-1.5 justify-center h-[40px] w-full max-w-[100px]"
142198
onClick={() => {
199+
if (editorState.timeline.selection) {
200+
setEditorState("timeline", "selection", null);
201+
return;
202+
}
203+
143204
trackEvent("export_button_clicked");
144205
if (exportState.type === "done") setExportState({ type: "idle" });
145206

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import {
2020
} from "./ui";
2121

2222
function ShareButton() {
23-
const { editorInstance, meta, customDomain } = useEditorContext();
23+
const { editorInstance, meta, customDomain, editorState, setEditorState } =
24+
useEditorContext();
2425
const projectPath = editorInstance.path;
2526

2627
const upload = createMutation(() => ({
@@ -189,7 +190,13 @@ function ShareButton() {
189190
>
190191
<Button
191192
disabled={upload.isPending}
192-
onClick={() => upload.mutate()}
193+
onClick={() => {
194+
if (editorState.timeline.selection) {
195+
setEditorState("timeline", "selection", null);
196+
return;
197+
}
198+
upload.mutate();
199+
}}
193200
variant="dark"
194201
class="flex justify-center items-center size-[41px] !px-0 !py-0 space-x-1"
195202
>

‎apps/desktop/src/utils/tauri.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -263,8 +263,8 @@ async displayInformation(displayId: string) : Promise<DisplayInformation> {
263263
async getWindowIcon(windowId: string) : Promise<string | null> {
264264
return await TAURI_INVOKE("get_window_icon", { windowId });
265265
},
266-
async editorDeleteProject() : Promise<void> {
267-
await TAURI_INVOKE("editor_delete_project");
266+
async editorDeleteProject() : Promise<null> {
267+
return await TAURI_INVOKE("editor_delete_project");
268268
}
269269
}
270270

0 commit comments

Comments
 (0)