From fa35d73d561bfacb0de4d932127369d7688dec3d Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Sun, 27 Nov 2022 20:40:16 +0100
Subject: [PATCH] feat: clickable notification account (#184)

---
 components/account/AccountCard.vue |  2 +-
 components/account/AccountInfo.vue | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index 517cf2b3..d711c03e 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -10,7 +10,7 @@ cacheAccount(account)
 
 <template>
   <div flex justify-between hover:bg-active transition-100>
-    <AccountInfo :account="account" hover p1 />
+    <AccountInfo :account="account" hover p1 as="router-link" :to="getAccountPath(account)" />
     <div h-full p1>
       <AccountFollowButton :account="account" />
     </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index c1fb4c00..6fdd7f10 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -1,19 +1,24 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { account } = defineProps<{
+const { account, as = 'div' } = defineProps<{
   account: Account
+  as?: string
 }>()
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <!-- TODO: Make this work for both buttons and links -->
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
-  <div flex gap-3>
+  <component :is="as" flex gap-3 v-bind="$attrs">
     <AccountAvatar :account="account" w-12 h-12 />
     <div flex="~ col">
       <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
     </div>
-  </div>
+  </component>
 </template>