|
1 | 1 | <template> |
2 | 2 | <ClientOnly> |
3 | | - <div class="w-full ring-1 ring-inset ring-white/5 pb-10"> |
| 3 | + <div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800"> |
4 | 4 | <AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`" |
5 | | - class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700" /> |
| 5 | + class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" /> |
6 | 6 |
|
7 | 7 | <div class="flex items-start justify-between px-4 py-3"> |
8 | 8 | <AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`" |
|
36 | 36 | title="This account manually approves its followers" /> |
37 | 37 | </Skeleton> |
38 | 38 | </h2> |
39 | | - <span class="text-gray-400 block mt-2"> |
| 39 | + <span class="text-gray-300 block mt-2"> |
40 | 40 | <Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton> |
41 | 41 | </span> |
| 42 | + <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0"> |
| 43 | + <SocialElementsUsersBadge v-for="role of visibleRoles" :key="role.id" :name="role.name" |
| 44 | + :description="role.description" :img="role.icon" /> |
| 45 | + <SocialElementsUsersBadge v-if="isDeveloper" name="Lysand Developer" |
| 46 | + description="This user is a Lysand developer." :verified="true" /> |
| 47 | + </div> |
42 | 48 | </div> |
43 | 49 |
|
44 | 50 | <div class="mt-4 px-4"> |
@@ -105,6 +111,7 @@ const props = defineProps<{ |
105 | 111 | const skeleton = computed(() => !props.account); |
106 | 112 | const identity = useCurrentIdentity(); |
107 | 113 | const client = useClient(); |
| 114 | +const config = useConfig(); |
108 | 115 | const accountId = computed(() => props.account?.id ?? null); |
109 | 116 | const { relationship, isLoading } = useRelationship(client, accountId); |
110 | 117 |
|
@@ -138,6 +145,18 @@ const parsedFields: Ref< |
138 | 145 | value: string; |
139 | 146 | }[] |
140 | 147 | > = ref([]); |
| 148 | +const handle = computed(() => { |
| 149 | + if (!props.account?.acct.includes("@")) { |
| 150 | + return `${props.account?.acct}@${new URL(useBaseUrl().value).host}`; |
| 151 | + } |
| 152 | + return props.account?.acct; |
| 153 | +}); |
| 154 | +const isDeveloper = computed(() => |
| 155 | + config.DEVELOPER_HANDLES.includes(handle.value), |
| 156 | +); |
| 157 | +const visibleRoles = computed( |
| 158 | + () => props.account?.roles.filter((r) => r.visible) ?? [], |
| 159 | +); |
141 | 160 |
|
142 | 161 | watch( |
143 | 162 | skeleton, |
|
0 commit comments