- Set up esbuild for fast TypeScript compilation of frontend code
- Create SharedHeader component with factories for main/admin/privacy pages
- Create SharedFooter component with standard and minimal variants
- Add frontend build scripts (build:frontend, watch:frontend, dev:full)
- Configure TypeScript for browser environment with DOM types
- Add example page demonstrating shared component usage
- Update .gitignore to exclude compiled frontend files
Benefits:
- Type-safe frontend components
- Consistent headers/footers across all pages
- Single source of truth for common UI elements
- Built-in i18n and theme toggle support
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add data-i18n-placeholder support to i18n.js for dynamic placeholder translation
- Update form inputs with proper i18n attributes for placeholders and labels
- Make snowflake emoji (❄️) clickable on all pages to return to homepage
- Remove snowflake from translation strings since it's now a separate element
- Add i18n support to README features list
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit extends the existing i18n system to fully support server-side translations
for users who have JavaScript disabled or are using the /table route directly.
Changes:
- Complete server-side Spanish (es-MX) translation support for /table route
- Language selector dropdown in table view with form-based locale switching
- URL parameter support (?locale=es-MX) for direct language selection
- Updated POST form handler to persist locale selection across submissions
- Proper locale detection and fallback for server-rendered pages
- Fixed language selector initialization timing in client-side JS
- Removed unused dependencies (canvas, sharp) to clean up package.json
- Added snowflake emoji to app name in both English and Spanish translations
The /table route now provides a complete non-JavaScript experience in both English
and Spanish, ensuring accessibility for all users regardless of their browser
capabilities or JavaScript preferences.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This major feature introduces complete internationalization architecture with Spanish (Mexico) as the first additional language:
## New Features:
- **I18n Architecture**: Complete client-side and server-side internationalization system
- **Spanish (Mexico) Support**: Full es-MX translations for all user-facing text
- **Language Selector**: Dynamic language switching UI component in header
- **API Endpoints**: RESTful endpoints for serving translations (/api/i18n)
- **Progressive Enhancement**: Language detection via Accept-Language header and cookies
## Technical Implementation:
- **Frontend**: Client-side i18n.js with automatic DOM translation and language selector
- **Backend**: Server-side i18n service with locale detection middleware
- **Build Process**: Automated copying of translation files to dist/ directory
- **Responsive Design**: Language selector integrated into header controls layout
## Files Added:
- public/i18n.js - Client-side internationalization library
- src/i18n/index.ts - Server-side i18n service
- src/i18n/locales/en.json - English translations
- src/i18n/locales/es-MX.json - Spanish (Mexico) translations
- src/routes/i18n.ts - API endpoints for translations
## Files Modified:
- package.json - Updated build process to include i18n files
- public/index.html - Added i18n attributes and language selector
- public/app.js - Integrated dynamic translation updates
- src/server.ts - Added locale detection middleware
- src/scss/pages/_index.scss - Language selector styling
This implementation supports easy addition of future languages and maintains backward compatibility while providing a seamless multilingual experience.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increase font sizes in location table for better readability
- Center-align "Persistent" text in time remaining column
- Fix static map zoom level when displaying single location
- Use zoom level 13 for single points to show neighborhood context
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix DatabaseService.ts to use correct relative paths (../../ instead of ../../../)
- Add npm run build step to deployment instructions
- Add database file creation step to deployment instructions
- Fix Caddyfile download to go directly to /etc/caddy/Caddyfile
- Update step numbering in deployment script
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update all git clone commands to use git.deco.sh/deco/ice
- Update API documentation contact URL to Gitea repository
- Change from github.com/derekslenk/ice to git.deco.sh/deco/ice
- Rebuild TypeScript to update compiled swagger.js
All documentation and scripts now point to the correct Gitea repository.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Standardized "MapBox" to "Mapbox" throughout the codebase
to match official branding. Updated:
- Documentation (CLAUDE.md, README.md)
- Source code comments and console logs
- API documentation and Swagger definitions
This ensures consistent branding and professional presentation.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implement MapImageService using Mapbox Static Images API
- Add server-side /table route with HTML form submission
- Generate static map images with auto-fit positioning based on actual location coordinates
- Add progressive enhancement with noscript fallbacks and Basic View button
- Update map center coordinates to proper Grand Rapids location
- Add numbered pins with color coding (red for regular, orange for persistent reports)
- Remove server-side caching to ensure fresh map images
- Fix theme toggle icon centering in CSS mixins
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove unused imports: LocationSubmission from types, Location/ProfanityWord from server
- Remove unused variables: wordText, detectedWords in profanity rejection
- Remove unused parameters: req in skip function, wordId/updates in fallback filter
- Fix regex escaping and destructuring patterns
- Remove unused response variables in tests
- Reduce ESLint issues from 45 to 22 (eliminated all 21 errors, keeping only warnings)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Consolidate request body destructuring into single line for better code style and ESLint compliance.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install swagger-ui-express and swagger-jsdoc dependencies
- Create comprehensive OpenAPI 3.0 specification with detailed schemas
- Add interactive Swagger UI at /api-docs endpoint
- Document all public API endpoints (/api/config, /api/locations)
- Document admin authentication and management endpoints
- Include comprehensive request/response schemas and examples
- Add authentication documentation for admin endpoints
- Update CLAUDE.md with API documentation information
Features:
- Complete API specification with OpenAPI 3.0 standard
- Interactive documentation interface with Swagger UI
- Detailed request/response examples for all endpoints
- Authentication flows for admin functionality
- Error response documentation with examples
- Type-safe integration with existing TypeScript architecture
API Documentation available at: /api-docs
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert entire backend to TypeScript with strict type checking
- Add comprehensive type definitions and interfaces
- Create typed models for Location and ProfanityWord with database operations
- Convert all services to TypeScript (DatabaseService, ProfanityFilterService)
- Convert all API routes with proper request/response typing
- Add TypeScript build system and development scripts
- Update package.json with TypeScript dependencies and scripts
- Configure tsconfig.json with strict typing and build settings
- Update CLAUDE.md documentation for TypeScript development
- Add .gitignore rules for TypeScript build artifacts
Architecture improvements:
- Full type safety throughout the application
- Typed database operations and API endpoints
- Proper error handling with typed exceptions
- Strict optional property handling
- Type-safe dependency injection for routes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Accept main branch's superior inline theme detection approach
- Keep architecture improvements from feature branch
- Maintain all new models/services layer functionality
- Preserve frontend refactoring with MapBase class
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add CSS media query for prefers-color-scheme detection
- Auto theme now properly follows system dark/light preference
- Maintains 3-mode cycle: auto → light → dark → auto
- Rebuilds CSS with proper @media rules for [data-theme="auto"]
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create shared back-link-styles mixin in _mixins.scss for reusable button component
- Remove all duplicate back-link styling from .privacy-content .back-link and a.back-link
- Eliminate 15+ instances of !important declarations throughout privacy styles
- Use proper SCSS variables instead of hardcoded values for consistent spacing
- Add focus state to back-link mixin for accessibility compliance
- Use existing card mixin and flex-center mixin for consistent styling
- Replace hardcoded colors with CSS custom properties for theme compatibility
Benefits:
- DRY principle: One mixin defines all back-link styles
- Better maintainability: Changes in one place affect all instances
- Improved accessibility: Focus states for keyboard navigation
- Cleaner CSS: No !important declarations needed
- Theme consistency: Uses proper color variables
- Add :focus pseudo-class to button mixin with outline styling
- Improves keyboard navigation accessibility for all buttons
- Uses currentColor for outline to adapt to different button styles
- Meets WCAG accessibility standards for focus visibility
- Update CSS source map after rebuild
- Remove all !important declarations from table cell styles in _index.scss
- Increase selector specificity by changing .location-cell to td.location-cell
- Change .details-cell to td.details-cell, .time-cell to td.time-cell, etc.
- This eliminates the need for !important while maintaining proper cascade order
- Follows CSS best practices for maintainable and readable stylesheets
- Created src/scss/pages/_privacy.scss with all privacy page styles
- Moved all inline styles from privacy.html to proper CSS classes
- Replaced inline style attributes with semantic CSS classes:
- privacy-header__title-wrapper for header positioning
- privacy-header__title-content for centered title content
- privacy-header__theme-toggle for theme toggle button
- Maintained all existing functionality and styling
- Improved maintainability and consistency with SCSS architecture
- All styles now use CSS variables for theme compatibility
- Add explicit link styling with proper color variables for readability
- Use !important declarations to override any conflicting inline styles
- Style all links in privacy-content and contact-info sections
- Add font-weight: 500 for better link visibility
- Fix back-link button with proper primary color styling
- Add CSS variables for primary colors in both light and dark themes
- Ensure links maintain proper contrast in both theme modes
- Add proper flexbox styling for .header-content to space items correctly
- Style .header-text with flex: 1 to take available space on left
- Position theme toggle button on the right side of header row
- Add responsive mobile layout that stacks header vertically
- Center header text and theme toggle on mobile devices
- Maintain proper spacing and visual hierarchy at all screen sizes
- Increase all typography scale by 2px for improved accessibility
- xs: 10px → 12px, sm: 12px → 14px, md: 14px → 16px
- lg: 16px → 18px, xl: 18px → 20px, xxl: 24px → 28px
- Set base body font-size to medium (16px) for default text
- All form inputs, buttons, tables, and content now more readable
- Maintains responsive design but with larger, more accessible text
- Increase footer font size from small to medium for better readability
- Ensure all footer text is properly centered including disclaimer
- Add explicit text-align: center and display: block for disclaimer small text
- Maintain responsive design with smaller font on mobile but still readable
- Update mobile disclaimer font size to small instead of extra small
- Add card styling to map-section with proper spacing and visual hierarchy
- Add reports-header with flexbox layout for title and view toggle buttons
- Add styling for view-toggle buttons, map-info, and table-controls
- Create shared footer component with consistent styling across pages
- Add footer to admin.html and privacy.html for consistency
- Add missing CSS variables for links, secondary text, and font-size-xs
- Ensure footer uses proper theme colors for light/dark modes
- Restore visual box around Current Reports section on main page
## Critical CSS Fixes
- ✅ Added missing index page styles (_index.scss) for main application
- ✅ Restored original CSS variables and color scheme compatibility
- ✅ Added comprehensive reports-table styles with proper cell formatting
- ✅ Fixed theme variables to match original design (updated colors)
- ✅ Added missing form, button, and layout components
## Enhanced Styles
- ✅ Proper table cell styling (.location-cell, .details-cell, .time-cell, .remaining-cell)
- ✅ Status indicators for urgent/warning/normal time remaining
- ✅ Enhanced responsive design for mobile tables
- ✅ Form and input styling consistency
- ✅ Theme toggle and header components
- ✅ Error/success message styling
## Architecture Improvements
- ✅ Modular imports: admin styles + index styles + shared components
- ✅ Better CSS variable organization with light/dark theme support
- ✅ Maintained backward compatibility with existing classes
- ✅ Compressed CSS output for production performance
The application now has full styling coverage with the new SCSS architecture.
## Major CSS/SCSS Improvements
- ✅ Set up modular SCSS architecture with variables, mixins, and components
- ✅ Created organized directory structure: src/scss/ with variables, mixins, pages/
- ✅ Removed ~300+ lines of inline CSS from admin.html
- ✅ Added comprehensive design system with consistent spacing, colors, typography
- ✅ Created reusable mixins for buttons, cards, tables, forms, and layouts
- ✅ Implemented responsive breakpoint mixins for mobile/tablet/desktop
- ✅ Added utility classes for common layouts and spacing
## Build System
- ✅ Added sass and concurrently as dev dependencies
- ✅ Created npm scripts: build-css, watch-css, dev-with-css
- ✅ Automated SCSS compilation to compressed CSS
- ✅ Set up development workflow with CSS watching
## Admin Panel Enhancements
- ✅ Added complete tab navigation system (Location Reports + Profanity Filter)
- ✅ Integrated profanity management UI with forms and tables
- ✅ Consistent styling across all components using SCSS mixins
- ✅ Improved responsive design for mobile devices
## Benefits
- 🎯 Maintainable: All styles centralized in modular SCSS files
- 📱 Responsive: Better mobile experience with consistent breakpoints
- 🎨 Consistent: Design system ensures visual consistency
- ⚡ Efficient: Compressed CSS output, no inline styles
- 🔧 Developer-friendly: Easy to extend and modify styles
The application now has professional-grade CSS architecture that's easy to maintain and extend.
