From 0a933614fae4cf3c08e7268a7121ff89448e87cc Mon Sep 17 00:00:00 2001
From: Florian Martinez <fm29830@gmail.com>
Date: Tue, 25 Jul 2023 17:29:54 +0200
Subject: [PATCH] feat: role labels wrap (#2266)

---
 components/account/AccountHeader.vue         |  4 +--
 components/account/AccountInfo.vue           |  2 +-
 components/account/AccountRolesIndicator.vue | 31 ++++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 components/account/AccountRolesIndicator.vue

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index bab80aa4..f63dd043 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -165,9 +165,9 @@ const personalNoteMaxLength = 2000
           </div>
         </div>
         <div flex="~ col gap1" pt2>
-          <div flex gap2 items-center>
+          <div flex gap2 items-center flex-wrap>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-            <AccountRoleIndicator v-for="role in account.roles" :key="role.id" :role="role" />
+            <AccountRolesIndicator :account="account" />
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index e4ca13ce..102bcaa9 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -23,7 +23,7 @@ const { account, as = 'div' } = defineProps<{
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountRoleIndicator v-for="role in account.roles" :key="role.id" :role="role" />
+        <AccountRolesIndicator :account="account" :limit="1" />
         <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
diff --git a/components/account/AccountRolesIndicator.vue b/components/account/AccountRolesIndicator.vue
new file mode 100644
index 00000000..fee05a0a
--- /dev/null
+++ b/components/account/AccountRolesIndicator.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineProps<{
+  account: mastodon.v1.Account
+  limit?: number
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ gap1" items-center
+    class="border border-base rounded-md px-1"
+    text-secondary-light
+  >
+    <slot name="prepend" />
+    <div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
+      <div :style="`color: ${role.color}; border-color: ${role.color}`">
+        {{ role.name }}
+      </div>
+    </div>
+  </div>
+  <div
+    v-if="limit && account.roles?.length > limit"
+    flex="~ gap1" items-center
+    class="border border-base rounded-md px-1"
+    text-secondary-light
+  >
+    +{{ account.roles?.length - limit }}
+  </div>
+</template>