Initial commit: portal

src/pages/AppFrame.tsx

@@ -0,0 +1,42 @@
+import { useParams, useNavigate } from 'react-router-dom'
+import { Sidebar } from '../components/Sidebar'
+import type { User } from '../types'
+
+export function AppFrame({ user }: { user: User }) {
+  const { slug } = useParams<{ slug: string }>()
+  const navigate = useNavigate()
+  const app = user.apps.find(a => a.slug === slug)
+
+  if (!app) {
+    return (
+      <div style={{ height: '100dvh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ textAlign: 'center' }}>
+          <p style={{ color: 'var(--text-muted)', marginBottom: '1rem' }}>App not found or not permitted.</p>
+          <button onClick={() => navigate('/')} style={{
+            background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
+            borderRadius: '6px', padding: '0.5rem 1.25rem', fontWeight: 600,
+          }}>
+            Back to dashboard
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', height: '100dvh' }}>
+      <Sidebar user={user} activeSlug={slug} />
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+        <div style={{
+          height: '3px', background: app.theme_color, flexShrink: 0,
+        }} />
+        <iframe
+          src={`${app.base_path}/`}
+          title={app.name}
+          style={{ flex: 1, border: 'none', width: '100%' }}
+          allow="clipboard-read; clipboard-write"
+        />
+      </div>
+    </div>
+  )
+}