feat: simplify notifications (#1905)

components/status/StatusCard.vue

@@ -7,7 +7,7 @@ const props = withDefaults(
     actions?: boolean
     context?: mastodon.v2.FilterContext
     hover?: boolean
-    faded?: boolean
+    inNotification?: boolean
     isPreview?: boolean
 
     // If we know the prev and next status in the timeline, we can simplify the card
@@ -77,19 +77,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
 </script>
 
 <template>
-  <div
-    :id="`status-${status.id}`"
-    ref="el"
-    relative flex="~ col gap1"
-    p="b-2 is-3 ie-4"
-    :class="{ 'hover:bg-active': hover }"
-    tabindex="0"
-    focus:outline-none focus-visible:ring="2 primary"
-    aria-roledescription="status-card"
-    :lang="status.language ?? undefined"
-    @click="onclick"
-    @keydown.enter="onclick"
-  >
+  <StatusLink :status="status" :hover="hover">
     <!-- Upper border -->
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
@@ -101,7 +89,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
           m="is-5" p="t-1 is-5"
           :status="status"
           :is-self-reply="isSelfReply"
-          :class="faded ? 'text-secondary-light' : ''"
+          :class="inNotification ? 'text-secondary-light' : ''"
         />
         <div flex="~ col gap-1" items-center pos="absolute top-0 inset-is-0" w="77px" z--1>
           <template v-if="showReplyTo">
@@ -134,7 +122,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
       </div>
     </slot>
 
-    <div flex gap-3 :class="{ 'text-secondary': faded }">
+    <div flex gap-3 :class="{ 'text-secondary': inNotification }">
       <!-- Avatar -->
       <div relative>
         <div v-if="collapseRebloggedBy" absolute flex items-center justify-center top--6px px-2px py-3px rounded-full bg-base>
@@ -179,9 +167,16 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
         </div>
 
         <!-- Content -->
-        <StatusContent :status="status" :newer="newer" :context="context" :is-preview="isPreview" mb2 :class="{ 'mt-2 mb1': isDM }" />
+        <StatusContent
+          :status="status"
+          :newer="newer"
+          :context="context"
+          :is-preview="isPreview"
+          :in-notification="inNotification"
+          mb2 :class="{ 'mt-2 mb1': isDM }"
+        />
         <StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
       </div>
     </div>
-  </div>
+  </StatusLink>
 </template>

components/status/StatusContent.vue

@@ -6,6 +6,7 @@ const { status, context } = defineProps<{
   newer?: mastodon.v1.Status
   context?: mastodon.v2.FilterContext | 'details'
   isPreview?: boolean
+  inNotification?: boolean
 }>()
 
 const isDM = $computed(() => status.visibility === 'direct')

components/status/StatusLink.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const props = defineProps<{
+  status: mastodon.v1.Status
+  hover?: boolean
+}>()
+
+const el = ref<HTMLElement>()
+const router = useRouter()
+const statusRoute = $computed(() => getStatusRoute(props.status))
+
+function onclick(evt: MouseEvent | KeyboardEvent) {
+  const path = evt.composedPath() as HTMLElement[]
+  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
+  const text = window.getSelection()?.toString()
+  if (!el && !text)
+    go(evt)
+}
+
+function go(evt: MouseEvent | KeyboardEvent) {
+  if (evt.metaKey || evt.ctrlKey) {
+    window.open(statusRoute.href)
+  }
+  else {
+    cacheStatus(props.status)
+    router.push(statusRoute)
+  }
+}
+</script>
+
+<template>
+  <div
+    :id="`status-${status.id}`"
+    ref="el"
+    relative flex="~ col gap1"
+    p="b-2 is-3 ie-4"
+    :class="{ 'hover:bg-active': hover }"
+    tabindex="0"
+    focus:outline-none focus-visible:ring="2 primary"
+    aria-roledescription="status-card"
+    :lang="status.language ?? undefined"
+    @click="onclick"
+    @keydown.enter="onclick"
+  >
+    <slot />
+  </div>
+</template>