mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 01:01:09 +02:00

Till-JS c712a2504a feat: integrate uload and picture, unify package naming

- Add uload project with apps/web structure
  - Reorganize from flat to monorepo structure
  - Remove PocketBase binary and local data
  - Update to pnpm and @uload/web namespace

- Add picture project to monorepo
  - Remove embedded git repository

- Unify all package names to @{project}/{app} schema:
  - @maerchenzauber/* (was @storyteller/*)
  - @manacore/* (was manacore-*, manacore)
  - @manadeck/* (was web, backend, manadeck)
  - @memoro/* (was memoro-web, landing, memoro)
  - @picture/* (already unified)
  - @uload/web

- Add convenient dev scripts for all apps:
  - pnpm dev:{project}:web
  - pnpm dev:{project}:landing
  - pnpm dev:{project}:mobile
  - pnpm dev:{project}:backend

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-25 04:00:36 +01:00

3.1 KiB

Raw Blame History

Cards on Profile Page - Implementation Report

Date: December 17, 2024
Status: Implemented with simplified approach

Solution Overview

Successfully implemented cards display on user profile pages by creating a simplified rendering approach that avoids complex type imports causing SSR issues.

Changes Made

1. Server-Side Data Loading (`/src/routes/p/[username]/+page.server.ts`)

Removed complex Card type import that was causing 500 errors
Implemented direct PocketBase query without type dependencies
Added safe JSON parsing for card config/metadata fields
Filter cards by page="profile" and visibility="public"

2. Client-Side Rendering (`/src/routes/p/[username]/+page.svelte`)

Removed dependency on complex CardRenderer component
Created inline simplified card rendering for three modes:
- Beginner Mode: Renders modules (header, content, media, links)
- Advanced Mode: Shows card name and description
- Expert Mode: Shows card name and description
Added "Featured Cards" section above links

3. Card Management (`/src/routes/(app)/my/cards/+page.svelte`)

Updated to load ALL user cards, not just profile ones
Existing profile toggle functionality allows users to control visibility
Added stats showing total cards vs cards on profile
Toggle automatically sets visibility to public when adding to profile

Key Features

Profile Page

Cards appear in a responsive grid (1-3 columns)
Simple module-based rendering for beginner cards
Fallback display for advanced/expert cards
Only shows public cards marked for profile display

Management Page

Checkbox to toggle "Show on Profile"
Warning if card is not public but set for profile
Drag-and-drop reordering still functional
Direct link to view profile page

Technical Approach

Why This Works

No Type Imports: Server-side code doesn't import complex Card types
Direct Database Access: Uses PocketBase directly with JSON parsing
Simplified Rendering: Inline rendering without complex components
Progressive Enhancement: Basic display with room for improvements

Trade-offs

Less feature-rich display than full CardRenderer
Advanced/Expert cards show metadata only (not full rendering)
No template variable replacement
No custom HTML/CSS rendering

Future Improvements

Short Term

Add client-side CardRenderer for better display
Implement template variable replacement
Add preview mode in card management

Long Term

Refactor Card type system for SSR compatibility
Create server-safe card components
Implement full rendering for all card modes
Add card analytics and interactions

Testing

Build succeeds without errors: ✅
Profile page loads without 500 error: ✅
Cards can be toggled for profile display: ✅
Only public profile cards appear: ✅
Responsive layout works: ✅

Conclusion

The simplified approach successfully displays cards on profile pages while avoiding the complex type system issues. This provides a working foundation that can be enhanced incrementally without breaking production.

3.1 KiB Raw Blame History