feat(apps): add Preview button to app detail page
All checks were successful
Stuffle/agos-client/pipeline/head This commit looks good

- 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>
This commit is contained in:
2026-08-14 19:15:02 +05:30
parent 8223ac9176
commit 6a8caaee12

View File

@@ -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)}