From 11c4ccece436aae2081c426d3e31fb272a464904 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 2 Sep 2026 18:49:55 +0500
Subject: [PATCH] refactor: update footer component

---
 web/src/lib/components/kit/Footer.svelte      | 25 ----------------
 .../lib/components/kit/layout/Footer.svelte   | 29 +++++++++++++++++++
 web/src/routes/preview/+layout.svelte         |  2 +-
 3 files changed, 30 insertions(+), 26 deletions(-)
 delete mode 100644 web/src/lib/components/kit/Footer.svelte
 create mode 100644 web/src/lib/components/kit/layout/Footer.svelte

diff --git a/web/src/lib/components/kit/Footer.svelte b/web/src/lib/components/kit/Footer.svelte
deleted file mode 100644
index 64763ec..0000000
--- a/web/src/lib/components/kit/Footer.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<footer class="preview-footer">
-	<span>easy-png-tools <b class="version">v2.4.0</b></span>
-	<span>© 2024</span>
-</footer>
-
-<style>
-	.preview-footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 16px clamp(20px, 4vw, 72px);
-		border-top: 1px solid var(--line);
-		font: 10px var(--font-mono);
-		color: var(--muted);
-		& span {
-			display: flex;
-			align-items: center;
-			gap: 7px;
-		}
-	}
-	.preview-footer .version {
-		font-weight: 400;
-		color: var(--blue);
-	}
-</style>
diff --git a/web/src/lib/components/kit/layout/Footer.svelte b/web/src/lib/components/kit/layout/Footer.svelte
new file mode 100644
index 0000000..11e1d71
--- /dev/null
+++ b/web/src/lib/components/kit/layout/Footer.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	// TODO: insert version from package.json
+</script>
+
+<footer class="preview-footer">
+	<span>easy-png-tools <b class="version">v0.1.0</b></span>
+	<span>© 2026</span>
+</footer>
+
+<style>
+	.preview-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-xl);
+		border-top: var(--size-border) solid var(--color-border);
+		font: var(--font-text) var(--font-mono);
+		color: var(--color-text-muted);
+		& span {
+			display: flex;
+			align-items: center;
+			gap: var(--space-m);
+		}
+	}
+	.preview-footer .version {
+		font-weight: normal;
+		color: var(--color-text-accent);
+	}
+</style>
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index 645c3d7..5c03acd 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/state";
-	import Footer from "$lib/components/kit/Footer.svelte";
+	import Footer from "$lib/components/kit/layout/Footer.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
 	import type { Snippet } from "svelte";
 	import "../../preview.css";