diff --git a/src/client/components/sidebar.vue b/src/client/components/sidebar.vue
index d07dd294a..f7c50a2ba 100644
--- a/src/client/components/sidebar.vue
+++ b/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: () => {
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 847c0b4ec..2fa4853e6 100644
--- a/src/client/themes/_dark.json5
+++ b/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',
},
}
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index d75e94afd..94e697750 100644
--- a/src/client/themes/_light.json5
+++ b/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',
},
}
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index e8cda6274..79c0d5307 100644
--- a/src/client/ui/chat/index.vue
+++ b/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 {
diff --git a/src/client/ui/chat/note.vue b/src/client/ui/chat/note.vue
index 11d795d93..f4c9f063d 100644
--- a/src/client/ui/chat/note.vue
+++ b/src/client/ui/chat/note.vue
@@ -65,21 +65,21 @@