From 9df9c06f64fd88525cb1ec2606e31a498bd2a019 Mon Sep 17 00:00:00 2001
From: Lucie <25330882+lihbr@users.noreply.github.com>
Date: Fri, 25 Nov 2022 13:13:44 -0500
Subject: [PATCH] feat: image previews (#104)

Co-authored-by: lihbr <lihbr@users.noreply.github.com>
---
 components/account/AccountHeader.vue   | 22 +++++++++++++++-------
 components/modal/ModalContainer.vue    |  5 ++++-
 components/status/StatusAttachment.vue |  7 ++++++-
 composables/dialog.ts                  | 15 +++++++++++----
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index eade033f..c8648f19 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -43,19 +43,27 @@ function getFieldNameIcon(fieldName: string) {
   if (fieldNameIcons[name])
     return fieldNameIcons[name]
 }
+
+function previewHeader() {
+  openImagePreviewDialog({ src: account.header, alt: `${account.username}'s profile header` })
+}
+
+function previewAvatar() {
+  openImagePreviewDialog({ src: account.avatar, alt: account.username })
+}
 </script>
 
 <template>
   <div flex flex-col>
-    <div border="b base">
-      <img h-50 w-full object-cover :src="account.header">
-    </div>
+    <button border="b base" z-1>
+      <img h-50 w-full object-cover :src="account.header" @click="previewHeader">
+    </button>
     <div p4 mt--17 flex flex-col gap-6>
       <div flex justify-between>
-        <div flex="~ col gap-2 1" min-w-0>
-          <NuxtLink w-fit :to="getAccountPath(account)">
-            <AccountAvatar :account="account" w-30 h-30 />
-          </NuxtLink>
+        <div flex="~ col gap-2 1">
+          <button w-30 h-30 rounded-full bg-black z-2 @click="previewAvatar">
+            <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
+          </button>
           <div flex flex-col>
             <ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
             <p op50>
diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index b79e44ca..49122f83 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
+import { isImagePreviewDialogOpen, isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitcherOpen } from '~/composables/dialog'
 </script>
 
 <template>
@@ -15,4 +15,7 @@ import { isPreviewHelpOpen, isPublishDialogOpen, isSigninDialogOpen, isUserSwitc
   <ModalDialog v-model="isPublishDialogOpen">
     <PublishWidget draft-key="dialog" expanded min-w-180 />
   </ModalDialog>
+  <ModalDialog v-model="isImagePreviewDialogOpen">
+    <img :src="imagePreview.src" :alt="imagePreview.alt" max-w-95vw max-h-95vh>
+  </ModalDialog>
 </template>
diff --git a/components/status/StatusAttachment.vue b/components/status/StatusAttachment.vue
index 5b346bce..74f8a71a 100644
--- a/components/status/StatusAttachment.vue
+++ b/components/status/StatusAttachment.vue
@@ -64,7 +64,12 @@ const aspectRatio = computed(() => {
         aspectRatio,
       }"
       border="~ base"
-      object-cover rounded-lg
+      object-cover
+      rounded-lg
+      @click="openImagePreviewDialog({
+        src: attachment.url || attachment.previewUrl!,
+        alt: attachment.description!,
+      })"
     />
   </template>
 </template>
diff --git a/composables/dialog.ts b/composables/dialog.ts
index 429af5db..848b8a51 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -1,6 +1,7 @@
 import type { Draft } from './statusDrafts'
 import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
+export const imagePreview = ref({ src: '', alt: '' })
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
 export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
 export const toggleZenMode = useToggle(isZenMode)
@@ -8,6 +9,7 @@ export const toggleZenMode = useToggle(isZenMode)
 export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
 export const isPublishDialogOpen = ref(false)
+export const isImagePreviewDialogOpen = ref(false)
 export const isPreviewHelpOpen = ref(isFirstVisit.value)
 
 export function openUserSwitcher() {
@@ -19,10 +21,6 @@ export function openSigninDialog() {
   isUserSwitcherOpen.value = false
 }
 
-export function openPreviewHelp() {
-  isPreviewHelpOpen.value = true
-}
-
 export function openPublishDialog(draft?: Draft) {
   if (draft)
     dialogDraft.draft.value = draft
@@ -34,3 +32,12 @@ if (isPreviewHelpOpen.value) {
     isFirstVisit.value = false
   })
 }
+
+export function openImagePreviewDialog(image: { src: string; alt: string }) {
+  imagePreview.value = image
+  isImagePreviewDialogOpen.value = true
+}
+
+export function openPreviewHelp() {
+  isPreviewHelpOpen.value = true
+}