generated from nhcarrigan/template
naomi
888a3fbd97
## Summary This PR implements a comprehensive set of polish features including: - đ About page - đ Series support for Books and Games - đ Leaderboard system - đ° Activity feed - âąī¸ Time tracking across all media - đ¯ Entity detail pages with navigation - đ¨ Simplified card design - âŋ WCAG 2.1 Level AA accessibility compliance - đ Comprehensive security improvements ## Issues Closed Closes #51 Closes #52 Closes #53 Closes #54 Closes #55 Closes #56 Closes #57 ## Features Implemented ### About Page (#51) - Created comprehensive About page with purpose, features, how-to-use guide - Tech stack, credits, contact information, and version details - Beautiful styling matching witchy aesthetic - Added "âšī¸ About" link to navigation dropdown ### Series Support (#54) - Added `series` and `seriesOrder` fields to Books and Games - Series display on cards with "đ Series Name #Order" format - Series input fields in all book/game forms (add + edit) - Backend endpoints: `/books/series/:name` and `/games/series/:name` - Fields pre-populate when editing ### Leaderboard (#55) - Comprehensive leaderboard with 4 categories: - Top Suggestions (by count + acceptance rate) - Top Likes (by total likes given) - Top Comments (by total comments) - Overall Leaders (weighted by achievement points) - Beautiful tabbed UI with medals for top 3 (đĨđĨđĨ) - Privacy-aware (only shows users with `profilePublic: true`) - Current user highlighting - Added "đ Leaderboard" link to navigation ### Activity Feed (#56) - Timeline-style activity feed showing recent user activity - 4 activity types: Suggestions, Likes, Comments, Achievements - Relative timestamps ("5m ago", "2h ago", "3d ago") - User avatars and badges (STAFF/MOD/VIP) - Comment previews with proper HTML sanitization - Pagination with "Load More" button - Added "đ° Activity Feed" link to navigation ### Time Tracking (#57) - Added `timeSpent` field (stored in minutes) to all media types - Hours/minutes split input in all forms (add + edit) - Smart formatting (shows hours, minutes, or both) - Time display on all media cards with unique icons: - Games: "Time Played âąī¸" - Books: "Reading Time đ" - Music: "Listening Time đĩ" - Shows: "Watch Time đē" - Manga: "Reading Time đ" ### Entity Detail Pages - Created 6 complete detail components for all entity types - Features: full entity info, comments, likes, ratings, time tracking - Fixed activity feed and homepage links to point to detail pages - Each component has entity-specific colour scheme - Loading states and error handling - Breadcrumb navigation ### Simplified Card Design - Cards now show only essential information: - Cover/poster image - Title (clickable link to detail page) - Primary identifier (author/artist/platform) - Status badge - Rating stars - Like button - Admin actions (Edit/Delete - admin only) - Removed from cards: series info, time tracking, notes, tags, links, dates, comments - All detailed information accessible on entity detail pages - Much cleaner, more scannable browsing experience ### Accessibility Improvements (#53) - â **Keyboard Navigation**: Skip-to-main-content link, enhanced focus indicators - â **Screen Reader Support**: ARIA labels, live regions, proper roles - â **Visual Accessibility**: High contrast focus (4.5:1 ratio), prefers-reduced-motion support - â **Form Accessibility**: Proper labels, validation feedback, error announcements - â **Content Structure**: Heading hierarchy, semantic HTML, skip navigation - â **WCAG 2.1 Level AA Compliance**: Passes all critical success criteria ### Security Improvements - đ **Input Validation**: Comprehensive validation across all services - URL validation (prevents javascript:, data:, vbscript:, file: URLs) - String length limits (prevents DoS attacks) - Rating validation (0-10 integers only) - Slug validation (prevents XSS) - đ **Enhanced Security Headers**: CSP, HSTS, X-Frame-Options, Referrer-Policy - đ **Improved Logging**: Replaced console.error with structured logging - đ **Security Documentation**: Created comprehensive SECURITY_AUDIT_REPORT.md - đ **OWASP Top 10 Coverage**: Protected against all major vulnerabilities ## Technical Details ### Files Changed - **About Page**: 5 files, 459 insertions - **Series Support**: 9 files, 169 insertions - **Leaderboard**: 8 files, 450+ insertions - **Activity Feed**: 7 files, 400+ insertions - **Time Tracking**: 11 files, 500+ insertions - **Entity Detail Pages**: 6 files, 800+ insertions - **Simplified Cards**: 6 files, 299 insertions, 1,877 deletions - **Accessibility**: 11 files, 291 insertions, 84 deletions - **Security**: 12 files, 997 insertions ### Database Changes - Added `series` and `seriesOrder` to Book and Game models - Added `timeSpent` to all media models (Game, Book, Music, Show, Manga) - Added `Achievement`, `UserAchievement` models (from previous PR) - All changes backward compatible ### API Changes - New endpoints: `/leaderboard`, `/activity`, `/achievements/*`, `/*/series/:name` - Enhanced validation on all create/update endpoints - Improved security headers - All changes backward compatible ### Frontend Changes - New routes: `/about`, `/leaderboard`, `/activity`, `/:type/:id` (detail pages) - Simplified card components across all media types - Enhanced accessibility throughout - Improved navigation structure ## Testing Performed - â Build succeeds with no errors - â TypeScript compilation passes - â All validation patterns tested - â Accessibility features verified - â Security improvements confirmed ## Security Rating - **Before**: 6.5/10 - **After**: 9/10 - **After dependency updates**: 9.5/10 (recommended: run `pnpm update`) ## Action Items **Recommended** - Update development dependencies: ```bash pnpm update @modelcontextprotocol/sdk tar axios minimatch systeminformation ``` ## Credits All features implemented by Hikari with design direction and approval from Naomi! đ đ¸ This pull request represents comprehensive polish work across the entire application! ⨠Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #59 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
110 lines
2.3 KiB
HTML
110 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Offline - Naomi's Library</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.offline-container {
|
|
text-align: center;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.offline-icon {
|
|
font-size: 5rem;
|
|
margin-bottom: 1.5rem;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #9d4edd;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 2rem;
|
|
color: #b0b0b0;
|
|
}
|
|
|
|
.retry-button {
|
|
background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
|
|
color: white;
|
|
border: none;
|
|
padding: 1rem 2rem;
|
|
font-size: 1rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.retry-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(157, 78, 221, 0.3);
|
|
}
|
|
|
|
.retry-button:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.info-text {
|
|
margin-top: 2rem;
|
|
font-size: 0.9rem;
|
|
color: #808080;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="offline-container">
|
|
<div class="offline-icon">đĄ</div>
|
|
<h1>You're Offline</h1>
|
|
<p>
|
|
Oops! It looks like you've lost your internet connection.
|
|
Some features of Naomi's Library require an active connection.
|
|
</p>
|
|
<button class="retry-button" onclick="location.reload()">
|
|
Try Again
|
|
</button>
|
|
<p class="info-text">
|
|
Cached pages and data will be available once you're back online.
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-retry when back online
|
|
window.addEventListener('online', () => {
|
|
location.reload();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|