Merge pull request #844 from quoid/editor-sidebar-resize

feat: editor sidebar can resize and hidden now

Author: ACTCD

src/ext/extension-page/App.svelte

@@ -58,6 +58,29 @@
 			window.location.reload();
 		}
 	});
+
+	let splitterActive = false;
+	let sidebarHidden = false;
+	let sidebarWidth = "23svw";
+	const sidebarMinWidth = "20rem";
+	const editorMinWidth = "20rem";
+
+	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 - ${editorMinWidth}), ${sidebarMinWidth})`;
+		}
+		event.preventDefault();
+	}
 </script>
 
 <svelte:window on:keydown={preventKeyCommands} />
@@ -72,10 +95,30 @@
 		{/if}
 	</div>
 {/if}
-<main>
-	<Sidebar />
-	<Editor />
+<main
+	style:--sidebar-width={sidebarWidth}
+	style:--sidebar-min-width={sidebarMinWidth}
+>
+	{#if !sidebarHidden}
+		<Sidebar {sidebarSwitch} />
+	{/if}
+	<div
+		role="none"
+		class="splitter"
+		class:dragging={splitterActive}
+		on:mousedown={handleSplitterDrag}
+		on:mouseup={handleSplitterDrag}
+	></div>
+	<Editor {sidebarHidden} {sidebarSwitch} />
 </main>
+{#if splitterActive}
+	<div
+		role="none"
+		class="resize-mask"
+		on:mouseup={handleSplitterDrag}
+		on:mousemove={handleSplitterDrag}
+	></div>
+{/if}
 <ul>
 	{#each $notifications as item (item.id)}
 		<Notification on:click={() => notifications.remove(item.id)} {item} />
@@ -120,6 +163,34 @@
 		overflow: hidden;
 	}
 
+	.resize-mask {
+		background-color: transparent;
+		cursor: col-resize;
+		position: fixed;
+		inset: 0;
+		z-index: 200;
+	}
+
+	.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-fixed-width) - var(--splitter-offset));
+		width: var(--splitter-width);
+		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%;

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,13 +171,22 @@
 		<div class="editor__empty">No Item Selected</div>
 	{/if}
 	<div class="editor__header">
+		{#if sidebarHidden}
+			<div class="sidebar-switch">
+				<IconButton
+					icon={iconSidebar}
+					on:click={sidebarSwitch}
+					title="Show sidebar"
+				/>
+			</div>
+		{/if}
 		<div class="editor__header__content">
 			<div>
 				<Tag {type} />
 				<div class="editor__title truncate">{name}</div>
 			</div>
 			<div class="editor__status">
-				<div>
+				<div class="truncate">
 					{#if $v4state.includes("saving")}
 						Saving...
 					{:else if $v4state.includes("trashing")}
@@ -233,6 +246,7 @@
 		flex-grow: 1;
 		overflow: hidden;
 		position: relative;
+		width: calc(100svw - var(--sidebar-width));
 	}
 
 	.info {
@@ -260,7 +274,12 @@
 		align-items: center;
 		display: flex;
 		flex-shrink: 0;
-		padding: 1rem 0.5rem 1rem 1.5rem;
+		padding: 1rem;
+		gap: 1rem;
+	}
+
+	.sidebar-switch {
+		scale: 1.5;
 	}
 
 	.editor__header__content {

src/ext/extension-page/Components/Sidebar/Sidebar.svelte

@@ -11,13 +11,16 @@
 	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,
 		cmSetSavedCode,
 		cmSetSessionCode,
 	} from "../Editor/CodeMirror.svelte";
 
+	export let sidebarSwitch;
+
 	// disable buttons accordingly
 	$: disabled = !$v4state.includes("ready");
 
@@ -30,6 +33,8 @@
 	$: if (list.find((a) => a.active)) {
 		const active = list.find((a) => a.active);
 		scrollToEl(active.filename);
+	} else {
+		activate(list[0]);
 	}
 
 	/**
@@ -204,11 +209,17 @@
 </script>
 
 <div
-	class="sidebar {!$settings['editor_list_descriptions']
-		? 'sidebar--compact'
-		: ''}"
+	class="sidebar"
+	class:sidebar--compact={!$settings["editor_list_descriptions"]}
 >
 	<div class="sidebar__header">
+		<div class="sidebar-switch">
+			<IconButton
+				icon={iconSidebar}
+				on:click={sidebarSwitch}
+				title="Hide sidebar"
+			/>
+		</div>
 		<div class="sidebar__filter"><SidebarFilter /></div>
 		<IconButton
 			warnDot={!$settings["global_active"]}
@@ -217,7 +228,7 @@
 			title="Open settings"
 			{disabled}
 		/>
-		<Dropdown icon={iconPlus} title="New item" {disabled}>
+		<Dropdown icon={iconPlus} title="New item" {disabled} right>
 			<button on:click={() => newItem("js")}>New JS</button>
 			<button on:click={() => newItem("css")}>New CSS</button>
 			<button on:click={newRemote}>New Remote</button>
@@ -250,27 +261,27 @@
 		border-right: 1px solid var(--border-color);
 		display: flex;
 		flex-direction: column;
-		flex: 0 0 23rem;
-		max-width: 23rem;
+		width: var(--sidebar-width);
+		min-width: var(--sidebar-min-width);
 		position: relative;
 	}
 
+	.sidebar-switch {
+		scale: 1.5;
+	}
+
 	.sidebar__header {
 		align-items: center;
 		display: flex;
 		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);

src/ext/extension-page/Components/Sidebar/SidebarItem.svelte

@@ -42,7 +42,10 @@
 		<Toggle checked={!data.disabled} on:click={toggleClick} />
 	</div>
 	{#if description}
-		<div class="item__description" title={showTitle ? data.description : null}>
+		<div
+			class="item__description truncate"
+			title={showTitle ? data.description : null}
+		>
 			{description}
 		</div>
 	{/if}

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;