enhance(client): tweak statusbar

5 files changed, 60 insertions, 57 deletions

diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue
index ad2fa557a3..6b03ad46e6 100644
--- a/packages/client/src/pages/settings/statusbars.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbars.statusbar.vue
@@ -7,7 +7,7 @@
 		<option value="userList">User list timeline</option>
 	</FormSelect>
 
-	<MkInput v-model="statusbar.name" class="_formBlock">
+	<MkInput v-model="statusbar.name" manual-save class="_formBlock">
 		<template #label>Name</template>
 	</MkInput>
 
@@ -15,14 +15,23 @@
 		<template #label>Black</template>
 	</MkSwitch>
 
+	<FormRadios v-model="statusbar.size" class="_formBlock">
+		<template #label>Size</template>
+		<option value="verySmall">{{ i18n.ts.small }}+</option>
+		<option value="small">{{ i18n.ts.small }}</option>
+		<option value="medium">{{ i18n.ts.medium }}</option>
+		<option value="large">{{ i18n.ts.large }}</option>
+		<option value="veryLarge">{{ i18n.ts.large }}+</option>
+	</FormRadios>
+
 	<template v-if="statusbar.type === 'rss'">
-		<MkInput v-model="statusbar.props.url" class="_formBlock" type="url">
+		<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
 			<template #label>URL</template>
 		</MkInput>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
 			<template #label>Refresh interval</template>
 		</MkInput>
-		<MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
 			<template #label>Duration</template>
 		</MkInput>
 		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -30,10 +39,10 @@
 		</MkSwitch>
 	</template>
 	<template v-else-if="statusbar.type === 'federation'">
-		<MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
 			<template #label>Refresh interval</template>
 		</MkInput>
-		<MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
 			<template #label>Duration</template>
 		</MkInput>
 		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -48,10 +57,10 @@
 			<template #label>{{ i18n.ts.userList }}</template>
 			<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
 		</FormSelect>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
 			<template #label>Refresh interval</template>
 		</MkInput>
-		<MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+		<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
 			<template #label>Duration</template>
 		</MkInput>
 		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -60,7 +69,6 @@
 	</template>
 
 	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton @click="save">save</FormButton>
 		<FormButton danger @click="del">Delete</FormButton>
 	</div>
 </div>
@@ -109,6 +117,8 @@ watch(() => statusbar.type, () => {
 	}
 });
 
+watch(statusbar, save);
+
 async function save() {
 	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
 	const statusbars = JSON.parse(JSON.stringify(defaultStore.state.statusbars));
diff --git a/packages/client/src/pages/settings/statusbars.vue b/packages/client/src/pages/settings/statusbars.vue
index 18de11975f..bcfff1652f 100644
--- a/packages/client/src/pages/settings/statusbars.vue
+++ b/packages/client/src/pages/settings/statusbars.vue
@@ -6,14 +6,6 @@
 		<XStatusbar :_id="x.id" :user-lists="userLists"/>
 	</FormFolder>
 	<FormButton @click="add">add</FormButton>
-	<FormRadios v-model="statusbarSize" class="_formBlock">
-		<template #label>Size</template>
-		<option value="verySmall">{{ i18n.ts.small }}+</option>
-		<option value="small">{{ i18n.ts.small }}</option>
-		<option value="medium">{{ i18n.ts.medium }}</option>
-		<option value="large">{{ i18n.ts.large }}</option>
-		<option value="veryLarge">{{ i18n.ts.large }}+</option>
-	</FormRadios>
 </div>
 </template>
 
@@ -30,7 +22,6 @@ import { unisonReload } from '@/scripts/unison-reload';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
-const statusbarSize = computed(defaultStore.makeGetterSetter('statusbarSize'));
 const statusbars = defaultStore.reactiveState.statusbars;
 
 let userLists = $ref();
@@ -46,6 +37,7 @@ async function add() {
 		id: uuid(),
 		type: null,
 		black: false,
+		size: 'medium',
 		props: {},
 	});
 }
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index cde907017d..7ddab18f07 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -94,13 +94,11 @@ export const defaultStore = markRaw(new Storage('base', {
 			name: string;
 			id: string;
 			type: string;
+			size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
+			black: boolean;
 			props: Record<string, any>;
 		}[],
 	},
-	statusbarSize: {
-		where: 'deviceAccount',
-		default: 'medium',
-	},
 	widgets: {
 		where: 'deviceAccount',
 		default: [] as {
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 2757e9118d..12533d05f6 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -52,6 +52,8 @@ const tick = () => {
 	});
 };
 
+watch(() => props.userListId, tick);
+
 useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 	immediate: true,
 	afterMounted: true,
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index c18771c54f..c448b09563 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -1,14 +1,14 @@
 <template>
-<div
-	class="dlrsnxqu" :class="{
-		verySmall: defaultStore.reactiveState.statusbarSize.value === 'verySmall',
-		small: defaultStore.reactiveState.statusbarSize.value === 'small',
-		medium: defaultStore.reactiveState.statusbarSize.value === 'medium',
-		large: defaultStore.reactiveState.statusbarSize.value === 'large',
-		veryLarge: defaultStore.reactiveState.statusbarSize.value === 'veryLarge',
-	}"
->
-	<div v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="{ black: x.black }">
+<div class="dlrsnxqu">
+	<div
+		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
+			verySmall: x.size === 'verySmall',
+			small: x.size === 'small',
+			medium: x.size === 'medium',
+			large: x.size === 'large',
+			veryLarge: x.size === 'veryLarge',
+		}]"
+	>
 		<span class="name">{{ x.name }}</span>
 		<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url"/>
 		<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
@@ -28,37 +28,38 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 
 <style lang="scss" scoped>
 .dlrsnxqu {
-	--height: 24px;
-	--nameMargin: 10px;
 	background: var(--panel);
-	font-size: 0.85em;
 
-	&.verySmall {
-		--nameMargin: 7px;
-		--height: 16px;
-		font-size: 0.75em;
-	}
+	> .item {
+		--height: 24px;
+		--nameMargin: 10px;
+		font-size: 0.85em;
 
-	&.small {
-		--nameMargin: 8px;
-		--height: 20px;
-		font-size: 0.8em;
-	}
+		&.verySmall {
+			--nameMargin: 7px;
+			--height: 16px;
+			font-size: 0.75em;
+		}
 
-	&.large {
-		--nameMargin: 12px;
-		--height: 26px;
-		font-size: 0.875em;
-	}
+		&.small {
+			--nameMargin: 8px;
+			--height: 20px;
+			font-size: 0.8em;
+		}
 
-	&.veryLarge {
-		--nameMargin: 14px;
-		--height: 30px;
-		font-size: 0.9em;
-	}
+		&.large {
+			--nameMargin: 12px;
+			--height: 26px;
+			font-size: 0.875em;
+		}
 
-	> .item {
-		display: inline-flex;
+		&.veryLarge {
+			--nameMargin: 14px;
+			--height: 30px;
+			font-size: 0.9em;
+		}
+
+		display: flex;
 		vertical-align: bottom;
 		width: 100%;
 		line-height: var(--height);