wip

src/client/components/sidebar.vue

@@ -138,13 +138,19 @@ export default defineComponent({
 		},
 
 		async openAccountMenu(ev) {
-			const storedAccounts = getAccounts();
-			const accounts = (await os.api('users/show', { userIds: storedAccounts.map(x => x.id) })).filter(x => x.id !== this.$i.id);
+			const storedAccounts = getAccounts().filter(x => x.id !== this.$i.id);
+			const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
 
-			const accountItems = accounts.map(account => ({
-				type: 'user',
-				user: account,
-				action: () => { this.switchAccount(account); }
+			const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+				accountsPromise.then(accounts => {
+					const account = accounts.find(x => x.id === a.id);
+					if (account == null) return res(null);
+					res({
+						type: 'user',
+						user: account,
+						action: () => { this.switchAccount(account); }
+					});
+				});
 			}));
 
 			os.modalMenu([...[{
@@ -152,7 +158,7 @@ export default defineComponent({
 				text: this.$ts.profile,
 				to: `/@${ this.$i.username }`,
 				avatar: this.$i,
-			}, null, ...accountItems, {
+			}, null, ...accountItemPromises, {
 				icon: faPlus,
 				text: this.$ts.addAcount,
 				action: () => {

src/client/themes/_dark.json5

@@ -16,6 +16,8 @@
 		bg: '#000',
 		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#dadada',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':lighten<3<@fg',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
@@ -77,5 +79,6 @@
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
 		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
 	},
 }

src/client/themes/_light.json5

@@ -16,6 +16,8 @@
 		bg: '#fff',
 		acrylicBg: ':alpha<0.5<@bg',
 		fg: '#5f5f5f',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':darken<3<@fg',
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
@@ -77,5 +79,6 @@
 		X14: ':alpha<0.5<@navBg',
 		X15: ':alpha<0<@panel',
 		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
 	},
 }

src/client/ui/chat/index.vue

@@ -200,6 +200,11 @@ export default defineComponent({
 	},
 
 	created() {
+		if (window.innerWidth < 1024) {
+			localStorage.setItem('ui', 'default');
+			location.reload();
+		}
+
 		router.beforeEach((to, from) => {
 			this.$refs.side.navigate(to.fullPath);
 			// search?q=foo のようなクエリを受け取れるようにするため、return falseはできない
@@ -414,10 +419,12 @@ export default defineComponent({
 		> .body {
 			flex: 1;
 			min-width: 0;
-			padding: 8px 0;
 			overflow: auto;
 
 			> .container {
+				margin-top: 8px;
+				margin-bottom: 8px;
+
 				& + .container {
 					margin-top: 16px;
 				}
@@ -426,10 +433,21 @@ export default defineComponent({
 					display: flex;
 					font-size: 0.9em;
 					padding: 8px 16px;
-					opacity: 0.7;
+					position: sticky;
+					top: 0;
+					background: var(--X17);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+					z-index: 1;
+					color: var(--fgTransparentWeak);
 
 					> .add {
 						margin-left: auto;
+						color: var(--fgTransparentWeak);
+
+						&:hover {
+							color: var(--fg);
+						}
 					}
 				}
 
@@ -448,11 +466,11 @@ export default defineComponent({
 
 						&.active, &.active:hover {
 							background: var(--accent);
-							color: #fff;
+							color: #fff !important;
 						}
 
 						&.read {
-							opacity: 0.5;
+							color: var(--fgTransparent);
 						}
 
 						> .icon {
@@ -527,6 +545,7 @@ export default defineComponent({
 
 				> .instance {
 					margin-right: 16px;
+					font-size: 0.9em;
 				}
 
 				> .clock {

src/client/ui/chat/note.vue

@@ -65,21 +65,21 @@
 			</div>
 			<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 			<footer class="footer _panel">
-				<button @click="reply()" class="button _button">
+				<button @click="reply()" class="button _button" v-tooltip="$ts.reply">
 					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
 					<template v-else><Fa :icon="faReply"/></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
-				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
+				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton" v-tooltip="$ts.renote">
 					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
 					<Fa :icon="faBan"/>
 				</button>
-				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
+				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton" v-tooltip="$ts.reaction">
 					<Fa :icon="faPlus"/>
 				</button>
-				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
+				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton" v-tooltip="$ts.reaction">
 					<Fa :icon="faMinus"/>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
@@ -911,7 +911,7 @@ export default defineComponent({
 		align-items: center;
 		padding: 12px 16px 4px 16px;
 		line-height: 24px;
-		font-size: 90%;
+		font-size: 85%;
 		white-space: pre;
 		color: #d28a3f;