add not-found handling to ZK and hotlink viewer pages.

Rename ViewerView and view store to ZkViewerView and useZkViewStore; unify hotlink load and ZK unlock error copy.

frontend/src/views/HotlinkViewerView.vue

@@ -1,33 +1,62 @@
 <template>
-    <main class="flex w-full min-w-0 flex-1 flex-col items-center justify-center px-4 py-6 sm:px-6 sm:py-8">
-        <img
-            v-if="imageSrc"
-            :src="imageSrc"
-            class="max-h-[min(80vh,100dvh)] w-full object-contain"
-        />
+    <main
+        class="mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center gap-3 px-4 py-6 text-center sm:px-6 sm:py-8"
+    >
+        <p v-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
+            This viewing link is incomplete. Use the hotlink URL from your upload results.
+        </p>
+
+        <p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground">This image was not found.</p>
+
+        <template v-else>
+            <p v-if="state === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
+
+            <img
+                v-if="imageSrc"
+                :src="imageSrc"
+                class="max-h-[min(80vh,100dvh)] w-full object-contain"
+                :class="{ hidden: state === 'loading' }"
+                @load="onImageLoad"
+                @error="onImageError"
+            />
+        </template>
     </main>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { config } from '@/config';
+import type { HotlinkViewerViewState } from '@/types/view/HotlinkViewerViewState';
 import { buildHotlinkImagePath } from '@/utils/share/buildHotlinkImagePath';
 
 const route = useRoute();
 
-const imageSrc = computed((): string | null => {
+const state = ref<HotlinkViewerViewState>('loading');
+const imageSrc = ref<string | null>(null);
+
+onBeforeMount(() => {
     const uploadId = route.params.id;
     const secret = route.params.secret;
 
     if (typeof uploadId !== 'string' || typeof secret !== 'string' || !uploadId || !secret) {
-        return null;
+        state.value = 'invalidLink';
+
+        return;
     }
 
     const { baseUrlRoot } = config.api;
 
     const path = buildHotlinkImagePath(uploadId, secret);
 
-    return `${baseUrlRoot}${path}`;
+    imageSrc.value = `${baseUrlRoot}${path}`;
 });
+
+const onImageLoad = (): void => {
+    state.value = 'image';
+};
+
+const onImageError = (): void => {
+    state.value = 'notFound';
+};
 </script>