From 4c3b6371972f9538068a2530c668763822380061 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 4 Nov 2024 22:45:54 +0100
Subject: [PATCH] feat: :sparkles: Improve note design

---
 components/social-elements/notes/header.vue   | 86 ++++++++++++-------
 .../notes/interactions/row.vue                |  7 +-
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index 3977811..a4d5d09 100644
--- a/components/social-elements/notes/header.vue
+++ b/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,36 +32,43 @@
             <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"
-                    :alt="fullTime" :title="fullTime">
-                    <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
-                        {{ timeAgo }}
-                    </Skeleton>
+                <NuxtLink v-if="note" :href="noteUrl" class="text-gray-300 text-sm ml-2 line-clamp-1 break-all shrink-0"
+                    :title="visibilities[note.visibility].text">
+                    <iconify-icon :icon="visibilities[note.visibility].icon" width="1.25rem" height="1.25rem"
+                        class="text-gray-400" aria-hidden="true" />
+                    <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">
-                <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
-                    <span class="group-hover:hidden">
-                        @{{
-                            note?.account.acct
-                        }}</span>
-                    <span @click="copyAccount" v-if="!hasCopied"
-                        class="hidden select-none 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
-                    </span>
-                    <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
-                        <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
-                            aria-hidden="true" />
-                        Copied!
-                    </span>
-                </Skeleton>
-            </span>
+            <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">
+                        <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>
+                            &middot; <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 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
+                        </span>
+                        <span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
+                            <iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
+                                aria-hidden="true" />
+                            Copied!
+                        </span>
+                    </Skeleton>
+                </span>
+            </div>
         </div>
     </div>
 </template>
@@ -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>
\ No newline at end of file
diff --git a/components/social-elements/notes/interactions/row.vue b/components/social-elements/notes/interactions/row.vue
index a84b016..94f1603 100644
--- a/components/social-elements/notes/interactions/row.vue
+++ b/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>