feat: add the new missing post image.

massive thanks to GlitchyPSI (glitchypsi.xyz @ bluesky) for it!!!!!

Co-authored-by: GlitchyPSIX <11571952+GlitchyPSIX@users.noreply.github.com>

Author: purifetchi

PinkSea.Frontend/public/assets/img/missing.png

@@ -3,7 +3,7 @@
 
 <template>
   <div class="oekaki-card">
-    <img src="/mystery.gif" />
+    <img src="/assets/img/missing.png" />
     <div class="oekaki-meta">
       {{ $t("post.this_post_no_longer_exists") }}
     </div>

PinkSea.Frontend/public/mystery.gif

@@ -0,0 +1,3 @@
+export interface OekakiTombstone {
+  formerAt: string
+}

PinkSea.Frontend/src/components/oekaki/PostViewOekakiTombstoneCard.vue

@@ -10,26 +10,35 @@ import PostViewOekakiChildCard from '@/components/oekaki/PostViewOekakiChildCard
 import RespondBox from '@/components/RespondBox.vue'
 import Loader from '@/components/Loader.vue'
 import PostViewOekakiTombstoneCard from '@/components/oekaki/PostViewOekakiTombstoneCard.vue'
+import type { OekakiTombstone } from '@/models/oekaki-tombstone'
 
 const route = useRoute();
 
-const parent = ref<Oekaki | null>(null);
+const parent = ref<Oekaki | OekakiTombstone | null>(null);
 const children = ref<Oekaki[] | null>(null);
 
 const parentIsTombstone = computed(() => {
   return parent.value !== null && 'formerAt' in parent.value;
 });
 
 onBeforeMount(async () => {
-  const { data } = await xrpc.get("com.shinolabs.pinksea.getOekaki", {
-    params: {
-      did: route.params.did as string,
-      rkey: route.params.rkey as string
-    }
-  });
-
-  parent.value = data.parent;
-  children.value = data.children;
+  try {
+    const { data } = await xrpc.get("com.shinolabs.pinksea.getOekaki", {
+      params: {
+        did: route.params.did as string,
+        rkey: route.params.rkey as string
+      }
+    });
+
+    parent.value = data.parent;
+    children.value = data.children;
+  } catch {
+    parent.value = {
+      formerAt: 'at://did:web:example.com/com.shinolabs.pinksea.oekaki/fakefake'
+    } as OekakiTombstone;
+
+    children.value = [];
+  }
 });
 
 </script>
@@ -39,11 +48,11 @@ onBeforeMount(async () => {
     <Loader v-if="parent === null" />
     <div v-else>
       <PostViewOekakiTombstoneCard v-if="parentIsTombstone" />
-      <PostViewOekakiParentCard v-else :oekaki="parent" />
+      <PostViewOekakiParentCard v-else :oekaki="parent as Oekaki" />
       <br />
       <PostViewOekakiChildCard v-for="child of children" v-bind:key="child.at" :oekaki="child" />
 
-      <RespondBox v-if="!parentIsTombstone" :parent="parent" />
+      <RespondBox v-if="!parentIsTombstone" :parent="parent as Oekaki" />
     </div>
   </PanelLayout>
 </template>

PinkSea.Frontend/src/models/oekaki-tombstone.ts

@@ -63,6 +63,12 @@ In order to run the client app locally, you need a fairly modern [Node.js](https
 
 The built app will be inside of the `dist` folder.
 
+# Acknowledgments
+
+This is a list of people I'd love to extend my most sincere gratitude to!!
+
+* [GlitchyPSI](https://bsky.app/profile/glitchypsi.xyz) for drawing the "post is missing" image visible whenever we see a post that does not exist! Thank you so much!!!
+
 # License
 
 The PinkSea code (with the exception of PinkSea.AtProto and PinkSea.AtProto.Server) is licensed under the European Union Public License-1.2. PinkSea.AtProto is released into the public domain as specified by the Unlicense. The appropriate licenses are in each folder's LICENSE files.