From 7cfb20e1c39c6fb8592cc7ab1100d946c3a23339 Mon Sep 17 00:00:00 2001
From: Sami Abuzakuk <mrzaiko@Host-005.lan>
Date: Sat, 11 Oct 2025 10:33:29 +0200
Subject: [PATCH] Add iconify and replace offline icons

---
 frontend/package-lock.json         | 22 ++++++++++++++++++++++
 frontend/package.json              |  1 +
 frontend/src/routes/+layout.svelte | 10 ++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b83cadd..35b9d11 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@codemirror/lang-python": "^6.2.1",
+				"@iconify/svelte": "^5.0.2",
 				"codemirror": "^6.0.2",
 				"monaco-editor": "^0.54.0",
 				"svelte-codemirror-editor": "^2.1.0"
@@ -803,6 +804,27 @@
 				"url": "https://github.com/sponsors/nzakas"
 			}
 		},
+		"node_modules/@iconify/svelte": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@iconify/svelte/-/svelte-5.0.2.tgz",
+			"integrity": "sha512-1iWUT+1veS/QOAzKDG0NPgBtJYGoJqEPwF97voTm8jw6PQ6yU0hL73lEwFoTGMrZmatLvh9cjRBmeSHHaltmrg==",
+			"license": "MIT",
+			"dependencies": {
+				"@iconify/types": "^2.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/cyberalien"
+			},
+			"peerDependencies": {
+				"svelte": ">4.0.0"
+			}
+		},
+		"node_modules/@iconify/types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+			"license": "MIT"
+		},
 		"node_modules/@isaacs/fs-minipass": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d5e3019..634d2b3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
 	},
 	"dependencies": {
 		"@codemirror/lang-python": "^6.2.1",
+		"@iconify/svelte": "^5.0.2",
 		"codemirror": "^6.0.2",
 		"monaco-editor": "^0.54.0",
 		"svelte-codemirror-editor": "^2.1.0"
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 850e85b..34746a4 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../app.css';
+	import Icon from '@iconify/svelte';
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { checkHealth } from '$lib/api';
@@ -64,14 +65,19 @@
 
 <div class="fixed bottom-4 left-4 group">
 	{#if $healthStatus === 'healthy'}
-		<span class="text-green-500">✅</span>
+		<Icon
+			icon="material-symbols:check-circle-rounded"
+			width="24"
+			height="24"
+			class="text-green-400"
+		/>
 		<div
 			class="absolute bottom-full left-1/2 hidden group-hover:flex group-hover:w-max bg-green-500 text-white px-2 py-1 rounded shadow-lg"
 		>
 			Connected to backend
 		</div>
 	{:else}
-		<span class="text-red-500">✘</span>
+		<Icon icon="ix:disconnected-circle-filled" width="24" height="24" class="text-red-400" />
 		<div
 			class="absolute bottom-full left-1/2 hidden group-hover:flex group-hover:w-max bg-red-500 text-white px-2 py-1 rounded shadow-lg"
 		>