From 485b1b8c80f68cf5b23e75b516860c46cfdfc8d8 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 2 Dec 2024 17:25:27 +0100
Subject: [PATCH] fix: :bug: Fix links in UI

---
 components/notes/header.vue                 | 5 +++--
 components/notes/reblog-header.vue          | 6 ++++--
 components/notifications/follow-request.vue | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/notes/header.vue b/components/notes/header.vue
index 71daa48..9ed4509 100644
--- a/components/notes/header.vue
+++ b/components/notes/header.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="rounded flex flex-row items-center gap-3">
-        <NuxtLink :href="url" :class="cn('relative size-14', smallLayout && 'size-8')">
+        <NuxtLink :href="urlAsPath" :class="cn('relative size-14', smallLayout && 'size-8')">
             <Avatar shape="square" :class="cn('size-14 border border-card', smallLayout && 'size-8')">
                 <AvatarImage :src="avatar" alt="" />
                 <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
@@ -44,7 +44,7 @@ import type {
 import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
 import CopyableText from "./copyable-text.vue";
 
-const { acct, createdAt } = defineProps<{
+const { acct, createdAt, url } = defineProps<{
     avatar: string;
     cornerAvatar?: string;
     acct: string;
@@ -57,6 +57,7 @@ const { acct, createdAt } = defineProps<{
 
 const [username, instance] = acct.split("@");
 const digitRegex = /\d/;
+const urlAsPath = new URL(url).pathname;
 const timeAgo = useTimeAgo(createdAt, {
     messages: {
         justNow: "now",
diff --git a/components/notes/reblog-header.vue b/components/notes/reblog-header.vue
index 629e4db..eafe01d 100644
--- a/components/notes/reblog-header.vue
+++ b/components/notes/reblog-header.vue
@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :href="url" class="rounded border hover:bg-muted duration-100 text-sm flex flex-row items-center gap-2 px-2 py-1 mb-4">
+    <NuxtLink :href="urlAsPath" class="rounded border hover:bg-muted duration-100 text-sm flex flex-row items-center gap-2 px-2 py-1 mb-4">
         <Repeat class="size-4 text-primary" />
         <Avatar shape="square" class="size-6 border">
             <AvatarImage :src="avatar" alt="" />
@@ -14,9 +14,11 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Repeat } from "lucide-vue-next";
 
-defineProps<{
+const { url } = defineProps<{
     avatar: string;
     displayName: string;
     url: string;
 }>();
+
+const urlAsPath = new URL(url).pathname;
 </script>
\ No newline at end of file
diff --git a/components/notifications/follow-request.vue b/components/notifications/follow-request.vue
index b5e4874..4911fe8 100644
--- a/components/notifications/follow-request.vue
+++ b/components/notifications/follow-request.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="relationship?.requested_by !== false" class="flex flex-row items-center gap-3 p-4">
-        <NuxtLink class="relative size-10">
+        <NuxtLink :href="followerUrl" class="relative size-10">
             <Avatar shape="square" class="size-10 border border-border">
                 <AvatarImage :src="follower.avatar" alt="" />
                 <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
@@ -52,6 +52,7 @@ const { follower } = defineProps<{
 }>();
 
 const loading = ref(true);
+const followerUrl = `/@${follower.acct}`;
 const [username, instance] = follower.acct.split("@");
 const { relationship } = useRelationship(client, follower.id);