From 649157a4bbcb3e2fa5d06c5cf56d98e050258b8a Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:33:30 +0000 Subject: [PATCH 01/10] style: avoid the button being shrink --- src/shared/Components/IconButton.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/Components/IconButton.svelte b/src/shared/Components/IconButton.svelte index 99751f97..52ec42cc 100644 --- a/src/shared/Components/IconButton.svelte +++ b/src/shared/Components/IconButton.svelte @@ -28,6 +28,7 @@ color: inherit; cursor: pointer; display: flex; + flex-shrink: 0; height: 1.5rem; justify-content: center; overflow: visible; From 546fdf5f0f7a48049c229d7e528e2f7f5f96e04d Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:35:42 +0000 Subject: [PATCH 02/10] fix: add truncate to couple element --- src/ext/extension-page/Components/Editor/Editor.svelte | 2 +- src/ext/extension-page/Components/Sidebar/SidebarItem.svelte | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte index 0bdd3507..adcd67dd 100644 --- a/src/ext/extension-page/Components/Editor/Editor.svelte +++ b/src/ext/extension-page/Components/Editor/Editor.svelte @@ -173,7 +173,7 @@
{name}
-
+
{#if $v4state.includes("saving")} Saving... {:else if $v4state.includes("trashing")} diff --git a/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte b/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte index 266d68bc..c7c27bc7 100644 --- a/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte +++ b/src/ext/extension-page/Components/Sidebar/SidebarItem.svelte @@ -42,7 +42,10 @@
{#if description} -
+
{description}
{/if} From 22b3b516e480dd1241fc0f6aa857b194b60b6603 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:39:56 +0000 Subject: [PATCH 03/10] feat: activate the first script on mount --- src/ext/extension-page/Components/Sidebar/Sidebar.svelte | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index cbc62445..2c38d359 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -30,6 +30,8 @@ $: if (list.find((a) => a.active)) { const active = list.find((a) => a.active); scrollToEl(active.filename); + } else { + activate(list[0]); } /** From d652e573893aa58ae5c7afa79c4dfc87a9d46884 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:42:51 +0000 Subject: [PATCH 04/10] refactor: split class attributes for clearer --- src/ext/extension-page/Components/Sidebar/Sidebar.svelte | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index 2c38d359..bdab0149 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -206,9 +206,8 @@
From cb8787420a62cf2c53e6db7b5c7faddbfd0b2aef Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:45:02 +0000 Subject: [PATCH 05/10] refactor: use gap instead of margin --- src/ext/extension-page/Components/Sidebar/Sidebar.svelte | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index bdab0149..5ef7346b 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -262,16 +262,13 @@ flex-shrink: 0; flex-wrap: wrap; padding: 1rem; + gap: 0.5rem; } .sidebar__filter { flex-grow: 1; } - :global(.sidebar__filter + button) { - margin: 0 0.5rem; - } - .sidebar__count { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); From 36aac8409678d0463da4a1560614a9239455453d Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 12:56:37 +0000 Subject: [PATCH 06/10] feat: editor sidebar can be hidden now --- src/ext/extension-page/App.svelte | 12 +++++++++--- .../Components/Editor/Editor.svelte | 17 +++++++++++++++++ .../Components/Sidebar/Sidebar.svelte | 14 ++++++++++++++ src/shared/img/icon-sidebar.svg | 1 + 4 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 src/shared/img/icon-sidebar.svg diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte index 60574f73..5f91fee8 100644 --- a/src/ext/extension-page/App.svelte +++ b/src/ext/extension-page/App.svelte @@ -58,6 +58,11 @@ window.location.reload(); } }); + let sidebarHidden = false; + + function sidebarSwitch() { + sidebarHidden = !sidebarHidden; + } @@ -72,9 +77,10 @@ {/if}
{/if} -
- - + {#if !sidebarHidden} + + {/if} +
    {#each $notifications as item (item.id)} diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte index adcd67dd..83bf337b 100644 --- a/src/ext/extension-page/Components/Editor/Editor.svelte +++ b/src/ext/extension-page/Components/Editor/Editor.svelte @@ -13,6 +13,10 @@ import iconDownload from "@shared/img/icon-download.svg?raw"; import iconTrash from "@shared/img/icon-trash.svg?raw"; import iconSync from "@shared/img/icon-sync.svg?raw"; + import iconSidebar from "@shared/img/icon-sidebar.svg?raw"; + + export let sidebarHidden; + export let sidebarSwitch; // the data the populates editor elements let canUpdate; @@ -167,6 +171,15 @@
    No Item Selected
    {/if}
    + {#if sidebarHidden} +
    + +
    + {/if}
    @@ -263,6 +276,10 @@ padding: 1rem 0.5rem 1rem 1.5rem; } + .sidebar-switch { + scale: 1.5; + } + .editor__header__content { align-items: center; display: flex; diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index 5ef7346b..a91a9e88 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -11,6 +11,7 @@ import Loader from "@shared/Components/Loader.svelte"; import iconPlus from "@shared/img/icon-plus.svg?raw"; import iconSettings from "@shared/img/icon-settings.svg?raw"; + import iconSidebar from "@shared/img/icon-sidebar.svg?raw"; import { cmChanged, cmGetInstance, @@ -18,6 +19,8 @@ cmSetSessionCode, } from "../Editor/CodeMirror.svelte"; + export let sidebarSwitch; + // disable buttons accordingly $: disabled = !$v4state.includes("ready"); @@ -210,6 +213,13 @@ class:sidebar--compact={!$settings["editor_list_descriptions"]} >
    +
    + +
    \ No newline at end of file From 85975440b02d2c53724d5856ef3de6060be70915 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 13:09:47 +0000 Subject: [PATCH 07/10] feat: editor sidebar can be resize now --- src/ext/extension-page/App.svelte | 55 +++++++++++++++++++ .../Components/Editor/Editor.svelte | 4 +- .../Components/Sidebar/Sidebar.svelte | 4 +- 3 files changed, 59 insertions(+), 4 deletions(-) diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte index 5f91fee8..4d3e80b8 100644 --- a/src/ext/extension-page/App.svelte +++ b/src/ext/extension-page/App.svelte @@ -58,11 +58,27 @@ window.location.reload(); } }); + + let splitterActive = false; let sidebarHidden = false; + let sidebarWidth = "23svw"; function sidebarSwitch() { sidebarHidden = !sidebarHidden; } + + function handleSplitterDrag(event) { + if (event.type === "mouseup") { + splitterActive = false; + } else if (event.type === "mousedown") { + splitterActive = true; + } else if (event.type === "mousemove") { + const vw = window.innerWidth; + const sw = (event.x / vw) * 100; + sidebarWidth = `max(min(${sw}svw, 100svw - 20rem), 20rem)`; + } + event.preventDefault(); + } @@ -77,11 +93,27 @@ {/if}
    {/if} +
    {#if !sidebarHidden} {/if} +
    +{#if splitterActive} +
    +{/if}
      {#each $notifications as item (item.id)} notifications.remove(item.id)} {item} /> @@ -126,6 +158,29 @@ overflow: hidden; } + .resize-mask { + background-color: transparent; + cursor: col-resize; + position: fixed; + inset: 0; + z-index: 200; + } + + .splitter { + cursor: col-resize; + position: fixed; + left: calc(var(--sidebar-width) - 3px); + width: 6px; + height: 100svh; + z-index: 201; + transition: background-color 0.2s ease-in-out; + + &:hover, + &.dragging { + background-color: var(--color-blue); + } + } + ul { bottom: 1rem; left: 50%; diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte index 83bf337b..ef47d3b6 100644 --- a/src/ext/extension-page/Components/Editor/Editor.svelte +++ b/src/ext/extension-page/Components/Editor/Editor.svelte @@ -246,6 +246,7 @@ flex-grow: 1; overflow: hidden; position: relative; + width: calc(100svw - var(--sidebar-width)); } .info { @@ -273,7 +274,8 @@ align-items: center; display: flex; flex-shrink: 0; - padding: 1rem 0.5rem 1rem 1.5rem; + padding: 1rem; + gap: 1rem; } .sidebar-switch { diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index a91a9e88..9638debe 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -261,8 +261,7 @@ border-right: 1px solid var(--border-color); display: flex; flex-direction: column; - flex: 0 0 23rem; - max-width: 23rem; + width: var(--sidebar-width); position: relative; } @@ -274,7 +273,6 @@ align-items: center; display: flex; flex-shrink: 0; - flex-wrap: wrap; padding: 1rem; gap: 0.5rem; } From ae66e27fdd000f1d31027e4c6a014c9697963815 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 13:57:36 +0000 Subject: [PATCH 08/10] fix: set min-width to resolve width bounce Safari doesn't seem to be calculating the width correctly when the initial window width is too small. --- src/ext/extension-page/App.svelte | 17 +++++++++++++---- .../Components/Sidebar/Sidebar.svelte | 1 + 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte index 4d3e80b8..b54f9a48 100644 --- a/src/ext/extension-page/App.svelte +++ b/src/ext/extension-page/App.svelte @@ -62,6 +62,7 @@ let splitterActive = false; let sidebarHidden = false; let sidebarWidth = "23svw"; + const sidebarMinWidth = "20rem"; function sidebarSwitch() { sidebarHidden = !sidebarHidden; @@ -75,7 +76,7 @@ } else if (event.type === "mousemove") { const vw = window.innerWidth; const sw = (event.x / vw) * 100; - sidebarWidth = `max(min(${sw}svw, 100svw - 20rem), 20rem)`; + sidebarWidth = `max(min(${sw}svw, 100svw - 20rem), ${sidebarMinWidth})`; } event.preventDefault(); } @@ -93,7 +94,10 @@ {/if}
    {/if} -
    +
    {#if !sidebarHidden} {/if} @@ -167,10 +171,15 @@ } .splitter { + --splitter-width: 6px; + --splitter-offset: calc(var(--splitter-width) / 2); + --sidebar-fixed-width: max(var(--sidebar-min-width), var(--sidebar-width)); + + background-color: transparent; cursor: col-resize; position: fixed; - left: calc(var(--sidebar-width) - 3px); - width: 6px; + left: calc(var(--sidebar-fixed-width) - var(--splitter-offset)); + width: var(--splitter-width); height: 100svh; z-index: 201; transition: background-color 0.2s ease-in-out; diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index 9638debe..a46633d1 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -262,6 +262,7 @@ display: flex; flex-direction: column; width: var(--sidebar-width); + min-width: var(--sidebar-min-width); position: relative; } From bb87b3c109e2bc23b6d49c0b650862baba392e83 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 13:59:08 +0000 Subject: [PATCH 09/10] fix: reverse dropdown to avoid overlap with splitter --- src/ext/extension-page/Components/Sidebar/Sidebar.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte index a46633d1..cc382adc 100644 --- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte +++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte @@ -228,7 +228,7 @@ title="Open settings" {disabled} /> - + From 47401a75eda3b06782c0bb027cced8ee9c8e6a23 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Tue, 22 Jul 2025 14:32:07 +0000 Subject: [PATCH 10/10] chore: using variable instead of hard-coded size --- src/ext/extension-page/App.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte index b54f9a48..90d396b4 100644 --- a/src/ext/extension-page/App.svelte +++ b/src/ext/extension-page/App.svelte @@ -63,6 +63,7 @@ let sidebarHidden = false; let sidebarWidth = "23svw"; const sidebarMinWidth = "20rem"; + const editorMinWidth = "20rem"; function sidebarSwitch() { sidebarHidden = !sidebarHidden; @@ -76,7 +77,7 @@ } else if (event.type === "mousemove") { const vw = window.innerWidth; const sw = (event.x / vw) * 100; - sidebarWidth = `max(min(${sw}svw, 100svw - 20rem), ${sidebarMinWidth})`; + sidebarWidth = `max(min(${sw}svw, 100svw - ${editorMinWidth}), ${sidebarMinWidth})`; } event.preventDefault(); }