add title bar

public/template.json

@@ -0,0 +1,6 @@
+{
+	"name": "Sakanana的手机",
+	"author": "0nepeop1e",
+	"link": "https://x.com/0nepeop1e",
+	"description": "长得像Sakanana的手机"
+}

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
+			<div class="bg-status shadow-md text-16 font-bold text-status-text -mx-10">
-				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"
+				<div class="py-2 px-18 flex flex-row gap-4">
-			>
+					<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
-				<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
+					<WifiIcon class="ml-auto" />
-				<WifiIcon class="h-full w-auto ml-auto" />
+					<SignalIcon />
-				<BatteryFullIcon class="h-full w-auto" />
+					<BatteryFullIcon />
-				<span>100%</span>
+					<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"/>
+				<Tally4Icon class="size-24" />
-				<HomeIcon class="size-24"/>
+				<HomeIcon class="size-24" />
 				<TriangleIcon class="size-24 origin-center -rotate-90" />
 			</div>
 		</div>