chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate session sharing components to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 19:48:37 -05:00
parent 369c75a055
commit 2b165199d2
3 changed files with 77 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/components/session/ShareSessionModal.tsx
View File

@@ -185,16 +185,16 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
/> />
{/* Modal */} {/* Modal */}
<div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg"> <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-lg">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4"> <div className="flex items-center justify-between border-b border-border px-6 py-4">
<div> <div>
<h2 className="text-lg font-semibold text-white">Share Session</h2> <h2 className="text-lg font-heading font-semibold text-foreground">Share Session</h2>
<p className="text-sm text-white/40">{sessionLabel}</p> <p className="text-sm text-muted-foreground">{sessionLabel}</p>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white" className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
@@ -206,7 +206,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<div className="space-y-4"> <div className="space-y-4">
{/* Visibility */} {/* Visibility */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-white"> <label className="mb-2 block text-sm font-medium text-foreground">
Visibility Visibility
</label> </label>
<div className="space-y-2"> <div className="space-y-2">
@@ -215,17 +215,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn( className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors', 'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'account' visibility === 'account'
? 'border-white/20 bg-white/10 text-white' ? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]' : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)} )}
> >
<Users className="h-4 w-4" /> <Users className="h-4 w-4" />
<div className="flex-1"> <div className="flex-1">
<div className="text-sm font-medium">Account Only</div> <div className="text-sm font-medium">Account Only</div>
<div className="text-xs text-white/40">Visible to your team</div> <div className="text-xs text-muted-foreground">Visible to your team</div>
</div> </div>
{visibility === 'account' && ( {visibility === 'account' && (
<div className="h-2 w-2 rounded-full bg-white" /> <div className="h-2 w-2 rounded-full bg-primary" />
)} )}
</button> </button>
<button <button
@@ -233,17 +233,17 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn( className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors', 'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === 'public' visibility === 'public'
? 'border-white/20 bg-white/10 text-white' ? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]' : 'border-border bg-transparent text-muted-foreground hover:border-border hover:bg-accent'
)} )}
> >
<Globe className="h-4 w-4" /> <Globe className="h-4 w-4" />
<div className="flex-1"> <div className="flex-1">
<div className="text-sm font-medium">Public</div> <div className="text-sm font-medium">Public</div>
<div className="text-xs text-white/40">Anyone with the link</div> <div className="text-xs text-muted-foreground">Anyone with the link</div>
</div> </div>
{visibility === 'public' && ( {visibility === 'public' && (
<div className="h-2 w-2 rounded-full bg-white" /> <div className="h-2 w-2 rounded-full bg-primary" />
)} )}
</button> </button>
</div> </div>
@@ -254,8 +254,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Share Name */} {/* Share Name */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-white"> <label className="mb-2 block text-sm font-medium text-foreground">
Share Name <span className="text-white/40">(optional)</span> Share Name <span className="text-muted-foreground">(optional)</span>
</label> </label>
<input <input
type="text" type="text"
@@ -263,8 +263,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onChange={(e) => setShareName(e.target.value.slice(0, 100))} onChange={(e) => setShareName(e.target.value.slice(0, 100))}
placeholder="e.g. Training link, Customer escalation" placeholder="e.g. Training link, Customer escalation"
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white placeholder-white/30', 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground placeholder-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
maxLength={100} maxLength={100}
/> />
@@ -272,7 +272,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Expiration */} {/* Expiration */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-white"> <label className="mb-2 block text-sm font-medium text-foreground">
Expiration Expiration
</label> </label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -283,8 +283,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
className={cn( className={cn(
'rounded-md border px-3 py-1.5 text-sm transition-colors', 'rounded-md border px-3 py-1.5 text-sm transition-colors',
expirationPreset === preset.value expirationPreset === preset.value
? 'border-white/20 bg-white/10 text-white' ? 'border-primary/30 bg-primary/10 text-foreground'
: 'border-white/10 text-white/50 hover:border-white/20 hover:bg-white/[0.06]' : 'border-border text-muted-foreground hover:border-border hover:bg-accent'
)} )}
> >
{preset.label} {preset.label}
@@ -297,8 +297,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
value={customDatetime} value={customDatetime}
onChange={(e) => setCustomDatetime(e.target.value)} onChange={(e) => setCustomDatetime(e.target.value)}
className={cn( className={cn(
'mt-2 w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'mt-2 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'[color-scheme:dark]' '[color-scheme:dark]'
)} )}
/> />
@@ -310,8 +310,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onClick={handleGenerateLink} onClick={handleGenerateLink}
disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)} disabled={isGenerating || (expirationPreset === 'custom' && !customDatetime)}
className={cn( className={cn(
'flex w-full items-center justify-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'flex w-full items-center justify-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed' 'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
<Link2 className="h-4 w-4" /> <Link2 className="h-4 w-4" />
@@ -322,7 +322,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Existing Shares */} {/* Existing Shares */}
{shares.length > 0 && ( {shares.length > 0 && (
<div> <div>
<h3 className="mb-3 text-sm font-medium text-white"> <h3 className="mb-3 text-sm font-medium text-foreground">
Active Shares ({shares.length}) Active Shares ({shares.length})
</h3> </h3>
<div className="space-y-3"> <div className="space-y-3">
@@ -332,7 +332,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
return ( return (
<div <div
key={share.id} key={share.id}
className="glass-card rounded-xl p-4 space-y-2" className="bg-card border border-border rounded-xl p-4 space-y-2"
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
@@ -340,8 +340,8 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<span className={cn( <span className={cn(
'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs', 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
share.visibility === 'public' share.visibility === 'public'
? 'bg-white/10 text-white/70' ? 'bg-accent text-muted-foreground'
: 'bg-white/10 text-white/70' : 'bg-accent text-muted-foreground'
)}> )}>
{share.visibility === 'public' ? ( {share.visibility === 'public' ? (
<Globe className="h-3 w-3" /> <Globe className="h-3 w-3" />
@@ -350,11 +350,11 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
)} )}
{share.visibility === 'public' ? 'Public' : 'Account'} {share.visibility === 'public' ? 'Public' : 'Account'}
</span> </span>
<span className="truncate text-sm font-medium text-white"> <span className="truncate text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'} {share.share_name || 'Untitled share'}
</span> </span>
</div> </div>
<div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-white/40"> <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
<span>{getRelativeTime(share.created_at)}</span> <span>{getRelativeTime(share.created_at)}</span>
<span> <span>
{share.view_count > 0 {share.view_count > 0
@@ -375,10 +375,10 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
onClick={() => handleCopyUrl(share)} onClick={() => handleCopyUrl(share)}
title="Copy share URL" title="Copy share URL"
className={cn( className={cn(
'rounded-md border border-white/10 p-1.5 text-sm transition-colors', 'rounded-md border border-border p-1.5 text-sm transition-colors',
isCopied isCopied
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400' ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
: 'text-white/50 hover:bg-white/10 hover:text-white' : 'text-muted-foreground hover:bg-accent hover:text-foreground'
)} )}
> >
{isCopied ? ( {isCopied ? (
@@ -390,7 +390,7 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
<button <button
onClick={() => handleRevoke(share.id)} onClick={() => handleRevoke(share.id)}
title="Revoke share" title="Revoke share"
className="rounded-md border border-white/10 p-1.5 text-white/50 hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors" className="rounded-md border border-border p-1.5 text-muted-foreground hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-colors"
> >
<Trash2 className="h-3.5 w-3.5" /> <Trash2 className="h-3.5 w-3.5" />
</button> </button>
@@ -406,18 +406,18 @@ export function ShareSessionModal({ sessionId, sessionLabel, isOpen, onClose }:
{/* Loading state */} {/* Loading state */}
{isLoadingShares && shares.length === 0 && ( {isLoadingShares && shares.length === 0 && (
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-4">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white" /> <div className="h-5 w-5 animate-spin rounded-full border-2 border-border border-t-foreground" />
</div> </div>
)} )}
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4"> <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<button <button
onClick={onClose} onClick={onClose}
className={cn( className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60', 'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
> >
Close Close

36
frontend/src/pages/MySharesPage.tsx
View File

@@ -96,7 +96,7 @@ export default function MySharesPage() {
if (loading) { if (loading) {
return ( return (
<div className="flex items-center justify-center py-32"> <div className="flex items-center justify-center py-32">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) )
} }
@@ -105,12 +105,12 @@ export default function MySharesPage() {
if (error) { if (error) {
return ( return (
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8"> <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="glass-card rounded-xl p-6 border border-red-400/20"> <div className="bg-card border border-red-400/20 rounded-xl p-6">
<div className="text-center"> <div className="text-center">
<p className="text-red-400 text-sm mb-4">{error}</p> <p className="text-red-400 text-sm mb-4">{error}</p>
<button <button
onClick={fetchShares} onClick={fetchShares}
className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors" className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
> >
Try again Try again
</button> </button>
@@ -125,7 +125,7 @@ export default function MySharesPage() {
{/* Back link */} {/* Back link */}
<Link <Link
to="/sessions" to="/sessions"
className="inline-flex items-center gap-1.5 text-sm text-white/40 hover:text-white/70 transition-colors mb-6" className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
Back to sessions Back to sessions
@@ -133,21 +133,21 @@ export default function MySharesPage() {
{/* Header */} {/* Header */}
<div className="mb-6"> <div className="mb-6">
<h1 className="text-2xl font-bold text-white">My Shared Sessions</h1> <h1 className="text-2xl font-heading font-bold text-foreground">My Shared Sessions</h1>
<p className="text-white/40 mt-1">Manage your session share links</p> <p className="text-muted-foreground mt-1">Manage your session share links</p>
</div> </div>
{/* Empty state */} {/* Empty state */}
{shares.length === 0 ? ( {shares.length === 0 ? (
<div className="glass-card rounded-xl p-12 text-center"> <div className="bg-card border border-border rounded-xl p-12 text-center">
<Link2 className="h-12 w-12 text-white/20 mx-auto mb-4" /> <Link2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
<h2 className="text-lg font-semibold text-white mb-2">No shared sessions</h2> <h2 className="text-lg font-heading font-semibold text-foreground mb-2">No shared sessions</h2>
<p className="text-white/40 text-sm mb-6"> <p className="text-muted-foreground text-sm mb-6">
Share a session from the session detail page to create a link Share a session from the session detail page to create a link
</p> </p>
<button <button
onClick={() => navigate('/sessions')} onClick={() => navigate('/sessions')}
className="bg-white text-black hover:bg-white/90 rounded-md px-4 py-2 text-sm font-medium transition-colors" className="bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
> >
Go to Sessions Go to Sessions
</button> </button>
@@ -159,10 +159,10 @@ export default function MySharesPage() {
const isCopied = copiedId === share.id const isCopied = copiedId === share.id
return ( return (
<div key={share.id} className="glass-card rounded-xl p-5"> <div key={share.id} className="bg-card border border-border rounded-xl p-5">
{/* Top row: badge + name */} {/* Top row: badge + name */}
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-white/10 text-white/60"> <span className="inline-flex items-center gap-1.5 text-xs rounded-full px-2 py-0.5 bg-accent text-muted-foreground">
{share.visibility === 'public' ? ( {share.visibility === 'public' ? (
<Globe className="h-3 w-3" /> <Globe className="h-3 w-3" />
) : ( ) : (
@@ -170,18 +170,18 @@ export default function MySharesPage() {
)} )}
{share.visibility === 'public' ? 'Public' : 'Account Only'} {share.visibility === 'public' ? 'Public' : 'Account Only'}
</span> </span>
<span className="text-sm font-medium text-white"> <span className="text-sm font-medium text-foreground">
{share.share_name || 'Untitled share'} {share.share_name || 'Untitled share'}
</span> </span>
</div> </div>
{/* Session info */} {/* Session info */}
<p className="text-sm text-white/50 mb-2"> <p className="text-sm text-muted-foreground mb-2">
Session ID: {share.session_id.slice(0, 8)}... Session ID: {share.session_id.slice(0, 8)}...
</p> </p>
{/* Meta row */} {/* Meta row */}
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-white/40 mb-4"> <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground mb-4">
<span>Created {formatRelativeTime(share.created_at)}</span> <span>Created {formatRelativeTime(share.created_at)}</span>
<span className="hidden sm:inline">·</span> <span className="hidden sm:inline">·</span>
<span> <span>
@@ -203,7 +203,7 @@ export default function MySharesPage() {
'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors', 'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
isCopied isCopied
? 'bg-emerald-400/10 text-emerald-400' ? 'bg-emerald-400/10 text-emerald-400'
: 'bg-white text-black hover:bg-white/90' : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
)} )}
> >
{isCopied ? ( {isCopied ? (
@@ -216,7 +216,7 @@ export default function MySharesPage() {
<Link <Link
to={`/sessions/${share.session_id}`} to={`/sessions/${share.session_id}`}
className="inline-flex items-center gap-1.5 border border-white/10 text-white/60 hover:bg-white/10 rounded-md px-3 py-1.5 text-sm transition-colors" className="inline-flex items-center gap-1.5 border border-border text-muted-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm transition-colors"
> >
<ExternalLink className="h-3.5 w-3.5" /> <ExternalLink className="h-3.5 w-3.5" />
View Session View Session

42
frontend/src/pages/SharedSessionPage.tsx
View File

@@ -53,16 +53,16 @@ function ErrorCard({ error }: { error: ErrorState }) {
const Icon = iconMap[error.type] const Icon = iconMap[error.type]
return ( return (
<div className="flex min-h-screen items-center justify-center bg-black px-4"> <div className="flex min-h-screen items-center justify-center bg-background px-4">
<div className="glass-card w-full max-w-md rounded-2xl p-8 text-center"> <div className="bg-card border border-border w-full max-w-md rounded-xl p-8 text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-white/5"> <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
<Icon className="h-8 w-8 text-white/40" /> <Icon className="h-8 w-8 text-muted-foreground" />
</div> </div>
<h1 className="mb-2 text-xl font-semibold text-white">{titleMap[error.type]}</h1> <h1 className="mb-2 text-xl font-heading font-semibold text-foreground">{titleMap[error.type]}</h1>
<p className="mb-6 text-sm text-white/50">{error.message}</p> <p className="mb-6 text-sm text-muted-foreground">{error.message}</p>
<Link <Link
to="/" to="/"
className="inline-block rounded-lg bg-white px-6 py-2.5 text-sm font-medium text-black hover:bg-white/90" className="inline-block rounded-lg bg-gradient-brand px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
> >
Go to ResolutionFlow Go to ResolutionFlow
</Link> </Link>
@@ -142,10 +142,10 @@ export function SharedSessionPage() {
if (loading) { if (loading) {
return ( return (
<div className="flex min-h-screen items-center justify-center bg-black"> <div className="flex min-h-screen items-center justify-center bg-background">
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<Loader2 className="h-8 w-8 animate-spin text-white/40" /> <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
<p className="text-sm text-white/40">Loading shared session...</p> <p className="text-sm text-muted-foreground">Loading shared session...</p>
</div> </div>
</div> </div>
) )
@@ -160,17 +160,17 @@ export function SharedSessionPage() {
} }
return ( return (
<div className="min-h-screen bg-black"> <div className="min-h-screen bg-background">
{/* Minimal header */} {/* Minimal header */}
<header className="border-b border-white/[0.06] px-6 py-4"> <header className="border-b border-border px-6 py-4">
<div className="mx-auto flex max-w-7xl items-center justify-between"> <div className="mx-auto flex max-w-7xl items-center justify-between">
<Link to="/" className="flex items-center gap-2"> <Link to="/" className="flex items-center gap-2">
<BrandLogo size="sm" /> <BrandLogo size="sm" />
<span className="text-lg font-semibold text-white">ResolutionFlow</span> <span className="text-lg font-heading font-semibold text-foreground">ResolutionFlow</span>
</Link> </Link>
<Link <Link
to="/login" to="/login"
className="rounded-lg border border-white/10 px-4 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white" className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
> >
Sign In Sign In
</Link> </Link>
@@ -182,14 +182,14 @@ export function SharedSessionPage() {
{/* Metadata section */} {/* Metadata section */}
<div className="mb-8"> <div className="mb-8">
{data.share_name && ( {data.share_name && (
<h1 className="mb-2 text-2xl font-bold text-white">{data.share_name}</h1> <h1 className="mb-2 text-2xl font-heading font-bold text-foreground">{data.share_name}</h1>
)} )}
<p className="text-lg text-white/70"> <p className="text-lg text-muted-foreground">
<span className="text-white/40">Tree:</span> {data.tree_name} <span className="text-muted-foreground">Tree:</span> {data.tree_name}
</p> </p>
{(data.ticket_number || data.client_name) && ( {(data.ticket_number || data.client_name) && (
<p className="mt-1 text-sm text-white/50"> <p className="mt-1 text-sm text-muted-foreground">
{data.ticket_number && ( {data.ticket_number && (
<span>Ticket: #{data.ticket_number}</span> <span>Ticket: #{data.ticket_number}</span>
)} )}
@@ -202,7 +202,7 @@ export function SharedSessionPage() {
</p> </p>
)} )}
<div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-white/40"> <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
<span>Started: {formatDate(data.started_at)}</span> <span>Started: {formatDate(data.started_at)}</span>
{data.completed_at && ( {data.completed_at && (
<> <>
@@ -250,9 +250,9 @@ export function SharedSessionPage() {
</main> </main>
{/* Footer */} {/* Footer */}
<footer className="py-8 text-center text-sm text-white/30"> <footer className="py-8 text-center text-sm text-muted-foreground">
Powered by{' '} Powered by{' '}
<Link to="/" className="underline hover:text-white/50"> <Link to="/" className="underline hover:text-foreground">
ResolutionFlow ResolutionFlow
</Link> </Link>
</footer> </footer>