Merge branch 'develop'

9 files changed, 66 insertions, 34 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index 99268e42bf..fc40b6973a 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -975,6 +975,10 @@ export default Vue.extend({
 					&:not(.naked) {
 						background: var(--pageBg);
 					}
+
+					&.naked {
+						background: var(--bg);
+					}
 				}
 			}
 
diff --git a/src/client/components/date-separated-list.vue b/src/client/components/date-separated-list.vue
index d41dd9d521..b80c6494ed 100644
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,8 +1,8 @@
 <template>
 <component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
-		<slot :item="item" :i="i"></slot>
-		<div class="separator" :key="item.id + '_date'" v-if="showDate(i, item)">
+		<slot :item="item"></slot>
+		<div class="separator" v-if="showDate(i, item)" :key="item.id + '_date'">
 			<p class="date">
 				<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
 				<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
diff --git a/src/client/pages/apps.vue b/src/client/pages/apps.vue
index 03c6707f95..445bba34c8 100644
--- a/src/client/pages/apps.vue
+++ b/src/client/pages/apps.vue
@@ -27,6 +27,12 @@
 					<div class="actions">
 						<button class="_button" @click="revoke(token)"><fa :icon="faTrashAlt"/></button>
 					</div>
+					<details>
+						<summary>{{ $t('details') }}</summary>
+						<ul>
+							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+						</ul>
+					</details>
 				</div>
 			</div>
 		</template>
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index fa7c377720..5babc60453 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -1,11 +1,14 @@
 <template>
 <div class="mk-federation">
+	<portal to="icon"><fa :icon="faGlobe"/></portal>
+	<portal to="title">{{ $t('federation') }}</portal>
+
 	<section class="_card instances">
-		<div class="_title"><fa :icon="faGlobe"/> {{ $t('instances') }}</div>
 		<div class="_content">
+			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
 			<div class="inputs" style="display: flex;">
-				<mk-input v-model="host" :debounce="true" style="margin: 0; flex: 1;"><span>{{ $t('host') }}</span></mk-input>
-				<mk-select v-model="state" style="margin: 0;">
+				<mk-select v-model="state" style="margin: 0; flex: 1;">
+					<template #label>{{ $t('state') }}</template>
 					<option value="all">{{ $t('all') }}</option>
 					<option value="federating">{{ $t('federating') }}</option>
 					<option value="subscribing">{{ $t('subscribing') }}</option>
@@ -14,11 +17,32 @@
 					<option value="blocked">{{ $t('blocked') }}</option>
 					<option value="notResponding">{{ $t('notResponding') }}</option>
 				</mk-select>
+				<mk-select v-model="sort" style="margin: 0; flex: 1;">
+					<template #label>{{ $t('sort') }}</template>
+					<option value="+pubSub">{{ $t('pubSub') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-pubSub">{{ $t('pubSub') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+notes">{{ $t('notes') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-notes">{{ $t('notes') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+users">{{ $t('users') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-users">{{ $t('users') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+following">{{ $t('following') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-following">{{ $t('following') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+followers">{{ $t('followers') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-followers">{{ $t('followers') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+caughtAt">{{ $t('caughtAt') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-caughtAt">{{ $t('caughtAt') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+lastCommunicatedAt">{{ $t('lastCommunicatedAt') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-lastCommunicatedAt">{{ $t('lastCommunicatedAt') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+driveUsage">{{ $t('driveUsage') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-driveUsage">{{ $t('driveUsage') }} ({{ $t('ascendingOrder') }})</option>
+					<option value="+driveFiles">{{ $t('driveFiles') }} ({{ $t('descendingOrder') }})</option>
+					<option value="-driveFiles">{{ $t('driveFiles') }} ({{ $t('ascendingOrder') }})</option>
+				</mk-select>
 			</div>
 		</div>
 		<div class="_content">
 			<mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state">
-				<div class="instance" v-for="(instance, i) in items" :key="instance.id" @click="info(instance)">
+				<div class="instance" v-for="instance in items" :key="instance.id" @click="info(instance)">
 					<div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div>
 					<div class="status">
 						<span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span>
diff --git a/src/client/pages/instance/queue.vue b/src/client/pages/instance/queue.vue
index 8590f9ae23..c4892e88db 100644
--- a/src/client/pages/instance/queue.vue
+++ b/src/client/pages/instance/queue.vue
@@ -1,5 +1,8 @@
 <template>
 <div>
+	<portal to="icon"><fa :icon="faExchangeAlt"/></portal>
+	<portal to="title">{{ $t('jobQueue') }}</portal>
+
 	<x-queue :connection="connection" domain="inbox">
 		<template #title><fa :icon="faExchangeAlt"/> In</template>
 	</x-queue>
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 0a20c56c29..317ad087fe 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -19,7 +19,7 @@
 		<button class="more _button" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
 			<template v-if="fetchingMoreMessages"><fa icon="spinner" pulse fixed-width/></template>{{ fetchingMoreMessages ? $t('loading') : $t('loadMore') }}
 		</button>
-		<x-list class="messages" :items="messages" v-slot="{ item: message, i }" direction="up" reversed>
+		<x-list class="messages" :items="messages" v-slot="{ item: message }" direction="up" reversed>
 			<x-message :message="message" :is-group="group != null" :key="message.id"/>
 		</x-list>
 	</div>
diff --git a/src/client/pages/miauth.vue b/src/client/pages/miauth.vue
index 2ee0f23479..0e170af11a 100644
--- a/src/client/pages/miauth.vue
+++ b/src/client/pages/miauth.vue
@@ -68,8 +68,8 @@ export default Vue.extend({
 		icon(): string {
 			return this.$route.query.icon;
 		},
-		permission(): string {
-			return this.$route.query.permission;
+		permission(): string[] {
+			return this.$route.query.permission ? this.$route.query.permission.split(',') : [];
 		},
 	},
 	methods: {
@@ -79,7 +79,7 @@ export default Vue.extend({
 				session: this.session,
 				name: this.name,
 				iconUrl: this.icon,
-				permission: this.permission || [],
+				permission: this.permission,
 			});
 
 			this.state = 'accepted';
diff --git a/src/client/theme.ts b/src/client/theme.ts
index cc69ee4060..2f4920e3af 100644
--- a/src/client/theme.ts
+++ b/src/client/theme.ts
@@ -27,7 +27,7 @@ export const builtinThemes = [
 	require('./themes/danboard.json5'),
 	require('./themes/olive.json5'),
 	require('./themes/tweetdeck.json5'),
-];
+] as Theme[];
 
 let timeout = null;
 
@@ -66,16 +66,21 @@ export function applyTheme(theme: Theme, persist = true) {
 	}
 }
 
-function compile(theme: Theme): { [key: string]: string } {
-	function getColor(code: string): tinycolor.Instance {
-		// ref
-		if (code[0] == '@') {
-			return getColor(theme.props[code.substr(1)]);
+function compile(theme: Theme): Record<string, string> {
+	function getColor(val: string): tinycolor.Instance {
+		// ref (prop)
+		if (val[0] === '@') {
+			return getColor(theme.props[val.substr(1)]);
+		}
+
+		// ref (const)
+		else if (val[0] === '$') {
+			return getColor(theme.props[val]);
 		}
 
 		// func
-		if (code[0] == ':') {
-			const parts = code.split('<');
+		else if (val[0] === ':') {
+			const parts = val.split('<');
 			const func = parts.shift().substr(1);
 			const arg = parseFloat(parts.shift());
 			const color = getColor(parts.join('<'));
@@ -87,12 +92,15 @@ function compile(theme: Theme): { [key: string]: string } {
 			}
 		}
 
-		return tinycolor(code);
+		// other case
+		return tinycolor(val);
 	}
 
 	const props = {};
 
 	for (const [k, v] of Object.entries(theme.props)) {
+		if (k.startsWith('$')) continue; // ignore const
+
 		props[k] = genValue(getColor(v));
 	}
 
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 974c13eb0d..3c170adc4e 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -5,7 +5,7 @@
 
 		<div class="otgbylcu">
 			<textarea v-model="text" :placeholder="$t('placeholder')" @input="onChange"></textarea>
-			<button @click="saveMemo" :disabled="!changed">{{ $t('save') }}</button>
+			<button @click="saveMemo" :disabled="!changed" class="_buttonPrimary">{{ $t('save') }}</button>
 		</div>
 	</mk-container>
 </div>
@@ -84,6 +84,7 @@ export default define({
 		border: none;
 		border-bottom: solid var(--lineWidth) var(--faceDivider);
 		border-radius: 0;
+		box-sizing: border-box;
 	}
 
 	> button {
@@ -94,22 +95,8 @@ export default define({
 		margin: 0;
 		padding: 0 10px;
 		height: 28px;
-		color: #fff;
-		background: var(--accent) !important;
 		outline: none;
-		border: none;
 		border-radius: 4px;
-		transition: background 0.1s ease;
-		cursor: pointer;
-
-		&:hover {
-			background: var(--accentLighten10) !important;
-		}
-
-		&:active {
-			background: var(--accentDarken) !important;
-			transition: background 0s ease;
-		}
 
 		&:disabled {
 			opacity: 0.7;