Commit Graph

130 Commits

Author SHA1 Message Date
Thomas Camlong
01629843bd chore: fix compilation 2025-11-17 10:21:49 +01:00
Thomas Camlong
2863cfd96d chore: lint && format codebase 2025-11-17 10:02:19 +01:00
Thomas Camlong
d1def9c346 feat(submissions): add experimental warning and confirmation dialog to submission form
- Replace inline warning with shared ExperimentalWarning component
- Add confirmation dialog before submission to acknowledge experimental phase
- Refactor submission handler to show dialog first, then process on confirmation
- Warn users that submissions won't be reviewed during experimentation phase
2025-11-14 17:38:41 +01:00
Thomas Camlong
f4a59bfefb feat(components): add shared experimental warning component
Create reusable ExperimentalWarning component with customizable message
and feedback button. Component includes large warning styling (3x size)
with amber color scheme and PostHog-targetable .feedback-button class.
2025-11-14 17:38:34 +01:00
Thomas Camlong
4b001dc758 refactor(ui): update UI components and navigation
- Improve header, hero, and login modal components
- Update command menu functionality
- Enhance magic card component
2025-11-07 08:11:18 +01:00
Thomas Camlong
56289820f0 refactor(submissions): improve submission forms and data table
- Update icon submission forms with better validation
- Enhance advanced submission form with TanStack
- Improve submissions data table functionality
- Update submissions hook for better data management
2025-11-07 08:11:14 +01:00
Thomas Camlong
938facc889 refactor(icons): improve icon detail components
- Update icon details, actions, and editable components
- Enhance icon name combobox functionality
- Improve user interaction with icon metadata
2025-11-07 08:11:09 +01:00
Thomas Camlong
59843eac88 refactor(analytics): improve PostHog integration
- Update PostHog utilities and provider configuration
- Enhance analytics tracking setup
2025-11-07 08:11:05 +01:00
Thomas Camlong
ea9414543f fix(analytics): debounce PostHog "no icons found" event tracking
- Use debouncedQuery instead of searchQuery to prevent premature events
- Add 500ms debounce delay before sending PostHog events
- Require minimum 2 characters to avoid false positives from single character searches
- Fix bug where events fired before filtering completed
2025-11-07 08:10:43 +01:00
Thomas Camlong
8c87e66918 refactor: migrate to TanStack Form and fix IconNameCombobox integration
- Remove old advanced-icon-submission-form.tsx (replaced by TanStack version)
- Fix TanStack Form implementation:
  - Remove generic type argument and use type assertion instead
  - Fix form.Subscribe selector to return object instead of array
  - Remove unused IconCard import
- Update editable-icon-details.tsx to use new IconNameCombobox API:
  - Remove deprecated onIsExisting prop
  - Remove isExistingIcon state management
  - Simplify form submission messages

All components now use the updated IconNameCombobox with error/isInvalid props
instead of the old onIsExisting callback pattern.
2025-10-13 15:50:08 +02:00
Thomas Camlong
cd1a3fda59 feat: add comprehensive MultiSelect UI component
- Feature-rich multi-select dropdown with search and filtering
- Support for grouped options and custom icons
- Disabled option support (for required selections)
- Animations (bounce, pulse, wiggle, fade, slide)
- Responsive design with mobile/tablet/desktop configs
- Accessibility with ARIA labels and keyboard navigation
- Badge display with customizable max count
- Single-line or wrapped badge layout options
- Imperative API via ref (reset, clear, setValues, focus)
- Form integration with controlled/uncontrolled modes
- Auto-dedupe options and comprehensive error handling
2025-10-13 15:39:54 +02:00
Thomas Camlong
0fd6db891f feat: add file upload dropzone to icon submission dialog
- Add Dropzone component for direct file uploads
- Support multiple image formats (png, jpg, svg, webp)
- Show file preview after upload
- Add divider between dropzone and GitHub issue templates
- Max 5 files with 5MB size limit each
2025-10-13 15:39:25 +02:00
Thomas Camlong
676ee079d6 style: reduce CommandInput padding for compact appearance
- Change py-3 to py-1 for less vertical padding
- Remove h-10 fixed height for better flexibility
2025-10-13 15:38:37 +02:00
Thomas Camlong
e4fa1a4d31 chore: simplify command menu search placeholder text
- Remove "or category" from placeholder since search is name-based only
2025-10-13 15:38:24 +02:00
Thomas Camlong
555898fa69 feat: integrate MultiSelect for variant selection and improve form UX
- Replace manual variant cards with MultiSelect component
- Add VARIANT_OPTIONS with FileImage/FileType icons
- Make base variant disabled (always required, cannot be removed)
- Show upload zones only for selected variants (reactive with field.state.value)
- Move remove button to top-right corner as small icon-only button
- Add icon preview section with proper object-contain styling
- Use form.Subscribe for reactive preview updates
- Validate icon names against existing icons from database
- Show clear error message when icon already exists
- Remove isExistingIcon field (updates not yet supported)
- Improve preview image display with centered flex layout
- Add variant labels below preview images
- Consolidate form into single Card component
- Fix image cropping issues with object-contain instead of object-cover
2025-10-13 15:37:59 +02:00
Thomas Camlong
7fe7d43c1a refactor: redesign icon name input with inline suggestions
- Replace popover-based combobox with direct input field
- Add inline dropdown showing existing icons (max 50 for performance)
- Implement real-time search filtering on both value and label
- Track raw input separately for instant search feedback
- Display existing icons as warnings with AlertCircle icons
- Add proper validation error display with TanStack Form integration
- Show validation errors in red below input
- Add aria-invalid and aria-describedby for accessibility
- Sync raw input with sanitized value on blur
- Prevent selecting existing icons (shows as not allowed)
2025-10-13 15:37:41 +02:00
Thomas Camlong
758c4a5bbc feat: add file preview functionality to dropzone
- Add filePreviews state to track base64 preview URLs
- Implement FileReader-based preview generation on file drop
- Add preview image display in DropzoneContent
- Update variant removal to clear associated previews
- Add preview cleanup in form reset and clear functions
- Enhance user experience with immediate visual feedback
2025-10-02 16:20:56 +02:00
Thomas Camlong
c5949aab03 feat: implement immediate PostHog user identification on auth
- Add immediate user identification after successful login/registration
- Implement PostHog event tracking for user_registered and user_logged_in
- Follow PostHog best practice of calling identify as soon as possible
- Use centralized PostHog utility functions for consistency
- Add comprehensive user properties to PostHog person profiles
2025-10-02 16:20:49 +02:00
Thomas Camlong
ef8bc885d2 feat: enhance logout with PostHog event tracking and reset
- Add PostHog event capture for user_logged_out
- Implement proper PostHog identity reset on logout
- Add user data tracking before clearing auth
- Follow PostHog best practices for logout handling
- Import and use centralized PostHog utility functions
2025-10-02 16:20:43 +02:00
Thomas Camlong
fe9f5edc9a feat: integrate PostHog authentication handler
- Add PostHogAuthHandler component to PostHogProvider
- Integrate usePostHogAuth hook for automatic user identification
- Add person_profiles: 'identified_only' configuration
- Enable automatic user identification on app load and auth changes
2025-10-02 16:20:32 +02:00
Thomas Camlong
1d0f264dda feat: implement TanStack React Form for icon submission
- Create new AdvancedIconSubmissionFormTanStack component
- Replace useState form management with useForm hook
- Add comprehensive field-level validation
- Implement type-safe form data structure
- Add real-time validation with immediate feedback
- Maintain all existing functionality (file uploads, previews, variants)
- Improve performance with optimized re-renders
2025-10-02 16:20:10 +02:00
Thomas Camlong
391a69f82e refactor(ui): update LoginModal usage 2025-10-02 15:23:56 +02:00
Thomas Camlong
2ef6e4162c feat(ui): enhance dialog component with improved styling and optional close button
- Add showCloseButton prop to DialogContent for conditional close button display
- Improve overlay styling with better backdrop blur and opacity
- Add explicit background color to dialog content
- Reorganize imports for better code organization
- Enhance accessibility with proper data-slot attributes
- Improve visual consistency and user experience
2025-10-02 15:20:40 +02:00
Thomas Camlong
8a4c92930d refactor(debug): remove console logs from submissions data table
- Clean up debug console.log statements from getDisplayName function
- Remove logging for submission data, user data, and fallback values
- Improve code cleanliness and production readiness
- Maintain functionality while reducing console noise
2025-10-02 15:20:34 +02:00
Thomas Camlong
23e0ea54ff fix(api): correct PocketBase baseURL property name
- Fix typo from baseUrl to baseURL in submission details
- Ensure proper API endpoint construction for asset URLs
- Improve consistency with PocketBase SDK naming conventions
2025-10-02 15:20:27 +02:00
Thomas Camlong
e9e9aefb79 feat(ui): add theme-aware gradient colors to magic card
- Integrate next-themes for dynamic color switching
- Add light/dark theme specific gradient colors
- Implement state management for theme-based color updates
- Use pink gradient for dark theme and blue gradient for light theme
- Improve visual consistency across different theme modes
2025-10-02 15:20:22 +02:00
Thomas Camlong
6fc0a06fc4 feat(ui): major login modal redesign with improved UX
- Complete UI/UX overhaul with modern design and better spacing
- Add form reset functionality and improved state management
- Replace custom loading spinner with Lucide Loader2 icon
- Remove BorderBeam effects for cleaner appearance
- Improve error handling and validation flow
- Enhance accessibility with better focus management
- Update button styling and layout for better visual hierarchy
- Add loading states and improve user feedback
- Refactor form structure for better maintainability
2025-10-02 15:20:16 +02:00
Thomas Camlong
f0215627d7 refactor(ui): improve icon name combobox with custom hook and better UX
- Replace direct PocketBase calls with useExistingIconNames hook
- Add loading states and better error handling
- Improve create new icon flow with preview functionality
- Extract icon name sanitization logic into reusable function
- Enhance empty state with loading indicator
- Reorganize component structure for better maintainability
2025-10-02 15:20:11 +02:00
Thomas Camlong
f4819acc7c style: remove unnecessary empty line in icon-card
- Clean up code formatting by removing extra blank line
- Improve code consistency and readability
2025-10-02 15:20:05 +02:00
Thomas Camlong
c471b87436 refactor(ui): update submit button text to singular form
- Change "Submit icon(s)" to "Submit icon" for consistency
- Update both authenticated and unauthenticated button states
- Improve text clarity and user experience
2025-10-02 15:20:01 +02:00
Thomas Camlong
9f4a1d9387 refactor(ui): simplify new icon submission alert
- Remove Check icon from new icon submission alert
- Simplify alert text by removing bold formatting
- Improve visual consistency with cleaner design
2025-10-02 15:19:56 +02:00
Thomas Camlong
d542377d97 feat: improve theme and usability 2025-10-02 12:30:22 +02:00
Thomas Camlong
680246d50e refactor: update recently added icons to use primary theme colors
- Replace rose color references with primary theme colors
- Update gradient text and hover effects to use primary color
- Improve theme consistency across recently added icons section
- Enhance maintainability with centralized color management
2025-10-02 12:09:26 +02:00
Thomas Camlong
9918c5507e refactor: replace hardcoded rose colors with primary theme colors
- Replace rose-500 color references with primary theme colors
- Update gradient backgrounds to use primary color variables
- Simplify shadow classes using CSS custom properties
- Ensure consistent theming across hero section components
- Improve maintainability and theme consistency
2025-10-02 12:09:18 +02:00
Thomas Camlong
13a1192dc2 feat: add advanced dropzone component
- Create comprehensive file dropzone component using react-dropzone
- Support file type validation, size limits, and file count restrictions
- Add drag-and-drop functionality with visual feedback
- Implement file preview and replacement capabilities
- Include context-based state management for file handling
- Support custom empty states and content rendering
- Add file size formatting and validation error handling
2025-10-02 10:52:24 +02:00
Thomas Camlong
4e58f705d3 feat: add advanced combobox component
- Create comprehensive combobox component with context management
- Support controllable state with @radix-ui/react-use-controllable-state
- Add search functionality with Command component integration
- Implement create new item functionality
- Include responsive width detection with ResizeObserver
- Support grouped items, empty states, and custom triggers
- Provide flexible data structure for various use cases
2025-10-02 10:52:18 +02:00
Thomas Camlong
e1ae75d27f feat: add BorderBeam animated component
- Create animated border beam component using Framer Motion
- Support customizable size, duration, delay, and colors
- Add reverse animation and initial offset options
- Implement gradient color transitions
- Provide configurable border width and styling
- Enable smooth circular border animations
2025-10-02 10:52:13 +02:00
Thomas Camlong
0a9d700144 feat: add icon name combobox component
- Create combobox for icon name selection and creation
- Integrate with PocketBase to fetch existing icon names
- Add input sanitization for icon IDs (lowercase, hyphens only)
- Implement existing icon detection and validation
- Support both selection from existing icons and creation of new ones
- Provide visual feedback for new vs existing icon submissions
2025-10-02 10:52:06 +02:00
Thomas Camlong
9cb8e220cb feat: implement advanced icon submission form
- Create comprehensive icon submission form with multiple variants
- Add support for base, dark, light, wordmark, and wordmark_dark variants
- Implement file upload with drag-and-drop functionality
- Add icon name validation and existing icon detection
- Include category selection, aliases, and description fields
- Integrate with PocketBase for submission storage
- Add form validation and error handling
2025-10-02 10:52:00 +02:00
Thomas Camlong
dd4bd2e565 feat: enhance login modal with animated border effects
- Add BorderBeam component import and implementation
- Create animated red and blue border effects
- Add relative overflow-hidden positioning
- Improve visual appeal and user engagement
2025-10-02 10:51:32 +02:00
Thomas Camlong
c210b4a8c5 feat: add onClick prop to IconSubmissionForm
- Add optional onClick prop to IconSubmissionForm component
- Enable external click handling for form triggers
- Improve component flexibility and reusability
2025-10-02 10:51:27 +02:00
Thomas Camlong
f45fa072af style: remove extra padding from search results header
- Remove pb-2 class from results header div
- Align with community-icon-search styling
- Improve visual consistency across search components
2025-10-02 10:51:21 +02:00
Thomas Camlong
310190f6c1 refactor: simplify header submit button implementation
- Remove IconSubmissionForm component usage
- Replace with direct Link navigation to /submit
- Simplify mobile and desktop submit button logic
- Remove unused import and improve code clarity
2025-10-02 10:51:17 +02:00
Thomas Camlong
22ac70dc9f style: remove extra padding from results header
- Remove pb-2 class from results header div
- Improve visual spacing consistency
- Clean up layout spacing issues
2025-10-02 10:51:12 +02:00
Thomas Camlong
49aab75953 format code + change env 2025-10-01 19:01:31 +02:00
Thomas Camlong
07f196f12f feat(web): add community icon search component
Add comprehensive search and filter component for community-submitted icons. Features include real-time search with debouncing, category filtering, multiple sort options (relevance, A-Z, Z-A, newest), and grouped display by submission status. Integrates with URL query parameters for shareable filtered views
2025-10-01 18:23:19 +02:00
Thomas Camlong
63507a767a feat(web): add login and registration modal component
Add comprehensive LoginModal component with toggle between login and registration modes. Includes form validation, error handling, loading states, and placeholder for GitHub OAuth (coming soon). Provides accessible form with proper ARIA attributes and keyboard navigation
2025-10-01 18:23:15 +02:00
Thomas Camlong
fd8b50776a style(web): improve dialog overlay backdrop blur
Reduce dialog overlay backdrop blur from default to 2px and decrease opacity from 50% to 30% for a more subtle, modern appearance that better matches the application's design system
2025-10-01 18:22:50 +02:00
Thomas Camlong
5f5e3ef825 feat(web): add "added_to_collection" status to submissions
Add support for new submission status "added_to_collection" indicating icons that have been officially added to the main collection. Update status priority ordering, color scheme (green badge), and display name formatting
2025-10-01 18:22:48 +02:00
Thomas Camlong
bf93408568 refactor(web): extract grid classes and add documentation
Extract shared grid classes into GRID_CLASSES constant for reusability. Add JSDoc comments to explain the purpose of IconsGrid (non-virtualized for small lists) and VirtualizedIconsGrid (optimized for large datasets) components
2025-10-01 18:22:44 +02:00