From 22c27a0e64d266d09206edeff3545e70436c9aef Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 15:15:57 -0400
Subject: [PATCH] refactor: update slash command menu to match visual style

- Replace old slash command list styles with new design
- Use consistent SCSS variables from design system
- Match dropdown styling patterns used elsewhere
- Improve visual hierarchy with better typography
- Add smooth transitions and hover states
- Clean up old CSS styles
---
 .../admin/composer/ComposerCore.svelte        |   4 +-
 .../components/SlashCommandList.svelte        | 141 ++++++++++++++++--
 src/lib/components/edra/headless/style.css    |  38 +----
 3 files changed, 128 insertions(+), 55 deletions(-)

diff --git a/src/lib/components/admin/composer/ComposerCore.svelte b/src/lib/components/admin/composer/ComposerCore.svelte
index 75ed4a1..2f4c1ee 100644
--- a/src/lib/components/admin/composer/ComposerCore.svelte
+++ b/src/lib/components/admin/composer/ComposerCore.svelte
@@ -347,7 +347,7 @@
 	.edra-editor {
 		flex: 1;
 		width: 100%;
-		padding: $unit-4x 0;
+		padding: 0 0 $unit-4x 0;
 		min-height: 100px;
 		outline: none;
 		overflow-y: auto;
@@ -358,7 +358,7 @@
 
 		// More generous padding for full variant
 		.composer--full & {
-			padding: $unit-4x 0;
+			padding: 0 0 $unit-4x 0;
 
 			@include breakpoint('phone') {
 				padding: $unit-3x 0;
diff --git a/src/lib/components/edra/headless/components/SlashCommandList.svelte b/src/lib/components/edra/headless/components/SlashCommandList.svelte
index 60cc0c3..43e85b7 100644
--- a/src/lib/components/edra/headless/components/SlashCommandList.svelte
+++ b/src/lib/components/edra/headless/components/SlashCommandList.svelte
@@ -93,24 +93,133 @@
 <svelte:window onkeydown={handleKeyDown} />
 
 {#if items.length}
-	<div bind:this={scrollContainer} class="edra-slash-command-list">
+	<div bind:this={scrollContainer} class="slash-command-menu">
 		{#each items as grp, groupIndex}
-			<span class="edra-slash-command-list-title">{grp.title}</span>
+			<div class="slash-command-group">
+				<span class="slash-command-group-title">{grp.title}</span>
 
-			{#each grp.commands as command, commandIndex}
-				{@const Icon = icons[command.iconName]}
-				{@const isActive =
-					selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex}
-				<button
-					id={`${groupIndex}-${commandIndex}`}
-					class="edra-slash-command-list-item"
-					class:active={isActive}
-					onclick={() => selectItem(groupIndex, commandIndex)}
-				>
-					<Icon class="edra-toolbar-icon" />
-					<span>{command.label}</span>
-				</button>
-			{/each}
+				{#each grp.commands as command, commandIndex}
+					{@const Icon = icons[command.iconName]}
+					{@const isActive =
+						selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex}
+					<button
+						id={`${groupIndex}-${commandIndex}`}
+						class="slash-command-item"
+						class:active={isActive}
+						onclick={() => selectItem(groupIndex, commandIndex)}
+					>
+						<Icon class="slash-command-icon" />
+						<span class="slash-command-label">{command.label}</span>
+					</button>
+				{/each}
+			</div>
 		{/each}
 	</div>
 {/if}
+
+<style lang="scss">
+	@import '$styles/variables';
+
+	.slash-command-menu {
+		position: absolute;
+		background: $white;
+		border: 1px solid $gray-85;
+		border-radius: $unit;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		max-height: min(80vh, 320px);
+		width: 240px;
+		overflow: auto;
+		z-index: $z-index-modal;
+		padding: $unit-half;
+	}
+
+	.slash-command-group {
+		&:not(:first-child) {
+			margin-top: $unit-half;
+			padding-top: $unit-half;
+			border-top: 1px solid $gray-90;
+		}
+	}
+
+	.slash-command-group-title {
+		display: block;
+		padding: $unit $unit-2x $unit-half;
+		font-size: $font-size-extra-small;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: $gray-50;
+		user-select: none;
+	}
+
+	.slash-command-item {
+		display: flex;
+		align-items: center;
+		gap: $unit-2x;
+		width: 100%;
+		padding: $unit $unit-2x;
+		background: none;
+		border: none;
+		border-radius: $corner-radius-sm;
+		font-size: $font-size-small;
+		color: $gray-20;
+		cursor: pointer;
+		transition: all 0.15s ease;
+		text-align: left;
+		margin: $unit-3px 0;
+
+		&:hover {
+			background-color: $gray-95;
+		}
+
+		&.active {
+			background-color: $gray-90;
+			color: $gray-10;
+		}
+
+		&:active {
+			transform: scale(0.98);
+		}
+	}
+
+	.slash-command-icon {
+		width: $unit-2x;
+		height: $unit-2x;
+		flex-shrink: 0;
+		opacity: 0.7;
+		transition: opacity 0.15s ease;
+
+		.slash-command-item:hover & {
+			opacity: 1;
+		}
+
+		.slash-command-item.active & {
+			opacity: 1;
+		}
+	}
+
+	.slash-command-label {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Scrollbar styling */
+	.slash-command-menu::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	.slash-command-menu::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.slash-command-menu::-webkit-scrollbar-thumb {
+		background: $gray-85;
+		border-radius: 3px;
+		
+		&:hover {
+			background: $gray-70;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/edra/headless/style.css b/src/lib/components/edra/headless/style.css
index 71ae0ed..1ce9d8f 100644
--- a/src/lib/components/edra/headless/style.css
+++ b/src/lib/components/edra/headless/style.css
@@ -323,43 +323,7 @@ input.invalid {
 	border: 1px solid red;
 }
 
-.edra-slash-command-list {
-	margin-bottom: 2rem;
-	max-height: min(80vh, 20rem);
-	width: 12rem;
-	overflow: auto;
-	scroll-behavior: smooth;
-	border-radius: 0.5rem;
-	border: 1px solid var(--edra-border-color);
-	padding: 0.5rem;
-	backdrop-filter: blur(8px);
-}
-
-.edra-slash-command-list-title {
-	margin: 0.5rem;
-	user-select: none;
-	font-size: 0.875rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.025em;
-}
-
-.edra-slash-command-list-item {
-	display: flex;
-	height: fit-content;
-	width: 100%;
-	align-items: center;
-	justify-content: flex-start;
-	gap: 0.5rem;
-	padding: 0.5rem;
-	background: none;
-	border: none;
-	margin: 0.25rem 0;
-	border-radius: 0.25rem;
-}
-.edra-slash-command-list-item.active {
-	background-color: var(--edra-border-color);
-}
+/* Slash command styles moved to SlashCommandList.svelte component */
 
 .edra-search-and-replace {
 	display: flex;