some layout fix and added random battery

src/App.svelte

@@ -1,7 +1,22 @@
+<script lang="ts" module>
+	function mulberry32(a: number): () => number {
+		return function () {
+			let t = (a += 0x6d2b79f5);
+			t = Math.imul(t ^ (t >>> 15), t | 1);
+			t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+			return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+		};
+	}
+</script>
+
 <script lang="ts">
 	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
 	import {
 		BatteryFullIcon,
+		BatteryMediumIcon,
+		BatteryLowIcon,
+		BatteryIcon as BatteryEmptyIcon,
+		EllipsisVerticalIcon,
 		HomeIcon,
 		MessageCircleIcon,
 		SendHorizontalIcon,
@@ -12,6 +27,10 @@
 	} from '@lucide/svelte';
 	import RenderComment from '@/components/RenderComment.svelte';
 	import axolotl from '@/assets/axolotl.png';
+	import { cubicOut, sineInOut } from 'svelte/easing';
+
+	const todaySeed = Math.floor(Date.now() / 1000 / 60 / 60 / 24);
+	const params = new URLSearchParams(window.location.search);
 
 	let { chats }: { chats: Comment[] } = $props();
 
@@ -22,6 +41,29 @@
 
 	let render_chats = $derived([...chats].reverse());
 
+	let battery_base = $derived.by(() => {
+		if (params.has('battery')) {
+			const value = parseInt(params.get('battery') || '100', 10);
+			if (!isNaN(value)) return Math.max(1, Math.min(100, value));
+		}
+		return 5 + Math.round(cubicOut(sineInOut(mulberry32(todaySeed)())) * 95);
+	});
+
+	let battery_reduce = $state(0);
+	let battery = $derived.by(() => {
+		if (params.has('lock-battery')) {
+			return Math.max(1, battery_base);
+		}
+		return Math.max(1, battery_base - battery_reduce);
+	});
+
+	let BatteryIcon = $derived.by(() => {
+		if (battery > 75) return BatteryFullIcon;
+		if (battery > 45) return BatteryMediumIcon;
+		if (battery > 15) return BatteryLowIcon;
+		return BatteryEmptyIcon;
+	});
+
 	function pad(str: string | { toString(): string }, char: number): string {
 		const s = str.toString();
 		const diff = char - s.length;
@@ -30,10 +72,19 @@
 	}
 
 	$effect(() => {
-		const interval = setInterval(() => {
+		const clockUpdate = setInterval(() => {
 			date = new Date();
 		}, 1000);
-		return () => clearInterval(interval);
+		const batteryUpdate = setInterval(
+			() => {
+				battery_reduce++;
+			},
+			15 * 60 * 1000
+		);
+		return () => {
+			clearInterval(clockUpdate);
+			clearInterval(batteryUpdate);
+		};
 	});
 </script>
 
@@ -61,12 +112,13 @@
 					<span>{pad(hour, 2)}:{pad(minute, 2)}</span>
 					<WifiIcon class="ml-auto" />
 					<SignalIcon />
-					<BatteryFullIcon />
-					<span>100%</span>
+					<BatteryIcon class={battery <= 15 ? 'text-red-500' : ''} />
+					<span class:text-red-500={battery <= 15}>{battery}%</span>
 				</div>
 				<div class="px-24 py-8 font-bold text-24 gap-6 flex flex-row items-center">
 					<MessageCircleIcon />
 					聊天室
+					<EllipsisVerticalIcon class="ml-auto" />
 				</div>
 			</div>
 			<div class="grow flex flex-col-reverse px-15 h-0 overflow-hidden">

src/app.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 
-@theme {
+@theme inline {
 	--spacing: calc(var(--render-scale, 1) * 1px);
 
 	--color-frame: var(--chat-frame, #ffced1);

src/components/RenderComment.svelte

@@ -16,8 +16,8 @@
 
 	let layout = $derived(
 		chat.data.isOwner
-			? ['flex-row-reverse', 'pl-30', 'origin-bottom-right']
-			: ['flex-row', 'pr-30', 'origin-bottom-left']
+			? ['flex-row-reverse', 'pl-40', 'origin-bottom-right']
+			: ['flex-row', 'pr-40', 'origin-bottom-left']
 	);
 
 	let is_youtube_gift = $derived(chat.service === 'youtube' && chat.data.hasGift);
@@ -43,12 +43,12 @@
 		>
 			<div
 				class={[
-					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-bold text-12 max-w-full',
+					'px-5 gap-5 flex flex-row items-center font-bold text-12 max-w-full',
 					author_color,
 					chat.data.isOwner ? 'justify-end' : 'justify-start'
 				]}
 			>
-				<span class="text-ellipsis whitespace-nowrap">{author_name}</span>
+				<span class="truncate whitespace-nowrap grow">{author_name}</span>
 				{#if chat.service === 'youtube' && chat.data.isModerator}
 					<WrenchIcon class="size-12 min-w-14 min-h-14" />
 				{/if}