diff --git a/bun.lock b/bun.lock
index edc8ce7..5029b3b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -43,6 +43,7 @@
         "svelte-adapter-bun": "^1.0.1",
         "svelte-check": "^4.3.3",
         "tailwindcss": "^4.1.17",
+        "tw-animate-css": "^1.4.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.46.3",
         "vite": "^7.2.2",
@@ -1037,6 +1038,8 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
diff --git a/web/package.json b/web/package.json
index a0bad4f..e8909ec 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
         "preview": "vite preview",
         "prepare": "svelte-kit sync || echo ''",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:all": "bun run check && bun run lint && vitest run",
         "test": "vitest",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
         "format": "prettier --write .",
@@ -40,6 +41,7 @@
         "svelte-adapter-bun": "^1.0.1",
         "svelte-check": "^4.3.3",
         "tailwindcss": "^4.1.17",
+        "tw-animate-css": "^1.4.0",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.46.3",
         "vite": "^7.2.2",
diff --git a/web/src/app.css b/web/src/app.css
index c4176c9..ad33c77 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+@import "tw-animate-css";
 @plugin "@iconify/tailwind4" {
     prefixes: octicon;
 }
diff --git a/web/src/lib/components/menu-bar/MenuBar.svelte b/web/src/lib/components/menu-bar/MenuBar.svelte
new file mode 100644
index 0000000..0e27ddc
--- /dev/null
+++ b/web/src/lib/components/menu-bar/MenuBar.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+    import { MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
+    import { Keybinds } from "$lib/keybinds.svelte";
+    import { Menubar, Button } from "bits-ui";
+
+    const viewer = MultiFileDiffViewerState.get();
+</script>
+
+{#snippet keybind(key: string)}
+    <span class="text-em-med">{Keybinds.getModifierKey()}+{key}</span>
+{/snippet}
+
+<Menubar.Root class="flex border-b leading-none">
+    <Menubar.Menu>
+        <Menubar.Trigger class="btn-ghost px-2 py-1 text-sm font-medium data-[state=open]:btn-ghost-hover">diffs.dev</Menubar.Trigger>
+        <Menubar.Portal>
+            <Menubar.Content class="z-20 border bg-neutral text-sm" align="start">
+                <Menubar.Item>
+                    <Button.Root
+                        href="https://github.com/PaperMC/diff-viewer"
+                        class="flex items-center gap-2 btn-ghost px-2 py-1"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span class="iconify size-4 shrink-0 octicon--mark-github-16" aria-hidden="true"></span>
+                        GitHub Repository
+                    </Button.Root>
+                </Menubar.Item>
+                <Menubar.Item>
+                    <Button.Root
+                        href="https://chromewebstore.google.com/detail/patch-roulette/feaaoepdocmiibjilhoahgldkaajfnhb"
+                        class="flex items-center gap-2 btn-ghost px-2 py-1"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span class="iconify size-4 shrink-0 octicon--download-16" aria-hidden="true"></span>
+                        Chrome Extension
+                    </Button.Root>
+                </Menubar.Item>
+                <Menubar.Item>
+                    <Button.Root
+                        href="https://addons.mozilla.org/en-US/firefox/addon/patch-roulette/"
+                        class="flex items-center gap-2 btn-ghost px-2 py-1"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span class="iconify size-4 shrink-0 octicon--download-16" aria-hidden="true"></span>
+                        Firefox Add-on
+                    </Button.Root>
+                </Menubar.Item>
+                <Menubar.Separator class="h-px w-full bg-edge" />
+                <Menubar.Item
+                    class="flex justify-between gap-2 btn-ghost px-2 py-1 select-none"
+                    onSelect={() => {
+                        viewer.openSettingsDialog();
+                    }}
+                >
+                    Open Settings
+                    {@render keybind(",")}
+                </Menubar.Item>
+            </Menubar.Content>
+        </Menubar.Portal>
+    </Menubar.Menu>
+    <Menubar.Menu>
+        <Menubar.Trigger class="btn-ghost px-2 py-1 text-sm data-[state=open]:btn-ghost-hover">File</Menubar.Trigger>
+        <Menubar.Portal>
+            <Menubar.Content class="z-20 border bg-neutral text-sm" align="start">
+                <Menubar.Item
+                    class="flex justify-between gap-2 btn-ghost px-2 py-1 select-none"
+                    onSelect={() => {
+                        viewer.openOpenDiffDialog();
+                    }}
+                >
+                    Open
+                    {@render keybind("O")}
+                </Menubar.Item>
+            </Menubar.Content>
+        </Menubar.Portal>
+    </Menubar.Menu>
+    <Menubar.Menu>
+        <Menubar.Trigger class="btn-ghost px-2 py-1 text-sm data-[state=open]:btn-ghost-hover">View</Menubar.Trigger>
+        <Menubar.Portal>
+            <Menubar.Content class="z-20 border bg-neutral text-sm" align="start">
+                <Menubar.Item
+                    class="btn-ghost px-2 py-1 select-none"
+                    onSelect={() => {
+                        viewer.expandAll();
+                    }}
+                >
+                    Expand All
+                </Menubar.Item>
+                <Menubar.Item
+                    class="btn-ghost px-2 py-1 select-none"
+                    onSelect={() => {
+                        viewer.collapseAll();
+                    }}
+                >
+                    Collapse All
+                </Menubar.Item>
+            </Menubar.Content>
+        </Menubar.Portal>
+    </Menubar.Menu>
+</Menubar.Root>
diff --git a/web/src/lib/components/settings-popover/SettingsPopover.svelte b/web/src/lib/components/settings-popover/SettingsPopover.svelte
deleted file mode 100644
index 4b733d2..0000000
--- a/web/src/lib/components/settings-popover/SettingsPopover.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script module>
-    export { globalThemeSetting, sectionHeader };
-</script>
-
-<script lang="ts">
-    import SettingsPopoverGroup from "./SettingsPopoverGroup.svelte";
-    import type { RestProps } from "$lib/types";
-    import { mergeProps, Popover, type WithChildren } from "bits-ui";
-    import SimpleRadioGroup from "$lib/components/settings-popover/SimpleRadioGroup.svelte";
-    import { getGlobalTheme, setGlobalTheme } from "$lib/theme.svelte";
-
-    let { children, ...restProps }: WithChildren<RestProps> = $props();
-
-    const defTriggerProps = {
-        title: "Settings",
-        class: "size-6 rounded-md flex items-center justify-center text-primary btn-ghost data-[state=open]:btn-ghost-visible",
-    };
-
-    let triggerProps = $derived(mergeProps(defTriggerProps, restProps));
-</script>
-
-{#snippet sectionHeader(text: string)}
-    <div class="mt-4 font-semibold">{text}</div>
-{/snippet}
-
-{#snippet globalThemeSetting()}
-    <SettingsPopoverGroup title="Theme">
-        <div class="px-2 py-1">
-            <SimpleRadioGroup values={["light", "dark", "auto"]} bind:value={getGlobalTheme, setGlobalTheme} aria-label="Select theme" />
-        </div>
-    </SettingsPopoverGroup>
-{/snippet}
-
-<Popover.Root>
-    <Popover.Trigger {...triggerProps}>
-        <span class="iconify size-4 shrink-0 octicon--gear-16" aria-hidden="true"></span>
-    </Popover.Trigger>
-    <Popover.Portal>
-        <Popover.Content aria-label="Options" class="z-50 mx-2 flex flex-col gap-1 rounded-sm border bg-neutral py-1 text-sm shadow">
-            {@render children?.()}
-            <Popover.Arrow class="text-edge" />
-        </Popover.Content>
-    </Popover.Portal>
-</Popover.Root>
diff --git a/web/src/lib/components/settings/SettingsDialog.svelte b/web/src/lib/components/settings/SettingsDialog.svelte
new file mode 100644
index 0000000..e00547a
--- /dev/null
+++ b/web/src/lib/components/settings/SettingsDialog.svelte
@@ -0,0 +1,74 @@
+<script module>
+    export { globalThemeSetting, sectionHeader };
+</script>
+
+<script lang="ts">
+    import SettingsGroup from "./SettingsGroup.svelte";
+    import { Label, Dialog } from "bits-ui";
+    import SimpleRadioGroup from "$lib/components/settings/SimpleRadioGroup.svelte";
+    import { GlobalOptions } from "$lib/global-options.svelte";
+    import { getGlobalTheme, setGlobalTheme } from "$lib/theme.svelte";
+    import LabeledCheckbox from "../LabeledCheckbox.svelte";
+
+    import ShikiThemeSelector from "./ShikiThemeSelector.svelte";
+    interface Props {
+        open?: boolean;
+    }
+
+    let { open = $bindable(false) }: Props = $props();
+
+    const globalOptions = GlobalOptions.get();
+</script>
+
+{#snippet sectionHeader(text: string)}
+    <div class="mt-4 font-semibold">{text}</div>
+{/snippet}
+
+{#snippet globalThemeSetting()}
+    <SettingsGroup title="Theme">
+        <div class="px-2 py-1">
+            <SimpleRadioGroup values={["light", "dark", "auto"]} bind:value={getGlobalTheme, setGlobalTheme} aria-label="Select theme" />
+        </div>
+    </SettingsGroup>
+{/snippet}
+
+<Dialog.Root bind:open>
+    <Dialog.Portal>
+        <Dialog.Overlay
+            class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
+        <Dialog.Content
+            class="fixed top-1/2 left-1/2 z-50 flex max-h-svh w-md max-w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded-sm border bg-neutral shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[95%]"
+        >
+            <header class="flex shrink-0 flex-row items-center justify-between rounded-t-sm bg-neutral-2 p-4">
+                <Dialog.Title class="text-xl font-semibold">Settings</Dialog.Title>
+                <Dialog.Close title="Close dialog" class="flex size-6 items-center justify-center rounded-md btn-ghost text-primary">
+                    <span class="iconify octicon--x-16" aria-hidden="true"></span>
+                </Dialog.Close>
+            </header>
+
+            <div class="space-y-4 p-4">
+                {@render globalThemeSetting()}
+                <SettingsGroup title="Syntax Highlighting">
+                    <LabeledCheckbox labelText="Enable" bind:checked={globalOptions.syntaxHighlighting} />
+                    <ShikiThemeSelector mode="light" bind:value={globalOptions.syntaxHighlightingThemeLight} />
+                    <ShikiThemeSelector mode="dark" bind:value={globalOptions.syntaxHighlightingThemeDark} />
+                </SettingsGroup>
+                <SettingsGroup title="Misc.">
+                    <LabeledCheckbox labelText="Concise nested diffs" bind:checked={globalOptions.omitPatchHeaderOnlyHunks} />
+                    <LabeledCheckbox labelText="Word diffs" bind:checked={globalOptions.wordDiffs} />
+                    <LabeledCheckbox labelText="Line wrapping" bind:checked={globalOptions.lineWrap} />
+                    <div class="flex justify-between px-2 py-1">
+                        <Label.Root id="sidebarLocationLabel" for="sidebarLocation">Sidebar location</Label.Root>
+                        <SimpleRadioGroup
+                            id="sidebarLocation"
+                            aria-labelledby="sidebarLocationLabel"
+                            values={["left", "right"]}
+                            bind:value={globalOptions.sidebarLocation}
+                        />
+                    </div>
+                </SettingsGroup>
+            </div>
+        </Dialog.Content>
+    </Dialog.Portal>
+</Dialog.Root>
diff --git a/web/src/lib/components/settings-popover/SettingsPopoverGroup.svelte b/web/src/lib/components/settings/SettingsGroup.svelte
similarity index 80%
rename from web/src/lib/components/settings-popover/SettingsPopoverGroup.svelte
rename to web/src/lib/components/settings/SettingsGroup.svelte
index a8a2517..d57087e 100644
--- a/web/src/lib/components/settings-popover/SettingsPopoverGroup.svelte
+++ b/web/src/lib/components/settings/SettingsGroup.svelte
@@ -1,6 +1,3 @@
-<script module>
-</script>
-
 <script lang="ts">
     import { useId, Label } from "bits-ui";
     import type { Snippet } from "svelte";
@@ -23,6 +20,6 @@
 {/snippet}
 
 <div id={groupId} aria-labelledby={labelId} class="flex flex-col" role="group">
-    <Label.Root id={labelId} for={groupId} class="px-2 pt-4 pb-1 font-semibold">{title}</Label.Root>
+    <Label.Root id={labelId} for={groupId} class="px-2 py-1 text-lg font-semibold">{title}</Label.Root>
     {@render renderChildren()}
 </div>
diff --git a/web/src/lib/components/settings-popover/ShikiThemeSelector.svelte b/web/src/lib/components/settings/ShikiThemeSelector.svelte
similarity index 100%
rename from web/src/lib/components/settings-popover/ShikiThemeSelector.svelte
rename to web/src/lib/components/settings/ShikiThemeSelector.svelte
diff --git a/web/src/lib/components/settings-popover/SimpleRadioGroup.svelte b/web/src/lib/components/settings/SimpleRadioGroup.svelte
similarity index 100%
rename from web/src/lib/components/settings-popover/SimpleRadioGroup.svelte
rename to web/src/lib/components/settings/SimpleRadioGroup.svelte
diff --git a/web/src/lib/diff-viewer.svelte.ts b/web/src/lib/diff-viewer.svelte.ts
index e238831..41ff4d7 100644
--- a/web/src/lib/diff-viewer.svelte.ts
+++ b/web/src/lib/diff-viewer.svelte.ts
@@ -17,6 +17,7 @@ import { VList } from "virtua/svelte";
 import { Context, Debounced, watch } from "runed";
 import { MediaQuery } from "svelte/reactivity";
 import { ProgressBarState } from "$lib/components/progress-bar/index.svelte";
+import { Keybinds } from "./keybinds.svelte";
 
 export const GITHUB_URL_PARAM = "github_url";
 export const PATCH_URL_PARAM = "patch_url";
@@ -234,11 +235,27 @@ export class MultiFileDiffViewerState {
 
     // Transient state
     sidebarCollapsed = $state(false);
+    openDiffDialogOpen = $state(false);
+    settingsDialogOpen = $state(false);
     activeSearchResult: ActiveSearchResult | null = $state(null);
 
     private constructor() {
         // Make sure to revoke object URLs when the component is destroyed
         onDestroy(() => this.clearImages());
+
+        const keybinds = new Keybinds();
+        keybinds.registerModifierBind("o", () => this.openOpenDiffDialog());
+        keybinds.registerModifierBind(",", () => this.openSettingsDialog());
+    }
+
+    openOpenDiffDialog() {
+        this.openDiffDialogOpen = true;
+        this.settingsDialogOpen = false;
+    }
+
+    openSettingsDialog() {
+        this.settingsDialogOpen = true;
+        this.openDiffDialogOpen = false;
     }
 
     filterFile(file: FileDetails): boolean {
diff --git a/web/src/lib/keybinds.svelte.ts b/web/src/lib/keybinds.svelte.ts
new file mode 100644
index 0000000..a11c73b
--- /dev/null
+++ b/web/src/lib/keybinds.svelte.ts
@@ -0,0 +1,31 @@
+import { onMount } from "svelte";
+import { on } from "svelte/events";
+
+export class Keybinds {
+    private static readonly IS_MAC = typeof navigator !== "undefined" && navigator.userAgent.includes("Mac");
+
+    static getModifierKey() {
+        return Keybinds.IS_MAC ? "⌘" : "Ctrl";
+    }
+
+    private readonly binds = new Map<string, () => void>();
+
+    constructor() {
+        onMount(() => {
+            return on(document, "keydown", (event) => {
+                const modifierPressed = Keybinds.IS_MAC ? event.metaKey : event.ctrlKey;
+                if (modifierPressed) {
+                    const bindAction = this.binds.get(event.key.toLowerCase());
+                    if (bindAction) {
+                        bindAction();
+                        event.preventDefault();
+                    }
+                }
+            });
+        });
+    }
+
+    registerModifierBind(key: string, action: () => void) {
+        this.binds.set(key.toLowerCase(), action);
+    }
+}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index e543978..14afebd 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,88 +1,26 @@
 <script lang="ts">
     import ConciseDiffView from "$lib/components/diff/ConciseDiffView.svelte";
-    import { type FileTreeNodeData } from "$lib/util";
     import { VList } from "virtua/svelte";
-    import { type FileDetails, getFileStatusProps, MultiFileDiffViewerState, requireEitherImage, staticSidebar } from "$lib/diff-viewer.svelte";
-    import Tree from "$lib/components/tree/Tree.svelte";
+    import { MultiFileDiffViewerState, requireEitherImage } from "$lib/diff-viewer.svelte";
     import Spinner from "$lib/components/Spinner.svelte";
-    import { type TreeNode } from "$lib/components/tree/index.svelte";
     import ImageDiff from "$lib/components/diff/ImageDiff.svelte";
     import AddedOrRemovedImage from "$lib/components/diff/AddedOrRemovedImage.svelte";
     import DiffStats from "$lib/components/diff/DiffStats.svelte";
-    import SettingsPopover, { globalThemeSetting } from "$lib/components/settings-popover/SettingsPopover.svelte";
-    import SettingsPopoverGroup from "$lib/components/settings-popover/SettingsPopoverGroup.svelte";
-    import LabeledCheckbox from "$lib/components/LabeledCheckbox.svelte";
-    import ShikiThemeSelector from "$lib/components/settings-popover/ShikiThemeSelector.svelte";
-    import SimpleRadioGroup from "$lib/components/settings-popover/SimpleRadioGroup.svelte";
     import DiffSearch from "./DiffSearch.svelte";
     import FileHeader from "./FileHeader.svelte";
     import DiffTitle from "./DiffTitle.svelte";
-    import { type Action } from "svelte/action";
-    import { on } from "svelte/events";
-    import ActionsPopover from "./ActionsPopover.svelte";
     import OpenDiffDialog from "./OpenDiffDialog.svelte";
-    import InfoPopup from "$lib/components/InfoPopup.svelte";
-    import { Button, Label } from "bits-ui";
-    import { onClickOutside } from "runed";
     import SidebarToggle from "./SidebarToggle.svelte";
     import type { PageProps } from "./$types";
     import ProgressBar from "$lib/components/progress-bar/ProgressBar.svelte";
     import { GlobalOptions } from "$lib/global-options.svelte";
+    import MenuBar from "$lib/components/menu-bar/MenuBar.svelte";
+    import SettingsDialog from "$lib/components/settings/SettingsDialog.svelte";
+    import Sidebar from "./Sidebar.svelte";
 
     let { data }: PageProps = $props();
     const globalOptions = GlobalOptions.init(data.globalOptions);
     const viewer = MultiFileDiffViewerState.init();
-    let sidebarElement: HTMLDivElement | undefined = $state();
-
-    onClickOutside(
-        () => sidebarElement,
-        (e) => {
-            if (e.target instanceof HTMLElement && e.target.closest("[data-sidebar-toggle]")) {
-                // Ignore toggle button clicks
-                return;
-            }
-            if (!staticSidebar.current) {
-                viewer.sidebarCollapsed = true;
-            }
-        },
-    );
-
-    function filterFileNode(file: TreeNode<FileTreeNodeData>): boolean {
-        return file.data.type === "file" && viewer.filterFile(file.data.data as FileDetails);
-    }
-
-    function scrollToFileClick(event: Event, index: number) {
-        const element: HTMLElement = event.target as HTMLElement;
-        // Don't scroll if we clicked the inner checkbox
-        if (element.tagName.toLowerCase() !== "input") {
-            viewer.scrollToFile(index);
-        }
-    }
-
-    const focusFileDoubleClick: Action<HTMLDivElement, { index: number }> = (div, { index }) => {
-        const destroyDblclick = on(div, "dblclick", (event) => {
-            const element: HTMLElement = event.target as HTMLElement;
-            if (element.tagName.toLowerCase() !== "input") {
-                viewer.scrollToFile(index, { focus: true });
-                if (!staticSidebar.current) {
-                    viewer.sidebarCollapsed = true;
-                }
-            }
-        });
-        const destoryMousedown = on(div, "mousedown", (event) => {
-            const element: HTMLElement = event.target as HTMLElement;
-            if (element.tagName.toLowerCase() !== "input" && event.detail === 2) {
-                // Don't select text on double click
-                event.preventDefault();
-            }
-        });
-        return {
-            destroy() {
-                destroyDblclick();
-                destoryMousedown();
-            },
-        };
-    };
 
     function getPageTitle() {
         if (viewer.diffMetadata) {
@@ -97,6 +35,8 @@
     }
 
     let pageTitle = $derived(getPageTitle());
+
+    let mainContainerRef: HTMLDivElement | null = $state(null);
 </script>
 
 <svelte:head>
@@ -107,260 +47,88 @@
     />
 </svelte:head>
 
-{#snippet settingsPopover()}
-    <SettingsPopover class="self-center">
-        {@render globalThemeSetting()}
-        <SettingsPopoverGroup title="Syntax Highlighting">
-            <LabeledCheckbox labelText="Enable" bind:checked={globalOptions.syntaxHighlighting} />
-            <ShikiThemeSelector mode="light" bind:value={globalOptions.syntaxHighlightingThemeLight} />
-            <ShikiThemeSelector mode="dark" bind:value={globalOptions.syntaxHighlightingThemeDark} />
-        </SettingsPopoverGroup>
-        <SettingsPopoverGroup title="Misc.">
-            <LabeledCheckbox labelText="Concise nested diffs" bind:checked={globalOptions.omitPatchHeaderOnlyHunks} />
-            <LabeledCheckbox labelText="Word diffs" bind:checked={globalOptions.wordDiffs} />
-            <LabeledCheckbox labelText="Line wrapping" bind:checked={globalOptions.lineWrap} />
-            <div class="flex justify-between px-2 py-1">
-                <Label.Root id="sidebarLocationLabel" for="sidebarLocation">Sidebar location</Label.Root>
-                <SimpleRadioGroup
-                    id="sidebarLocation"
-                    aria-labelledby="sidebarLocationLabel"
-                    values={["left", "right"]}
-                    bind:value={globalOptions.sidebarLocation}
-                />
-            </div>
-        </SettingsPopoverGroup>
-    </SettingsPopover>
-{/snippet}
-
 {#if viewer.loadingState.loading}
     <div class="absolute bottom-1/2 left-1/2 z-50 -translate-x-1/2 translate-y-1/2 rounded-full border bg-neutral p-2 shadow-md">
         <ProgressBar bind:state={viewer.loadingState.progressBar} class="h-2 w-32" />
     </div>
 {/if}
 
-<div class="relative flex min-h-screen flex-row justify-center">
-    <div
-        bind:this={sidebarElement}
-        class="absolute top-0 z-10 flex h-full w-full flex-col bg-neutral
-               data-[collapsed=true]:hidden
-               data-[side=left]:left-0 data-[side=left]:border-e data-[side=right]:right-0 data-[side=right]:order-10 data-[side=right]:border-s
-               md:w-[350px] md:shadow-md lg:static
-               lg:h-auto lg:shadow-none"
-        data-side={globalOptions.sidebarLocation}
-        data-collapsed={viewer.sidebarCollapsed}
-    >
-        <div class="m-2 flex flex-row items-center gap-2">
-            <div class="relative grow">
-                <input
-                    type="text"
-                    placeholder="Filter file tree..."
-                    bind:value={viewer.fileTreeFilter}
-                    class="w-full rounded-md border px-8 py-1 overflow-ellipsis focus:ring-2 focus:ring-primary focus:outline-none"
-                    autocomplete="off"
-                />
-                <span aria-hidden="true" class="absolute top-1/2 left-2 iconify size-4 -translate-y-1/2 text-em-med octicon--filter-16"></span>
-                {#if viewer.fileTreeFilterDebounced.current}
-                    <button
-                        class="absolute top-1/2 right-2 iconify size-4 -translate-y-1/2 text-gray-500 octicon--x-16 hover:text-gray-700"
-                        onclick={() => viewer.clearSearch()}
-                        aria-label="clear filter"
-                    ></button>
-                {/if}
-            </div>
-            <SidebarToggle class="lg:hidden" />
-        </div>
-        {#if viewer.filteredFileDetails.length !== viewer.fileDetails.length}
-            <div class="ms-2 mb-2 text-sm text-gray-600">
-                Showing {viewer.filteredFileDetails.length} of {viewer.fileDetails.length} files
-            </div>
-        {/if}
-        <div class="flex h-full flex-col overflow-y-auto border-t">
-            <div class="h-100">
-                {#snippet fileSnippet(value: FileDetails)}
-                    <div
-                        class="flex cursor-pointer items-center justify-between btn-ghost px-2 py-1 text-sm focus:ring-2 focus:ring-primary focus:outline-none focus:ring-inset"
-                        onclick={(e) => scrollToFileClick(e, value.index)}
-                        use:focusFileDoubleClick={{ index: value.index }}
-                        onkeydown={(e) => e.key === "Enter" && viewer.scrollToFile(value.index)}
-                        role="button"
-                        tabindex="0"
-                        id={"file-tree-file-" + value.index}
-                    >
-                        <span
-                            class="{getFileStatusProps(value.status).iconClasses} me-1 flex size-4 shrink-0 items-center justify-center"
-                            aria-label={getFileStatusProps(value.status).title}
-                        ></span>
-                        <span class="grow overflow-hidden break-all">{value.toFile.substring(value.toFile.lastIndexOf("/") + 1)}</span>
-                        <input
-                            type="checkbox"
-                            class="ms-1 size-4 shrink-0 rounded-sm border"
-                            autocomplete="off"
-                            aria-label="File viewed"
-                            onchange={() => viewer.toggleChecked(value.index)}
-                            checked={viewer.fileStates[value.index].checked}
-                        />
-                    </div>
-                {/snippet}
-                <Tree roots={viewer.fileTreeRoots} filter={filterFileNode} bind:instance={viewer.tree}>
-                    {#snippet nodeRenderer({ node, collapsed, toggleCollapse })}
-                        {@const folderIcon = collapsed ? "octicon--file-directory-fill-16" : "octicon--file-directory-open-fill-16"}
-                        {#if node.data.type === "file"}
-                            {@render fileSnippet(node.data.data as FileDetails)}
-                        {:else}
-                            <div
-                                class="flex cursor-pointer items-center justify-between btn-ghost px-2 py-1 text-sm focus:ring-2 focus:ring-primary focus:outline-none focus:ring-inset"
-                                onclick={toggleCollapse}
-                                onkeydown={(e) => e.key === "Enter" && toggleCollapse()}
-                                role="button"
-                                tabindex="0"
-                            >
-                                <span class="me-1 iconify size-4 shrink-0 text-primary {folderIcon}"></span>
-                                <span class="grow overflow-hidden break-all">{node.data.data}</span>
-                                {#if collapsed}
-                                    <span class="iconify size-4 shrink-0 text-primary octicon--chevron-right-16"></span>
-                                {:else}
-                                    <span class="iconify size-4 shrink-0 text-primary octicon--chevron-down-16"></span>
-                                {/if}
-                            </div>
-                        {/if}
-                    {/snippet}
-                    {#snippet childWrapper({ node, collapsed, children })}
-                        <div
-                            class={{
-                                hidden: collapsed || node.visibleChildren.length <= 0,
-                                "dir-header": node.data.type === "directory" && !collapsed,
-                                "ps-4": true,
-                            }}
-                        >
-                            {@render children({ node })}
-                        </div>
-                    {/snippet}
-                </Tree>
-            </div>
-        </div>
-    </div>
-    <div class="flex grow flex-col">
-        <div class="flex flex-wrap gap-2 px-3 py-2">
+<OpenDiffDialog bind:open={viewer.openDiffDialogOpen} />
+<SettingsDialog bind:open={viewer.settingsDialogOpen} />
+
+<div class="flex min-h-screen flex-col">
+    <MenuBar />
+    <div bind:this={mainContainerRef} class="relative flex grow flex-row justify-center">
+        <Sidebar closeOnClick={mainContainerRef} />
+        <div class="flex grow flex-col">
             {#if viewer.diffMetadata !== null}
-                <DiffTitle meta={viewer.diffMetadata} />
+                <div class="flex flex-wrap gap-2 px-3 pt-2">
+                    <DiffTitle meta={viewer.diffMetadata} />
+                </div>
             {/if}
-            <div class="ml-auto flex h-fit flex-row gap-2">
-                <OpenDiffDialog />
-                <ActionsPopover />
-                {@render settingsPopover()}
-                <InfoPopup>
-                    <div class="flex flex-col gap-1">
-                        <h2 class="font-semibold">Info</h2>
-                        <Button.Root
-                            href="https://github.com/PaperMC/diff-viewer"
-                            class="flex items-center gap-2 hover:text-primary"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <span class="iconify size-4 shrink-0 text-em-med octicon--mark-github-16" aria-hidden="true"></span>
-                            GitHub Repository
-                        </Button.Root>
-                        <Button.Root
-                            href="https://chromewebstore.google.com/detail/patch-roulette/feaaoepdocmiibjilhoahgldkaajfnhb"
-                            class="flex items-center gap-2 hover:text-primary"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <span class="iconify size-4 shrink-0 text-em-med octicon--download-16" aria-hidden="true"></span>
-                            Chrome Extension
-                        </Button.Root>
-                        <Button.Root
-                            href="https://addons.mozilla.org/en-US/firefox/addon/patch-roulette/"
-                            class="flex items-center gap-2 hover:text-primary"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            <span class="iconify size-4 shrink-0 text-em-med octicon--download-16" aria-hidden="true"></span>
-                            Firefox Add-on
-                        </Button.Root>
-                    </div>
-                </InfoPopup>
+            <div class="flex flex-row items-center gap-2 px-3 py-2">
+                <SidebarToggle class="data-[side=right]:order-10" />
+                <DiffStats add={viewer.stats.addedLines} remove={viewer.stats.removedLines} />
+                <DiffSearch />
             </div>
-        </div>
-        <div class="flex flex-row items-center gap-2 px-3 pb-2">
-            <SidebarToggle class="data-[side=right]:order-10" />
-            <DiffStats add={viewer.stats.addedLines} remove={viewer.stats.removedLines} />
-            <DiffSearch />
-        </div>
-        <div class="flex flex-1 flex-col border-t">
-            <VList data={viewer.fileDetails} style="height: 100%;" getKey={(_, i) => i} bind:this={viewer.vlist}>
-                {#snippet children(value, index)}
-                    <div id={`file-${index}`}>
-                        <FileHeader {index} {value} />
-                        {#if !viewer.fileStates[index].collapsed && value.type === "image"}
-                            {@const image = value.image}
-                            <div class="mb border-b text-sm">
-                                {#if image.load}
-                                    {#if image.fileA !== null && image.fileB !== null}
-                                        {#await Promise.all([image.fileA.getValue(), image.fileB.getValue()])}
-                                            <div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
-                                        {:then images}
-                                            <ImageDiff fileA={images[0]} fileB={images[1]} />
-                                        {/await}
+            <div class="flex flex-1 flex-col border-t">
+                <VList data={viewer.fileDetails} style="height: 100%;" getKey={(_, i) => i} bind:this={viewer.vlist}>
+                    {#snippet children(value, index)}
+                        <div id={`file-${index}`}>
+                            <FileHeader {index} {value} />
+                            {#if !viewer.fileStates[index].collapsed && value.type === "image"}
+                                {@const image = value.image}
+                                <div class="mb border-b text-sm">
+                                    {#if image.load}
+                                        {#if image.fileA !== null && image.fileB !== null}
+                                            {#await Promise.all([image.fileA.getValue(), image.fileB.getValue()])}
+                                                <div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
+                                            {:then images}
+                                                <ImageDiff fileA={images[0]} fileB={images[1]} />
+                                            {/await}
+                                        {:else}
+                                            {#await requireEitherImage(image).getValue()}
+                                                <div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
+                                            {:then file}
+                                                <AddedOrRemovedImage {file} mode={image.fileA === null ? "add" : "remove"} />
+                                            {/await}
+                                        {/if}
                                     {:else}
-                                        {#await requireEitherImage(image).getValue()}
-                                            <div class="flex items-center justify-center bg-neutral-2 p-4"><Spinner /></div>
-                                        {:then file}
-                                            <AddedOrRemovedImage {file} mode={image.fileA === null ? "add" : "remove"} />
-                                        {/await}
+                                        <div class="flex justify-center bg-neutral-2 p-4">
+                                            <button
+                                                type="button"
+                                                class=" flex flex-row items-center justify-center gap-1 rounded-md btn-primary px-2 py-1"
+                                                onclick={() => (image.load = true)}
+                                            >
+                                                <span class="iconify size-4 shrink-0 octicon--image-16"></span><span>Load image diff</span>
+                                            </button>
+                                        </div>
                                     {/if}
-                                {:else}
-                                    <div class="flex justify-center bg-neutral-2 p-4">
-                                        <button
-                                            type="button"
-                                            class=" flex flex-row items-center justify-center gap-1 rounded-md btn-primary px-2 py-1"
-                                            onclick={() => (image.load = true)}
-                                        >
-                                            <span class="iconify size-4 shrink-0 octicon--image-16"></span><span>Load image diff</span>
-                                        </button>
-                                    </div>
-                                {/if}
-                            </div>
-                        {/if}
-                        {#if !viewer.fileStates[index].collapsed && value.type === "text" && (!value.patchHeaderDiffOnly || !globalOptions.omitPatchHeaderOnlyHunks)}
-                            <div class="mb border-b">
-                                <ConciseDiffView
-                                    patch={value.structuredPatch}
-                                    syntaxHighlighting={globalOptions.syntaxHighlighting}
-                                    syntaxHighlightingTheme={globalOptions.syntaxHighlightingTheme}
-                                    omitPatchHeaderOnlyHunks={globalOptions.omitPatchHeaderOnlyHunks}
-                                    wordDiffs={globalOptions.wordDiffs}
-                                    lineWrap={globalOptions.lineWrap}
-                                    searchQuery={viewer.searchQueryDebounced.current}
-                                    searchMatchingLines={() => viewer.searchResults.then((r) => r.lines.get(value))}
-                                    activeSearchResult={viewer.activeSearchResult && viewer.activeSearchResult.file === value
-                                        ? viewer.activeSearchResult.idx
-                                        : undefined}
-                                    cache={viewer.diffViewCache}
-                                    cacheKey={value}
-                                />
-                            </div>
-                        {/if}
-                    </div>
-                {/snippet}
-            </VList>
+                                </div>
+                            {/if}
+                            {#if !viewer.fileStates[index].collapsed && value.type === "text" && (!value.patchHeaderDiffOnly || !globalOptions.omitPatchHeaderOnlyHunks)}
+                                <div class="mb border-b">
+                                    <ConciseDiffView
+                                        patch={value.structuredPatch}
+                                        syntaxHighlighting={globalOptions.syntaxHighlighting}
+                                        syntaxHighlightingTheme={globalOptions.syntaxHighlightingTheme}
+                                        omitPatchHeaderOnlyHunks={globalOptions.omitPatchHeaderOnlyHunks}
+                                        wordDiffs={globalOptions.wordDiffs}
+                                        lineWrap={globalOptions.lineWrap}
+                                        searchQuery={viewer.searchQueryDebounced.current}
+                                        searchMatchingLines={() => viewer.searchResults.then((r) => r.lines.get(value))}
+                                        activeSearchResult={viewer.activeSearchResult && viewer.activeSearchResult.file === value
+                                            ? viewer.activeSearchResult.idx
+                                            : undefined}
+                                        cache={viewer.diffViewCache}
+                                        cacheKey={value}
+                                    />
+                                </div>
+                            {/if}
+                        </div>
+                    {/snippet}
+                </VList>
+            </div>
         </div>
     </div>
 </div>
-
-<style>
-    .dir-header {
-        position: relative;
-    }
-    .dir-header::before {
-        content: "";
-        position: absolute;
-        height: 100%;
-        width: 1px;
-        top: 0;
-        left: 1rem;
-        background-color: var(--color-gray-500);
-        z-index: 50;
-        display: block;
-    }
-</style>
diff --git a/web/src/routes/ActionsPopover.svelte b/web/src/routes/ActionsPopover.svelte
deleted file mode 100644
index eb87134..0000000
--- a/web/src/routes/ActionsPopover.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-    import { MultiFileDiffViewerState } from "$lib/diff-viewer.svelte";
-    import { Popover, Button } from "bits-ui";
-
-    const viewer = MultiFileDiffViewerState.get();
-
-    let open = $state(false);
-</script>
-
-<Popover.Root bind:open>
-    <Popover.Trigger title="Actions" class="flex size-6 items-center justify-center self-center rounded-md btn-ghost p-0.5 data-[state=open]:btn-ghost-visible">
-        <span aria-hidden="true" class="iconify size-4 bg-primary octicon--kebab-horizontal-16"></span>
-    </Popover.Trigger>
-    <Popover.Portal>
-        <Popover.Content class="flex flex-col overflow-hidden rounded-sm border bg-neutral text-sm shadow-sm select-none">
-            <Button.Root
-                class="btn-ghost px-2 py-1 text-left"
-                onclick={() => {
-                    viewer.expandAll();
-                    open = false;
-                }}
-            >
-                Expand All
-            </Button.Root>
-            <Button.Root
-                class="btn-ghost px-2 py-1 text-left"
-                onclick={() => {
-                    viewer.collapseAll();
-                    open = false;
-                }}
-            >
-                Collapse All
-            </Button.Root>
-            <Popover.Arrow class="text-edge" />
-        </Popover.Content>
-    </Popover.Portal>
-</Popover.Root>
diff --git a/web/src/routes/OpenDiffDialog.svelte b/web/src/routes/OpenDiffDialog.svelte
index d0dbb7c..3c2c45c 100644
--- a/web/src/routes/OpenDiffDialog.svelte
+++ b/web/src/routes/OpenDiffDialog.svelte
@@ -280,13 +280,14 @@
 {/snippet}
 
 <Dialog.Root bind:open>
-    <Dialog.Trigger class="h-fit rounded-md btn-primary px-2 py-0.5">Open new diff</Dialog.Trigger>
     <Dialog.Portal>
-        <Dialog.Overlay class="fixed inset-0 z-50 bg-black/50 dark:bg-white/20" />
+        <Dialog.Overlay
+            class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        />
         <Dialog.Content
-            class="fixed top-1/2 left-1/2 z-50 flex max-h-svh w-192 max-w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded-md bg-neutral shadow-md sm:max-w-[95%]"
+            class="fixed top-1/2 left-1/2 z-50 flex max-h-svh w-3xl max-w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded-sm border bg-neutral shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-[95%]"
         >
-            <header class="flex shrink-0 flex-row items-center justify-between rounded-t-md bg-neutral-2 p-4">
+            <header class="flex shrink-0 flex-row items-center justify-between rounded-t-sm bg-neutral-2 p-4">
                 <Dialog.Title class="text-xl font-semibold">Open New Diff</Dialog.Title>
                 <Dialog.Close title="Close dialog" class="flex size-6 items-center justify-center rounded-md btn-ghost text-primary">
                     <span class="iconify octicon--x-16" aria-hidden="true"></span>
diff --git a/web/src/routes/Sidebar.svelte b/web/src/routes/Sidebar.svelte
new file mode 100644
index 0000000..ad1be4f
--- /dev/null
+++ b/web/src/routes/Sidebar.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+    import { type FileTreeNodeData } from "$lib/util";
+    import { type FileDetails, getFileStatusProps, MultiFileDiffViewerState, staticSidebar } from "$lib/diff-viewer.svelte";
+    import Tree from "$lib/components/tree/Tree.svelte";
+    import { type TreeNode } from "$lib/components/tree/index.svelte";
+    import { type Action } from "svelte/action";
+    import { on } from "svelte/events";
+    import SidebarToggle from "./SidebarToggle.svelte";
+    import { GlobalOptions } from "$lib/global-options.svelte";
+    import { onClickOutside } from "runed";
+
+    interface Props {
+        closeOnClick?: HTMLDivElement | null;
+    }
+
+    let { closeOnClick }: Props = $props();
+
+    const viewer = MultiFileDiffViewerState.get();
+    const globalOptions = GlobalOptions.get();
+
+    let sidebarElement: HTMLDivElement | undefined = $state();
+
+    onClickOutside(
+        () => sidebarElement,
+        (e) => {
+            if (e.target instanceof HTMLElement && e.target.closest("[data-sidebar-toggle]")) {
+                // Ignore toggle button clicks
+                return;
+            }
+            if (closeOnClick && !(e.target instanceof HTMLElement && closeOnClick.contains(e.target))) {
+                // Only act if the click was inside the closeOnClick element
+                return;
+            }
+            if (!staticSidebar.current) {
+                viewer.sidebarCollapsed = true;
+            }
+        },
+    );
+
+    function filterFileNode(file: TreeNode<FileTreeNodeData>): boolean {
+        return file.data.type === "file" && viewer.filterFile(file.data.data as FileDetails);
+    }
+
+    function scrollToFileClick(event: Event, index: number) {
+        const element: HTMLElement = event.target as HTMLElement;
+        // Don't scroll if we clicked the inner checkbox
+        if (element.tagName.toLowerCase() !== "input") {
+            viewer.scrollToFile(index);
+        }
+    }
+
+    const focusFileDoubleClick: Action<HTMLDivElement, { index: number }> = (div, { index }) => {
+        const destroyDblclick = on(div, "dblclick", (event) => {
+            const element: HTMLElement = event.target as HTMLElement;
+            if (element.tagName.toLowerCase() !== "input") {
+                viewer.scrollToFile(index, { focus: true });
+                if (!staticSidebar.current) {
+                    viewer.sidebarCollapsed = true;
+                }
+            }
+        });
+        const destoryMousedown = on(div, "mousedown", (event) => {
+            const element: HTMLElement = event.target as HTMLElement;
+            if (element.tagName.toLowerCase() !== "input" && event.detail === 2) {
+                // Don't select text on double click
+                event.preventDefault();
+            }
+        });
+        return {
+            destroy() {
+                destroyDblclick();
+                destoryMousedown();
+            },
+        };
+    };
+</script>
+
+<div
+    bind:this={sidebarElement}
+    class="absolute top-0 z-10 flex h-full w-full flex-col bg-neutral
+        data-[collapsed=true]:hidden
+        data-[side=left]:left-0 data-[side=left]:border-e data-[side=right]:right-0 data-[side=right]:order-10 data-[side=right]:border-s
+        md:w-[350px] md:shadow-md lg:static lg:z-0
+        lg:h-auto lg:shadow-none"
+    data-side={globalOptions.sidebarLocation}
+    data-collapsed={viewer.sidebarCollapsed}
+>
+    <div class="m-2 flex flex-row items-center gap-2">
+        <div class="relative grow">
+            <input
+                type="text"
+                placeholder="Filter file tree..."
+                bind:value={viewer.fileTreeFilter}
+                class="w-full rounded-md border px-8 py-1 overflow-ellipsis focus:ring-2 focus:ring-primary focus:outline-none"
+                autocomplete="off"
+            />
+            <span aria-hidden="true" class="absolute top-1/2 left-2 iconify size-4 -translate-y-1/2 text-em-med octicon--filter-16"></span>
+            {#if viewer.fileTreeFilterDebounced.current}
+                <button
+                    class="absolute top-1/2 right-2 iconify size-4 -translate-y-1/2 text-gray-500 octicon--x-16 hover:text-gray-700"
+                    onclick={() => viewer.clearSearch()}
+                    aria-label="clear filter"
+                ></button>
+            {/if}
+        </div>
+        <SidebarToggle class="lg:hidden" />
+    </div>
+    {#if viewer.filteredFileDetails.length !== viewer.fileDetails.length}
+        <div class="ms-2 mb-2 text-sm text-gray-600">
+            Showing {viewer.filteredFileDetails.length} of {viewer.fileDetails.length} files
+        </div>
+    {/if}
+    <div class="flex h-full flex-col overflow-y-auto border-t">
+        <div class="h-100">
+            {#snippet fileSnippet(value: FileDetails)}
+                <div
+                    class="flex cursor-pointer items-center justify-between btn-ghost px-2 py-1 text-sm focus:ring-2 focus:ring-primary focus:outline-none focus:ring-inset"
+                    onclick={(e) => scrollToFileClick(e, value.index)}
+                    use:focusFileDoubleClick={{ index: value.index }}
+                    onkeydown={(e) => e.key === "Enter" && viewer.scrollToFile(value.index)}
+                    role="button"
+                    tabindex="0"
+                    id={"file-tree-file-" + value.index}
+                >
+                    <span
+                        class="{getFileStatusProps(value.status).iconClasses} me-1 flex size-4 shrink-0 items-center justify-center"
+                        aria-label={getFileStatusProps(value.status).title}
+                    ></span>
+                    <span class="grow overflow-hidden break-all">{value.toFile.substring(value.toFile.lastIndexOf("/") + 1)}</span>
+                    <input
+                        type="checkbox"
+                        class="ms-1 size-4 shrink-0 rounded-sm border"
+                        autocomplete="off"
+                        aria-label="File viewed"
+                        onchange={() => viewer.toggleChecked(value.index)}
+                        checked={viewer.fileStates[value.index].checked}
+                    />
+                </div>
+            {/snippet}
+            <Tree roots={viewer.fileTreeRoots} filter={filterFileNode} bind:instance={viewer.tree}>
+                {#snippet nodeRenderer({ node, collapsed, toggleCollapse })}
+                    {@const folderIcon = collapsed ? "octicon--file-directory-fill-16" : "octicon--file-directory-open-fill-16"}
+                    {#if node.data.type === "file"}
+                        {@render fileSnippet(node.data.data as FileDetails)}
+                    {:else}
+                        <div
+                            class="flex cursor-pointer items-center justify-between btn-ghost px-2 py-1 text-sm focus:ring-2 focus:ring-primary focus:outline-none focus:ring-inset"
+                            onclick={toggleCollapse}
+                            onkeydown={(e) => e.key === "Enter" && toggleCollapse()}
+                            role="button"
+                            tabindex="0"
+                        >
+                            <span class="me-1 iconify size-4 shrink-0 text-primary {folderIcon}"></span>
+                            <span class="grow overflow-hidden break-all">{node.data.data}</span>
+                            {#if collapsed}
+                                <span class="iconify size-4 shrink-0 text-primary octicon--chevron-right-16"></span>
+                            {:else}
+                                <span class="iconify size-4 shrink-0 text-primary octicon--chevron-down-16"></span>
+                            {/if}
+                        </div>
+                    {/if}
+                {/snippet}
+                {#snippet childWrapper({ node, collapsed, children })}
+                    <div
+                        class={{
+                            hidden: collapsed || node.visibleChildren.length <= 0,
+                            "dir-header": node.data.type === "directory" && !collapsed,
+                            "ps-4": true,
+                        }}
+                    >
+                        {@render children({ node })}
+                    </div>
+                {/snippet}
+            </Tree>
+        </div>
+    </div>
+</div>
+
+<style>
+    .dir-header {
+        position: relative;
+    }
+    .dir-header::before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 1px;
+        top: 0;
+        left: 1rem;
+        background-color: var(--color-gray-500);
+        z-index: 50;
+        display: block;
+    }
+</style>