From 02e11efcbae912a1be8a0bc388c102886c7bab7e Mon Sep 17 00:00:00 2001
From: 0nepeop1e <engshun.lim@gmail.com>
Date: Sat, 14 Jun 2025 02:19:07 +0800
Subject: [PATCH] add title bar

---
 public/template.json |  6 ++++++
 src/App.svelte       | 27 +++++++++++++++++----------
 2 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 public/template.json

diff --git a/public/template.json b/public/template.json
new file mode 100644
index 0000000..706a972
--- /dev/null
+++ b/public/template.json
@@ -0,0 +1,6 @@
+{
+	"name": "Sakanana的手机",
+	"author": "0nepeop1e",
+	"link": "https://x.com/0nepeop1e",
+	"description": "长得像Sakanana的手机"
+}
diff --git a/src/App.svelte b/src/App.svelte
index b4adf5f..8c4138a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,7 +3,9 @@
 	import {
 		BatteryFullIcon,
 		HomeIcon,
+		MessageCircleIcon,
 		SendHorizontalIcon,
+		SignalIcon,
 		Tally4Icon,
 		TriangleIcon,
 		WifiIcon
@@ -24,7 +26,7 @@
 		const s = str.toString();
 		const diff = char - s.length;
 		if (diff <= 0) return s;
-		return s + '0'.repeat(diff);
+		return '0'.repeat(diff) + s;
 	}
 
 	$effect(() => {
@@ -54,13 +56,18 @@
 		<div
 			class="w-full h-full flex flex-col border-3 border-screen-border rounded-10 overflow-hidden bg-background relative"
 		>
-			<div
-				class="bg-status/80 gap-4 shadow-md backdrop-blur-md flex flex-row py-2 px-18 text-16 font-bold text-status-text absolute top-0 -left-10 -right-10"
-			>
-				<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
-				<WifiIcon class="h-full w-auto ml-auto" />
-				<BatteryFullIcon class="h-full w-auto" />
-				<span>100%</span>
+			<div class="bg-status shadow-md text-16 font-bold text-status-text -mx-10">
+				<div class="py-2 px-18 flex flex-row gap-4">
+					<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+					<WifiIcon class="ml-auto" />
+					<SignalIcon />
+					<BatteryFullIcon />
+					<span>100%</span>
+				</div>
+				<div class="px-24 py-8 font-bold text-24 gap-6 flex flex-row items-center">
+					<MessageCircleIcon />
+					聊天室
+				</div>
 			</div>
 			<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">
 				{#each render_chats as chat (chat)}
@@ -76,8 +83,8 @@
 				</div>
 			</div>
 			<div class="h-48 flex flex-row items-center justify-center text-navigation gap-80">
-				<Tally4Icon class="size-24"/>
-				<HomeIcon class="size-24"/>
+				<Tally4Icon class="size-24" />
+				<HomeIcon class="size-24" />
 				<TriangleIcon class="size-24 origin-center -rotate-90" />
 			</div>
 		</div>