always have default project

package.json

@@ -13,6 +13,7 @@
 		"format": "prettier . --write ."
 	},
 	"devDependencies": {
+		"@iconify-json/carbon": "^1.2.8",
 		"@ryoppippi/unplugin-typia": "^1.0.0",
 		"@samchon/openapi": "^3.0.0",
 		"@sveltejs/adapter-auto": "^3.2.2",
@@ -38,6 +39,7 @@
 		"ts-patch": "^3.3.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.8.2",
+		"unplugin-icons": "^22.1.0",
 		"vite": "^5.0.3"
 	},
 	"type": "module",

pnpm-lock.yaml

@@ -27,6 +27,9 @@ importers:
         specifier: ^8.0.0
         version: 8.0.0(@samchon/[email protected])([email protected])
     devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.2.8
+        version: 1.2.8
       '@ryoppippi/unplugin-typia':
         specifier: ^1.0.0
         version: 1.2.0(@samchon/[email protected])([email protected])([email protected])([email protected])([email protected])
@@ -102,6 +105,9 @@ importers:
       typescript:
         specifier: ^5.8.2
         version: 5.8.2
+      unplugin-icons:
+        specifier: ^22.1.0
+        version: 22.1.0([email protected])
       vite:
         specifier: ^5.0.3
         version: 5.4.14([email protected])
@@ -116,6 +122,12 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@antfu/[email protected]':
+    resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==}
+
+  '@antfu/[email protected]':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@esbuild/[email protected]':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -458,6 +470,15 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@iconify-json/[email protected]':
+    resolution: {integrity: sha512-6xh4YiFBz6qoSnB3XMe23WvjTJroDFXB17J1MbiT7nATFe+70+em1acRXr8hgP/gYpwFMHFc4IvjA/IPTPnTzg==}
+
+  '@iconify/[email protected]':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/[email protected]':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
   '@internationalized/[email protected]':
     resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
 
@@ -975,6 +996,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
+  [email protected]:
+    resolution: {integrity: sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==}
+
   [email protected]:
     resolution: {integrity: sha512-EiPU8G6dQG0GFHNR8ljnZFki/8a+cQwEQ+7wpxdChl02Q8HXlwEZWD5lqAF8vC2sEC3Tehr8hy7vErz88LHyUA==}
     engines: {node: ^14.18.0 || >=16.10.0}
@@ -1150,6 +1174,9 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==}
+
   [email protected]:
     resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
     engines: {node: '>=4'}
@@ -1243,6 +1270,10 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  [email protected]:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   [email protected]:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1389,6 +1420,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
+  [email protected]:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   [email protected]:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1465,6 +1499,10 @@ packages:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
+  [email protected]:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
+
   [email protected]:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -1648,6 +1686,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+
   [email protected]:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -1990,6 +2031,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
   [email protected]:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -2058,10 +2102,37 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      svelte:
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==}
     engines: {node: '>=14.0.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
+    engines: {node: '>=18.12.0'}
+
   [email protected]:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -2200,6 +2271,13 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.8
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@antfu/[email protected]':
+    dependencies:
+      package-manager-detector: 0.2.11
+      tinyexec: 0.3.2
+
+  '@antfu/[email protected]': {}
+
   '@esbuild/[email protected]':
     optional: true
 
@@ -2402,6 +2480,25 @@ snapshots:
 
   '@humanwhocodes/[email protected]': {}
 
+  '@iconify-json/[email protected]':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/[email protected]': {}
+
+  '@iconify/[email protected]':
+    dependencies:
+      '@antfu/install-pkg': 1.0.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.0
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.1
+      mlly: 1.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@internationalized/[email protected]':
     dependencies:
       '@swc/helpers': 0.5.15
@@ -2930,6 +3027,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3156,6 +3255,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       chardet: 0.7.0
@@ -3257,6 +3358,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       array-union: 2.1.0
@@ -3384,6 +3487,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       prelude-ls: 1.2.1
@@ -3439,6 +3544,12 @@ snapshots:
   [email protected]:
     optional: true
 
+  [email protected]:
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.1.0
+      quansync: 0.2.8
+
   [email protected]: {}
 
   [email protected]:
@@ -3605,6 +3716,12 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
+  [email protected]:
+    dependencies:
+      confbox: 0.2.1
+      exsolve: 1.0.4
+      pathe: 2.0.3
+
   [email protected]([email protected]):
     dependencies:
       lilconfig: 2.1.0
@@ -3883,6 +4000,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       os-tmpdir: 1.0.2
@@ -3944,11 +4063,28 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]):
+    dependencies:
+      '@antfu/install-pkg': 1.0.0
+      '@iconify/utils': 2.3.0
+      debug: 4.4.0
+      local-pkg: 1.1.1
+      unplugin: 2.2.0
+    optionalDependencies:
+      svelte: 4.2.19
+    transitivePeerDependencies:
+      - supports-color
+
   [email protected]:
     dependencies:
       acorn: 8.14.0
       webpack-virtual-modules: 0.6.2
 
+  [email protected]:
+    dependencies:
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
+
   [email protected]:
     dependencies:
       punycode: 2.3.1

src/app.css

@@ -23,11 +23,11 @@
 	}
 }
 
-html {
-	font-size: 15px;
-}
-
+/* Theme config */
 @theme {
+	--text-2xs: 0.625rem;
+	--text-3xs: 0.5rem;
+
 	--animate-fade-in: fade-in 0.15s ease;
 	@keyframes fade-in {
 		0% {
@@ -41,7 +41,17 @@ html {
 	}
 }
 
+/* Utilities */
 @utility abs-x-center {
 	left: 50%;
 	@apply -translate-x-1/2;
 }
+
+@utility btn {
+	@apply flex h-[39px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700;
+}
+
+/* Elements & Classes */
+html {
+	font-size: 15px;
+}

src/app.d.ts

@@ -1,3 +1,5 @@
+import "unplugin-icons/types/svelte";
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

src/lib/components/Icons/IconExternal.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	export let classNames = "";
-</script>
-
-<svg class={classNames} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-	><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z" /></svg
->

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -24,7 +24,7 @@
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import IconExternal from "../Icons/IconExternal.svelte";
+	import IconExternal from "~icons/carbon/arrow-up-right";
 	import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
@@ -303,11 +303,7 @@
 						{!viewSettings ? "Settings" : "Hide Settings"}
 					</button>
 				{/if}
-				<button
-					type="button"
-					on:click={reset}
-					class="flex size-[39px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-				>
+				<button type="button" on:click={reset} class="btn size-[39px]">
 					<IconDelete />
 				</button>
 			</div>
@@ -317,11 +313,7 @@
 				{/each}
 			</div>
 			<div class="flex flex-1 justify-end gap-x-2">
-				<button
-					type="button"
-					on:click={() => (viewCode = !viewCode)}
-					class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-				>
+				<button type="button" on:click={() => (viewCode = !viewCode)} class="btn">
 					<IconCode />
 					{!viewCode ? "View Code" : "Hide Code"}</button
 				>
@@ -388,7 +380,7 @@
 							target="_blank"
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 						>
-							<IconExternal />
+							<IconExternal class="text-2xs" />
 							Model page
 						</a>
 					</div>

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -10,8 +10,8 @@
 	import { token } from "$lib/stores/token";
 	import { entries, fromEntries, keys } from "$lib/utils/object";
 	import type { InferenceProvider } from "@huggingface/inference";
-	import IconCopyCode from "../Icons/IconCopyCode.svelte";
-	import IconExternal from "../Icons/IconExternal.svelte";
+	import IconCopyCode from "~icons/carbon/copy";
+	import IconExternal from "~icons/carbon/arrow-up-right";
 	import {
 		getInferenceSnippet,
 		type GetInferenceSnippetReturn,
@@ -191,7 +191,7 @@
 					target="_blank"
 					class="relative -bottom-[1px] flex items-center gap-1 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 				>
-					<IconExternal classNames="size-3" />
+					<IconExternal class="text-xs" />
 					Docs
 				</a>
 			</h2>
@@ -200,7 +200,7 @@
 					class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
 					use:copy={installInstructions.content}
 				>
-					<IconCopyCode classNames="text-xs" /> Copy code
+					<IconCopyCode class="text-2xs" /> Copy code
 				</button>
 			</div>
 		</div>
@@ -226,7 +226,7 @@
 				class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
 				use:copy={selectedSnippet?.content}
 			>
-				<IconCopyCode classNames="text-xs" /> Copy code
+				<IconCopyCode class="text-2xs" /> Copy code
 			</button>
 		</div>
 	</div>

src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -3,12 +3,15 @@
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
-	import IconDelete from "../Icons/IconDelete.svelte";
+	import IconDelete from "~icons/carbon/trash-can";
+	import IconCross from "../Icons/IconCross.svelte";
+	import IconSave from "~icons/carbon/save";
+	import IconEdit from "~icons/carbon/edit";
 
 	let classNames: string = "";
 	export { classNames as class };
 
-	const newProjectId = "__new-project-i-hope-no-one-uses-this-as-an-id__";
+	$: isDefault = getActiveProject($session).id === "default";
 
 	const {
 		elements: { trigger, menu, option },
@@ -16,22 +19,22 @@
 	} = createSelect<string, false>();
 	const sync = createSync({ selected });
 	$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
-		if (p?.value === newProjectId) {
-			session.addProject("Project #" + ($session.projects.length + 1));
-		} else if (p) {
-			$session.activeProjectId = p?.value;
-		}
+		if (!p) return;
+		$session.activeProjectId = p?.value;
 	});
+
+	function saveProject() {
+		session.saveProject(prompt("Project name") || "Project #" + ($session.projects.length + 1));
+	}
 </script>
 
-<div class="flex flex-col gap-2">
+<div class={cn("flex w-full items-stretch gap-2 ", classNames)}>
 	<button
 		{...$trigger}
 		use:trigger
 		class={cn(
-			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
-			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-			classNames
+			"relative flex grow items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
+			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
@@ -39,36 +42,47 @@
 		</div>
 		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
 	</button>
+	{#if isDefault}
+		<button class="btn size-[32px] p-0" on:click={saveProject}>
+			<IconSave />
+		</button>
+	{:else}
+		<button class="btn size-[32px] p-0" on:click={() => ($session.activeProjectId = "default")}>
+			<IconCross />
+		</button>
+	{/if}
+</div>
 
-	<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-		{#each $session.projects as { name, id } (id)}
-			<button
-				{...$option({ value: id, label: name })}
-				use:option
-				class="group block w-full p-1 text-sm dark:text-white"
-			>
-				<div
-					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-				>
-					{name}
-					<button
-						class="ml-auto grid place-items-center rounded-md p-1 hover:bg-gray-300 dark:hover:bg-gray-600"
-						on:click={e => {
-							e.stopPropagation();
-							session.deleteProject(id);
-						}}
-					>
-						<IconDelete />
-					</button>
-				</div>
-			</button>
-		{/each}
-		<button {...$option({ value: newProjectId })} use:option class="group block w-full p-1 text-sm dark:text-white">
+<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+	{#each $session.projects as { name, id } (id)}
+		<button {...$option({ value: id, label: name })} use:option class="group block w-full p-1 text-sm dark:text-white">
 			<div
-				class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+				class="flex items-center gap-2 rounded-md py-1.5 pr-1 pl-2 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 			>
-				Add new project
+				{name}
+				{#if id !== "default"}
+					<div class="ml-auto flex items-center gap-1">
+						<button
+							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
+							on:click={e => {
+								e.stopPropagation();
+								session.updateProject(id, { name: prompt("Project name", name) || name });
+							}}
+						>
+							<IconEdit />
+						</button>
+						<button
+							class="grid place-items-center rounded-md p-1 text-xs hover:bg-gray-300 dark:hover:bg-gray-600"
+							on:click={e => {
+								e.stopPropagation();
+								session.deleteProject(id);
+							}}
+						>
+							<IconDelete />
+						</button>
+					</div>
+				{/if}
 			</div>
 		</button>
-	</div>
+	{/each}
 </div>

src/lib/stores/session.ts

@@ -4,6 +4,7 @@ import {
 	PipelineTag,
 	type Conversation,
 	type ConversationMessage,
+	type DefaultProject,
 	type ModelWithTokenizer,
 	type Project,
 	type Session,
@@ -36,35 +37,35 @@ const emptyModel: ModelWithTokenizer = {
 	},
 };
 
-function createSessionStore() {
-	function getDefaults() {
-		const $models = get(models);
-		const featured = getTrending($models);
-		const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
-
-		// Parse URL query parameters
-		const searchParams = new URLSearchParams(window.location.search);
-		const searchProviders = searchParams.getAll("provider");
-		const searchModelIds = searchParams.getAll("modelId");
-		const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
-
-		const defaultConversation: Conversation = {
-			model: defaultModel,
-			config: { ...defaultGenerationConfig },
-			messages: [{ ...startMessageUser }],
-			systemMessage,
-			streaming: true,
-		};
+function getDefaults() {
+	const $models = get(models);
+	const featured = getTrending($models);
+	const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
+
+	// Parse URL query parameters
+	const searchParams = new URLSearchParams(window.location.search);
+	const searchProviders = searchParams.getAll("provider");
+	const searchModelIds = searchParams.getAll("modelId");
+	const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
+
+	const defaultConversation: Conversation = {
+		model: defaultModel,
+		config: { ...defaultGenerationConfig },
+		messages: [{ ...startMessageUser }],
+		systemMessage,
+		streaming: true,
+	};
 
-		const defaultProject: Project = {
-			name: "Default project",
-			id: crypto.randomUUID(),
-			conversations: [defaultConversation],
-		};
+	const defaultProject: DefaultProject = {
+		name: "Default",
+		id: "default",
+		conversations: [defaultConversation],
+	};
 
-		return { defaultProject, defaultConversation };
-	}
+	return { defaultProject, defaultConversation };
+}
 
+function createSessionStore() {
 	const store = writable<Session>(undefined, set => {
 		const { defaultConversation, defaultProject } = getDefaults();
 
@@ -148,6 +149,9 @@ function createSessionStore() {
 		localStorage.removeItem(LOCAL_STORAGE_KEY);
 	}
 
+	/**
+	 * @deprecated - Use `saveProject` instead
+	 */
 	function addProject(name: string) {
 		const { defaultConversation } = getDefaults();
 		update(s => {
@@ -161,19 +165,50 @@ function createSessionStore() {
 		});
 	}
 
+	/**
+	 * Saves a new project with the data inside the default project
+	 */
+	function saveProject(name: string) {
+		update(s => {
+			const defaultProject = s.projects.find(p => p.id === "default");
+			if (!defaultProject) return s;
+			const project: Project = {
+				...defaultProject,
+				name,
+				id: crypto.randomUUID(),
+			};
+
+			return { ...s, projects: [...s.projects, project], activeProjectId: project.id };
+		});
+	}
+
 	function deleteProject(id: string) {
+		// Can't delete default project!
+		if (id === "default") return;
+
 		update(s => {
 			const projects = s.projects.filter(p => p.id !== id);
 			if (projects.length === 0) {
 				const { defaultProject } = getDefaults();
-				return { ...s, projects: [defaultProject], activeProjectId: defaultProject.id };
+				const newSession = { ...s, projects: [defaultProject], activeProjectId: defaultProject.id };
+				return typia.is<Session>(newSession) ? newSession : s;
 			}
+
 			const currProject = projects.find(p => p.id === s.activeProjectId);
-			return { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id! };
+			const newSession = { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id! };
+			return typia.is<Session>(newSession) ? newSession : s;
+		});
+	}
+
+	function updateProject(id: string, data: Partial<Project>) {
+		update(s => {
+			const projects = s.projects.map(p => (p.id === id ? { ...p, ...data } : p));
+			const newSession = { ...s, projects };
+			return typia.is<Session>(newSession) ? newSession : s;
 		});
 	}
 
-	return { ...store, set, update, clearSavedSession, addProject, deleteProject };
+	return { ...store, set, update, clearSavedSession, addProject, deleteProject, saveProject, updateProject };
 }
 
 export const session = createSessionStore();

src/lib/types.ts

@@ -18,8 +18,13 @@ export type Project = {
 	name: string;
 };
 
+export type DefaultProject = Project & {
+	id: "default";
+	name: "Default";
+};
+
 export type Session = {
-	projects: Project[];
+	projects: [DefaultProject, ...Project[]];
 	activeProjectId: string;
 };
 

vite.config.ts

@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 import UnpluginTypia from "@ryoppippi/unplugin-typia/vite";
+import Icons from "unplugin-icons/vite";
 
 export default defineConfig({
 	plugins: [
@@ -9,5 +10,9 @@ export default defineConfig({
 			cache: false,
 		}),
 		sveltekit(),
+		Icons({
+			compiler: "svelte",
+			autoInstall: true,
+		}),
 	],
 });