Skip to content

fix: restore original SharedView designs and components with canvas m… #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ismetcahangirov merged 1 commit into from
May 20, 2026
Merged

fix: restore original SharedView designs and components with canvas m… #18

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 73 additions & 59 deletions src/pages/SharedView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { supabase } from '@/lib/supabase'
import { useCanvas } from '@/hooks/useCanvas'
import { useCanvasStore } from '@/store/canvasStore'
import { ZoomControls } from '@/components/canvas/ZoomControls'
import { ElementInspector } from '@/components/canvas/ElementInspector'
import { TextEditor } from '@/components/canvas/TextEditor'
import { Sparkles, Eye, ShieldAlert } from 'lucide-react'
import type { Scene } from '@/types/database.types'

Expand Down Expand Up @@ -44,6 +46,7 @@ export default function SharedView() {

setScene(data)
store.setReadOnly(true)
// Read-only modda default alət 'select' — element xüsusiyyətlərinə baxmaq üçün
store.setTool('select')
store.loadScene(
(data.elements as any) ?? [],
Expand Down Expand Up @@ -73,24 +76,24 @@ export default function SharedView() {
if (error) {
return (
<div className="flex flex-col h-screen bg-slate-50 text-slate-800 font-sans overflow-hidden">
<header className="bg-white border-b border-slate-100 px-6 py-4 flex items-center justify-between shadow-sm z-10">
<div className="flex items-center gap-3">
<div
<header className="bg-white border-b border-slate-100 px-4 md:px-6 py-3 md:py-4 flex items-center justify-between shadow-sm z-10">
<div className="flex items-center gap-2 md:gap-3">
<img
src="/flaro-logo.png"
alt="Flaro"
className="h-[35px] md:h-[50px] w-auto cursor-pointer"
onClick={() => navigate('/')}
className="bg-orange-500 text-white font-bold text-xl px-4 py-1.5 rounded-xl shadow-md rotate-1 cursor-pointer"
>
Flaro
</div>
<span className="font-semibold text-slate-900">İctimai Baxış</span>
/>
<span className="text-xs md:text-sm font-semibold text-slate-500">İctimai Baxış</span>
</div>
</header>
<main className="flex-1 bg-slate-50 relative flex items-center justify-center">
<main className="flex-1 bg-slate-50 relative flex items-center justify-center p-4">
<div className="absolute inset-0 bg-[radial-gradient(#cbd5e1_1px,transparent_1px)] [background-size:24px_24px] opacity-60 pointer-events-none" />
<div className="bg-white rounded-3xl p-12 border border-slate-200/80 shadow-2xl z-10 text-center max-w-md space-y-4">
<div className="w-16 h-16 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center text-3xl font-bold mx-auto border border-red-100">
<div className="bg-white rounded-3xl p-8 md:p-12 border border-slate-200/80 shadow-2xl z-10 text-center max-w-md space-y-4">
<div className="w-14 h-14 md:w-16 md:h-16 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center text-3xl font-bold mx-auto border border-red-100">
<ShieldAlert size={28} />
</div>
<h3 className="text-2xl font-extrabold text-slate-950 tracking-tight">
<h3 className="text-xl md:text-2xl font-extrabold text-slate-950 tracking-tight">
Baxış Mümkün Deyil
</h3>
<p className="text-slate-600 font-sans leading-relaxed text-sm">
Expand All @@ -111,65 +114,76 @@ export default function SharedView() {
// ── Əsas layout — canvas həmişə DOM-da, loading overlay üstdədir ─────────
return (
<div className="fixed inset-0 bg-slate-50 overflow-hidden flex flex-col font-sans text-slate-800">

{/* Top Header */}
<header className="bg-white border-b border-slate-100 px-6 py-4 flex items-center justify-between shadow-sm z-10 flex-shrink-0">
{isLoading ? (
/* Loading zamanı skeleton header */
<div className="flex items-center gap-3">
<div className="bg-orange-500 text-white font-bold text-xl px-4 py-1.5 rounded-xl shadow-md rotate-1">
Flaro
</div>
<div className="w-24 h-4 bg-slate-200 rounded animate-pulse" />
</div>
) : (
<div className="flex items-center gap-3">
<div className="bg-orange-500 text-white font-bold text-xl px-4 py-1.5 rounded-xl shadow-md rotate-1">
Flaro
</div>
<span className="font-extrabold text-slate-900">{scene?.title ?? ''}</span>
<span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded-md font-mono">
{shareToken?.slice(0, 8)}...
</span>
{/* Top Header — mobil responsive */}
<header className="bg-white border-b border-slate-100 px-3 md:px-6 py-2 md:py-4 flex items-center justify-between shadow-sm z-10 gap-2">
<div className="flex items-center gap-1.5 md:gap-3 min-w-0 flex-1">
<img
src="/flaro-logo.png"
alt="Flaro"
className="h-[32px] md:h-[50px] w-auto flex-shrink-0 cursor-pointer"
onClick={() => navigate('/')}
/>
<div className="min-w-0 flex-1">
{isLoading ? (
<div className="w-24 h-4 bg-slate-200 rounded animate-pulse" />
) : (
<>
<span className="font-bold md:font-extrabold text-slate-900 text-sm md:text-base block truncate">
{scene?.title ?? ''}
</span>
<span className="text-[9px] md:text-[10px] bg-slate-100 text-slate-400 px-1.5 md:px-2 py-0.5 rounded-md font-mono hidden sm:inline-block">
{shareToken?.slice(0, 8)}...
</span>
</>
)}
</div>
)}

<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 text-xs font-bold text-slate-500 bg-slate-100 px-3 py-1.5 rounded-xl border border-slate-200/40">
<Eye size={14} className="text-slate-400" /> Oxuma Rejimi
</div>
<div className="flex items-center gap-1.5 md:gap-3 flex-shrink-0">
<div className="flex items-center gap-1 md:gap-1.5 text-[10px] md:text-xs font-bold text-slate-500 bg-slate-100 px-2 md:px-3 py-1 md:py-1.5 rounded-xl border border-slate-200/40">
<Eye size={12} className="text-slate-400 flex-shrink-0" />
<span className="hidden sm:inline">Oxuma Rejimi</span>
</div>
<button
onClick={() => navigate('/signup')}
className="flex items-center gap-1.5 px-4 py-1.5 bg-gradient-to-r from-orange-500 to-amber-500
text-white text-xs font-extrabold rounded-xl hover:shadow-lg transition-all shadow-md"
className="flex items-center gap-1 md:gap-1.5 px-2.5 md:px-4 py-1 md:py-1.5 bg-gradient-to-r from-orange-500 to-amber-500
text-white text-[10px] md:text-xs font-extrabold rounded-xl hover:shadow-lg transition-all shadow-md whitespace-nowrap"
>
<Sparkles size={12} className="fill-white" /> Özün Yarat
<Sparkles size={11} className="fill-white flex-shrink-0" />
<span className="hidden sm:inline">Özün Yarat</span>
<span className="sm:hidden">Yarat</span>
</button>
</div>
</header>

{/* Canvas Area — həmişə render olunur ki, useCanvas render loop başlasın */}
<div className="flex-1 relative overflow-hidden bg-white">

{/* Loading overlay — canvas üzərindədir amma canvas həmişə DOM-dadır */}
{isLoading && (
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-50">
<div className="flex flex-col items-center gap-3">
<div className="w-12 h-12 border-4 border-orange-500/20 border-t-orange-500 rounded-full animate-spin" />
<p className="text-sm font-bold text-slate-400 uppercase tracking-wider">Scene Yüklənir...</p>
{/* Əsas sahə: Canvas + Sağ Panel */}
<div className="flex-1 flex relative overflow-hidden">
{/* Canvas */}
<div className="flex-1 relative overflow-hidden bg-white">
{/* Loading overlay — canvas üzərindədir amma canvas həmişə DOM-dadır */}
{isLoading && (
<div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-slate-50">
<div className="flex flex-col items-center gap-3">
<div className="w-12 h-12 border-4 border-orange-500/20 border-t-orange-500 rounded-full animate-spin" />
<p className="text-sm font-bold text-slate-400 uppercase tracking-wider">Scene Yüklənir...</p>
</div>
</div>
</div>
)}

<canvas
id="main-canvas"
ref={canvasRef}
className="absolute inset-0"
style={{ touchAction: 'none', cursor: 'default' }}
/>
)}

<canvas
id="main-canvas"
ref={canvasRef}
className="absolute inset-0 cursor-crosshair"
style={{ touchAction: 'none' }}
/>
{/* TextEditor — shared view-də də text elementlərin mətnini göstərmək üçün */}
<TextEditor />
</div>

{/* Element Xüsusiyyətləri Panel (read-only) */}
{!isLoading && <ElementInspector />}
</div>

{/* Zoom Controls */}
{/* Zoom Controls — mobil responsive */}
<ZoomControls />
</div>
)
Expand Down
Loading