Skip to content

Commit 05ac0a7

Browse files
adamdotdevinadamdotdevin
authored
fix(app): simplify review layout (#14953)
Co-authored-by: adamelmore <2363879+adamdottv@users.noreply.github.com>
1 parent 7453e78 commit 05ac0a7

2 files changed

Lines changed: 111 additions & 141 deletions

File tree

‎packages/app/src/pages/session.tsx‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,7 @@ export default function Page() {
416416
)
417417

418418
const mobileChanges = createMemo(() => !isDesktop() && store.mobileTab === "changes")
419-
const reviewTab = createMemo(() => isDesktop() && !layout.fileTree.opened())
419+
const reviewTab = createMemo(() => isDesktop())
420420

421421
const fileTreeTab = () => layout.fileTree.tab()
422422
const setFileTreeTab = (value: "changes" | "all") => layout.fileTree.setTab(value)
@@ -700,33 +700,12 @@ export default function Page() {
700700
const active = tabs().active()
701701
const tab = active === "review" || (!active && hasReview()) ? "changes" : "all"
702702
layout.fileTree.setTab(tab)
703-
return
704703
}
705-
706-
if (fileTreeTab() !== "changes") return
707-
tabs().setActive("review")
708704
},
709705
{ defer: true },
710706
),
711707
)
712708

713-
createEffect(() => {
714-
if (!isDesktop()) return
715-
if (!layout.fileTree.opened()) return
716-
if (fileTreeTab() !== "all") return
717-
718-
const active = tabs().active()
719-
if (active && active !== "review") return
720-
721-
const first = openedTabs()[0]
722-
if (first) {
723-
tabs().setActive(first)
724-
return
725-
}
726-
727-
if (contextOpen()) tabs().setActive("context")
728-
})
729-
730709
createEffect(() => {
731710
const id = params.id
732711
if (!id) return

‎packages/app/src/pages/session/session-side-panel.tsx‎

Lines changed: 110 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export function SessionSidePanel(props: {
4747

4848
const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
4949
const open = createMemo(() => isDesktop() && (view().reviewPanel.opened() || layout.fileTree.opened()))
50-
const reviewTab = createMemo(() => isDesktop() && !layout.fileTree.opened())
50+
const reviewTab = createMemo(() => isDesktop())
5151

5252
const info = createMemo(() => (params.id ? sync.session.get(params.id) : undefined))
5353
const diffs = createMemo(() => (params.id ? (sync.data.session_diff[params.id] ?? []) : []))
@@ -202,133 +202,124 @@ export function SessionSidePanel(props: {
202202
>
203203
<Show when={reviewOpen()}>
204204
<div class="flex-1 min-w-0 h-full">
205-
<Show
206-
when={layout.fileTree.opened() && fileTreeTab() === "changes"}
207-
fallback={
208-
<DragDropProvider
209-
onDragStart={handleDragStart}
210-
onDragEnd={handleDragEnd}
211-
onDragOver={handleDragOver}
212-
collisionDetector={closestCenter}
213-
>
214-
<DragDropSensors />
215-
<ConstrainDragYAxis />
216-
<Tabs value={activeTab()} onChange={openTab}>
217-
<div class="sticky top-0 shrink-0 flex">
218-
<Tabs.List
219-
ref={(el: HTMLDivElement) => {
220-
const stop = createFileTabListSync({ el, contextOpen })
221-
onCleanup(stop)
222-
}}
223-
>
224-
<Show when={reviewTab()}>
225-
<Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
226-
<div class="flex items-center gap-1.5">
227-
<div>{language.t("session.tab.review")}</div>
228-
<Show when={hasReview()}>
229-
<div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
230-
{reviewCount()}
231-
</div>
232-
</Show>
233-
</div>
234-
</Tabs.Trigger>
235-
</Show>
236-
<Show when={contextOpen()}>
237-
<Tabs.Trigger
238-
value="context"
239-
closeButton={
240-
<Tooltip value={language.t("common.closeTab")} placement="bottom">
241-
<IconButton
242-
icon="close-small"
243-
variant="ghost"
244-
class="h-5 w-5"
245-
onClick={() => tabs().close("context")}
246-
aria-label={language.t("common.closeTab")}
247-
/>
248-
</Tooltip>
249-
}
250-
hideCloseButton
251-
onMiddleClick={() => tabs().close("context")}
252-
>
253-
<div class="flex items-center gap-2">
254-
<SessionContextUsage variant="indicator" />
255-
<div>{language.t("session.tab.context")}</div>
205+
<DragDropProvider
206+
onDragStart={handleDragStart}
207+
onDragEnd={handleDragEnd}
208+
onDragOver={handleDragOver}
209+
collisionDetector={closestCenter}
210+
>
211+
<DragDropSensors />
212+
<ConstrainDragYAxis />
213+
<Tabs value={activeTab()} onChange={openTab}>
214+
<div class="sticky top-0 shrink-0 flex">
215+
<Tabs.List
216+
ref={(el: HTMLDivElement) => {
217+
const stop = createFileTabListSync({ el, contextOpen })
218+
onCleanup(stop)
219+
}}
220+
>
221+
<Show when={reviewTab()}>
222+
<Tabs.Trigger value="review" classes={{ button: "!pl-6" }}>
223+
<div class="flex items-center gap-1.5">
224+
<div>{language.t("session.tab.review")}</div>
225+
<Show when={hasReview()}>
226+
<div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
227+
{reviewCount()}
256228
</div>
257-
</Tabs.Trigger>
258-
</Show>
259-
<SortableProvider ids={openedTabs()}>
260-
<For each={openedTabs()}>{(tab) => <SortableTab tab={tab} onTabClose={tabs().close} />}</For>
261-
</SortableProvider>
262-
<StickyAddButton>
263-
<TooltipKeybind
264-
title={language.t("command.file.open")}
265-
keybind={command.keybind("file.open")}
266-
class="flex items-center"
267-
>
229+
</Show>
230+
</div>
231+
</Tabs.Trigger>
232+
</Show>
233+
<Show when={contextOpen()}>
234+
<Tabs.Trigger
235+
value="context"
236+
closeButton={
237+
<Tooltip value={language.t("common.closeTab")} placement="bottom">
268238
<IconButton
269-
icon="plus-small"
239+
icon="close-small"
270240
variant="ghost"
271-
iconSize="large"
272-
onClick={() =>
273-
dialog.show(() => <DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
274-
}
275-
aria-label={language.t("command.file.open")}
241+
class="h-5 w-5"
242+
onClick={() => tabs().close("context")}
243+
aria-label={language.t("common.closeTab")}
276244
/>
277-
</TooltipKeybind>
278-
</StickyAddButton>
279-
</Tabs.List>
280-
</div>
281-
282-
<Show when={reviewTab()}>
283-
<Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
284-
<Show when={activeTab() === "review"}>{props.reviewPanel()}</Show>
285-
</Tabs.Content>
245+
</Tooltip>
246+
}
247+
hideCloseButton
248+
onMiddleClick={() => tabs().close("context")}
249+
>
250+
<div class="flex items-center gap-2">
251+
<SessionContextUsage variant="indicator" />
252+
<div>{language.t("session.tab.context")}</div>
253+
</div>
254+
</Tabs.Trigger>
286255
</Show>
287-
288-
<Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
289-
<Show when={activeTab() === "empty"}>
290-
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
291-
<div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
292-
<Mark class="w-14 opacity-10" />
293-
<div class="text-14-regular text-text-weak max-w-56">
294-
{language.t("session.files.selectToOpen")}
295-
</div>
296-
</div>
256+
<SortableProvider ids={openedTabs()}>
257+
<For each={openedTabs()}>{(tab) => <SortableTab tab={tab} onTabClose={tabs().close} />}</For>
258+
</SortableProvider>
259+
<StickyAddButton>
260+
<TooltipKeybind
261+
title={language.t("command.file.open")}
262+
keybind={command.keybind("file.open")}
263+
class="flex items-center"
264+
>
265+
<IconButton
266+
icon="plus-small"
267+
variant="ghost"
268+
iconSize="large"
269+
onClick={() => dialog.show(() => <DialogSelectFile mode="files" onOpenFile={showAllFiles} />)}
270+
aria-label={language.t("command.file.open")}
271+
/>
272+
</TooltipKeybind>
273+
</StickyAddButton>
274+
</Tabs.List>
275+
</div>
276+
277+
<Show when={reviewTab()}>
278+
<Tabs.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
279+
<Show when={activeTab() === "review"}>{props.reviewPanel()}</Show>
280+
</Tabs.Content>
281+
</Show>
282+
283+
<Tabs.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
284+
<Show when={activeTab() === "empty"}>
285+
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
286+
<div class="h-full px-6 pb-42 flex flex-col items-center justify-center text-center gap-6">
287+
<Mark class="w-14 opacity-10" />
288+
<div class="text-14-regular text-text-weak max-w-56">
289+
{language.t("session.files.selectToOpen")}
297290
</div>
298-
</Show>
299-
</Tabs.Content>
291+
</div>
292+
</div>
293+
</Show>
294+
</Tabs.Content>
300295

301-
<Show when={contextOpen()}>
302-
<Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
303-
<Show when={activeTab() === "context"}>
304-
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
305-
<SessionContextTab />
306-
</div>
307-
</Show>
308-
</Tabs.Content>
296+
<Show when={contextOpen()}>
297+
<Tabs.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
298+
<Show when={activeTab() === "context"}>
299+
<div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
300+
<SessionContextTab />
301+
</div>
309302
</Show>
303+
</Tabs.Content>
304+
</Show>
310305

311-
<Show when={activeFileTab()} keyed>
312-
{(tab) => <FileTabContent tab={tab} />}
313-
</Show>
314-
</Tabs>
315-
<DragOverlay>
316-
<Show when={store.activeDraggable} keyed>
317-
{(tab) => {
318-
const path = createMemo(() => file.pathFromTab(tab))
319-
return (
320-
<div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
321-
<Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
322-
</div>
323-
)
324-
}}
325-
</Show>
326-
</DragOverlay>
327-
</DragDropProvider>
328-
}
329-
>
330-
{props.reviewPanel()}
331-
</Show>
306+
<Show when={activeFileTab()} keyed>
307+
{(tab) => <FileTabContent tab={tab} />}
308+
</Show>
309+
</Tabs>
310+
<DragOverlay>
311+
<Show when={store.activeDraggable} keyed>
312+
{(tab) => {
313+
const path = createMemo(() => file.pathFromTab(tab))
314+
return (
315+
<div class="relative px-6 h-12 flex items-center bg-background-stronger border-x border-border-weak-base border-b border-b-transparent">
316+
<Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
317+
</div>
318+
)
319+
}}
320+
</Show>
321+
</DragOverlay>
322+
</DragDropProvider>
332323
</div>
333324
</Show>
334325

0 commit comments

Comments
 (0)