Make project selector look like design

packages/ui/src/lib/icons/Icon.svelte

@@ -15,6 +15,7 @@
 	class={className}
 	width="16"
 	height="16"
+	style="width: 1rem; height: 1rem;"
 	viewBox="0 0 16 16"
 	fill-rule="evenodd"
 	class:success={color == 'success'}

packages/ui/src/routes/[projectId]/navigation/ListItem.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import Icon from '$lib/icons/Icon.svelte';
+	import type iconsJson from '$lib/icons/icons.json';
+	import { createEventDispatcher } from 'svelte';
+
+	export let icon: keyof typeof iconsJson | undefined = undefined;
+	export let selected = false;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button
+	disabled={selected}
+	class="button text-base-14 font-bold"
+	class:selected
+	on:click={() => dispatch('click')}
+>
+	<slot />
+	{#if icon}
+		<div class="button__icon">
+			<Icon name={icon} />
+		</div>
+	{/if}
+</button>
+
+<style lang="postcss">
+	.button {
+		color: var(--clr-theme-scale-ntrl-10);
+		font-weight: 700;
+		padding-top: var(--space-8);
+		padding-bottom: var(--space-8);
+		padding-left: var(--space-10);
+		padding-right: var(--space-10);
+		justify-content: space-between;
+		width: 100%;
+		&:hover,
+		&:focus {
+			background-color: var(--clr-theme-container-pale);
+			& .button__icon {
+				color: var(--clr-theme-scale-ntrl-40);
+			}
+		}
+		&:disabled {
+			background-color: var(--clr-theme-container-pale);
+			& .button__icon {
+				color: var(--clr-theme-scale-ntrl-50);
+			}
+		}
+	}
+	.button__icon {
+		color: var(--clr-theme-scale-ntrl-50);
+	}
+</style>

packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte

@@ -8,9 +8,7 @@
 	export let project: Project;
 	export let projectService: ProjectService;
 
-	$: projects$ = projectService.projects$.pipe(
-		map((projects) => projects.filter((p) => p.id != project.id))
-	);
+	$: projects$ = projectService.projects$;
 
 	let popup: ProjectsPopup;
 </script>

packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Project } from '$lib/backend/projects';
-	import Spacer from '../settings/Spacer.svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { emit } from '$lib/utils/events';
+	import ListItem from './ListItem.svelte';
 
 	export let projects: Project[];
 	let hidden = true;
@@ -21,28 +22,48 @@
 </script>
 
 {#if !hidden}
-	<div
-		class="absolute top-full z-30 mt-2 w-full rounded border shadow"
-		style:background-color="var(--bg-surface)"
-		style:border-color="var(--border-surface)"
-	>
-		{#each projects as project}
-			<button
-				class="project-link block w-full px-3 py-2 text-left"
-				on:click={() => changeProject(project.id)}
-			>
-				{project.title}
-			</button>
-			<Spacer type="card" />
-		{/each}
+	<div class="popup">
+		{#if projects.length > 0}
+			<div class="popup__projects">
+				{#each projects as project}
+					{@const selected = project.id == $page.params.projectId}
+					<ListItem
+						{selected}
+						icon={selected ? 'tick' : undefined}
+						on:click={() => changeProject(project.id)}
+					>
+						{project.title}
+					</ListItem>
+				{/each}
+			</div>
+		{/if}
+		<div class="popup__actions">
+			<ListItem icon="plus" on:click={() => emit('openNewProjectModal')}>Add new project</ListItem>
+		</div>
 	</div>
 {/if}
 
 <style lang="postcss">
-	.project-link {
-		&:hover,
-		&:focus {
-			background-color: var(--bg-surface-highlight);
-		}
+	.popup {
+		position: absolute;
+		top: 100%;
+		z-index: 30;
+		width: 100%;
+		margin-top: var(--space-6);
+		border-radius: var(--m, 6px);
+		border: 1px solid var(--clr-theme-container-outline-light);
+		background: var(--clr-theme-container-light);
+		/* shadow/s */
+		box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.1);
+	}
+	.popup__actions {
+		padding: var(--space-10);
+		border-top: 1px solid var(--clr-theme-scale-ntrl-70);
+	}
+	.popup__projects {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+		padding: var(--space-10);
 	}
 </style>