Skip to content

Commit 4c3b637

Browse files
CPlusPatchCPlusPatch
committed
feat: ✨ Improve note design
1 parent c188d97 commit 4c3b637

File tree

2 files changed

+60
-33
lines changed

2 files changed

+60
-33
lines changed

‎components/social-elements/notes/header.vue

+57-29
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
<div class="flex flex-row text-sm items-center justify-between w-full">
1010
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
1111
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
12-
{{
13-
note?.account.display_name }}
12+
{{ note?.account.display_name }}
1413
</Skeleton>
1514
</NuxtLink>
1615
<NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
@@ -33,36 +32,43 @@
3332
<div class="flex flex-row items-center justify-between w-full">
3433
<NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
3534
<Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
36-
{{
37-
note?.account.display_name }}
35+
{{ note?.account.display_name }}
3836
</Skeleton>
3937
</NuxtLink>
40-
<NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
41-
:alt="fullTime" :title="fullTime">
42-
<Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
43-
{{ timeAgo }}
44-
</Skeleton>
38+
<NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
39+
:title="visibilities[note.visibility].text">
40+
<iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
41+
class="text-gray-400" aria-hidden="true" />
42+
<span class="sr-only">{{ visibilities[note.visibility].text }}</span>
4543
</NuxtLink>
4644
</div>
47-
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
48-
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
49-
<span class="group-hover:hidden">
50-
@{{
51-
note?.account.acct
52-
}}</span>
53-
<span @click="copyAccount" v-if="!hasCopied"
54-
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
55-
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
56-
aria-hidden="true" />
57-
Click to copy
58-
</span>
59-
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
60-
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
61-
aria-hidden="true" />
62-
Copied!
63-
</span>
64-
</Skeleton>
65-
</span>
45+
<div class="flex flex-row items-center justify-between w-full group">
46+
<span class="text-gray-300 text-sm line-clamp-1 break-all w-full">
47+
<Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
48+
<div class="group-hover:hidden">
49+
<span class="font-bold bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">@{{ username }}</span><span class="text-gray-500">{{ instance && "@" }}{{ instance }}</span>
50+
&middot; <span
51+
class="text-gray-400 cursor-help ml-auto" :alt="fullTime"
52+
:title="fullTime">
53+
<Skeleton :enabled="!note" :min-width="10" :max-width="50" shape="rect">
54+
{{ timeAgo }}
55+
</Skeleton>
56+
</span >
57+
</div>
58+
<span @click="copyAccount" v-if="!hasCopied"
59+
class="hidden select-none w-full group-hover:flex cursor-pointer items-center gap-x-1">
60+
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
61+
aria-hidden="true" />
62+
Click to copy
63+
</span>
64+
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
65+
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
66+
aria-hidden="true" />
67+
Copied!
68+
</span>
69+
</Skeleton>
70+
</span>
71+
</div>
6672
</div>
6773
</div>
6874
</template>
@@ -78,9 +84,12 @@ const props = defineProps<{
7884
small?: boolean;
7985
}>();
8086
87+
const username = props.note?.account.acct.split("@")[0];
88+
const instance = props.note?.account.acct.split("@")[1];
89+
8190
const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
8291
const accountUrl = props.note && `/@${props.note.account.acct}`;
83-
const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
92+
const timeAgo = useTimeAgo(props.note?.created_at ?? 0, {});
8493
const fullTime = Intl.DateTimeFormat("default", {
8594
dateStyle: "medium",
8695
timeStyle: "short",
@@ -97,4 +106,23 @@ const copyAccount = () => {
97106
}, 2000);
98107
}
99108
};
109+
110+
const visibilities = {
111+
public: {
112+
icon: "tabler:world",
113+
text: "This note is public: it can be seen by anyone.",
114+
},
115+
unlisted: {
116+
icon: "tabler:lock-open",
117+
text: "This note is unlisted: it can be seen by anyone with the link.",
118+
},
119+
private: {
120+
icon: "tabler:lock",
121+
text: "This note is private: it can only be seen by followers.",
122+
},
123+
direct: {
124+
icon: "tabler:mail",
125+
text: "This note is direct: it can only be seen by mentioned users.",
126+
},
127+
};
100128
</script>

‎components/social-elements/notes/interactions/row.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,26 @@
55
:disabled="!identity">
66
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
77
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
8-
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.replies_count) }}</span>
8+
<span class="text-gray-400 mt-0.5 ml-2" v-if="note.replies_count">{{ numberFormat(note.replies_count) }}</span>
99
</InteractionButton>
1010
<InteractionButton @click="likeFn" :disabled="!identity">
1111
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited"
1212
class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
1313
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
1414
class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
15-
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.favourites_count) }}</span>
15+
<span class="text-gray-400 mt-0.5 ml-2" v-if="note.favourites_count">{{ numberFormat(note.favourites_count) }}</span>
1616
</InteractionButton>
1717
<InteractionButton @click="reblogFn" :disabled="!identity">
1818
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged"
1919
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
2020
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
2121
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
22-
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.reblogs_count) }}</span>
22+
<span class="text-gray-400 mt-0.5 ml-2" v-if="note.reblogs_count">{{ numberFormat(note.reblogs_count) }}</span>
2323
</InteractionButton>
2424
<InteractionButton @click="useEvent('note:quote', note)"
2525
:disabled="!identity">
2626
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
2727
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
28-
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
2928
</InteractionButton>
3029
<NoteMenu v-model:note="note" :url="url" :remove="remove" />
3130
</div>

0 commit comments

Comments
 (0)