- {testUsers.map((user) => (
+ {filteredUsers.map((user) => (
{/* Dev Quick Login */}
-
+
+
+
+ );
+ }
+
+ const percentUsed = usage.percent_used;
+ const barColor =
+ percentUsed >= 95
+ ? 'bg-red-500'
+ : percentUsed >= 80
+ ? 'bg-yellow-500'
+ : 'bg-primary-500';
+
+ return (
+
+
+ );
+};
+
+// ============================================================================
+// Album Card Component
+// ============================================================================
+
+interface AlbumCardProps {
+ album: Album;
+ isSelected: boolean;
+ onSelect: () => void;
+ onEdit: () => void;
+ onDelete: () => void;
+}
+
+const AlbumCard: React.FC
+
+ Storage: {usage.used_display} / {usage.total_display}
+
+
+ {usage.file_count} files
+
+
+
+
+
+ {percentUsed >= 80 && (
+ + {percentUsed >= 95 + ? 'Storage almost full! Delete files or upgrade your plan.' + : 'Storage usage is getting high.'} +
+ )} +
+
+ );
+};
+
+// ============================================================================
+// Media Thumbnail Component
+// ============================================================================
+
+interface MediaThumbnailProps {
+ file: MediaFile;
+ isSelected: boolean;
+ onSelect: () => void;
+ onPreview: () => void;
+}
+
+const MediaThumbnail: React.FC
+ {album.cover_url ? (
+ 
+ ) : (
+
+
+
+ )}
+
+
+
+ {/* Menu button */}
+ {album.name}
++ {album.file_count} {album.file_count === 1 ? 'file' : 'files'} +
+
+
+ {showMenu && (
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+// ============================================================================
+// Image Preview Modal
+// ============================================================================
+
+interface ImagePreviewModalProps {
+ file: MediaFile | null;
+ isOpen: boolean;
+ onClose: () => void;
+ onUpdate: (id: number, data: { alt_text?: string; album?: number | null }) => void;
+ onDelete: (id: number) => void;
+ albums: Album[];
+}
+
+const ImagePreviewModal: React.FC
+ 
+
+
+ {/* Checkbox for selection */}
+
+
+ {/* File info overlay */}
+
+
+ {file.filename}
+{formatFileSize(file.file_size)}
+
+ {/* Image preview */}
+
+
+
+
+
+
+ {/* Details form */}
+
+ setAltText(e.target.value)}
+ placeholder="Describe this image for accessibility"
+ />
+
+
+
+
+
+ + Filename +
+{file.filename}
+
+
+
+
+
+ Size
+{formatFileSize(file.file_size)}
+
+
+ Dimensions
++ {file.width && file.height ? `${file.width} x ${file.height}` : 'Unknown'} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+ setError(null)}>
+
+ )}
+
+ {/* Bulk actions bar */}
+ {selectedFiles.size > 0 && (
+ {
+ setAlbumModalOpen(false);
+ setEditingAlbum(null);
+ }}
+ onSave={handleAlbumSave}
+ />
+
+ {/* Image preview modal */}
+ setPreviewFile(null)}
+ onUpdate={(id, data) => {
+ updateFileMutation.mutate({ id, data });
+ setPreviewFile(null);
+ }}
+ onDelete={(id) => {
+ deleteFileMutation.mutate(id);
+ setPreviewFile(null);
+ }}
+ albums={albums}
+ />
+
+ );
+};
+
+export default MediaGalleryPage;
diff --git a/frontend/src/pages/PageEditor.tsx b/frontend/src/pages/PageEditor.tsx
index 933e3a5..e39abb0 100644
--- a/frontend/src/pages/PageEditor.tsx
+++ b/frontend/src/pages/PageEditor.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
import { Puck, Render } from "@measured/puck";
import "@measured/puck/puck.css";
import { puckConfig, getEditorConfig, renderConfig } from "../puck/config";
import { usePages, useUpdatePage, useCreatePage, useDeletePage } from "../hooks/useSites";
-import { Loader2, Plus, Trash2, FileText, Monitor, Tablet, Smartphone, Settings, Eye, X, ExternalLink, Save, RotateCcw } from "lucide-react";
+import { Loader2, Plus, Trash2, FileText, Monitor, Tablet, Smartphone, Settings, Eye, X, ExternalLink, Save, RotateCcw, Maximize2, Minimize2 } from "lucide-react";
import toast from 'react-hot-toast';
import { useEntitlements, FEATURE_CODES } from '../hooks/useEntitlements';
@@ -26,6 +26,7 @@ export const PageEditor: React.FC = () => {
const deletePage = useDeletePage();
const [data, setData] = useState
+
+
+ {/* Storage usage */}
+
+ {viewMode === 'files' && (
+
+ )}
+
+
+
+
+ + {viewMode === 'albums' + ? t('gallery.title', 'Media Gallery') + : currentAlbum?.name || t('gallery.uncategorized', 'Uncategorized')} +
+ {viewMode === 'files' && currentAlbum?.description && ( ++ {currentAlbum.description} +
+ )} +
+ {viewMode === 'albums' && (
+
+ )}
+
+ handleFileUpload(e.target.files)}
+ />
+
+ {error}
+
+
+ {selectedFiles.size} selected
+
+
+
+
+
+
+ )}
+
+ {/* Content */}
+
+ {viewMode === 'albums' ? (
+ // Albums view
+
+
+ {/* Album modal */}
+
+ {/* Quick access buttons */}
+
+ ) : (
+ // Files view
+
+
+
+
+
+ {/* Albums grid */}
+ {albumsLoading ? (
+
+ {[...Array(5)].map((_, i) => (
+
+ ) : albums.length === 0 ? (
+
+
+
+ ))}
+
+
+
+
+
+
+ ) : (
+ + {t('gallery.noAlbums', 'No albums yet')} +
++ {t('gallery.noAlbumsDesc', 'Create an album to organize your images')} +
+ +
+ {albums.map((album) => (
+ handleAlbumClick(album.id)}
+ onEdit={() => {
+ setEditingAlbum(album);
+ setAlbumModalOpen(true);
+ }}
+ onDelete={() => handleDeleteAlbum(album)}
+ />
+ ))}
+
+ )}
+
+ {filesLoading ? (
+
+ )}
+
+ {[...Array(12)].map((_, i) => (
+
+ ) : files.length === 0 ? (
+
+
+
+ ))}
+
+
+ ) : (
+ + {t('gallery.noFiles', 'No files here')} +
++ {t('gallery.dropFiles', 'Drop files here or click Upload')} +
+ +
+ {files.map((file) => (
+ toggleFileSelection(file.id)}
+ onPreview={() => setPreviewFile(file)}
+ />
+ ))}
+
+ )}
+ No page found. Please contact support.
;
}
- if (!data) return null;
+ // Wait for data to be loaded for the current page
+ const isDataReady = data && loadedPageId === String(currentPage.id);
// Display max pages as string for UI (null = unlimited shown as ∞)
const maxPagesDisplay = maxPagesLimit === null ? '∞' : maxPagesLimit;
@@ -252,7 +301,7 @@ export const PageEditor: React.FC = () => {