refactor: 💄 improve miauth style

locales/en-US.yml

@@ -1548,11 +1548,12 @@ _auth:
   shareAccess: "Would you like to authorize \"{name}\" to access this account?"
   shareAccessAsk: "Are you sure you want to authorize this application to access your
     account?"
-  permissionAsk: "This application requests the following permissions"
+  permissionAsk: "This application requests the following permissions:"
   pleaseGoBack: "Please go back to the application"
   callback: "Returning to the application"
   denied: "Access denied"
-  copyAsk: "Please paste the following authorization code to the application"
+  copyAsk: "Please paste the following authorization code to the application:"
+  allPermissions: "Full account access"
 _antennaSources:
   all: "All posts"
   homeTimeline: "Posts from followed users"

packages/client/src/pages/miauth.vue

@@ -28,11 +28,38 @@
 				</div>
 				<div class="_content">
 					<p>{{ i18n.ts._auth.permissionAsk }}</p>
-					<ul>
+					<div
-						<li v-for="p in _permissions" :key="p">
+						v-if="_permissions.length === 32"
+						:class="[$style.permissions]"
+					>
+						<div
+							:class="[$style.permission]"
+							style="
+								background-color: var(--error);
+								color: var(--fgOnAccent);
+							"
+						>
+							<i
+								class="ph-shield-warning ph-bold ph-xl"
+								style="margin-right: 0.5rem"
+							></i>
+							{{ i18n.ts._permissions.allPermissions }}
+						</div>
+					</div>
+					<div v-else :class="[$style.permissions]">
+						<div
+							v-for="p in _permissions"
+							:key="p"
+							:class="[$style.permission, $style.permission]"
+						>
+							<i
+								:class="[`ph-${getIcon(p)}`]"
+								class="ph-bold ph-xl"
+								style="margin-right: 0.5rem"
+							></i>
 							{{ i18n.t(`_permissions.${p}`) }}
-						</li>
+						</div>
-					</ul>
+					</div>
 				</div>
 				<div class="_footer">
 					<MkButton inline @click="deny">{{
@@ -71,6 +98,10 @@ const _permissions = props.permission.split(",");
 
 let state = $ref<string | null>(null);
 
+function getIcon(p: string) {
+	return p.includes("write") ? "pencil-simple" : "eye";
+}
+
 async function accept(): Promise<void> {
 	state = "waiting";
 	await os.api("miauth/gen-token", {
@@ -107,4 +138,19 @@ function onLogin(res): void {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" module>
+.permissions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin-bottom: 2rem;
+}
+
+.permission {
+	display: inline-flex;
+	padding: 0.5rem 1rem;
+	border-radius: var(--radius);
+	background-color: var(--buttonBg);
+	color: var(--fg);
+}
+</style>