From 6a8caaee1248515ed0aefbdc0e245530ef812ba9 Mon Sep 17 00:00:00 2001
From: mohiit1502 <mohiit1502@gmail.com>
Date: Fri, 14 Aug 2026 19:15:02 +0530
Subject: [PATCH] feat(apps): add Preview button to app detail page

- Always-visible Preview button opens /app/:slug in new tab
- Works for both published and unpublished (draft) apps
- Owner access handled by existing public bundle endpoint
- Styled with brand accent color, positioned before Publish button

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 src/pages/apps/AppDetail.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/pages/apps/AppDetail.tsx b/src/pages/apps/AppDetail.tsx
index 9f17ce8..5ca67fd 100644
--- a/src/pages/apps/AppDetail.tsx
+++ b/src/pages/apps/AppDetail.tsx
@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query'
 import {
-	ArrowLeft, AppWindow, ExternalLink, Globe, Lock,
+	ArrowLeft, AppWindow, ExternalLink, Eye, Globe, Lock,
 	FileCode, HardDrive, Files, Info, Loader2, Save, FilePlus,
 } from 'lucide-react'
 import {
@@ -168,6 +168,21 @@ export function AppDetail() {
 				</div>
 			</div>
 			<div style={{ display: 'flex', gap: 6 }}>
+				<a
+					href={`/app/${slug}`}
+					target="_blank"
+					rel="noopener noreferrer"
+					style={{
+						display: 'flex', alignItems: 'center', gap: 4,
+						padding: '6px 12px', borderRadius: 8, fontSize: 11,
+						fontWeight: 600, textDecoration: 'none', cursor: 'pointer',
+						background: 'color-mix(in srgb, var(--nbl-agos) 10%, transparent)',
+						border: '1px solid color-mix(in srgb, var(--nbl-agos) 25%, transparent)',
+						color: 'var(--nbl-agos)',
+					}}
+				>
+					<Eye size={11} /> Preview
+				</a>
 				<button
 					type="button"
 					onClick={() => publishMutation.mutate(!app.is_published)}