feat: media grid

components/nav/NavTitle.vue

@@ -0,0 +1,8 @@
+<template>
+  <NuxtLink flex text-2xl gap-2 to="/">
+    <div i-logos-nuxt-icon />
+    <div>
+      Nuxtodon <sup text-sm italic op50 mt-1>Prototype</sup>
+    </div>
+  </NuxtLink>
+</template>

components/status/StatusAttachment.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { Attachment } from 'masto'
+
+const { attachment } = defineProps<{
+  attachment: Attachment
+}>()
+</script>
+
+<template>
+  <template v-if="attachment.type === 'image'">
+    <img
+      class="status-attachment-image"
+      :src="attachment.previewUrl!"
+      :alt="attachment.description!"
+      border="~ gray/10"
+      object-cover rounded-lg
+    >
+  </template>
+  <template v-else>
+    <div>
+      TODO: {{ attachment }}
+    </div>
+  </template>
+</template>

components/status/StatusBody.vue

@@ -12,20 +12,22 @@ defineProps<{
   <div class="status-body" v-html="sanitize(status.content)" />
 </template>
 
-<style>
-.status-body a {
-  --at-apply: text-primary hover:underline;
-}
-.status-body b {
-  --at-apply: font-bold;
-}
-.status-body p {
-  --at-apply: my-1;
-}
-.status-body a .invisible {
-  --at-apply: hidden;
-}
-.status-body a .ellipsis {
-  --at-apply: truncate overflow-hidden ws-nowrap;
+<style lang="postcss">
+.status-body {
+  a {
+    --at-apply: text-primary hover:underline;
+    .invisible {
+      --at-apply: hidden;
+    }
+    .ellipsis {
+      --at-apply: truncate overflow-hidden ws-nowrap;
+    }
+  }
+  b {
+    --at-apply: font-bold;
+  }
+  p {
+    --at-apply: my-1;
+  }
 }
 </style>

components/status/StatusCard.vue

@@ -7,8 +7,14 @@ const { status } = defineProps<{
 const el = ref<HTMLElement>()
 
 const router = useRouter()
+
 function go(e: MouseEvent) {
-  if (e.target === el.value)
+  const path = e.composedPath() as HTMLElement[]
+  const hasButton = path.find(el => el.tagName === 'A' || el.tagName === 'BUTTON')
+  if (hasButton)
+    return
+
+  if (path.find(i => i === el.value))
     router.push(`/@${status.account.acct}/${status.id}`)
 }
 
@@ -54,9 +60,10 @@ const timeago = useTimeAgo(() => status.createdAt, {
       </div>
     </AccountInfo>
     <StatusBody :status="status" />
-    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
-      <StatusMedia :attachment="attachment" />
-    </template>
+    <StatusMedia
+      v-if="status.mediaAttachments?.length"
+      :status="status"
+    />
     <StatusActions :status="status" />
   </div>
 </template>

components/status/StatusMedia.vue

@@ -1,21 +1,42 @@
 <script setup lang="ts">
-import type { Attachment } from 'masto'
+import type { Status } from 'masto'
 
-const { attachment } = defineProps<{
-  attachment: Attachment
+const { status } = defineProps<{
+  status: Status
 }>()
 </script>
 
 <template>
-  <template v-if="attachment.type === 'image'">
-    <img
-      class="status-attachment-image"
-      :src="attachment.previewUrl!"
-      :alt="attachment.description!"
-      rounded-lg border="~ gray/10"
-    >
-  </template>
-  <template v-else>
-    TODO: {{ attachment }}
-  </template>
+  <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
+    <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
+      <StatusAttachment :attachment="attachment" class="w-full h-full" />
+    </template>
+  </div>
 </template>
+
+<style lang="postcss">
+.status-media-container {
+  --at-apply: gap-0.5;
+  width: 100%;
+  overflow: hidden;
+}
+.status-media-container-1 {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+.status-media-container-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  aspect-ratio: 2/1;
+}
+.status-media-container-3 {
+  display: grid;
+  aspect-ratio: 16/9;
+  grid-template-columns: 1fr 1fr;
+}
+.status-media-container-4 {
+  display: grid;
+  aspect-ratio: 16/9;
+  grid-template-columns: 1fr 1fr;
+}
+</style>

components/timeline/TimelineList.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+defineProps<{
+  timelines: Status[]
+}>()
+</script>
+
+<template>
+  <template v-for="status of timelines" :key="status.id">
+    <StatusCard :status="status" border="t gray/10" pt-4 />
+  </template>
+</template>