frontend/src/consts/routeNames.ts

@@ -1,7 +1,7 @@
 export const ROUTE_NAMES = {
     Upload: 'Upload',
     About: 'About',
-    Viewer: 'Viewer',
+    ZkViewer: 'ZkViewer',
     HotlinkViewer: 'HotlinkViewer',
     Delete: 'Delete'
 } as const;

frontend/src/router/index.ts

@@ -29,15 +29,15 @@ const router = createRouter({
         },
         {
             path: '/v/:id',
-            name: ROUTE_NAMES.Viewer,
+            name: ROUTE_NAMES.ZkViewer,
-            component: () => import('@/views/ViewerView.vue'),
+            component: () => import('@/views/ZkViewerView.vue'),
-            meta: { title: 'Private Image - Viewer' }
+            meta: { title: 'Private Image - ZK Viewer' }
         },
         {
             path: '/h/:id/:secret',
             name: ROUTE_NAMES.HotlinkViewer,
             component: () => import('@/views/HotlinkViewerView.vue'),
-            meta: { title: 'Private Image - Viewer' }
+            meta: { title: 'Private Image - Hotlink Viewer' }
         },
         {
             path: '/d/:id',

frontend/src/stores/zkView.ts

@@ -7,7 +7,7 @@ import { toArrayBuffer } from '@/utils/toArrayBuffer';
 import { decryptPasswordProtectedZkUpload } from '@/utils/upload/decryptPasswordProtectedZkUpload';
 import { decryptZkUpload } from '@/utils/upload/decryptZkUpload';
 
-export const useViewStore = defineStore('view', () => {
+export const useZkViewStore = defineStore('zkView', () => {
     const imageObjectUrl = ref<string | null>(null);
 
     const clearImage = (): void => {

frontend/src/types/view/HotlinkViewerViewState.ts

@@ -0,0 +1 @@
+export type HotlinkViewerViewState = 'invalidLink' | 'loading' | 'image' | 'notFound';

frontend/src/types/view/ZkViewerViewState.ts

@@ -0,0 +1 @@
+export type ZkViewerViewState = 'loading' | 'password' | 'image' | 'invalidLink' | 'notFound';

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">
+    <main
-        <img
+        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"
-            v-if="imageSrc"
+    >
-            :src="imageSrc"
+        <p v-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
-            class="max-h-[min(80vh,100dvh)] w-full object-contain"
+            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>

frontend/src/views/ZkViewerView.vue

@@ -1,10 +1,18 @@
 <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">
+    <main
-        <p v-if="fetching" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
+        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 === 'loading'" class="text-sm text-muted-foreground sm:text-base">Loading image...</p>
+
+        <p v-else-if="state === 'invalidLink'" class="text-sm text-muted-foreground">
+            This viewing link is incomplete. Use the viewer URL from your upload results.
+        </p>
+
+        <p v-else-if="state === 'notFound'" class="text-sm text-muted-foreground">This image was not found.</p>
 
         <form
-            v-else-if="zkPayload"
+            v-else-if="state === 'password'"
-            class="flex w-full max-w-sm flex-col gap-3"
+            class="flex w-full max-w-sm flex-col gap-3 text-left"
             @submit.prevent="onUnlockSubmit"
         >
             <label class="flex flex-col gap-1.5 text-sm">
@@ -30,7 +38,7 @@
         </form>
 
         <img
-            v-else-if="imageObjectUrl"
+            v-else-if="state === 'image' && imageObjectUrl"
             :src="imageObjectUrl"
             class="max-h-[min(80vh,100dvh)] w-full object-contain"
         />
@@ -41,14 +49,15 @@
 import { storeToRefs } from 'pinia';
 import { onBeforeMount, onBeforeUnmount, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import { useViewStore } from '@/stores/view';
+import { useZkViewStore } from '@/stores/zkView';
 import type { GetZkUploadCiphertextResult } from '@/types/upload/GetZkUploadCiphertextResult';
+import type { ZkViewerViewState } from '@/types/view/ZkViewerViewState';
 
 const route = useRoute();
-const viewStore = useViewStore();
+const zkViewStore = useZkViewStore();
-const { imageObjectUrl } = storeToRefs(viewStore);
+const { imageObjectUrl } = storeToRefs(zkViewStore);
 
-const fetching = ref(false);
+const state = ref<ZkViewerViewState>('loading');
 const unlocking = ref(false);
 const zkPayload = ref<GetZkUploadCiphertextResult | null>(null);
 const fragmentKey = ref('');
@@ -58,38 +67,46 @@ const unlockError = ref('');
 onBeforeMount(async () => {
     const uploadId = route.params.id;
 
-    if (typeof uploadId !== 'string') {
+    if (typeof uploadId !== 'string' || !uploadId) {
+        state.value = 'invalidLink';
+
         return;
     }
 
     const key = route.hash.slice(1);
 
     if (!key) {
+        state.value = 'invalidLink';
+
         return;
     }
 
     fragmentKey.value = key;
-    fetching.value = true;
+    state.value = 'loading';
 
     try {
-        const payload = await viewStore.fetchZkCiphertext(uploadId);
+        const payload = await zkViewStore.fetchZkCiphertext(uploadId);
 
         if (payload.passwordProtected) {
             zkPayload.value = payload;
+            state.value = 'password';
+
             return;
         }
 
-        await viewStore.loadZk(payload, key);
+        await zkViewStore.loadZk(payload, key);
+
+        state.value = 'image';
     } catch (error) {
-        console.error('[viewer] load failed', { uploadId, error });
+        console.error('[zk-viewer] load failed', { uploadId, error });
-    } finally {
+
-        fetching.value = false;
+        state.value = 'notFound';
     }
 });
 
 onBeforeUnmount(() => {
     cleanRefs();
-    viewStore.clearImage();
+    zkViewStore.clearImage();
 });
 
 const onUnlockSubmit = async (): Promise<void> => {
@@ -104,14 +121,15 @@ const onUnlockSubmit = async (): Promise<void> => {
     unlockError.value = '';
 
     try {
-        await viewStore.loadZk(payload, key, password.value);
+        await zkViewStore.loadZk(payload, key, password.value);
 
         zkPayload.value = null;
         password.value = '';
+        state.value = 'image';
     } catch (error) {
-        console.error('[viewer] unlock failed', { error });
+        console.error('[zk-viewer] unlock failed', { error });
 
-        unlockError.value = 'Wrong password';
+        unlockError.value = 'Could not unlock this image. Check the viewer link and password, then try again.';
     } finally {
         unlocking.value = false;
     }