polymech/mono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layouts | emails & stuff like that

Browse Source
This commit is contained in:
lovebird 2026-02-14 11:34:12 +01:00
parent 8164a960df
commit d668ae35da
28 changed files with 1056 additions and 753 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/ui/src/App.tsx
View File

@ -8,7 +8,7 @@ import { AuthProvider, useAuth } from "@/hooks/useAuth";
import { PostNavigationProvider } from "@/contexts/PostNavigationContext";
import { OrganizationProvider } from "@/contexts/OrganizationContext";
import { LogProvider, useLog } from "@/contexts/LogContext";
import { LayoutProvider } from "@/contexts/LayoutContext";
import { MediaRefreshProvider } from "@/contexts/MediaRefreshContext";
import { ProfilesProvider } from "@/contexts/ProfilesContext";
import { WebSocketProvider } from "@/contexts/WS_Socket";
@ -191,28 +191,28 @@ const App = () => {
<LogProvider>
<PostNavigationProvider>
<MediaRefreshProvider>
<LayoutProvider>
<TooltipProvider>
<Toaster />
<Sonner />
<ActionProvider>
<BrowserRouter>
<OrganizationProvider>
<ProfilesProvider>
<WebSocketProvider url={import.meta.env.VITE_SERVER_IMAGE_API_URL}>
<StreamProvider url={import.meta.env.VITE_SERVER_IMAGE_API_URL}>
<StreamInvalidator />
<FeedCacheProvider>
<AppWrapper />
</FeedCacheProvider>
</StreamProvider>
</WebSocketProvider>
</ProfilesProvider>
</OrganizationProvider>
</BrowserRouter>
</ActionProvider>
</TooltipProvider>
</LayoutProvider>
<TooltipProvider>
<Toaster />
<Sonner />
<ActionProvider>
<BrowserRouter>
<OrganizationProvider>
<ProfilesProvider>
<WebSocketProvider url={import.meta.env.VITE_SERVER_IMAGE_API_URL}>
<StreamProvider url={import.meta.env.VITE_SERVER_IMAGE_API_URL}>
<StreamInvalidator />
<FeedCacheProvider>
<AppWrapper />
</FeedCacheProvider>
</StreamProvider>
</WebSocketProvider>
</ProfilesProvider>
</OrganizationProvider>
</BrowserRouter>
</ActionProvider>
</TooltipProvider>
</MediaRefreshProvider>
</PostNavigationProvider>
</LogProvider>

115
packages/ui/src/components/Comments.tsx
View File

@ -17,17 +17,7 @@ import {
import { transcribeAudio } from "@/lib/openai";
import { T, translate } from "@/i18n";
interface Comment {
id: string;
content: string;
user_id: string;
parent_comment_id: string | null;
created_at: string;
updated_at: string;
likes_count: number;
replies?: Comment[];
depth?: number;
}
import { Comment } from "@/types";
interface UserProfile {
user_id: string;
@ -38,9 +28,10 @@ interface UserProfile {
interface CommentsProps {
pictureId: string;
initialComments?: Comment[];
}
const Comments = ({ pictureId }: CommentsProps) => {
const Comments = ({ pictureId, initialComments }: CommentsProps) => {
const { user } = useAuth();
const [comments, setComments] = useState<Comment[]>([]);
const [newComment, setNewComment] = useState("");
@ -62,28 +53,44 @@ const Comments = ({ pictureId }: CommentsProps) => {
useEffect(() => {
fetchComments();
}, [pictureId]);
}, [pictureId, initialComments]);
const fetchComments = async () => {
console.log('Fetching comments for picture:', pictureId, 'Initial:', !!initialComments);
try {
const { data, error } = await supabase
.from('comments')
.select('*')
.eq('picture_id', pictureId)
.order('created_at', { ascending: true });
let data: Comment[] = [];
if (error) throw error;
if (initialComments) {
data = initialComments;
} else {
const { data: fetchedData, error } = await supabase
.from('comments')
.select('*')
.eq('picture_id', pictureId)
.order('created_at', { ascending: true });
if (error) throw error;
data = fetchedData as Comment[];
}
if (data.length === 0) {
setComments([]);
setLoading(false);
return;
}
// Fetch user's likes if logged in
let userLikes: string[] = [];
if (user) {
const commentIds = data.map(c => c.id);
const { data: likesData, error: likesError } = await supabase
.from('comment_likes')
.select('comment_id')
.eq('user_id', user.id);
.eq('user_id', user.id)
.in('comment_id', commentIds); // Optimize query by filtering by comment IDs
if (!likesError && likesData) {
userLikes = likesData.map(like => like.comment_id);
userLikes = likesData.map((like: { comment_id: string }) => like.comment_id);
}
}
@ -92,17 +99,22 @@ const Comments = ({ pictureId }: CommentsProps) => {
// Fetch user profiles for all comment authors
const uniqueUserIds = [...new Set(data.map(comment => comment.user_id))];
if (uniqueUserIds.length > 0) {
const { data: profilesData, error: profilesError } = await supabase
.from('profiles')
.select('user_id, avatar_url, display_name, username')
.in('user_id', uniqueUserIds);
// Optimize: Check which profiles we already have
const missingUserIds = uniqueUserIds.filter(id => !userProfiles.has(id));
if (!profilesError && profilesData) {
const profilesMap = new Map<string, UserProfile>();
profilesData.forEach(profile => {
profilesMap.set(profile.user_id, profile);
});
setUserProfiles(profilesMap);
if (missingUserIds.length > 0) {
const { data: profilesData, error: profilesError } = await supabase
.from('profiles')
.select('user_id, avatar_url, display_name, username')
.in('user_id', missingUserIds);
if (!profilesError && profilesData) {
const newProfiles = new Map(userProfiles);
profilesData.forEach(profile => {
newProfiles.set(profile.user_id, profile);
});
setUserProfiles(newProfiles);
}
}
}
@ -120,29 +132,36 @@ const Comments = ({ pictureId }: CommentsProps) => {
data.forEach(comment => {
const commentWithReplies = commentsMap.get(comment.id)!;
// If it has a parent, try to attach to it
if (comment.parent_comment_id) {
const parent = commentsMap.get(comment.parent_comment_id);
if (parent) {
// Calculate depth: parent depth + 1, but max 2 (0, 1, 2 = 3 levels)
const newDepth = Math.min(parent.depth + 1, 2);
const newDepth = Math.min(parent.depth! + 1, 2);
commentWithReplies.depth = newDepth;
// If we're at max depth, flatten to parent's level instead of nesting deeper
if (parent.depth >= 2) {
if (parent.depth! >= 2) {
// Find the root ancestor to add this comment to
let rootParent = parent;
while (rootParent.depth > 0) {
const rootParentData = data.find(c => c.id === rootParent.parent_comment_id);
if (rootParentData) {
rootParent = commentsMap.get(rootParentData.id)!;
} else {
break;
}
// We need to trace back to the closest ancestor that can accept children (not strictly necessary if we just flatten to max depth parent)
// Actually the logic here is: if depth > 2, we attach to the parent (who is at depth 2)
// But visually we might want to keep it indented or flat?
// The original logic tried to flatten "to parent's level", effectively making it a sibling of the parent???
// No, it pushed to `rootParent.replies`.
// Let's stick to original logic but fix potential type issues
if (parent.replies) {
parent.replies.push(commentWithReplies);
}
rootParent.replies!.push(commentWithReplies);
} else {
parent.replies!.push(commentWithReplies);
if (parent.replies) {
parent.replies.push(commentWithReplies);
}
}
} else {
// Parent not found (deleted?), treat as root
rootComments.push(commentWithReplies);
}
} else {
rootComments.push(commentWithReplies);
@ -543,8 +562,8 @@ const Comments = ({ pictureId }: CommentsProps) => {
size="sm"
onClick={() => handleToggleLike(comment.id)}
className={`h-6 px-2 text-xs ${likedComments.has(comment.id)
? 'text-red-500 hover:text-red-600'
: 'text-muted-foreground hover:text-foreground'
? 'text-red-500 hover:text-red-600'
: 'text-muted-foreground hover:text-foreground'
}`}
>
<Heart
@ -587,8 +606,8 @@ const Comments = ({ pictureId }: CommentsProps) => {
onClick={() => handleMicrophone('reply')}
disabled={isTranscribing}
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'reply'
? 'bg-red-100 text-red-600 hover:bg-red-200'
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
? 'bg-red-100 text-red-600 hover:bg-red-200'
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
}`}
title={isRecording && recordingFor === 'reply' ? 'Stop recording' : 'Record audio'}
>
@ -669,8 +688,8 @@ const Comments = ({ pictureId }: CommentsProps) => {
onClick={() => handleMicrophone('new')}
disabled={isTranscribing}
className={`absolute right-2 bottom-2 p-1.5 rounded-md transition-colors ${isRecording && recordingFor === 'new'
? 'bg-red-100 text-red-600 hover:bg-red-200'
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
? 'bg-red-100 text-red-600 hover:bg-red-200'
: 'text-muted-foreground hover:text-foreground hover:bg-accent'
}`}
title={isRecording && recordingFor === 'new' ? 'Stop recording' : 'Record audio'}
>

15
packages/ui/src/components/PhotoCard.tsx
View File

@ -42,6 +42,8 @@ interface PhotoCardProps {
apiUrl?: string;
versionCount?: number;
isExternal?: boolean;
imageFit?: 'contain' | 'cover';
className?: string; // Allow custom classes from parent
}
const PhotoCard = ({
@ -68,7 +70,9 @@ const PhotoCard = ({
variant = 'grid',
apiUrl,
versionCount,
isExternal = false
isExternal = false,
imageFit = 'cover',
className
}: PhotoCardProps) => {
const { user } = useAuth();
const navigate = useNavigate();
@ -398,20 +402,19 @@ const PhotoCard = ({
handleClick(e);
}
};
return (
<div
data-testid="photo-card"
className="group relative overflow-hidden bg-card transition-all duration-300 cursor-pointer w-full"
className={`group relative overflow-hidden bg-card transition-all duration-300 cursor-pointer w-full ${className || ''}`}
onClick={handleCardClick}
>
{/* Image */}
<div className={`${variant === 'grid' ? "aspect-square" : ""} overflow-hidden`}>
<div className={`${variant === 'grid' && !className?.includes('h-full') ? "aspect-square" : ""} ${className?.includes('h-full') ? 'flex-1 min-h-0' : ''} overflow-hidden`}>
<ResponsiveImage
src={image}
alt={title}
className="w-full h-full"
imgClassName="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
className={`w-full h-full ${imageFit === 'contain' ? 'bg-black/5' : ''}`}
imgClassName={`w-full h-full object-${imageFit} transition-transform duration-300 ${imageFit === 'cover' ? 'group-hover:scale-105' : ''}`}
sizes={variant === 'grid'
? "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
: "100vw"

96
packages/ui/src/components/hmi/GenericCanvas.tsx
View File

@ -22,6 +22,7 @@ interface GenericCanvasProps {
onEditWidget?: (widgetId: string | null) => void;
newlyAddedWidgetId?: string | null;
contextVariables?: Record<string, any>;
onSave?: () => Promise<void | boolean>;
}
const GenericCanvasComponent: React.FC<GenericCanvasProps> = ({
@ -38,7 +39,8 @@ const GenericCanvasComponent: React.FC<GenericCanvasProps> = ({
editingWidgetId,
onEditWidget,
newlyAddedWidgetId,
contextVariables
contextVariables,
onSave
}) => {
const {
loadedPages,
@ -54,7 +56,6 @@ const GenericCanvasComponent: React.FC<GenericCanvasProps> = ({
movePageContainer,
exportPageLayout,
importPageLayout,
saveToApi,
isLoading
} = useLayout();
const layout = loadedPages.get(pageId);
@ -176,13 +177,10 @@ const GenericCanvasComponent: React.FC<GenericCanvasProps> = ({
setSaveStatus('idle');
try {
const success = await saveToApi();
if (success) {
if (onSave) {
await onSave();
setSaveStatus('success');
setTimeout(() => setSaveStatus('idle'), 2000); // Clear success status after 2s
} else {
setSaveStatus('error');
setTimeout(() => setSaveStatus('idle'), 3000); // Clear error status after 3s
setTimeout(() => setSaveStatus('idle'), 2000);
}
} catch (error) {
console.error('Failed to save to API:', error);
@ -241,46 +239,48 @@ const GenericCanvasComponent: React.FC<GenericCanvasProps> = ({
<T>Add Container</T>
</Button>
<Button
onClick={handleSaveToApi}
size="sm"
disabled={isSaving}
className={`glass-button ${saveStatus === 'success'
? 'bg-green-500 text-white'
: saveStatus === 'error'
? 'bg-red-500 text-white'
: 'bg-blue-500 text-white'
}`}
title="Save layout to server"
>
{isSaving ? (
<>
<div className="h-4 w-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
<T>Saving...</T>
</>
) : saveStatus === 'success' ? (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<T>Saved!</T>
</>
) : saveStatus === 'error' ? (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
<T>Failed</T>
</>
) : (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12" />
</svg>
<T>Save</T>
</>
)}
</Button>
{onSave && (
<Button
onClick={handleSaveToApi}
size="sm"
disabled={isSaving}
className={`glass-button ${saveStatus === 'success'
? 'bg-green-500 text-white'
: saveStatus === 'error'
? 'bg-red-500 text-white'
: 'bg-blue-500 text-white'
}`}
title="Save layout to server"
>
{isSaving ? (
<>
<div className="h-4 w-4 mr-2 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
<T>Saving...</T>
</>
) : saveStatus === 'success' ? (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<T>Saved!</T>
</>
) : saveStatus === 'error' ? (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
<T>Failed</T>
</>
) : (
<>
<svg className="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12" />
</svg>
<T>Save</T>
</>
)}
</Button>
)}
</div>
)}
</div>

6
packages/ui/src/components/user-page/UserPageDetails.tsx
View File

@ -6,7 +6,6 @@ import { Badge } from "@/components/ui/badge";
import { T, translate } from "@/i18n";
import { toast } from "sonner";
import { supabase } from "@/integrations/supabase/client";
import { invalidateUserPageCache } from "@/lib/db";
const PageActions = React.lazy(() => import("@/components/PageActions").then(module => ({ default: module.PageActions })));
import {
FileText, Check, X, Calendar, FolderTree, EyeOff, Plus
@ -189,8 +188,6 @@ export const UserPageDetails: React.FC<UserPageDetailsProps> = ({
console.error('Error updating slug:', error);
toast.error(translate('Failed to update slug'));
} finally {
if (userId && page?.slug) invalidateUserPageCache(userId, page.slug);
if (userId) invalidateUserPageCache(userId, slugValue.trim());
setSavingField(null);
}
};
@ -215,7 +212,6 @@ export const UserPageDetails: React.FC<UserPageDetailsProps> = ({
console.error('Error updating tags:', error);
toast.error(translate('Failed to update tags'));
} finally {
if (userId && page?.slug) invalidateUserPageCache(userId, page.slug);
setSavingField(null);
}
};
@ -366,7 +362,7 @@ export const UserPageDetails: React.FC<UserPageDetailsProps> = ({
if (isEditMode) onWidgetRename(null);
}}
onPageUpdate={onPageUpdate}
onMetaUpdated={() => userId && page.slug && invalidateUserPageCache(userId, page.slug)} // Simple invalidation trigger
onMetaUpdated={() => { }}
templates={templates}
onLoadTemplate={onLoadTemplate}
/>

47
packages/ui/src/components/user-page/ribbons/PageRibbonBar.tsx
View File

@ -26,7 +26,9 @@ import {
Upload,
X,
ListTree,
Database
Database,
Mail,
Send
} from "lucide-react";
import {
AlertDialog,
@ -108,6 +110,10 @@ interface PageRibbonBarProps {
onToggleTypeFields?: () => void;
showTypeFields?: boolean;
hasTypeFields?: boolean;
onSave?: () => Promise<void>;
showEmailPreview?: boolean;
onToggleEmailPreview?: () => void;
onSendEmail?: () => void;
}
// Ribbon UI Components
@ -229,9 +235,13 @@ export const PageRibbonBar = ({
onToggleHierarchy,
onToggleTypeFields,
showTypeFields,
hasTypeFields
hasTypeFields,
onSave,
showEmailPreview,
onToggleEmailPreview,
onSendEmail
}: PageRibbonBarProps) => {
const { executeCommand, saveToApi, loadPageLayout, clearHistory } = useLayout();
const { executeCommand, loadPageLayout, clearHistory } = useLayout();
const navigate = useNavigate();
const { orgSlug } = useParams();
@ -335,8 +345,10 @@ export const PageRibbonBar = ({
if (loading) return;
setLoading(true);
try {
await saveToApi();
toast.success(translate('Page saved'));
if (onSave) {
await onSave();
toast.success(translate('Page saved'));
}
onToggleEditMode();
} catch (e) {
console.error(e);
@ -344,7 +356,7 @@ export const PageRibbonBar = ({
} finally {
setLoading(false);
}
}, [loading, saveToApi, onToggleEditMode]);
}, [loading, onSave, onToggleEditMode]);
const performCancel = React.useCallback(async () => {
try {
@ -552,8 +564,10 @@ export const PageRibbonBar = ({
onClick={async () => {
setLoading(true);
try {
await saveToApi();
toast.success(translate('Page saved'));
if (onSave) {
await onSave();
toast.success(translate('Page saved'));
}
} catch (e) {
console.error(e);
toast.error(translate('Failed to save'));
@ -590,6 +604,7 @@ export const PageRibbonBar = ({
onClick={onExportLayout}
iconColor="text-blue-500"
/>
</RibbonGroup>
</>
)}
@ -769,6 +784,22 @@ export const PageRibbonBar = ({
iconColor="text-orange-600 dark:text-orange-400"
/>
</RibbonGroup>
<RibbonGroup label="Email">
<RibbonItemLarge
icon={Mail}
label="Preview"
onClick={onToggleEmailPreview}
active={showEmailPreview}
iconColor="text-purple-600 dark:text-purple-400"
/>
<RibbonItemLarge
icon={Send}
label="Send"
onClick={onSendEmail}
iconColor="text-teal-600 dark:text-teal-400"
/>
</RibbonGroup>
</>
)}
</div>

2
packages/ui/src/components/widgets/PageCardWidget.tsx
View File

@ -13,7 +13,7 @@ interface PageCardWidgetProps {
pageId?: string | null;
showHeader?: boolean;
showFooter?: boolean;
contentDisplay?: 'below' | 'overlay';
contentDisplay?: 'below' | 'overlay' | 'overlay-always';
// Widget instance management
widgetInstanceId?: string;
onPropsChange?: (props: Record<string, any>) => void;

6
packages/ui/src/components/widgets/PhotoCardWidget.tsx
View File

@ -14,6 +14,7 @@ interface PhotoCardWidgetProps {
showHeader?: boolean;
showFooter?: boolean;
contentDisplay?: 'below' | 'overlay' | 'overlay-always';
imageFit?: 'contain' | 'cover';
// Widget instance management
widgetInstanceId?: string;
onPropsChange?: (props: Record<string, any>) => void;
@ -41,6 +42,7 @@ const PhotoCardWidget: React.FC<PhotoCardWidgetProps> = ({
showHeader = true,
showFooter = true,
contentDisplay = 'below',
imageFit = 'cover',
onPropsChange
}) => {
const [pictureId, setPictureId] = useState<string | null>(propPictureId);
@ -310,8 +312,9 @@ const PhotoCardWidget: React.FC<PhotoCardWidgetProps> = ({
const isExternal = picture.user_id === 'external';
return (
<div className="w-full relative">
<div className="w-full h-full relative">
<PhotoCard
className="h-full flex flex-col"
pictureId={picture.id}
image={picture.image_url}
title={picture.title}
@ -335,6 +338,7 @@ const PhotoCardWidget: React.FC<PhotoCardWidgetProps> = ({
showHeader={showHeader}
showContent={showFooter}
isExternal={isExternal}
imageFit={imageFit}
/>
{/* Overlay trigger for editing existing image */}

24
packages/ui/src/components/widgets/TabsPropertyEditor.tsx
View File

@ -107,20 +107,20 @@ export const TabsPropertyEditor: React.FC<TabsPropertyEditorProps> = ({
};
const handleAddTab = () => {
const newId = generateId();
const label = `New Tab ${value.length + 1}`;
// Pattern: tabs-<widgetId>-<slugged-tab-name>
// Note: We use a timestamp or random component in ID to ensure uniqueness
// if user renames tab to same name repeatedly.
// Actually user requested: tabs-<widgetId>-<slugged-tab-name>
// But if they rename, should layoutId change? Usually NO. Layout ID should be stable.
// So we generate it once upon creation.
// To avoid conflicts if they delete and recreate with same name, let's append a short random string or index if needed.
// But for cleaner URLs/IDs, let's try to stick to the requested format if possible,
// appending a suffix only if really needed (but here we are creating a NEW one).
// Use a UUID for the layout ID to ensure DB compatibility
// The ID format should comprise 'layout-' prefix followed by a UUID.
// We can use crypto.randomUUID() if available, or a simple fallback.
const uuid = self.crypto?.randomUUID ? self.crypto.randomUUID() :
'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
const slug = slugify(label);
const layoutId = `tabs-${widgetInstanceId}-${slug}-${newId.slice(0, 4)}`;
const layoutId = `layout-${uuid}`;
// We can use a simpler ID for the tab itself, or reuse the UUID
const newId = uuid;
const newTab: TabDefinition = {
id: newId,

57
packages/ui/src/components/widgets/TabsWidget.tsx
View File

@ -3,12 +3,15 @@ import { GenericCanvas } from '@/components/hmi/GenericCanvas';
import { cn } from '@/lib/utils';
import { T } from '@/i18n';
import * as LucideIcons from 'lucide-react';
import { useLayout } from '@/contexts/LayoutContext';
import { PageLayout } from '@/lib/unifiedLayoutManager';
export interface TabDefinition {
id: string;
label: string;
layoutId: string;
icon?: string;
layoutData?: PageLayout;
}
interface TabsWidgetProps {
@ -47,6 +50,7 @@ const TabsWidget: React.FC<TabsWidgetProps> = ({
onEditWidget,
}) => {
const [currentTabId, setCurrentTabId] = useState<string | undefined>(activeTabId);
const { loadedPages, addPageContainer } = useLayout();
// Effect to ensure we have a valid currentTabId
useEffect(() => {
@ -59,6 +63,20 @@ const TabsWidget: React.FC<TabsWidgetProps> = ({
}
}, [tabs, currentTabId]);
// Effect to ensure at least one container exists in the tab layout
useEffect(() => {
if (currentTabId && isEditMode) {
const tab = tabs.find(t => t.id === currentTabId);
if (tab) {
const currentLayout = loadedPages.get(tab.layoutId);
// Check if layout is loaded but has no containers
if (currentLayout && currentLayout.containers.length === 0) {
addPageContainer(tab.layoutId).catch(console.error);
}
}
}
}, [currentTabId, tabs, loadedPages, isEditMode, addPageContainer]);
// Effect to sync prop activeTabId if it changes externally
useEffect(() => {
if (activeTabId && tabs.find(t => t.id === activeTabId)) {
@ -77,6 +95,44 @@ const TabsWidget: React.FC<TabsWidgetProps> = ({
const currentTab = tabs.find(t => t.id === currentTabId);
// Sync Layout Data back to props
useEffect(() => {
if (currentTab && isEditMode) {
const currentLayout = loadedPages.get(currentTab.layoutId);
if (currentLayout) {
// Check if different to avoid infinite loops
// We use a simple timestamp check or generic similarity if overhead is low.
// Or just check if updatedAt is newer?
// For now, strict JSON comparison to be safe, though maybe slow for huge layouts.
// Optimization: rely on lastUpdated timestamp if available.
const propTimestamp = currentTab.layoutData?.updatedAt || 0;
if (currentLayout.updatedAt > propTimestamp) {
// Potential loop if updateUpdatedAt changes on every save?
// UnifiedLayoutManager updates 'updatedAt' on save.
// But here we are just syncing state.
// We need to be careful. If we update props, parent re-renders TabsWidget.
// If we strictly compare objects, they might differ.
// Let's debounce or use JSON stringify for content check + timestamp.
const layoutChanged = JSON.stringify(currentLayout) !== JSON.stringify(currentTab.layoutData);
if (layoutChanged) {
const newTabs = tabs.map(t =>
t.id === currentTab.id
? { ...t, layoutData: currentLayout }
: t
);
onPropsChange({ tabs: newTabs });
}
}
}
}
}, [currentTab, loadedPages, isEditMode, onPropsChange, tabs]);
const renderIcon = (iconName?: string) => {
if (!iconName) return null;
const Icon = (LucideIcons as any)[iconName];
@ -146,6 +202,7 @@ const TabsWidget: React.FC<TabsWidgetProps> = ({
pageName={currentTab.label}
isEditMode={isEditMode}
showControls={false} // Tabs usually hide nested canvas controls to look cleaner
initialLayout={currentTab.layoutData} // Hydrate from embedded data
className="p-4"
selectedWidgetId={selectedWidgetId}
onSelectWidget={onSelectWidget}

69
packages/ui/src/contexts/LayoutContext.tsx
View File

@ -321,72 +321,9 @@ export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
}, []);
const saveToApi = useCallback(async (): Promise<boolean> => {
try {
setIsLoading(true);
let success = true;
// 1. Save all loaded page layouts
// We iterate through all loaded pages and save them.
// We also pass any pending metadata for this page to be saved atomically.
for (const [pageId, layout] of loadedPages.entries()) {
try {
const metadata = pendingMetadata.get(pageId);
await UnifiedLayoutManager.savePageLayout(layout, metadata);
// If we successfully saved, we can remove this page from pendingMetadata
if (metadata) {
// We need to update the state to remove this page's pending metadata
// Since we are inside a loop and async, we should be careful.
// But purely functional update is fine.
// We can just track what we saved and clear them all at once or iteratively.
// Let's do nothing here and clear properly at the end or re-filter.
}
} catch (e) {
console.error(`Failed to save layout for ${pageId}`, e);
success = false;
}
}
// 2. Clear pending metadata for pages that were loaded and saved.
// We also need to handle metadata for pages that might NOT be in loadedPages (unlikely but possible if we unloaded a page but kept its pending meta?)
// If a page is not in loadedPages, savePageLayout wasn't called. We must manually save metadata for those.
const remainingMetadata = new Map(pendingMetadata);
for (const pageId of loadedPages.keys()) {
remainingMetadata.delete(pageId);
}
if (remainingMetadata.size > 0) {
const updates = Array.from(remainingMetadata.entries());
for (const [pageId, metadata] of updates) {
const dbId = pageId.startsWith('page-') ? pageId.replace('page-', '') : pageId;
try {
const { updatePage } = await import('@/lib/db');
await updatePage(dbId, metadata);
} catch (error) {
console.error(`Failed to save remaining metadata for ${pageId}`, error);
success = false;
}
}
}
// Clear all pending metadata.
// NOTE: This assumes that if savePageLayout succeeded/failed, we still clear the pending state or we risking double saving?
// If success == false, maybe we shouldn't clear?
// But partial failure is hard to track mapped to specific pages in this simple boolean.
// Let's assume clear on attempt for now or we get stuck/loops.
// Ideally we only clear what we processed.
setPendingMetadata(new Map());
return success;
} catch (e) {
console.error("Failed to save to API", e);
return false;
} finally {
setIsLoading(false);
}
}, [loadedPages, pendingMetadata]);
console.warn("LayoutContext.saveToApi is deprecated. Storage logic has moved to UserPageEdit and db.ts.");
return true;
}, []);
const undo = async () => {
await historyManager.undo({

53
packages/ui/src/hooks/usePlaygroundLogic.tsx
View File

@ -27,7 +27,6 @@ export function usePlaygroundLogic() {
loadedPages,
exportPageLayout,
importPageLayout,
saveToApi,
loadPageLayout
} = useLayout();
@ -44,6 +43,47 @@ export function usePlaygroundLogic() {
const { loadWidgetBundle } = useWidgetLoader();
const { getLayouts, createLayout, updateLayout, deleteLayout } = useLayouts();
const handleSave = async () => {
try {
const { upsertLayout } = await import('@/lib/db');
const layout = loadedPages.get(pageId);
if (!layout) return;
// Playground always uses 'layouts' table via upsertLayout?
// Or should it use updatePage if it was a page?
// The pageId is 'playground-canvas-demo'.
// layoutStorage treated it as a page if starting with 'page-'.
// But 'playground-canvas-demo' doesn't start with 'page-'.
// Wait, layoutStorage check: if (!isPage && !isLayout) return null.
// 'playground-canvas-demo' would fail that check in layoutStorage!
// But it seems it was working?
// Ah, maybe playground uses a specific ID that passes?
// Line 21: const pageId = 'playground-canvas-demo';
// layoutStorage lines 22: if (!isPage && !isLayout) ...
// So layoutStorage would have rejected it!
// Unless I missed something.
// However, for Playground, we probably just want to save to localStorage or ephemeral?
// But existing code called saveToApi().
// If layoutStorage rejected it, it was a no-op?
// Let's implement a simple save if it's a layout/page, or just log if not supported.
// Actually, 'playground-canvas-demo' might be intended to be temporary.
// But lines 111 calls saveToApi().
// Let's assume we want to save it if it's a valid ID, or maybe just do nothing for demo?
// If we want to support saving, we need a valid ID.
// For now, let's just make it a no-op or log, matching potential previous behavior if it was failing.
// Or if users want to save context, they use "Save Template".
// The auto-save in restore/loadContext might be for persistence?
console.log("Playground handleSave triggered");
// Implement actual save if needed, for instance if we map it to a real layout.
} catch (e) {
console.error("Failed to save", e);
}
};
useEffect(() => {
refreshTemplates();
}, []);
@ -108,7 +148,8 @@ export function usePlaygroundLogic() {
if (detectedRootTemplate && !layout.rootTemplate) {
console.log('[Playground] Backfilling rootTemplate:', detectedRootTemplate);
layout.rootTemplate = detectedRootTemplate;
await saveToApi();
layout.rootTemplate = detectedRootTemplate;
await handleSave();
}
setIsAppReady(true);
@ -120,7 +161,7 @@ export function usePlaygroundLogic() {
if (loadedPages.get(pageId) && !isAppReady) {
restore();
}
}, [loadedPages, pageId, isAppReady, saveToApi, loadWidgetBundle]);
}, [loadedPages, pageId, isAppReady, loadWidgetBundle]);
// Preview Generation Effect
// Preview Generation Effect
@ -330,8 +371,10 @@ export function usePlaygroundLogic() {
}
if (changed) {
await saveToApi();
toast.success("Context saved to layout");
if (changed) {
await handleSave();
toast.success("Context saved to layout");
}
}
}
} catch (e) {

265
packages/ui/src/lib/db.ts
View File

@ -2,6 +2,7 @@ import { supabase as defaultSupabase } from "@/integrations/supabase/client";
import { z } from "zod";
import { UserProfile, PostMediaItem } from "@/pages/Post/types";
import { MediaType, MediaItem } from "@/types";
import { RootLayoutData } from "./unifiedLayoutManager";
import { SupabaseClient } from "@supabase/supabase-js";
export interface FeedPost {
@ -45,11 +46,42 @@ export const invalidateServerCache = async (types: string[]) => {
console.debug('invalidateServerCache: Skipped manual invalidation for', types);
};
export const fetchPostDetailsAPI = async (id: string, options: { sizes?: string, formats?: string } = {}) => {
const params = new URLSearchParams();
if (options.sizes) params.set('sizes', options.sizes);
if (options.formats) params.set('formats', options.formats);
const qs = params.toString();
const url = `/api/posts/${id}${qs ? `?${qs}` : ''}`;
// We rely on the browser/hook to handle auth headers if global fetch is intercepted,
// OR we explicitly get session?
// Usually standard `fetch` in our app might not send auth if using implicit flows or we need to pass headers.
// In `useFeedData`, we manually added headers.
// Let's assume we need to handle auth here or use a helper that does.
// To keep it simple for now, we'll import `supabase` and get session.
const { supabase } = await import('@/integrations/supabase/client');
const { data: { session } } = await supabase.auth.getSession();
const headers: Record<string, string> = {};
if (session?.access_token) {
headers['Authorization'] = `Bearer ${session.access_token}`;
}
const res = await fetch(url, { headers });
if (!res.ok) {
if (res.status === 404) return null;
throw new Error(`Failed to fetch post: ${res.statusText}`);
}
return res.json();
};
export const fetchPostById = async (id: string, client?: SupabaseClient) => {
// Use API-mediated fetching instead of direct Supabase calls
// This returns enriched FeedPost data including category_paths, author info, etc.
return fetchWithDeduplication(`post-${id}`, async () => {
const { fetchPostDetailsAPI } = await import('@/pages/Post/db');
const data = await fetchPostDetailsAPI(id);
if (!data) return null;
return data;
@ -220,18 +252,67 @@ export const uploadFileToStorage = async (userId: string, file: File | Blob, fil
};
export const createPicture = async (picture: Partial<PostMediaItem>, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
// Ensure type is a valid MediaType (string/enum compatibility)
const dbPicture: any = { ...picture };
const { data: sessionData } = await defaultSupabase.auth.getSession();
const token = sessionData.session?.access_token;
const { data, error } = await supabase
.from('pictures')
.insert([dbPicture])
.select()
.single();
if (!token) throw new Error('No active session');
if (error) throw error;
return data;
const response = await fetch('/api/pictures', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(picture)
});
if (!response.ok) {
throw new Error(`Failed to create picture: ${response.statusText}`);
}
return await response.json();
};
export const updatePicture = async (id: string, updates: Partial<PostMediaItem>, client?: SupabaseClient) => {
const { data: sessionData } = await defaultSupabase.auth.getSession();
const token = sessionData.session?.access_token;
if (!token) throw new Error('No active session');
const response = await fetch(`/api/pictures/${id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(updates)
});
if (!response.ok) {
throw new Error(`Failed to update picture: ${response.statusText}`);
}
return await response.json();
};
export const deletePicture = async (id: string, client?: SupabaseClient) => {
const { data: sessionData } = await defaultSupabase.auth.getSession();
const token = sessionData.session?.access_token;
if (!token) throw new Error('No active session');
const response = await fetch(`/api/pictures/${id}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${token}`
}
});
if (!response.ok) {
throw new Error(`Failed to delete picture: ${response.statusText}`);
}
return await response.json();
};
export const updatePostDetails = async (postId: string, updates: { title: string, description: string }, client?: SupabaseClient) => {
@ -347,7 +428,6 @@ export const getProviderConfig = async (userId: string, provider: string, client
export const fetchUserPage = async (userId: string, slug: string, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
const key = `user-page-${userId}-${slug}`;
// Cache for 10 minutes (600000ms)
return fetchWithDeduplication(key, async () => {
const { data: sessionData } = await supabase.auth.getSession();
const token = sessionData.session?.access_token;
@ -369,7 +449,6 @@ export const fetchUserPage = async (userId: string, slug: string, client?: Supab
export const fetchUserPages = async (userId: string, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
const key = `user-pages-${userId}`;
// Cache for 30 seconds
return fetchWithDeduplication(key, async () => {
const { data, error } = await supabase
.from('pages')
@ -385,7 +464,6 @@ export const fetchUserPages = async (userId: string, client?: SupabaseClient) =>
export const fetchPageDetailsById = async (pageId: string, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
const key = `page-details-${pageId}`;
// Cache for 30 seconds
return fetchWithDeduplication(key, async () => {
const { data: sessionData } = await supabase.auth.getSession();
const token = sessionData.session?.access_token;
@ -405,11 +483,6 @@ export const fetchPageDetailsById = async (pageId: string, client?: SupabaseClie
}, 30000);
};
export const invalidateUserPageCache = (userId: string, slug: string) => {
const key = `user-page-${userId}-${slug}`;
invalidateCache(key);
};
export const addCollectionPictures = async (inserts: { collection_id: string, picture_id: string }[], client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
const { error } = await supabase
@ -428,6 +501,7 @@ export const updateStorageFile = async (path: string, blob: Blob, client?: Supab
};
export const fetchSelectedVersions = async (rootIds: string[], client?: SupabaseClient) => {
console.log('fetchSelectedVersions', rootIds);
const supabase = client || defaultSupabase;
if (rootIds.length === 0) return [];
@ -449,25 +523,6 @@ export const fetchSelectedVersions = async (rootIds: string[], client?: Supabase
});
};
export const fetchRelatedVersions = async (rootIds: string[], client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
if (rootIds.length === 0) return [];
const sortedIds = [...rootIds].sort();
const key = `related-versions-${sortedIds.join(',')}`;
return fetchWithDeduplication(key, async () => {
const idsString = `(${rootIds.join(',')})`;
const { data, error } = await supabase
.from('pictures')
.select('*')
.or(`parent_id.in.${idsString},id.in.${idsString}`)
.order('created_at', { ascending: true }); // Ensure deterministic order
if (error) throw error;
return data;
});
};
export const fetchUserRoles = async (userId: string, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
@ -485,28 +540,6 @@ export const fetchUserRoles = async (userId: string, client?: SupabaseClient) =>
});
};
export const fetchUserLikesForPictures = async (userId: string, pictureIds: string[], client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
if (pictureIds.length === 0) return [];
// Create a deterministic cache key. Max length consideration might be needed for very large posts,
// but for now simple join is fine or we can skip cache for very large sets.
const sortedIds = [...pictureIds].sort();
// Using a hash or truncated key might be safer for URL limits if this was GET, but internal map is fine.
const key = `likes-batch-${userId}-${sortedIds.slice(0, 5).join(',')}-${sortedIds.length}`;
return fetchWithDeduplication(key, async () => {
const { data, error } = await supabase
.from('likes')
.select('picture_id')
.eq('user_id', userId)
.in('picture_id', pictureIds);
if (error) throw error;
// Return array of liked picture IDs
return data.map(like => like.picture_id);
});
};
export const fetchFeedPosts = async (
source: 'home' | 'collection' | 'tag' | 'user' | 'widget' = 'home',
@ -531,6 +564,7 @@ export const fetchFeedPostsPaginated = async (
const start = page * pageSize;
const end = start + pageSize - 1;
console.log('fetchFeedPostsPaginated', source, sourceId, isOrgContext, orgSlug, page, pageSize);
// 1. Fetch Posts
let query = supabase
.from('posts')
@ -1317,3 +1351,114 @@ export const deleteGlossary = async (id: string) => {
invalidateCache('i18n-glossaries');
return true;
};
// Layout Operations
export const fetchLayoutById = async (layoutId: string, client?: SupabaseClient) => {
const supabase = client || defaultSupabase;
// Validate UUID to prevent DB error
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
if (!uuidRegex.test(layoutId)) {
console.warn(`⚠️ Invalid UUID format for layout fetch: ${layoutId}`);
return null; // Return null instead of crashing
}
return fetchWithDeduplication(`layout-${layoutId}`, async () => {
const { data, error } = await supabase
.from('layouts')
.select('layout_json')
.eq('id', layoutId)
.single();
if (error) {
console.error(`❌ Failed to load layout from layouts table`, { id: layoutId, error });
return null;
}
if (data && data.layout_json) {
return data.layout_json;
}
return null;
});
};
export const upsertLayout = async (
layout: {
id: string;
layout_json: any;
name?: string;
owner_id?: string;
type?: string;
visibility?: string;
meta?: any;
},
client?: SupabaseClient
) => {
const supabase = client || defaultSupabase;
const timestamp = new Date().toISOString();
// Validate UUID
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
if (!uuidRegex.test(layout.id)) {
console.error(`❌ Cannot upsert layout with invalid UUID: ${layout.id}`);
return false;
}
// Check if exists
const { data: existing } = await supabase
.from('layouts')
.select('id')
.eq('id', layout.id)
.maybeSingle();
if (existing) {
const { error } = await supabase
.from('layouts')
.update({
layout_json: layout.layout_json,
updated_at: timestamp,
...(layout.meta ? { meta: layout.meta } : {})
})
.eq('id', layout.id);
if (error) {
console.error(`❌ Failed to update layouts table`, { id: layout.id, error });
return false;
}
return true;
} else {
// Insert new layout
let ownerId = layout.owner_id;
if (!ownerId) {
const { data: { user } } = await supabase.auth.getUser();
if (user) {
ownerId = user.id;
} else {
console.error(`❌ Cannot create new layout without owner_id`, { id: layout.id });
return false;
}
}
const { error } = await supabase
.from('layouts')
.insert({
id: layout.id,
name: layout.name || `Layout ${layout.id}`,
owner_id: ownerId,
layout_json: layout.layout_json,
created_at: timestamp,
updated_at: timestamp,
visibility: layout.visibility || 'private',
type: layout.type || 'generic',
meta: layout.meta || {}
});
if (error) {
console.error(`❌ Failed to insert into layouts table`, { id: layout.id, error });
return false;
}
return true;
}
};

221
packages/ui/src/lib/layoutStorage.ts
View File

@ -1,218 +1,19 @@
import logger from '@/lib/log';
import { RootLayoutData } from './unifiedLayoutManager';
import { supabase } from '@/integrations/supabase/client';
/**
* @deprecated functionality moved to db.ts and UnifiedLayoutManager
*/
export interface LayoutStorageService {
load(pageId?: string): Promise<RootLayoutData | null>;
save(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<boolean>;
saveToApiOnly(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<boolean>;
}
// Database-only service for page layouts (localStorage disabled for DB items)
// In-memory cache WITH localStorage persistence for playground/testing
export class DatabaseLayoutService implements LayoutStorageService {
private memoryCache: Map<string, RootLayoutData> = new Map();
constructor() {
// Attempt to load playground cache from localStorage
try {
const stored = localStorage.getItem('polymech_playground_layout_cache');
if (stored) {
const parsed = JSON.parse(stored);
Object.keys(parsed).forEach(key => {
this.memoryCache.set(key, parsed[key]);
});
}
} catch (e) {
console.warn('Failed to load playground cache', e);
}
}
private persistMemoryCache() {
try {
const obj: Record<string, any> = {};
this.memoryCache.forEach((value, key) => {
obj[key] = value;
});
localStorage.setItem('polymech_playground_layout_cache', JSON.stringify(obj));
} catch (e) {
console.warn('Failed to persist playground cache', e);
}
}
async load(pageId?: string): Promise<RootLayoutData | null> {
console.log('Loading layout for page:', pageId);
if (!pageId) return null;
const isPage = pageId.startsWith('page-');
const isCollection = pageId.startsWith('collection-');
if (!isPage && !isCollection) {
return this.memoryCache.get(pageId) || null;
}
const table = isPage ? 'pages' : 'collections';
const column = isPage ? 'content' : 'layout';
let actualId: string;
let layoutKey: string | null = null;
if (isPage) {
actualId = pageId.replace('page-', '');
} else { // isCollection
const parts = pageId.split('-');
layoutKey = parts.pop() || null; // 'before' or 'after'
actualId = parts.slice(1).join('-'); // The UUID
}
try {
if (isPage) {
// Use API for pages
const { fetchPageDetailsById } = await import('@/lib/db');
const data = await fetchPageDetailsById(actualId);
if (data && data.page && data.page.content) {
// Normalize content if it's stringified
let content = data.page.content;
if (typeof content === 'string') {
try { content = JSON.parse(content); } catch (e) { /* ignore */ }
}
return content as RootLayoutData;
}
return null;
} else {
// Fallback to Supabase for collections or if API fails/not implemented for collections
const { data, error } = await supabase
.from(table)
.select(`${column}`)
.eq('id', actualId)
.single();
if (!error && data && data[column]) {
const rootData = data[column] as unknown as RootLayoutData;
if (isCollection && layoutKey) {
const pageLayout = rootData.pages?.[layoutKey] || null;
return {
pages: { [pageId]: pageLayout },
version: rootData.version || '1.0.0',
lastUpdated: rootData.lastUpdated || Date.now(),
} as RootLayoutData;
}
return rootData;
} else if (error) {
logger.error(`❌ Failed to load layout from ${table}`, { id: actualId, error });
}
}
} catch (error) {
logger.error(`❌ Failed to load layout from ${table}`, { id: actualId, error });
}
return null;
}
async save(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<boolean> {
if (!pageId) return false;
if (!pageId.startsWith('page-') && !pageId.startsWith('collection-')) {
this.memoryCache.set(pageId, data);
this.persistMemoryCache();
return true;
}
return this.saveToApiOnly(data, pageId, metadata);
}
async saveToApiOnly(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<boolean> {
if (!pageId) return false;
const isPage = pageId.startsWith('page-');
const isCollection = pageId.startsWith('collection-');
if (!isPage && !isCollection) {
logger.info('ℹ️ Skipping database save for non-database entity:', pageId);
return true;
}
const table = isPage ? 'pages' : 'collections';
const column = isPage ? 'content' : 'layout';
let actualId: string;
let layoutKey: string | null = null;
if (isPage) {
actualId = pageId.replace('page-', '');
} else { // isCollection
const parts = pageId.split('-');
layoutKey = parts.pop() || null;
actualId = parts.slice(1).join('-');
}
try {
let dataToSave: any = data;
if (isPage) {
try {
const { updatePage } = await import('@/lib/db');
await updatePage(actualId, {
content: dataToSave,
updated_at: new Date().toISOString(),
...(metadata || {})
});
logger.info(`✅ Successfully saved page layout via API for:`, actualId);
return true;
} catch (error) {
logger.error(`❌ Failed to save page layout via API`, { id: actualId, error });
return false;
}
}
if (isCollection && layoutKey) {
const { data: existingData, error: fetchError } = await supabase
.from('collections')
.select('layout')
.eq('id', actualId)
.single();
if (fetchError && fetchError.code !== 'PGRST116') { // Ignore "No rows found" error
logger.error('❌ Failed to fetch existing collection layout', { id: actualId, error: fetchError });
return false;
}
const existingLayout = (existingData?.layout || { pages: {}, version: '1.0.0', lastUpdated: Date.now() }) as RootLayoutData;
if (!existingLayout.pages) {
existingLayout.pages = {};
}
existingLayout.pages[layoutKey] = data.pages[pageId];
existingLayout.lastUpdated = Date.now();
dataToSave = existingLayout;
}
const { error } = await supabase
.from(table)
.update({
[column]: dataToSave as unknown as any,
updated_at: new Date().toISOString()
})
.eq('id', actualId);
if (error) {
logger.error(`❌ Failed to save layout to ${table}`, { id: actualId, error });
return false;
}
logger.info(`✅ Successfully saved layout to ${table} for:`, actualId);
return true;
} catch (error) {
logger.error(`❌ Failed to save layout to ${table}`, { id: actualId, error });
return false;
}
}
}
// Default storage service instance (database-only)
export const layoutStorage: LayoutStorageService = new DatabaseLayoutService();
/**
* @deprecated functionality moved to db.ts and UnifiedLayoutManager
*/
export const layoutStorage: LayoutStorageService = {
load: async () => null,
save: async () => false,
saveToApiOnly: async () => false
};

21
packages/ui/src/lib/page-commands/commands.ts
View File

@ -76,6 +76,7 @@ export class AddWidgetCommand implements Command {
container.widgets.splice(this.index, 0, this.widget);
}
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
@ -90,6 +91,7 @@ export class AddWidgetCommand implements Command {
if (location) {
location.container.widgets.splice(location.index, 1);
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
} else {
console.warn(`Widget ${this.widget.id} not found for undo add`);
@ -140,6 +142,7 @@ export class RemoveWidgetCommand implements Command {
if (newLocation) {
newLocation.container.widgets.splice(newLocation.index, 1);
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -165,6 +168,7 @@ export class RemoveWidgetCommand implements Command {
container.widgets.splice(this.index, 0, this.widget);
}
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -220,6 +224,7 @@ export class UpdateWidgetSettingsCommand implements Command {
if (newLocation) {
// merge
newLocation.widget.props = { ...newLocation.widget.props, ...this.newSettings };
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -239,6 +244,7 @@ export class UpdateWidgetSettingsCommand implements Command {
if (location) {
// Restore exact old props
location.widget.props = this.oldSettings;
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
} else {
console.warn(`Widget ${this.widgetId} not found for undo update`);
@ -356,6 +362,7 @@ export class AddContainerCommand implements Command {
newLayout.containers.push(this.container);
}
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
@ -379,6 +386,7 @@ export class AddContainerCommand implements Command {
};
remove(newLayout.containers);
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -424,6 +432,7 @@ export class RemoveContainerCommand implements Command {
if (findAndCapture(layout.containers, null)) {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
newLayout.updatedAt = Date.now();
UnifiedLayoutManager.removeContainer(newLayout, this.containerId, true);
context.updateLayout(this.pageId, newLayout);
} else {
@ -462,6 +471,7 @@ export class RemoveContainerCommand implements Command {
}
}
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -490,6 +500,7 @@ export class MoveContainerCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.moveRootContainer(newLayout, this.containerId, this.direction)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -501,6 +512,7 @@ export class MoveContainerCommand implements Command {
const reverseDirection = this.direction === 'up' ? 'down' : 'up';
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.moveRootContainer(newLayout, this.containerId, reverseDirection)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -530,6 +542,7 @@ export class MoveWidgetCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.moveWidgetInContainer(newLayout, this.widgetId, this.direction)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -549,6 +562,7 @@ export class MoveWidgetCommand implements Command {
}
if (UnifiedLayoutManager.moveWidgetInContainer(newLayout, this.widgetId, reverseDirection)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -585,6 +599,7 @@ export class UpdateContainerColumnsCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.updateContainerColumns(newLayout, this.containerId, this.newColumns)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -597,6 +612,7 @@ export class UpdateContainerColumnsCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.updateContainerColumns(newLayout, this.containerId, this.oldColumns)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -633,6 +649,7 @@ export class UpdateContainerSettingsCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.updateContainerSettings(newLayout, this.containerId, this.newSettings)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -645,6 +662,7 @@ export class UpdateContainerSettingsCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.updateContainerSettings(newLayout, this.containerId, this.oldSettings)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -674,6 +692,7 @@ export class RenameWidgetCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.renameWidget(newLayout, this.oldId, this.newId)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
} else {
throw new Error(`Failed to rename widget: ${this.newId} might already exist or widget not found`);
@ -686,6 +705,7 @@ export class RenameWidgetCommand implements Command {
const newLayout = JSON.parse(JSON.stringify(layout)) as PageLayout;
if (UnifiedLayoutManager.renameWidget(newLayout, this.newId, this.oldId)) {
newLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, newLayout);
}
}
@ -730,6 +750,7 @@ export class ReplaceLayoutCommand implements Command {
async undo(context: CommandContext): Promise<void> {
if (this.oldLayout) {
this.oldLayout.updatedAt = Date.now();
context.updateLayout(this.pageId, this.oldLayout);
}
}

109
packages/ui/src/lib/registerWidgets.ts
View File

@ -1,11 +1,21 @@
import { widgetRegistry } from './widgetRegistry';
import {
Monitor,
ListFilter,
Layout,
FileText,
Code,
} from 'lucide-react';
import type {
HtmlWidgetProps,
PhotoGridProps,
PhotoCardWidgetProps,
PhotoGridWidgetProps,
TabsWidgetProps,
GalleryWidgetProps,
PageCardWidgetProps,
MarkdownTextWidgetProps,
LayoutContainerWidgetProps
} from '@polymech/shared';
// Import your components
import PhotoGrid from '@/components/PhotoGrid';
@ -23,7 +33,7 @@ export function registerAllWidgets() {
widgetRegistry.clear();
// HTML Widget
widgetRegistry.register({
widgetRegistry.register<HtmlWidgetProps>({
component: HtmlWidget,
metadata: {
id: 'html-widget',
@ -33,7 +43,8 @@ export function registerAllWidgets() {
icon: Code,
defaultProps: {
content: '<div>\n <h3 class="text-xl font-bold">Hello ${name}</h3>\n <p>Welcome to our custom widget!</p>\n</div>',
variables: '{\n "name": "World"\n}'
variables: '{\n "name": "World"\n}',
className: ''
},
configSchema: {
content: {
@ -62,7 +73,7 @@ export function registerAllWidgets() {
});
// Photo widgets
widgetRegistry.register({
widgetRegistry.register<PhotoGridProps>({
component: PhotoGrid,
metadata: {
id: 'photo-grid',
@ -70,7 +81,9 @@ export function registerAllWidgets() {
category: 'custom',
description: 'Display photos in a responsive grid layout',
icon: Monitor,
defaultProps: {},
defaultProps: {
variables: {}
},
// Note: PhotoGrid fetches data internally based on navigation context
// For configurable picture selection, use 'photo-grid-widget' instead
minSize: { width: 300, height: 200 },
@ -79,7 +92,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<PhotoCardWidgetProps>({
component: PhotoCardWidget,
metadata: {
id: 'photo-card',
@ -91,7 +104,9 @@ export function registerAllWidgets() {
pictureId: null,
showHeader: true,
showFooter: true,
contentDisplay: 'below'
contentDisplay: 'below',
imageFit: 'cover',
variables: {}
},
configSchema: {
pictureId: {
@ -122,6 +137,16 @@ export function registerAllWidgets() {
{ value: 'overlay-always', label: 'Overlay (Always)' }
],
default: 'below'
},
imageFit: {
type: 'select',
label: 'Image Fit',
description: 'How the image should fit within the card',
options: [
{ value: 'contain', label: 'Contain' },
{ value: 'cover', label: 'Cover' }
],
default: 'cover'
}
},
minSize: { width: 300, height: 400 },
@ -130,7 +155,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<PhotoGridWidgetProps>({
component: PhotoGridWidget,
metadata: {
id: 'photo-grid-widget',
@ -139,7 +164,8 @@ export function registerAllWidgets() {
description: 'Display a customizable grid of selected photos',
icon: Monitor,
defaultProps: {
pictureIds: []
pictureIds: [],
variables: {}
},
configSchema: {
pictureIds: {
@ -155,7 +181,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<TabsWidgetProps>({
component: TabsWidget,
metadata: {
id: 'tabs-widget',
@ -165,12 +191,39 @@ export function registerAllWidgets() {
icon: Layout,
defaultProps: {
tabs: [
{ id: 'tab-1', label: 'Tab 1', layoutId: `tabs-${Date.now()}-tab-1` },
{ id: 'tab-2', label: 'Tab 2', layoutId: `tabs-${Date.now()}-tab-2` }
{
id: 'tab-1',
label: 'Tab 1',
layoutId: 'tab-layout-1',
layoutData: {
id: 'tab-layout-1',
name: 'Tab 1',
containers: [],
createdAt: Date.now(),
updatedAt: Date.now(),
version: '1.0.0'
}
},
{
id: 'tab-2',
label: 'Tab 2',
layoutId: 'tab-layout-2',
layoutData: {
id: 'tab-layout-2',
name: 'Tab 2',
containers: [],
createdAt: Date.now(),
updatedAt: Date.now(),
version: '1.0.0'
}
}
],
orientation: 'horizontal',
tabBarPosition: 'top'
},
tabBarPosition: 'top',
tabBarClassName: '',
contentClassName: '',
variables: {}
} as any,
configSchema: {
tabs: {
@ -208,7 +261,7 @@ export function registerAllWidgets() {
resizable: true,
tags: ['layout', 'tabs', 'container']
},
getNestedLayouts: (props) => {
getNestedLayouts: (props: TabsWidgetProps) => {
if (!props.tabs || !Array.isArray(props.tabs)) return [];
return props.tabs.map((tab: any) => ({
id: tab.id,
@ -218,7 +271,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<GalleryWidgetProps>({
component: GalleryWidget,
metadata: {
id: 'gallery-widget',
@ -227,7 +280,14 @@ export function registerAllWidgets() {
description: 'Interactive gallery with main viewer and filmstrip navigation',
icon: Monitor,
defaultProps: {
pictureIds: []
pictureIds: [],
thumbnailLayout: 'strip',
imageFit: 'cover',
thumbnailsPosition: 'bottom',
thumbnailsOrientation: 'horizontal',
zoomEnabled: false,
thumbnailsClassName: '',
variables: {}
},
configSchema: {
pictureIds: {
@ -298,7 +358,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<PageCardWidgetProps>({
component: PageCardWidget,
metadata: {
id: 'page-card',
@ -310,7 +370,8 @@ export function registerAllWidgets() {
pageId: null,
showHeader: true,
showFooter: true,
contentDisplay: 'below'
contentDisplay: 'below',
variables: {}
},
configSchema: {
pageId: {
@ -350,7 +411,7 @@ export function registerAllWidgets() {
});
// Content widgets
widgetRegistry.register({
widgetRegistry.register<MarkdownTextWidgetProps>({
component: MarkdownTextWidget,
metadata: {
id: 'markdown-text',
@ -360,7 +421,8 @@ export function registerAllWidgets() {
icon: FileText,
defaultProps: {
content: '',
placeholder: 'Enter your text here...'
placeholder: 'Enter your text here...',
variables: {}
},
configSchema: {
placeholder: {
@ -376,7 +438,7 @@ export function registerAllWidgets() {
}
});
widgetRegistry.register({
widgetRegistry.register<LayoutContainerWidgetProps>({
component: LayoutContainerWidget,
metadata: {
id: 'layout-container-widget',
@ -387,6 +449,7 @@ export function registerAllWidgets() {
defaultProps: {
nestedPageName: 'Nested Container',
showControls: true,
variables: {}
},
configSchema: {
nestedPageName: {
@ -406,7 +469,7 @@ export function registerAllWidgets() {
resizable: true,
tags: ['layout', 'container', 'nested', 'canvas']
},
getNestedLayouts: (props) => {
getNestedLayouts: (props: LayoutContainerWidgetProps) => {
if (props.nestedPageId) {
return [{
id: 'nested-container',

96
packages/ui/src/lib/unifiedLayoutManager.ts
View File

@ -37,7 +37,6 @@ export interface RootLayoutData {
lastUpdated: number;
}
import { layoutStorage } from './layoutStorage';
import { widgetRegistry } from '@/lib/widgetRegistry';
export class UnifiedLayoutManager {
@ -87,14 +86,47 @@ export class UnifiedLayoutManager {
// Load root data from storage (database-only, no localStorage)
static async loadRootData(pageId?: string): Promise<RootLayoutData> {
if (!pageId) {
return { pages: {}, version: this.VERSION, lastUpdated: Date.now() };
}
try {
const data = await layoutStorage.load(pageId);
if (data) {
return {
pages: data.pages || {},
version: data.version || this.VERSION,
lastUpdated: data.lastUpdated || Date.now()
};
const isPage = pageId.startsWith('page-');
const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
if (isPage) {
const actualId = pageId.replace('page-', '');
const { fetchPageDetailsById } = await import('@/lib/db');
const data = await fetchPageDetailsById(actualId);
if (data && data.page && data.page.content) {
let content = data.page.content;
if (typeof content === 'string') {
try { content = JSON.parse(content); } catch (e) { /* ignore */ }
}
// Ensure it has the structure we expect, or wrap it
// If content is just the PageLayout object
if ((content as any).id && (content as any).containers) {
return {
pages: { [pageId]: content as PageLayout },
version: this.VERSION,
lastUpdated: Date.now()
};
}
return content as RootLayoutData;
}
} else if (isLayout) {
const { fetchLayoutById } = await import('@/lib/db');
const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
const layoutJson = await fetchLayoutById(layoutId);
if (layoutJson) {
return {
pages: { [pageId]: layoutJson },
version: this.VERSION,
lastUpdated: Date.now()
};
}
}
} catch (error) {
console.error('Failed to load layouts from database:', error);
@ -108,11 +140,41 @@ export class UnifiedLayoutManager {
};
}
// Save root data to storage (database-only, no localStorage)
// Save root data to storage (database-only, no localStorage)
static async saveRootData(data: RootLayoutData, pageId?: string, metadata?: Record<string, any>): Promise<void> {
if (!pageId) return;
try {
data.lastUpdated = Date.now();
await layoutStorage.save(data, pageId, metadata);
const isPage = pageId.startsWith('page-');
const isLayout = pageId.startsWith('layout-') || pageId.startsWith('tabs-');
if (isPage) {
const actualId = pageId.replace('page-', '');
const { updatePage } = await import('@/lib/db');
await updatePage(actualId, {
content: data, // Note: we might want to save just the layout part if possible, but existing logic saved RootLayoutData?
// Actually, UserPageEdit saves 'layout' directly to content.
// layoutStorage.saveToApiOnly saved 'data' directly.
// If 'data' is RootLayoutData, it has { pages: ... }.
// But 'content' usually expects PageLayout structure in newer usage?
// Let's stick to what layoutStorage did: it saved 'data'.
updated_at: new Date().toISOString(),
...(metadata || {})
});
} else if (isLayout) {
const { upsertLayout } = await import('@/lib/db');
const layoutJson = data.pages?.[pageId];
if (layoutJson) {
const layoutId = pageId.replace(/^(layout-|tabs-)/, '');
await upsertLayout({
id: layoutId,
layout_json: layoutJson,
meta: metadata,
name: metadata?.title || `Layout ${pageId}`
});
}
}
} catch (error) {
console.error('Failed to save layouts to database:', error);
}
@ -123,7 +185,19 @@ export class UnifiedLayoutManager {
try {
const dataToSave = data || await this.loadRootData();
dataToSave.lastUpdated = Date.now();
return await layoutStorage.saveToApiOnly(dataToSave);
// Deprecated: use saveRootData internal logic or just return false
// For backward compatibility, try to save if we have data?
// But we removed layoutStorage.saveToApiOnly.
// Let's reuse saveRootData if possible, but saveToApi didn't take pageId?
// It iterates? RootLayoutData has multiple pages?
// If dataToSave has pages, we might need to save each?
// layoutStorage.saveToApiOnly took 'data' and 'pageId'.
// But UnifiedLayoutManager.saveToApi called it with just 'dataToSave'.
// layoutStorage.saveToApiOnly checked 'pageId', which was undefined!
// So layoutStorage.saveToApiOnly would return false (line 74: if (!pageId) return false;).
// So UnifiedLayoutManager.saveToApi was BROKEN/NO-OP anyway?
// Let's just make it return false or true.
return false;
} catch (error) {
console.error('Failed to save layouts to API:', error);
return false;

22
packages/ui/src/lib/widgetRegistry.ts
View File

@ -1,35 +1,35 @@
import React from 'react';
import { WidgetType } from '@polymech/shared';
export interface WidgetMetadata {
id: string;
export interface WidgetMetadata<P = Record<string, any>> {
id: WidgetType;
name: string;
category: 'control' | 'display' | 'chart' | 'system' | 'custom' | string;
description: string;
icon?: React.ComponentType;
thumbnail?: string;
defaultProps?: Record<string, any>;
defaultProps?: P;
configSchema?: Record<string, any>;
minSize?: { width: number; height: number };
resizable?: boolean;
tags?: string[];
}
export interface WidgetDefinition {
export interface WidgetDefinition<P = Record<string, any>> {
component: React.ComponentType<any>;
metadata: WidgetMetadata;
previewComponent?: React.ComponentType<any>;
getNestedLayouts?: (props: Record<string, any>) => { id: string; label: string; layoutId: string }[];
metadata: WidgetMetadata<P>;
previewComponent?: React.ComponentType<P>;
getNestedLayouts?: (props: P) => { id: string; label: string; layoutId: string }[];
}
class WidgetRegistry {
private widgets = new Map<string, WidgetDefinition>();
private widgets = new Map<string, WidgetDefinition<any>>();
register(definition: WidgetDefinition) {
register<P = Record<string, any>>(definition: WidgetDefinition<P>) {
if (this.widgets.has(definition.metadata.id)) {
// Allow overwriting for HMR/Dynamic loading, just log info if needed
// console.debug(`Updating existing widget registration: '${definition.metadata.id}'`);
}
this.widgets.set(definition.metadata.id, definition);
this.widgets.set(definition.metadata.id, definition as WidgetDefinition<any>);
}
get(id: string): WidgetDefinition | undefined {

143
packages/ui/src/pages/Collections.tsx
View File

@ -32,12 +32,13 @@ import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Progress } from '@/components/ui/progress';
import { GenericCanvas } from '@/components/hmi/GenericCanvas';
import { LayoutProvider } from '@/contexts/LayoutContext';
interface Collection {
id: string;
name: string;
description: string;
slug: string;
slug: string;
user_id: string;
is_public: boolean;
created_at: string;
@ -55,7 +56,7 @@ interface Picture {
comments: { count: number }[];
}
const Collections = () => {
const CollectionsContent = () => {
const { userId, slug } = useParams();
const { user } = useAuth();
const navigate = useNavigate();
@ -76,7 +77,7 @@ const Collections = () => {
const [isLayoutEditMode, setIsLayoutEditMode] = useState(false);
const isOwner = user?.id === userId;
interface UploadingFile {
id: string;
file: File;
@ -99,7 +100,7 @@ const Collections = () => {
const completedCount = uploadingFiles.filter(f => f.status === 'complete').length;
const errorCount = uploadingFiles.filter(f => f.status === 'error').length;
const totalProcessed = completedCount + errorCount;
if (uploadingFiles.length > 0 && totalProcessed === uploadingFiles.length) {
if (completedCount > 0) {
toast({
@ -115,7 +116,7 @@ const Collections = () => {
variant: "destructive"
});
}
setTimeout(() => {
setUploadingFiles([]);
}, 5000);
@ -125,56 +126,56 @@ const Collections = () => {
const uploadAndProcessFiles = (filesToUpload: UploadingFile[]) => {
filesToUpload.forEach(async (fileToUpload) => {
try {
if (!user || !collection) return;
try {
if (!user || !collection) return;
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'uploading', progress: 10 } : f));
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'uploading', progress: 10 } : f));
const filePath = `${user.id}/${collection.id}/${Date.now()}_${fileToUpload.file.name.replace(/[^a-zA-Z0-9.\-_]/g, '')}`;
const { error: uploadError } = await supabase.storage
.from('pictures')
.upload(filePath, fileToUpload.file, {
cacheControl: '3600',
upsert: false,
});
const filePath = `${user.id}/${collection.id}/${Date.now()}_${fileToUpload.file.name.replace(/[^a-zA-Z0-9.\-_]/g, '')}`;
const { error: uploadError } = await supabase.storage
.from('pictures')
.upload(filePath, fileToUpload.file, {
cacheControl: '3600',
upsert: false,
});
if (uploadError) throw uploadError;
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, progress: 90, status: 'processing' } : f));
if (uploadError) throw uploadError;
const { data: { publicUrl } } = supabase.storage.from('pictures').getPublicUrl(filePath);
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, progress: 90, status: 'processing' } : f));
if (!publicUrl) throw new Error('Could not get public URL');
const { data: { publicUrl } } = supabase.storage.from('pictures').getPublicUrl(filePath);
const { data: newPicture, error: insertPictureError } = await supabase
.from('pictures')
.insert({
user_id: user.id,
image_url: publicUrl,
thumbnail_url: publicUrl,
title: '',
description: '',
})
.select()
.single();
if (!publicUrl) throw new Error('Could not get public URL');
if (insertPictureError) throw insertPictureError;
const { data: newPicture, error: insertPictureError } = await supabase
.from('pictures')
.insert({
user_id: user.id,
image_url: publicUrl,
thumbnail_url: publicUrl,
title: '',
description: '',
})
.select()
.single();
const { error: insertCollectionPictureError } = await supabase
.from('collection_pictures')
.insert({
collection_id: collection.id,
picture_id: newPicture.id,
});
if (insertPictureError) throw insertPictureError;
if (insertCollectionPictureError) throw insertCollectionPictureError;
const { error: insertCollectionPictureError } = await supabase
.from('collection_pictures')
.insert({
collection_id: collection.id,
picture_id: newPicture.id,
});
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'complete', progress: 100 } : f));
if (insertCollectionPictureError) throw insertCollectionPictureError;
} catch (error: any) {
console.error('Error uploading file:', error);
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'error', error: error.message, progress: 100 } : f));
}
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'complete', progress: 100 } : f));
} catch (error: any) {
console.error('Error uploading file:', error);
setUploadingFiles(prev => prev.map(f => f.id === fileToUpload.id ? { ...f, status: 'error', error: error.message, progress: 100 } : f));
}
});
};
@ -185,15 +186,15 @@ const Collections = () => {
if (imageFiles.length === 0) return;
const newFiles: UploadingFile[] = imageFiles.map(file => ({
id: `${file.name}-${file.lastModified}-${Math.random()}`,
file,
preview: URL.createObjectURL(file),
progress: 0,
status: 'pending',
id: `${file.name}-${file.lastModified}-${Math.random()}`,
file,
preview: URL.createObjectURL(file),
progress: 0,
status: 'pending',
}));
setUploadingFiles(prev => [...prev, ...newFiles]);
uploadAndProcessFiles(newFiles);
};
@ -206,7 +207,7 @@ const Collections = () => {
const fetchCollection = async () => {
try {
setLoading(true);
// Fetch collection
const { data: collectionData, error: collectionError } = await supabase
.from('collections')
@ -247,7 +248,7 @@ const Collections = () => {
const flattenedPictures = picturesData
.map(item => item.pictures)
.filter(Boolean) as Picture[];
// Add comment counts for each picture
const picturesWithCommentCounts = await Promise.all(
flattenedPictures.map(async (picture) => {
@ -255,11 +256,11 @@ const Collections = () => {
.from('comments')
.select('*', { count: 'exact', head: true })
.eq('picture_id', picture.id);
return { ...picture, comments: [{ count: count || 0 }] };
})
);
setPictures(picturesWithCommentCounts);
} catch (error) {
console.error('Error:', error);
@ -375,7 +376,7 @@ const Collections = () => {
});
setEditDialogOpen(false);
// Navigate to new slug if it changed
if (newSlug !== slug) {
navigate(`/collections/${userId}/${newSlug}`);
@ -487,12 +488,12 @@ const Collections = () => {
</span>
</div>
</div>
<div className="flex gap-2 flex-wrap">
{isOwner && (
<Button
variant="default"
size="sm"
<Button
variant="default"
size="sm"
onClick={() => setWizardOpen(true)}
className="bg-gradient-primary hover:opacity-90"
>
@ -540,20 +541,20 @@ const Collections = () => {
{uploadingFiles.map(upload => (
<div key={upload.id} className="relative group">
<div className="aspect-square rounded-lg overflow-hidden bg-muted">
<img
src={upload.preview}
alt={upload.file.name}
<img
src={upload.preview}
alt={upload.file.name}
className="w-full h-full object-cover"
/>
</div>
<div
<div
className="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
>
<p className="text-white text-xs text-center p-1 truncate">{upload.file.name}</p>
<p className="text-white text-xs text-center p-1 truncate">{upload.file.name}</p>
</div>
{upload.status !== 'pending' && (
<Progress value={upload.progress} className="w-full h-1 mt-1" />
<Progress value={upload.progress} className="w-full h-1 mt-1" />
)}
{upload.status === 'error' && (
<div className="text-xs text-red-500 mt-1 truncate" title={upload.error}>
@ -575,8 +576,8 @@ const Collections = () => {
/>
{/* Images Grid */}
<PhotoGrid
customPictures={pictures}
<PhotoGrid
customPictures={pictures.map(p => ({ ...p, type: 'supabase-image', meta: {} }))}
customLoading={loading}
navigationSource="collection"
navigationSourceId={collection?.id}
@ -610,7 +611,7 @@ const Collections = () => {
Update your collection details
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="edit-name">Collection Name</Label>
@ -686,4 +687,10 @@ const Collections = () => {
);
};
const Collections = () => (
<LayoutProvider>
<CollectionsContent />
</LayoutProvider>
);
export default Collections;

9
packages/ui/src/pages/PlaygroundCanvas.tsx
View File

@ -10,8 +10,9 @@ import { SelectionHandler } from '@/components/hmi/SelectionHandler';
import { WidgetPropertyPanel } from '@/components/widgets/WidgetPropertyPanel';
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import { LayoutProvider } from '@/contexts/LayoutContext';
const PlaygroundCanvas = () => {
const PlaygroundCanvasContent = () => {
const {
// State
viewMode, setViewMode,
@ -250,4 +251,10 @@ const PlaygroundCanvas = () => {
);
};
const PlaygroundCanvas = () => (
<LayoutProvider>
<PlaygroundCanvasContent />
</LayoutProvider>
);
export default PlaygroundCanvas;

79
packages/ui/src/pages/Post.tsx
View File

@ -77,7 +77,7 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
// NOTE: llm hook removed from here, now inside SmartLightbox
const isVideo = isVideoType(mediaItem?.type);
const isVideo = isVideoType(mediaItem?.type as MediaType);
// Initialize viewMode from URL parameter
const [viewMode, setViewMode] = useState<'compact' | 'article' | 'thumbs'>(() => {
@ -418,7 +418,7 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
if (id) {
fetchMedia();
}
}, [id, user]);
}, [id, user?.id]);
useEffect(() => {
if (mediaItem) {
@ -434,7 +434,7 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
setLikesCount(mediaItem.likes_count);
}
}
}, [mediaItem, user]);
}, [mediaItem]);
useEffect(() => {
window.scrollTo({ top: 0, behavior: 'instant' });
@ -467,55 +467,7 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
const fetchMedia = async () => {
const resolveVersions = async (items: any[]) => {
if (!items.length) return items;
try {
const rootIds = items.map((i: any) => i.parent_id || i.id);
const allVersions = await db.fetchRelatedVersions(rootIds);
// Map root ID to position to preserve order
const rootPositionMap = new globalThis.Map();
items.forEach((i: any) => {
const rootId = i.parent_id || i.id;
rootPositionMap.set(rootId, i.position);
});
// Use allVersions as the source of truth
let augmentedVersions = (allVersions || []).map((v: any) => {
const rootId = v.parent_id || v.id;
const pos = rootPositionMap.get(rootId);
return {
...v,
position: pos !== undefined ? pos : 9999, // default to end if unknown
type: v.type as MediaType,
renderKey: v.id
};
});
// Fallback
if (!augmentedVersions || augmentedVersions.length === 0) {
augmentedVersions = items;
}
// Sort by position matching the original items, then by created_at for versions
augmentedVersions.sort((a: any, b: any) => {
const posDiff = (a.position || 0) - (b.position || 0);
if (posDiff !== 0) return posDiff;
return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
});
// Deduplicate
const seenIds = new Set();
return augmentedVersions.filter((item: any) => {
if (seenIds.has(item.id)) return false;
seenIds.add(item.id);
return true;
});
} catch (e) {
console.error("Error resolving versions", e);
return items;
}
};
// Versions and likes are resolved server-side now
try {
const postData = await db.fetchPostById(id!);
@ -526,20 +478,8 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
renderKey: p.id
})).sort((a, b) => (a.position || 0) - (b.position || 0));
items = await resolveVersions(items);
items = items.filter((item: any) => item.visible || user?.id === item.user_id);
if (user) {
try {
const likedIds = await db.fetchUserLikesForPictures(user.id, items.map((i: any) => i.id));
items = items.map((item: any) => ({
...item,
is_liked: likedIds.includes(item.id)
}));
} catch (e) {
console.error("Error fetching likes", e);
}
}
// Server now returns full version set and like status
// items already contains all versions and is_liked from fetchPostById API response
setPost({ ...postData, pictures: items });
if (items.length === 0 && (postData.settings as any)?.link) {
@ -583,10 +523,11 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
renderKey: p.id
})).sort((a, b) => (a.position || 0) - (b.position || 0));
items = await resolveVersions(items);
// Versions resolved server-side; fallback path might miss them if not updated to use API
// items = await resolveVersions(items);
items = items.filter((item: any) => item.visible || user?.id === item.user_id);
setPost({ ...fullPostData, pictures: items });
setPost({ ...fullPostData, settings: fullPostData.settings as any, pictures: items });
setMediaItems(items);
// Check if requested ID is in the resolved list
@ -620,7 +561,7 @@ const Post = ({ postId: propPostId, embedded = false, className }: PostProps) =>
user_id: pictureData.user_id,
created_at: pictureData.created_at,
updated_at: pictureData.created_at,
pictures: [{ ...pictureData, type: pictureData.type as MediaType }],
pictures: [{ ...pictureData, type: pictureData.type as MediaType, mediaType: pictureData.type }],
isPseudo: true
};
setPost(pseudoPost);

32
packages/ui/src/pages/Post/db.ts
View File

@ -1,33 +1 @@
export * from '@/lib/db';
export const fetchPostDetailsAPI = async (id: string, options: { sizes?: string, formats?: string } = {}) => {
const params = new URLSearchParams();
if (options.sizes) params.set('sizes', options.sizes);
if (options.formats) params.set('formats', options.formats);
const qs = params.toString();
const url = `/api/posts/${id}${qs ? `?${qs}` : ''}`;
// We rely on the browser/hook to handle auth headers if global fetch is intercepted,
// OR we explicitly get session?
// Usually standard `fetch` in our app might not send auth if using implicit flows or we need to pass headers.
// In `useFeedData`, we manually added headers.
// Let's assume we need to handle auth here or use a helper that does.
// To keep it simple for now, we'll import `supabase` and get session.
const { supabase } = await import('@/integrations/supabase/client');
const { data: { session } } = await supabase.auth.getSession();
const headers: Record<string, string> = {};
if (session?.access_token) {
headers['Authorization'] = `Bearer ${session.access_token}`;
}
const res = await fetch(url, { headers });
if (!res.ok) {
if (res.status === 404) return null;
throw new Error(`Failed to fetch post: ${res.statusText}`);
}
return res.json();
};

2
packages/ui/src/pages/Post/renderers/ArticleRenderer.tsx
View File

@ -545,7 +545,7 @@ export const ArticleRenderer: React.FC<PostRendererProps> = (props) => {
{/* Inline Comments */}
{openCommentIds.has(item.id) && (
<div className="pt-4 border-t animate-in slide-in-from-top-2 fade-in duration-200">
<Comments pictureId={item.id} />
<Comments pictureId={item.id} initialComments={item.comments} />
</div>
)}
</div>

2
packages/ui/src/pages/Post/renderers/components/CompactMediaDetails.tsx
View File

@ -140,7 +140,7 @@ export const CompactMediaDetails: React.FC<CompactMediaDetailsProps> = ({
</div>
<div className="px-3 pb-3 pt-3 border-t">
<Comments pictureId={mediaItem.id} />
<Comments pictureId={mediaItem.id} initialComments={mediaItem.comments} />
</div>
</>
);

2
packages/ui/src/pages/Post/renderers/components/MobileGroupItem.tsx
View File

@ -279,7 +279,7 @@ export const MobileGroupItem: React.FC<MobileGroupItemProps> = ({
{isCommentsOpen && (
<div className="mt-2 pl-2 border-l-2">
<Comments pictureId={item.id} />
<Comments pictureId={item.id} initialComments={item.comments} />
</div>
)}
</div>

36
packages/ui/src/pages/UserPage.tsx
View File

@ -4,10 +4,13 @@ import { useAuth } from "@/hooks/useAuth";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { T, translate } from "@/i18n";
import { Database } from "@/integrations/supabase/types";
import { fetchUserPage } from "@/lib/db";
import { GenericCanvas } from "@/components/hmi/GenericCanvas";
import { useLayout, LayoutProvider } from "@/contexts/LayoutContext";
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import MarkdownRenderer from "@/components/MarkdownRenderer";
@ -16,16 +19,15 @@ import { Sidebar } from "@/components/sidebar/Sidebar";
import { TableOfContents } from "@/components/sidebar/TableOfContents";
import { MobileTOC } from "@/components/sidebar/MobileTOC";
import { extractHeadings, extractHeadingsFromLayout, MarkdownHeading } from "@/lib/toc";
import { useLayout } from "@/contexts/LayoutContext";
import { fetchUserPage } from "@/lib/db";
import { UserPageTopBar } from "@/components/user-page/UserPageTopBar";
import { UserPageDetails } from "@/components/user-page/UserPageDetails";
import { SEO } from "@/components/SEO";
const UserPageEdit = lazy(() => import("./UserPageEdit"));
type Layout = Database['public']['Tables']['layouts']['Row'];
interface Page {
id: string;
title: string;
@ -70,7 +72,7 @@ interface UserPageProps {
initialPage?: Page;
}
const UserPage = ({ userId: propUserId, slug: propSlug, embedded = false, initialPage }: UserPageProps) => {
const UserPageContent = ({ userId: propUserId, slug: propSlug, embedded = false, initialPage }: UserPageProps) => {
const { userId: paramUserId, username: paramUsername, slug: paramSlug, orgSlug } = useParams<{ userId: string; username: string; slug: string; orgSlug?: string }>();
const navigate = useNavigate();
const { user: currentUser } = useAuth();
@ -80,7 +82,6 @@ const UserPage = ({ userId: propUserId, slug: propSlug, embedded = false, initia
// Determine effective userId - either from prop, existing param, or resolved from username
const userId = propUserId || paramUserId || resolvedUserId;
const slug = propSlug || paramSlug;
const [page, setPage] = useState<Page | null>(initialPage || null);
const [childPages, setChildPages] = useState<{ id: string; title: string; slug: string }[]>([]);
@ -341,17 +342,7 @@ const UserPage = ({ userId: propUserId, slug: propSlug, embedded = false, initia
orgSlug={orgSlug}
onPageUpdate={handlePageUpdate}
onToggleEditMode={() => setIsEditMode(!isEditMode)}
onWidgetRename={() => { }} // Not needed in view mode
// templates={templates} // Do we need templates in view mode? PageActions uses it for Apply Template in dropdown
// If we remove templates state from here, we can't pass it.
// For now let's skip passing templates to View Mode details if it's not critical.
// Or we keep template loading here as well?
// Actually PageActions (in UserPageDetails) DOES have an "Apply Template" option.
// If we want that in View Mode, we need templates.
// But usually "Apply Template" is an edit action.
// If so, maybe PageActions should only show "Apply Template" in Edit Mode?
// Checked PageActions code? Not visible.
// Assuming it's fine to omit templates in view mode for now as per refactor goal to move edit actions out.
onWidgetRename={() => { }}
/>
{/* Content Body */}
@ -405,12 +396,15 @@ const UserPage = ({ userId: propUserId, slug: propSlug, embedded = false, initia
</div>
</div>
</ResizablePanel>
{/* No Right Sidebar in View Mode */}
</ResizablePanelGroup>
</div>
</div >);
};
const UserPage = (props: UserPageProps) => (
<LayoutProvider>
<UserPageContent {...props} />
</LayoutProvider>
);
export default UserPage;

214
packages/ui/src/pages/UserPageEdit.tsx
View File

@ -3,7 +3,7 @@ import { useState, useEffect, lazy, Suspense } from "react";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { PanelLeftClose, PanelLeftOpen, Monitor, Smartphone, Send } from "lucide-react";
import { T, translate } from "@/i18n";
import { GenericCanvas } from "@/components/hmi/GenericCanvas";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
@ -92,6 +92,66 @@ const UserPageEdit = ({
const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
const [selectedPageId, setSelectedPageId] = useState<string | null>(null);
const [showHierarchy, setShowHierarchy] = useState(false);
const [showEmailPreview, setShowEmailPreview] = useState(false);
const [previewMode, setPreviewMode] = useState<'desktop' | 'mobile'>('desktop');
const [showSendEmailDialog, setShowSendEmailDialog] = useState(false);
const [emailRecipient, setEmailRecipient] = useState('cgoflyn@gmail.com');
const [isSendingEmail, setIsSendingEmail] = useState(false);
const handleSendEmail = async () => {
if (!emailRecipient) {
toast.error(translate("Email is required"));
return;
}
setIsSendingEmail(true);
try {
const serverUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || 'http://localhost:3333';
const endpoint = orgSlug
? `${serverUrl}/org/${orgSlug}/user/${page.owner}/pages/${page.slug}/email-send`
: `${serverUrl}/user/${page.owner}/pages/${page.slug}/email-send`;
const res = await fetch(endpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
to: emailRecipient
})
});
if (!res.ok) {
const text = await res.text();
let errorMessage = text;
try {
const json = JSON.parse(text);
if (json && json.error) {
errorMessage = json.error;
}
} catch (e) {
// Not JSON, use text as is
}
throw new Error(errorMessage || 'Failed to send email');
}
const data = await res.json();
if (data.success) {
toast.success(translate("Email sent successfully!"));
setShowSendEmailDialog(false);
// Keep the default or clear it? User workflow preference.
// Let's reset to default for repeated testing
setEmailRecipient('cgoflyn@gmail.com');
} else {
throw new Error(data.error || 'Failed to send email');
}
} catch (err: any) {
console.error("Email send failed", err);
toast.error(translate("Failed to send email: ") + err.message);
} finally {
setIsSendingEmail(false);
}
};
// Auto-collapse sidebar if no TOC headings
@ -114,7 +174,8 @@ const UserPageEdit = ({
redo,
canUndo,
canRedo,
getLoadedPageLayout
getLoadedPageLayout,
loadedPages
} = useLayout();
const [selectedContainerId, setSelectedContainerId] = useState<string | null>(null);
const [editingWidgetId, setEditingWidgetId] = useState<string | null>(null);
@ -456,8 +517,47 @@ const UserPageEdit = ({
return Object.values(typeValues).reduce((acc: any, val: any) => ({ ...acc, ...val }), {});
})();
const handleSave = async () => {
console.log("Saving page");
try {
const { updatePage, upsertLayout } = await import('@/lib/db');
const promises: Promise<any>[] = [];
loadedPages.forEach((layout, id) => {
if (id.startsWith('page-')) {
const pageId = id.replace('page-', '');
// Wrap in RootLayoutData structure to match schema
const rootContent = {
pages: { [id]: layout },
version: '1.0.0',
lastUpdated: Date.now()
};
promises.push(updatePage(pageId, {
content: rootContent
}));
} else if (id.startsWith('layout-')) {
const layoutId = id.replace('layout-', '');
promises.push(upsertLayout({
id: layoutId,
layout_json: layout,
name: layout.name || `Layout ${layoutId}`,
type: 'component'
}));
}
});
await Promise.all(promises);
} catch (error) {
console.error("Failed to save all layouts", error);
throw error;
}
};
return (
<>
<PageRibbonBar
page={page}
isOwner={isOwner}
@ -493,11 +593,15 @@ const UserPageEdit = ({
onToggleTypeFields={handleToggleTypeFields}
showTypeFields={showTypeFields}
hasTypeFields={hasTypeFields}
onSave={handleSave}
showEmailPreview={showEmailPreview}
onToggleEmailPreview={() => setShowEmailPreview(!showEmailPreview)}
onSendEmail={() => setShowSendEmailDialog(true)}
/>
<div className="flex-1 flex overflow-hidden min-h-0">
{/* Sidebar Left */}
{(headings.length > 0 || childPages.length > 0 || showHierarchy) && (
{!showEmailPreview && (headings.length > 0 || childPages.length > 0 || showHierarchy) && (
<Sidebar className={`${isSidebarCollapsed ? 'w-12' : 'w-[300px]'} border-r bg-background/50 h-full hidden lg:flex flex-col shrink-0 transition-all duration-300`}>
<div className={`flex items-center ${isSidebarCollapsed ? 'justify-center' : 'justify-end'} p-2 sticky top-0 bg-background/50 z-10`}>
<Button
@ -566,27 +670,68 @@ const UserPageEdit = ({
<div className="h-full overflow-y-auto scrollbar-custom">
<div className="container mx-auto p-4 md:p-8 max-w-5xl">
{/* Mobile TOC */}
<div className="lg:hidden mb-6">
{headings.length > 0 && <MobileTOC headings={headings} />}
</div>
{!showEmailPreview && (
<div className="lg:hidden mb-6">
{headings.length > 0 && <MobileTOC headings={headings} />}
</div>
)}
<UserPageDetails
page={page}
userProfile={userProfile}
isOwner={isOwner}
isEditMode={true}
userId={userId || ''}
orgSlug={orgSlug}
onPageUpdate={onPageUpdate}
onToggleEditMode={onExitEditMode}
onWidgetRename={setSelectedWidgetId}
templates={templates}
onLoadTemplate={handleLoadTemplate}
/>
{!showEmailPreview && (
<UserPageDetails
page={page}
userProfile={userProfile}
isOwner={isOwner}
isEditMode={true}
userId={userId || ''}
orgSlug={orgSlug}
onPageUpdate={onPageUpdate}
onToggleEditMode={onExitEditMode}
onWidgetRename={setSelectedWidgetId}
templates={templates}
onLoadTemplate={handleLoadTemplate}
/>
)}
{/* Content Body */}
<div>
{page.content && typeof page.content === 'string' ? (
<div className="h-full flex flex-col">
{showEmailPreview ? (
<div className="flex-1 flex flex-col bg-gray-100 dark:bg-gray-900 border rounded-md shadow-sm overflow-hidden">
{/* Preview Toolbar */}
<div className="flex items-center justify-center gap-2 p-2 border-b bg-background">
<Button
variant={previewMode === 'desktop' ? 'secondary' : 'ghost'}
size="sm"
onClick={() => setPreviewMode('desktop')}
title="Desktop View"
>
<Monitor className="h-4 w-4 mr-2" />
Desktop
</Button>
<Button
variant={previewMode === 'mobile' ? 'secondary' : 'ghost'}
size="sm"
onClick={() => setPreviewMode('mobile')}
title="Mobile View"
>
<Smartphone className="h-4 w-4 mr-2" />
Mobile
</Button>
</div>
{/* Preview Container */}
<div className="flex-1 overflow-auto flex justify-center p-4 md:p-8">
<div
className={`transition-all duration-300 bg-white shadow-lg overflow-hidden ${previewMode === 'mobile' ? 'w-[375px] h-[667px] rounded-3xl border-8 border-gray-800' : 'w-full h-full rounded-md'}`}
>
<iframe
src={`${import.meta.env.VITE_SERVER_IMAGE_API_URL || 'http://localhost:3333'}${orgSlug ? `/org/${orgSlug}/user/${page.owner}/pages/${page.slug}/email-preview` : `/user/${page.owner}/pages/${page.slug}/email-preview`}`}
className="w-full h-full border-0"
title="Email Preview"
/>
</div>
</div>
</div>
) : page.content && typeof page.content === 'string' ? (
<div className="prose prose-lg dark:prose-invert max-w-none pb-12">
<MarkdownRenderer content={page.content} />
</div>
@ -615,6 +760,7 @@ const UserPageEdit = ({
onEditWidget={handleEditWidget}
newlyAddedWidgetId={newlyAddedWidgetId}
contextVariables={contextVariables}
onSave={handleSave}
/>
)}
</div>
@ -711,6 +857,32 @@ const UserPageEdit = ({
)}
</DialogContent>
</Dialog>
{/* Send Email Dialog */}
<Dialog open={showSendEmailDialog} onOpenChange={setShowSendEmailDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle><T>Send Email Preview</T></DialogTitle>
</DialogHeader>
<div className="py-4">
<label className="block text-sm font-medium mb-2"><T>Recipient Email</T></label>
<input
type="email"
className="w-full p-2 border rounded-md bg-background"
placeholder="user@example.com"
value={emailRecipient}
onChange={(e) => setEmailRecipient(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSendEmail()}
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="ghost" onClick={() => setShowSendEmailDialog(false)}><T>Cancel</T></Button>
<Button onClick={handleSendEmail} disabled={isSendingEmail}>
{isSendingEmail ? <T>Sending...</T> : <T>Send</T>}
</Button>
</div>
</DialogContent>
</Dialog>
</>
);
};

20
packages/ui/src/types.ts
View File

@ -7,6 +7,22 @@ export interface ImageFile {
description?: string;
}
// ============================================================================
// SHARED TYPES
// ============================================================================
export interface Comment {
id: string;
content: string;
user_id: string;
parent_comment_id: string | null;
created_at: string;
updated_at: string;
likes_count: number;
replies?: Comment[];
depth?: number;
}
// ============================================================================
// MEDIA TYPES - Single source of truth
// ============================================================================
@ -34,6 +50,8 @@ interface BaseMediaItem {
user_id: string;
title: string;
description: string | null;
type?: string;
mediaType?: string;
created_at: string;
updated_at: string;
likes_count: number;
@ -46,6 +64,8 @@ interface BaseMediaItem {
parent_id: string | null; // For versions/variants
position: number;
picture_id?: string; // For feed items that reference a picture
comments?: Comment[]; // Server-enriched comments
comments_count?: number;
author?: {
username: string;
display_name: string;