feat: ✨ Improve note design

components/social-elements/notes/header.vue

@@ -9,8 +9,7 @@
             <div class="flex flex-row text-sm items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        {{
+                        {{ note?.account.display_name }}
-                            note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
                 <NuxtLink :href="noteUrl" class="text-gray-300 ml-2 line-clamp-1 break-all shrink-0">
@@ -33,25 +32,31 @@
             <div class="flex flex-row items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
-                        {{
+                        {{ note?.account.display_name }}
-                            note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
+                <NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
-                    :alt="fullTime" :title="fullTime">
+                    :title="visibilities[note.visibility].text">
-                    <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
+                    <iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
-                        {{ timeAgo }}
+                        class="text-gray-400" aria-hidden="true" />
-                    </Skeleton>
+                    <span class="sr-only">{{ visibilities[note.visibility].text }}</span>
                 </NuxtLink>
             </div>
-            <span class="text-gray-300 text-sm line-clamp-1 break-all w-full group">
+            <div class="flex flex-row items-center justify-between w-full group">
+                <span class="text-gray-300 text-sm line-clamp-1 break-all w-full">
                     <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
-                    <span class="group-hover:hidden">
+                        <div class="group-hover:hidden">
-                        @{{
+                            <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>
-                            note?.account.acct
+                            &middot; <span
-                        }}</span>
+                                class="text-gray-400 cursor-help ml-auto" :alt="fullTime"
+                                :title="fullTime">
+                                <Skeleton :enabled="!note" :min-width="10" :max-width="50" shape="rect">
+                                    {{ timeAgo }}
+                                </Skeleton>
+                            </span >
+                        </div>
                         <span @click="copyAccount" v-if="!hasCopied"
-                        class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
+                            class="hidden select-none w-full group-hover:flex cursor-pointer items-center gap-x-1">
                             <iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
                                 aria-hidden="true" />
                             Click to copy
@@ -65,6 +70,7 @@
                 </span>
             </div>
         </div>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -78,9 +84,12 @@ const props = defineProps<{
     small?: boolean;
 }>();
 
+const username = props.note?.account.acct.split("@")[0];
+const instance = props.note?.account.acct.split("@")[1];
+
 const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
 const accountUrl = props.note && `/@${props.note.account.acct}`;
-const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
+const timeAgo = useTimeAgo(props.note?.created_at ?? 0, {});
 const fullTime = Intl.DateTimeFormat("default", {
     dateStyle: "medium",
     timeStyle: "short",
@@ -97,4 +106,23 @@ const copyAccount = () => {
         }, 2000);
     }
 };
+
+const visibilities = {
+    public: {
+        icon: "tabler:world",
+        text: "This note is public: it can be seen by anyone.",
+    },
+    unlisted: {
+        icon: "tabler:lock-open",
+        text: "This note is unlisted: it can be seen by anyone with the link.",
+    },
+    private: {
+        icon: "tabler:lock",
+        text: "This note is private: it can only be seen by followers.",
+    },
+    direct: {
+        icon: "tabler:mail",
+        text: "This note is direct: it can only be seen by mentioned users.",
+    },
+};
 </script>

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

@@ -5,27 +5,26 @@
             :disabled="!identity">
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
                 class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.replies_count) }}</span>
+            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.replies_count">{{ numberFormat(note.replies_count) }}</span>
         </InteractionButton>
         <InteractionButton @click="likeFn" :disabled="!identity">
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note.favourited"
                 class="size-5 text-gray-200 group-hover:group-enabled:text-primary-600" aria-hidden="true" />
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
                 class="size-5 text-primary-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.favourites_count) }}</span>
+            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.favourites_count">{{ numberFormat(note.favourites_count) }}</span>
         </InteractionButton>
         <InteractionButton @click="reblogFn" :disabled="!identity">
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note.reblogged"
                 class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-else
                 class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note.reblogs_count) }}</span>
+            <span class="text-gray-400 mt-0.5 ml-2" v-if="note.reblogs_count">{{ numberFormat(note.reblogs_count) }}</span>
         </InteractionButton>
         <InteractionButton @click="useEvent('note:quote', note)"
             :disabled="!identity">
             <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
                 class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
-            <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
         </InteractionButton>
         <NoteMenu v-model:note="note" :url="url" :remove="remove" />
     </div>