From dfc52749b215f40cb5e2798225df7da969c0e33e Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Mon, 26 Oct 2026 23:06:28 +0100
Subject: [PATCH] Add hotlink viewer page at /h/:id/:secret.

---
 frontend/src/consts/routeNames.ts        |  1 +
 frontend/src/router/index.ts             | 12 +++++++++---
 frontend/src/views/HotlinkViewerView.vue | 24 ++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/views/HotlinkViewerView.vue

diff --git a/frontend/src/consts/routeNames.ts b/frontend/src/consts/routeNames.ts
index b3b9052..ed23340 100644
--- a/frontend/src/consts/routeNames.ts
+++ b/frontend/src/consts/routeNames.ts
@@ -1,5 +1,6 @@
 export const ROUTE_NAMES = {
     Upload: 'Upload',
     Viewer: 'Viewer',
+    HotlinkViewer: 'HotlinkViewer',
     Delete: 'Delete'
 } as const;
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index e6d0b8c..c0ff66e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -8,19 +8,25 @@ const router = createRouter({
             path: '/',
             name: ROUTE_NAMES.Upload,
             component: () => import('@/views/UploadView.vue'),
-            meta: { title: 'Private Image — Upload' }
+            meta: { title: 'Private Image - Upload' }
         },
         {
             path: '/v/:id',
             name: ROUTE_NAMES.Viewer,
             component: () => import('@/views/ViewerView.vue'),
-            meta: { title: 'Private Image — Viewer' }
+            meta: { title: 'Private Image - Viewer' }
+        },
+        {
+            path: '/h/:id/:secret',
+            name: ROUTE_NAMES.HotlinkViewer,
+            component: () => import('@/views/HotlinkViewerView.vue'),
+            meta: { title: 'Private Image - Viewer' }
         },
         {
             path: '/d/:id',
             name: ROUTE_NAMES.Delete,
             component: () => import('@/views/DeleteView.vue'),
-            meta: { title: 'Private Image — Delete' }
+            meta: { title: 'Private Image - Delete' }
         }
     ]
 });
diff --git a/frontend/src/views/HotlinkViewerView.vue b/frontend/src/views/HotlinkViewerView.vue
new file mode 100644
index 0000000..bb800e0
--- /dev/null
+++ b/frontend/src/views/HotlinkViewerView.vue
@@ -0,0 +1,24 @@
+<template>
+    <main class="flex min-h-screen items-center justify-center p-4">
+        <img v-if="imageSrc" :src="imageSrc" class="max-h-[80vh] max-w-full object-contain" />
+    </main>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { buildHotlinkImagePath } from '@/utils/share/buildHotlinkImagePath';
+
+const route = useRoute();
+
+const imageSrc = computed((): string | null => {
+    const uploadId = route.params.id;
+    const secret = route.params.secret;
+
+    if (typeof uploadId !== 'string' || typeof secret !== 'string' || !uploadId || !secret) {
+        return null;
+    }
+
+    return buildHotlinkImagePath(uploadId, secret);
+});
+</script>