feat: improve conversations (#358)
parent
28c4c6a3e8
commit
36a35b5fcc
|
@ -1,17 +1,23 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Conversation } from 'masto'
|
import type { Conversation } from 'masto'
|
||||||
|
|
||||||
const props = defineProps<{
|
const { conversation } = defineProps<{
|
||||||
conversation: Conversation
|
conversation: Conversation
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const withAccounts = $computed(() =>
|
||||||
|
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<article flex flex-col gap-2>
|
<article flex flex-col gap-2>
|
||||||
<div flex gap-2 text-sm px-2>
|
<div absolute flex gap-2 text-sm text-secondary font-bold left-3 px2 pt2>
|
||||||
|
<p mr-1>
|
||||||
{{ $t('conversation.with') }}
|
{{ $t('conversation.with') }}
|
||||||
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
|
</p>
|
||||||
|
<AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />
|
||||||
</div>
|
</div>
|
||||||
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
|
<StatusCard v-if="conversation.lastStatus" :decorated="true" :status="conversation.lastStatus" :actions="false" />
|
||||||
</article>
|
</article>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -96,7 +96,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
|
||||||
</div>
|
</div>
|
||||||
<StatusActionsMore :status="status" mr--2 />
|
<StatusActionsMore :status="status" mr--2 />
|
||||||
</div>
|
</div>
|
||||||
<div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
|
<div :class="status.visibility === 'direct' ? 'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''">
|
||||||
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
|
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
|
||||||
<template #spoiler>
|
<template #spoiler>
|
||||||
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
|
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
|
||||||
|
|
|
@ -26,7 +26,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
|
||||||
</AccountHoverWrapper>
|
</AccountHoverWrapper>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<div
|
<div
|
||||||
:class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
|
:class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''"
|
||||||
>
|
>
|
||||||
<StatusSpoiler :enabled="status.sensitive">
|
<StatusSpoiler :enabled="status.sensitive">
|
||||||
<template #spoiler>
|
<template #spoiler>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
--c-bg-active: #f6f6f6;
|
--c-bg-active: #f6f6f6;
|
||||||
--c-bg-code: #00000006;
|
--c-bg-code: #00000006;
|
||||||
--c-bg-selection: #8885;
|
--c-bg-selection: #8885;
|
||||||
--c-bg-fade: #EA9E4422;
|
--c-bg-fade: #EA9E4411;
|
||||||
|
|
||||||
--c-text-base: #232323;
|
--c-text-base: #232323;
|
||||||
--c-text-code: #7ca72f;
|
--c-text-code: #7ca72f;
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
--c-bg-base: #111;
|
--c-bg-base: #111;
|
||||||
--c-bg-active: #191919;
|
--c-bg-active: #191919;
|
||||||
--c-bg-code: #ffffff06;
|
--c-bg-code: #ffffff06;
|
||||||
--c-bg-fade: #EA9E4422;
|
--c-bg-fade: #EA9E4411;
|
||||||
|
|
||||||
--c-text-base: #fff;
|
--c-text-base: #fff;
|
||||||
--c-text-code: #90be3d;
|
--c-text-code: #90be3d;
|
||||||
|
|
Loading…
Reference in New Issue