From 03e0ae4429e37363a925435123d6c7bee12b2dec Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Wed, 5 Apr 2023 13:47:43 +0200
Subject: [PATCH] use correct terminal icon

---
 .../CommandPalette/CommandPalette.svelte      |  4 ++--
 src/lib/components/CommandPalette/commands.ts | 24 +++++++++----------
 src/lib/components/icons/IconTerminal.svelte  | 19 +++++++++++++++
 src/lib/components/icons/index.ts             |  1 +
 .../projects/[projectId]/+layout.svelte       | 16 ++-----------
 5 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/components/icons/IconTerminal.svelte

diff --git a/src/lib/components/CommandPalette/CommandPalette.svelte b/src/lib/components/CommandPalette/CommandPalette.svelte
index 712865cc0..503272b69 100644
--- a/src/lib/components/CommandPalette/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette/CommandPalette.svelte
@@ -179,9 +179,9 @@
 											on:mouseover={() => (selection = [groupIdx, commandIdx])}
 											on:focus={() => (selection = [groupIdx, commandIdx])}
 											on:click={() => trigger(command.action)}
-											class="flex w-full gap-2"
+											class="flex w-full items-center gap-2"
 										>
-											<svelte:component this={command.icon} />
+											<svelte:component this={command.icon} class="h-5 w-5 text-zinc-100" />
 											<span class="quick-command flex-1 text-left">{command.title}</span>
 											{#if command.hotkey}
 												<span class="quick-command-key">{command.hotkey}</span>
diff --git a/src/lib/components/CommandPalette/commands.ts b/src/lib/components/CommandPalette/commands.ts
index 4e959600b..fd7c4e51c 100644
--- a/src/lib/components/CommandPalette/commands.ts
+++ b/src/lib/components/CommandPalette/commands.ts
@@ -1,8 +1,8 @@
 import QuickCommit from './QuickCommit.svelte';
 import type { Project } from '$lib/projects';
-import { GitCommitIcon, RewindIcon } from '../icons';
+import { GitCommitIcon, IconTerminal, RewindIcon } from '../icons';
 import { matchFiles } from '$lib/git';
-import type { SvelteComponentTyped } from 'svelte';
+import type { SvelteComponent, SvelteComponentTyped } from 'svelte';
 import { format, startOfISOWeek, startOfMonth, subDays, subMonths, subWeeks } from 'date-fns';
 
 type ActionLink = {
@@ -32,13 +32,11 @@ export namespace Action {
     export const isGroup = (action: Action): action is Group => 'commands' in action;
 }
 
-type Icon = Newable<GitCommitIcon> | Newable<RewindIcon>;
-
 export type Command = {
     title: string;
     hotkey?: string;
     action: Action;
-    icon?: Icon;
+    icon?: Newable<SvelteComponent>;
 };
 
 export type Group = {
@@ -63,14 +61,6 @@ const goToProjectGroup = ({ projects, input }: { projects: Project[]; input: str
 const actionsGroup = ({ project, input }: { project: Project; input: string }): Group => ({
     title: 'Actions',
     commands: [
-        {
-            title: 'Terminal',
-            hotkey: 'Shift+t',
-            action: {
-                href: `/projects/${project?.id}/terminal/`
-            },
-            icon: GitCommitIcon
-        },
         {
             title: 'Quick commit',
             hotkey: 'c',
@@ -89,6 +79,14 @@ const actionsGroup = ({ project, input }: { project: Project; input: string }):
             },
             icon: GitCommitIcon
         },
+        {
+            title: 'Terminal',
+            hotkey: 'Shift+t',
+            action: {
+                href: `/projects/${project?.id}/terminal/`
+            },
+            icon: IconTerminal
+        },
         {
             title: 'Replay History',
             hotkey: 'r',
diff --git a/src/lib/components/icons/IconTerminal.svelte b/src/lib/components/icons/IconTerminal.svelte
new file mode 100644
index 000000000..255678c06
--- /dev/null
+++ b/src/lib/components/icons/IconTerminal.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+	/>
+</svg>
diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts
index d97a67d3a..ee2eff717 100644
--- a/src/lib/components/icons/index.ts
+++ b/src/lib/components/icons/index.ts
@@ -21,3 +21,4 @@ export { default as IconChevronRight } from './IconChevronRight.svelte';
 export { default as IconGitBranch } from './IconGitBranch.svelte';
 export { default as IconHome } from './IconHome.svelte';
 export { default as IconLoading } from './IconLoading.svelte';
+export { default as IconTerminal } from './IconTerminal.svelte';
diff --git a/src/routes/projects/[projectId]/+layout.svelte b/src/routes/projects/[projectId]/+layout.svelte
index 524f3ac0a..b8585e3b2 100644
--- a/src/routes/projects/[projectId]/+layout.svelte
+++ b/src/routes/projects/[projectId]/+layout.svelte
@@ -4,6 +4,7 @@
 	import { Button, Tooltip } from '$lib/components';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import { IconTerminal } from '$lib/components/icons';
 
 	export let data: LayoutData;
 	const { project } = data;
@@ -70,20 +71,7 @@
 					&#8984;K
 				</div>
 				<a href="/projects/{$project?.id}/terminal">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="h-6 w-6"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
-						/>
-					</svg>
+					<IconTerminal class="h-6 w-6" />
 				</a>
 			</div>