I broke everything!

Trying to add a rewind icon but I broke everything

src/app.postcss

@@ -8,3 +8,7 @@
 	-webkit-transform: translate3d(0, 0, 0);
 	-webkit-perspective: 1000;
 }
+
+.quick-command-key {
+	@apply shadow bg-[#343338] font-mono px-[3px] rounded-sm border border-[#3A393F] text-[11px];
+}

src/lib/components/CommandPalette/CmdK.svelte

@@ -13,6 +13,7 @@
 	import Commit from './Commit.svelte';
 	import { invoke } from '@tauri-apps/api';
 	import { createEventDispatcher } from 'svelte';
+	import { RewindIcon } from '$lib/components/icons';
 
 	const dispatch = createEventDispatcher();
 
@@ -90,6 +91,7 @@
 					action: {
 						component: Commit
 					},
+					icon: RewindIcon,
 					visible: 'commit'.includes(userInput?.toLowerCase())
 				},
 				{
@@ -99,6 +101,7 @@
 					action: {
 						component: Replay
 					},
+					icon: 'RewindIcon',
 					visible: 'replay history'.includes(userInput?.toLowerCase())
 				}
 			]
@@ -170,9 +173,9 @@
 
 <Modal on:close>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div class="flex h-[640px] w-[640px] flex-col rounded text-zinc-400" on:click|stopPropagation>
+	<div class="commnand-pallete flex h-[640px] w-[640px] flex-col rounded text-zinc-400" on:click|stopPropagation>
 		<!-- Search input area -->
-		<div class="flex items-center border-b border-zinc-400/20 py-2">
+		<div class="search-input flex items-center border-b border-zinc-400/20 py-2">
 			<div class="ml-4 mr-2 flex flex-grow items-center">
 				<!-- Project scope -->
 				{#if scopeToProject}
@@ -198,17 +201,17 @@
 			</div>
 		</div>
 		<!-- Main part -->
-		<div class="flex-auto overflow-y-auto">
+		<div class="search-results h-[640px] flex-auto overflow-y-auto">
 			{#each commandGroups as group, groupIdx}
 				{#if group.visible}
 					<div class="mx-2 cursor-default select-none">
-						<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
+						<p class="result-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
 							<span>{group.name}</span>
 							{#if group.description}
-								<span class="ml-2 font-light italic text-zinc-300/60">({group.description})</span>
+								<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>
 							{/if}
 						</p>
-						<ul class="">
+						<ul class="section-list text-zinc-300">
 							{#each group.commands as command, commandIdx}
 								{#if command.visible}
 									{#if Action.isLink(command.action)}
@@ -221,8 +224,8 @@
 												? 'bg-zinc-700/70'
 												: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none"
 										>
-											<span class="flex-grow">{command.title}</span>
-											<span>{command.description}</span>
+											<span class="quick-command flex-grow">{command.title}</span>
+											<span class="quick-command-key">{command.description}</span>
 										</a>
 									{:else if Action.isActionInPalette(command.action)}
 										<div
@@ -230,11 +233,14 @@
 											on:focus={() => (selection = [groupIdx, commandIdx])}
 											on:click={triggerCommand}
 											class="{selection[0] === groupIdx && selection[1] === commandIdx
-												? 'bg-zinc-700/70'
-												: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none"
+												? 'bg-zinc-50/10'
+												: ''} flex cursor-default items-center rounded-lg p-2 px-2 outline-none gap-2"
 										>
-											<span class="flex-grow">{command.title}</span>
-											<span>{command.description}</span>
+											<span class="quick-command-icon">
+												{command.icon}
+											</span>
+											<span class="quick-command flex-grow">{command.title}</span>
+											<span class="quick-command-key ">{command.description}</span>
 										</div>
 									{/if}
 								{/if}

src/lib/components/CommandPalette/Replay.svelte

@@ -80,7 +80,7 @@
 
 <Modal on:close>
 	<div class="mx-2 cursor-default select-none">
-		<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
+		<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
 			Replay working history from...
 		</p>
 

src/lib/components/CommandPalette/types.ts

@@ -22,6 +22,7 @@ export type CommandGroup = {
 	description?: string;
 	visible: boolean;
 	commands: Command[];
+	icon: ComponentType;
 };
 
 export const firstVisibleCommand = (commandGroups: CommandGroup[]): [number, number] => {

src/lib/components/icons/RewindIcon.svelte

@@ -0,0 +1,21 @@
+<svg 
+	width="20" 
+	height="20" 
+	viewBox="0 0 20 20" 
+	fill="none" 
+	xmlns="http://www.w3.org/2000/svg"
+	class="h-6 w-6"
+	>
+	<path 
+		fill-rule="evenodd" 
+		clip-rule="evenodd" 
+		d="M4.35744 9.90001L8.9 13.6467L8.9 6.15336L4.35744 9.90001ZM2.93534 9.12855C2.45039 9.52854 2.45039 10.2715 2.93534 10.6715L8.76372 15.4786C9.41596 16.0166 10.4 15.5526 10.4 14.7072L10.4 5.09284C10.4 4.24738 9.41595 3.78343 8.76371 4.32139L2.93534 9.12855Z" 
+		fill="#71717A"/>
+	<path 
+		fill-rule="evenodd" 
+		clip-rule="evenodd" 
+		d="M12.1633 9.89999L15.7 13.3032L15.7 6.49683L12.1633 9.89999ZM10.7488 9.17942C10.34 9.57282 10.34 10.2272 10.7488 10.6206L15.5066 15.1987C16.1419 15.8101 17.2 15.3598 17.2 14.4782L17.2 5.32182C17.2 4.44016 16.1419 3.98992 15.5066 4.60124L10.7488 9.17942Z" 
+		fill="#71717A"
+	/>
+</svg>
+	

src/lib/components/icons/index.ts

@@ -6,6 +6,7 @@ export { default as FileIcon } from './FileIcon.svelte';
 export { default as FolderIcon } from './FolderIcon.svelte';
 export { default as LabelIcon } from './LabelIcon.svelte';
 export { default as ProjectIcon } from './ProjectIcon.svelte';
+export { default as RewindIcon } from './RewindIcon.svelte';
 export { default as IconRotateClockwise } from './IconRotateClockwise.svelte';
 export { default as IconPlayerPauseFilled } from './IconPlayerPauseFilled.svelte';
 export { default as IconPlayerPlayFilled } from './IconPlayerPlayFilled.svelte';