+
+ );
+}
diff --git a/frontend/src/components/RichTextEditor.tsx b/frontend/src/components/RichTextEditor.tsx
new file mode 100644
index 000000000..5e0369ce5
--- /dev/null
+++ b/frontend/src/components/RichTextEditor.tsx
@@ -0,0 +1,191 @@
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Link from '@tiptap/extension-link';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Image from '@tiptap/extension-image';
+import {
+ Bold,
+ Italic,
+ Underline as UnderlineIcon,
+ List,
+ ListOrdered,
+ AlignLeft,
+ AlignCenter,
+ AlignRight,
+ Link as LinkIcon,
+ Unlink,
+} from 'lucide-react';
+
+interface RichTextEditorProps {
+ content: string;
+ onChange: (html: string) => void;
+ placeholder?: string;
+}
+
+export function RichTextEditor({ content, onChange, placeholder }: RichTextEditorProps) {
+ const editor = useEditor({
+ extensions: [
+ StarterKit.configure({
+ heading: false,
+ codeBlock: false,
+ code: false,
+ }),
+ Underline,
+ Link.configure({
+ openOnClick: false,
+ HTMLAttributes: {
+ target: '_blank',
+ rel: 'noopener noreferrer',
+ },
+ }),
+ TextAlign.configure({
+ types: ['paragraph'],
+ }),
+ TextStyle,
+ Color,
+ Image.configure({
+ HTMLAttributes: {
+ style: 'max-width: 100%; height: auto;',
+ },
+ }),
+ ],
+ content,
+ onUpdate: ({ editor }) => {
+ onChange(editor.getHTML());
+ },
+ editorProps: {
+ attributes: {
+ class: 'prose prose-invert prose-sm max-w-none focus:outline-none min-h-[120px] px-3 py-2',
+ placeholder: placeholder || '',
+ },
+ },
+ });
+
+ if (!editor) {
+ return null;
+ }
+
+ const ToolbarButton = ({
+ onClick,
+ isActive = false,
+ children,
+ title,
+ }: {
+ onClick: () => void;
+ isActive?: boolean;
+ children: React.ReactNode;
+ title: string;
+ }) => (
+
+ );
+
+ const setLink = () => {
+ const url = window.prompt('Enter URL:');
+ if (url) {
+ editor.chain().focus().setLink({ href: url }).run();
+ }
+ };
+
+ return (
+
+ {/* Header */}
+
+
+ {/* Image Lightbox */}
+ {selectedImageIndex !== null && allImages[selectedImageIndex] && (
+
+
+
+ {/* Content */}
+
+
+ + Project Page + {archiveName && - {archiveName}} +
+
+ {!isEditing && hasContent && (
+
+ )}
+ {isEditing && (
+ <>
+
+
+
+ )}
+
+
+
+ {isLoading && (
+
+
+
+
+ )}
+
+ {error && (
+
+ Failed to load project page data
+
+ )}
+
+ {projectPage && !hasContent && (
+
+
+ )}
+
+ {projectPage && hasContent && (
+ No project page data found in this 3MF file.
++ Project pages are typically included in files downloaded from MakerWorld. +
+
+ {/* Title & Designer */}
+
+ )}
+
+ {isEditing ? (
+ setEditData({ ...editData, title: e.target.value })}
+ placeholder="Title"
+ className="w-full bg-bambu-dark border border-bambu-dark-tertiary rounded-lg px-4 py-2 text-white text-xl font-semibold"
+ />
+ ) : (
+ projectPage.title && (
+
+
+ {/* Description */}
+ {(projectPage.description || isEditing) && (
+ {projectPage.title}
+ ) + )} + +
+ {isEditing ? (
+
+
+
+ ) : (
+ projectPage.designer && (
+
+ )
+ )}
+
+ {projectPage.creation_date && (
+
+
+ )}
+
+ {isEditing ? (
+
+
+ ) : (
+ projectPage.license && (
+
+
+ )
+ )}
+
+ {projectPage.origin && (
+
+ {projectPage.origin}
+
+ )}
+
+ setEditData({ ...editData, description: html })}
+ placeholder="Enter description..."
+ />
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Profile Info */}
+ {(projectPage.profile_title || projectPage.profile_description || isEditing) && (
+ + Description +
+ {isEditing ? ( +
+
+ )}
+
+ {/* Image Gallery */}
+ {allImages.length > 0 && (
+ + Print Profile +
+ {isEditing ? ( +
+ setEditData({ ...editData, profile_title: e.target.value })}
+ placeholder="Profile Title"
+ className="w-full bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded px-3 py-2 text-white"
+ />
+ setEditData({ ...editData, profile_description: html })}
+ placeholder="Profile description..."
+ />
+
+ ) : (
+ <>
+ {projectPage.profile_title && (
+ {projectPage.profile_title}
+ )} + {projectPage.profile_description && ( + + )} + {projectPage.profile_user_name && ( ++ by {projectPage.profile_user_name} +
+ )} + + )} +
+
+
+
+ )}
+
+ {/* MakerWorld Link */}
+ {projectPage.design_model_id && (
+
+ )}
+
+
+
+ {allImages.map((img, index) => (
+
+ ))}
+
+ setSelectedImageIndex(null)}
+ >
+
+
+ ![{allImages[selectedImageIndex].name}]({allImages[selectedImageIndex].url})
e.stopPropagation()}
+ />
+
+
+
+
+
+
+ )}
+
+ {selectedImageIndex + 1} / {allImages.length}
+
+
+ {/* Toolbar */}
+
+ );
+}
diff --git a/frontend/src/pages/ArchivesPage.tsx b/frontend/src/pages/ArchivesPage.tsx
index 0b887f26e..cf88b4e44 100644
--- a/frontend/src/pages/ArchivesPage.tsx
+++ b/frontend/src/pages/ArchivesPage.tsx
@@ -33,6 +33,7 @@ import {
ScanSearch,
QrCode,
Camera,
+ FileText,
} from 'lucide-react';
import { api } from '../api/client';
import type { Archive } from '../api/client';
@@ -48,6 +49,7 @@ import { BatchTagModal } from '../components/BatchTagModal';
import { CalendarView } from '../components/CalendarView';
import { QRCodeModal } from '../components/QRCodeModal';
import { PhotoGalleryModal } from '../components/PhotoGalleryModal';
+import { ProjectPageModal } from '../components/ProjectPageModal';
import { useToast } from '../contexts/ToastContext';
function formatFileSize(bytes: number): string {
@@ -95,6 +97,7 @@ function ArchiveCard({
const [showTimelapse, setShowTimelapse] = useState(false);
const [showQRCode, setShowQRCode] = useState(false);
const [showPhotos, setShowPhotos] = useState(false);
+ const [showProjectPage, setShowProjectPage] = useState(false);
const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
const timelapseScanMutation = useMutation({
@@ -210,6 +213,11 @@ function ArchiveCard({
onClick: () => setShowPhotos(true),
disabled: !archive.photos?.length,
},
+ {
+ label: 'Project Page',
+ icon:
+ editor.chain().focus().toggleBold().run()}
+ isActive={editor.isActive('bold')}
+ title="Bold"
+ >
+
+ editor.chain().focus().toggleItalic().run()}
+ isActive={editor.isActive('italic')}
+ title="Italic"
+ >
+
+ editor.chain().focus().toggleUnderline().run()}
+ isActive={editor.isActive('underline')}
+ title="Underline"
+ >
+
+
+
+
+ editor.chain().focus().toggleBulletList().run()}
+ isActive={editor.isActive('bulletList')}
+ title="Bullet List"
+ >
+
+ editor.chain().focus().toggleOrderedList().run()}
+ isActive={editor.isActive('orderedList')}
+ title="Numbered List"
+ >
+
+
+
+
+ editor.chain().focus().setTextAlign('left').run()}
+ isActive={editor.isActive({ textAlign: 'left' })}
+ title="Align Left"
+ >
+
+ editor.chain().focus().setTextAlign('center').run()}
+ isActive={editor.isActive({ textAlign: 'center' })}
+ title="Align Center"
+ >
+
+ editor.chain().focus().setTextAlign('right').run()}
+ isActive={editor.isActive({ textAlign: 'right' })}
+ title="Align Right"
+ >
+
+
+
+
+
+
+ {editor.isActive('link') && (
+ editor.chain().focus().unsetLink().run()}
+ title="Remove Link"
+ >
+
+ )}
+
+
+ {/* Editor */}
+