From ddebe77e5b9f5de0070de713a33f66eec18299d0 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 11 May 2024 17:53:42 -1000
Subject: [PATCH] feat: :lipstick: Small UI tweaks

---
 components/avatars/Centered.vue               |  3 +-
 components/social-elements/notes/header.vue   | 37 ++++++++++++++++---
 .../social-elements/notes/note-content.vue    |  4 +-
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/components/avatars/Centered.vue b/components/avatars/Centered.vue
index 22c2938..a8f5857 100644
--- a/components/avatars/Centered.vue
+++ b/components/avatars/Centered.vue
@@ -1,7 +1,8 @@
 <template>
     <div v-bind="$props" class="bg-dark-700 overflow-hidden flex items-center justify-center">
         <Skeleton :enabled="!url" class="!h-full !w-full">
-            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt" />
+            <img class="cursor-pointer bg-dark-700 ring-1 w-full h-full object-cover" :src="url" :alt="alt"
+                :title="alt" />
         </Skeleton>
     </div>
 </template>
diff --git a/components/social-elements/notes/header.vue b/components/social-elements/notes/header.vue
index 1b71f36..4a25c37 100644
--- a/components/social-elements/notes/header.vue
+++ b/components/social-elements/notes/header.vue
@@ -33,17 +33,28 @@
         note?.account.display_name }}
                     </Skeleton>
                 </NuxtLink>
-                <NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
+                <NuxtLink :href="noteUrl" class="text-gray-400 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>
             </div>
-            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full group">
                 <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
-                    @{{
-                    note?.account.acct
-                    }}
+                    <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">
+                        <Icon name="tabler:clipboard" class="h-4 w-4 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">
+                        <Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
+                        Copied!
+                    </span>
                 </Skeleton>
             </span>
         </div>
@@ -61,4 +72,20 @@ const props = defineProps<{
 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 fullTime = Intl.DateTimeFormat("default", {
+    dateStyle: "medium",
+    timeStyle: "short",
+}).format(new Date(props.note?.created_at ?? 0));
+const hasCopied = ref(false);
+
+const { copy } = useClipboard();
+const copyAccount = () => {
+    if (props.note) {
+        copy(`@${props.note.account.acct}`);
+        hasCopied.value = true;
+        setTimeout(() => {
+            hasCopied.value = false;
+        }, 2000);
+    }
+};
 </script>
\ No newline at end of file
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
index 4486bb1..beee338 100644
--- a/components/social-elements/notes/note-content.vue
+++ b/components/social-elements/notes/note-content.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="!collapsed">
-        <NuxtLink :href="url" class="mt-6 block relative" aria-label="Link to note">
+        <div class="mt-6 block relative">
             <Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
                 type="content">
                 <div v-if="content"
@@ -8,7 +8,7 @@
                     v-html="content">
                 </div>
             </Skeleton>
-        </NuxtLink>
+        </div>
         <div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
             <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
                 :attachment="attachment" />