enhance(client): tweak statusbar

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));

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: {},
 	});
 }

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 {

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,

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,9 +28,11 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 
 <style lang="scss" scoped>
 .dlrsnxqu {
+	background: var(--panel);
+
+	> .item {
 		--height: 24px;
 		--nameMargin: 10px;
-	background: var(--panel);
 		font-size: 0.85em;
 
 		&.verySmall {
@@ -57,8 +59,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 			font-size: 0.9em;
 		}
 
-	> .item {
-		display: inline-flex;
+		display: flex;
 		vertical-align: bottom;
 		width: 100%;
 		line-height: var(--height);