feat: base64 uploads, reusable forms, Discord roles, and UX improvements #66

Merged

naomi merged 8 commits from fix/base64 into main 2026-02-20 20:32:52 -08:00

Conversation 0 Commits 8 Files Changed 30

+4359 -328

hikari commented 2026-02-20 20:18:27 -08:00

Owner

Copy Link

Copy Source

Summary

This PR includes multiple feature additions and fixes to improve the library application:

🎨 Base64 Image Upload Support

• Fixed Fastify body limit (1MB → 10MB) to accommodate base64-encoded images
• Corrected base64 size calculation and validation logic
• Improved error handling with proper 400 status codes and helpful messages
• Removed duplicate validation that was blocking uploads
• Users can now upload cover images up to 5MB (decoded size)

📝 Reusable Form Components

• Created 6 form components: GameForm, BookForm, MusicForm, ShowForm, MangaForm, ArtForm
• All forms support both 'add' and 'edit' modes with pre-population
• Integrated inline editing into all detail views (edit/delete buttons)
• Enhanced admin suggestions workflow with full forms instead of basic modals
• Added scroll-to-top when clicking edit in list views for better UX

🖼️ Default Cover Image

• Added beautiful library reading image as default cover for all media types
• Fixed static asset serving to use correct MIME types
• Updated all 12 components (6 list views + 6 detail views) to always show images

🔒 Tiered Rate Limiting

• Unauthenticated users: 100 requests/minute
• Authenticated users: 500 requests/minute (5x more lenient)
• Admin users: No rate limits (complete bypass via allowList)

🎮 Discord Integration

• Auto-assign library member role to users in NHCarrigan Discord server
• Checks server membership on every login
• Only assigns role if user is in server and doesn't have it yet
• Graceful error handling without blocking login
• Similar pattern to badge refresh flow

📚 Documentation

• Added comprehensive CLAUDE.md with:
  • Project structure and tech stack
  • Development workflow and commands
  • Database schema documentation
  • Authentication flow details
  • Security features
  • Code style conventions
  • Common gotchas and solutions

Test Plan

• Base64 image uploads work for cover images up to 5MB
• Helpful error messages appear for validation failures
• Edit/delete buttons appear on all detail views for admin users
• Inline edit forms display and save correctly
• Admin suggestions workflow uses full forms for all media types
• Scroll-to-top works when editing from list views
• Default cover image displays when no cover is provided
• Static assets serve with correct MIME types
• Rate limiting works correctly for different user types
• Discord role assignment works on login
• All builds pass without errors
• No TypeScript errors

Related Issues

Closes #65 - Base64 image upload issue

✨ This pull request was created with help from Hikari~ 🌸

## Summary This PR includes multiple feature additions and fixes to improve the library application: ### 🎨 Base64 Image Upload Support - Fixed Fastify body limit (1MB → 10MB) to accommodate base64-encoded images - Corrected base64 size calculation and validation logic - Improved error handling with proper 400 status codes and helpful messages - Removed duplicate validation that was blocking uploads - Users can now upload cover images up to 5MB (decoded size) ### 📝 Reusable Form Components - Created 6 form components: `GameForm`, `BookForm`, `MusicForm`, `ShowForm`, `MangaForm`, `ArtForm` - All forms support both 'add' and 'edit' modes with pre-population - Integrated inline editing into all detail views (edit/delete buttons) - Enhanced admin suggestions workflow with full forms instead of basic modals - Added scroll-to-top when clicking edit in list views for better UX ### 🖼️ Default Cover Image - Added beautiful library reading image as default cover for all media types - Fixed static asset serving to use correct MIME types - Updated all 12 components (6 list views + 6 detail views) to always show images ### 🔒 Tiered Rate Limiting - Unauthenticated users: 100 requests/minute - Authenticated users: 500 requests/minute (5x more lenient) - Admin users: No rate limits (complete bypass via allowList) ### 🎮 Discord Integration - Auto-assign library member role to users in NHCarrigan Discord server - Checks server membership on every login - Only assigns role if user is in server and doesn't have it yet - Graceful error handling without blocking login - Similar pattern to badge refresh flow ### 📚 Documentation - Added comprehensive CLAUDE.md with: - Project structure and tech stack - Development workflow and commands - Database schema documentation - Authentication flow details - Security features - Code style conventions - Common gotchas and solutions ## Test Plan - [x] Base64 image uploads work for cover images up to 5MB - [x] Helpful error messages appear for validation failures - [x] Edit/delete buttons appear on all detail views for admin users - [x] Inline edit forms display and save correctly - [x] Admin suggestions workflow uses full forms for all media types - [x] Scroll-to-top works when editing from list views - [x] Default cover image displays when no cover is provided - [x] Static assets serve with correct MIME types - [x] Rate limiting works correctly for different user types - [x] Discord role assignment works on login - [x] All builds pass without errors - [x] No TypeScript errors ## Related Issues Closes #65 - Base64 image upload issue ✨ This pull request was created with help from Hikari~ 🌸

hikari added 7 commits 2026-02-20 20:18:27 -08:00

fix: resolve base64 image upload issues ... 3668a67a62

This resolves issue #65 by addressing multiple problems that were preventing base64-encoded cover images from being uploaded:

1. Increased Fastify body limit from 1MB to 10MB to accommodate base64-encoded images
2. Removed duplicate coverImage string length validation that was blocking base64 data URLs
3. Fixed base64 size calculation to properly extract and measure just the base64 data portion
4. Updated validateDataUrl regex to allow whitespace in base64 strings
5. Added proper error handling with 400 status codes and helpful error messages instead of 500 errors

Users can now successfully upload cover images as base64 data URLs up to 5MB (decoded size) and will receive clear validation error messages if uploads fail.

Closes #65

docs: add comprehensive CLAUDE.md project documentation ... 1fd2086afe

Add detailed project documentation for AI assistants covering:
- Git commit guidelines and user permissions
- Project structure and technology stack
- Database schema with all models
- Authentication flow with Discord OAuth
- Image upload handling (base64 and regular URLs)
- Development workflow and scripts
- CI/CD pipeline configuration
- Configuration standards (TypeScript, ESLint, Jest)
- Secrets management with 1Password CLI
- Security features and API route structure
- Code style conventions and common gotchas
- Deployment instructions

This documentation will help AI assistants understand the project architecture, follow established patterns, and work effectively within the codebase.

feat: implement tiered rate limiting with admin bypass ... f40f917bc5

Update rate limiting to be more lenient for authenticated users and bypass limits entirely for admin users:

- Unauthenticated users: 100 requests/minute (original limit)
- Authenticated users: 500 requests/minute (5x increase)
- Admin users: No rate limits (completely bypassed via allowList)

This allows the admin to interact with the library without restrictions whilst still protecting against abuse from unauthenticated users. Authenticated users get a much more generous limit for better user experience.

Uses @fastify/rate-limit's allowList and dynamic max options to implement the tiered system.

feat: add reusable form components and inline editing for all media types ... b781034fce

Created reusable form components for all media types (Game, Book, Music, Show,
Manga, Art) to provide a consistent editing experience across the application.

Changes:
- Created 6 new form components in shared folder for all media types
- Each form component supports both 'add' and 'edit' modes
- Forms include all fields: title, author/artist/platform, status, dates,
  rating, time spent, notes, cover images, tags, and links
- Added inline editing to all detail views using form components
- Detail views now show edit form inline instead of navigating away
- Integrated form components into admin suggestions workflow
- Admins can now review and edit all suggestion details before accepting
- Added scroll-to-top functionality when clicking edit in all list views
- Ensures edit form is visible when opened from paginated lists

Benefits:
- Consistent UX across all media types
- Better editing experience with inline forms
- Improved admin suggestion workflow with full editing capabilities
- No route navigation for edits (better for SEO and UX)
- All forms follow the same styling and interaction patterns

Co-Authored-By: Naomi Carrigan <commits@nhcarrigan.com>

feat: add default cover image for all media types ... d74a342f63

Added a beautiful default cover image featuring Naomi reading in her cozy
library, which will be displayed whenever a media item doesn't have a cover
image provided.

Changes:
- Added default-cover.jpg to frontend public/assets directory
- Updated all list components (games, books, music, shows, manga, art) to
  always display an image using the default as fallback
- Updated all detail components to always show cover section with default
  fallback
- Removed conditional rendering of cover images - now always visible
- Properly handles different property names (coverImage, coverArt, imageUrl)

Benefits:
- Consistent visual appearance across all media types
- No more empty spaces where cover images would be
- Better UX with uniform card layouts
- Beautiful placeholder that matches the library theme

Co-Authored-By: Naomi Carrigan <commits@nhcarrigan.com>

fix: allow static assets to be served correctly ... e6b6131134

Fixed the not-found handler to exclude /assets routes, allowing static assets
like images to be served with correct MIME types instead of being caught by
the SPA fallback handler.

Changes:
- Updated setNotFoundHandler to check for /assets prefix
- Assets are now served directly by fastify-static with correct content-type
- Only non-API, non-asset routes fall through to index.html

This fixes the default cover image not displaying because it was being served
as text/html instead of image/jpeg.

Co-Authored-By: Naomi Carrigan <commits@nhcarrigan.com>

feat: auto-assign Discord role to library members ... 536cf6e7f9

Implemented automatic Discord role assignment for users who are
members of the NHCarrigan server. This happens on every login:

- Check if user is in Discord server (ID: 1354624415861833870)
- Fetch user's current roles via Discord API
- Assign library member role if they don't have it yet
- Graceful error handling without blocking login

Uses Discord Bot API with proper permissions to manage roles.
Similar pattern to badge refresh on login.

Environment variables added:
- DISCORD_BOT_TOKEN: Bot token for Discord API calls
- LIBRARY_ROLE_ID: Role ID to assign (1474616681023279236)

naomi added 1 commit 2026-02-20 20:26:38 -08:00

fix: rename form output bindings to avoid DOM event conflicts ... 309a20f694

Renamed @Output() properties in all form components from 'save' and
'cancel' to 'formSubmit' and 'formCancel' to resolve ESLint rule
@angular-eslint/no-output-native which prohibits output bindings
named after standard DOM events.

Updated all template bindings in detail components and admin
suggestions to use the new output names.

- Renamed save → formSubmit in all 6 form components
- Renamed cancel → formCancel in all 6 form components
- Updated bindings in 6 detail components
- Updated bindings in admin suggestions component

naomi merged commit 983b78b0e9 into main 2026-02-20 20:32:52 -08:00

naomi deleted branch fix/base64 2026-02-20 20:32:53 -08:00

naomi referenced this issue from a commit 2026-02-20 20:32:53 -08:00

feat: base64 uploads, reusable forms, Discord roles, and UX improvements (#66)

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

aspect

code

Concerns the software code in the repository

aspect

dx

Concerns developers' experience with the codebase

aspect

interface

Concerns end-users' experience with the software

aspect

text

Concerns the documentation material in the repository

contribute

good first issue

A great opportunity for a team member to learn a new codebase

contribute

help wanted

Open for anyone on our team to grab.

contribute

staff only

Restricted to our executive leadership.

goal

addition

Addition of new feature

goal

fix

Bug fix

goal

improvement

Improvement to an existing feature

points

1

Very simple issue requiring minimal effort and complexity.

points

13

Extremely complex issue representing major undertakings. Should be broken down into smaller pieces.

points

2

Simple issue that requires a bit more thought or investigation.

points

3

Moderate complexity issue requiring more substantial work.

points

5

Complex issue requiring significant effort and expertise.

points

8

Very complex issue requiring extensive work and deep expertise.

priority

critical

1

Must be fixed ASAP

priority

high

2

Stalls work on the project or its dependents

priority

low

4

Low priority and doesn't need to be rushed

priority

medium

3

Not blocking but should be fixed soon

priority

none

5

No priority, should only be performed when a developer is available

status

awaiting triage

Has not been triaged & therefore, not ready for work

status

blocked

Blocked and therefore not ready for work

status

discarded

Will not be worked on

status

discontinued

Not suitable for work as repo is in maintenance

status

label work required

Needs proper labelling before it can be worked on

status

ready for dev

Ready for work

status

ticket work required

Needs more details before it can be worked on

talk

discussion

Open for discussions and feedback

talk

question

Can be resolved with an answer

time

1 day

Approximately one full day of development work.

time

1-2 weeks

One to two weeks of focused development effort.

time

2-3 days

Two to three days of development effort.

time

4-5 days

Approximately one week of development work.

time

<1 day

Less than one day of focused work. Quick fixes or simple tasks.

time

>2 weeks

More than two weeks of development work. Must be broken down into smaller pieces.

No Label

Milestone

No items

No Milestone

Assignees

Clear assignees

gurkirat hanna (Hanna Rose) hikari (Hikari) minori (Minori) naomi (Naomi Carrigan) rain teklu tim

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: nhcarrigan/library#66