Cross platform #82
Open
Cross platform #82
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
• Add /api proxy to api.quorummessenger.com in Vite dev server • Update config to use relative URLs only for localhost development with HMR • Keeps all production and staging behavior unchanged • Minimal solution that fixes localhost CORS without complexity
This reverts commit 44e2f46.
Improved MessageComposer textarea auto-resize with proper height calculation and mobile optimizations: • Added dedicated SCSS file with organized styles using Tailwind @apply • Implemented JavaScript-based auto-resize using scrollHeight for wrapped text • Fixed textarea height issues by overriding TextArea primitive's min-height • Added responsive behavior: 32px single-line, grows to 240px (desktop) or 100px (mobile) • Smart button alignment: center-aligned for single line, top-aligned when multi-line • Mobile UX: hide non-essential buttons when typing on screens ≤640px • Added keyboard avoidance with safe-area-inset-bottom for devices with home bars • Added YouTube external link below video thumbnails
Enhanced touch interaction system with permission-aware long press handlers and haptic feedback. • Enhanced useLongPress hook with automatic browser default prevention (context menu, text selection, iOS callouts) • Added useLongPressWithDefaults hook that automatically applies CSS styles and classes for touch behavior prevention • Created TOUCH_INTERACTION_TYPES constants for consistent timing across the app (500ms standard, 600ms content) • Implemented cross-platform haptic feedback system with light/medium/heavy intensity levels • Security fix: Long press handlers now properly check user permissions before allowing editor access • Extracted ChannelItem component from ChannelGroup to eliminate code duplication • Added automatic sidebar closure on mobile/tablet navigation for better UX • Uses conditional rendering (div for touch, Link for desktop) to optimize interactions per platform
• Add 3-dots vertical menu button for touch devices positioned at top-right of messages • Remove hover background effects on touch devices, add subtle borders between messages instead • Fix animated GIFs and stickers to use responsive CSS sizing instead of fixed max-width • Add top margin to media content below 640px to prevent overlap with 3-dots menu • Centralize mobile drawer configuration with 480px max-width and proper animation timing • Eliminate code duplication with shared buildDrawerConfig() function and haptic feedback utility • Clean up unused touchHandlers and improve device interaction mode detection logic
• Fix moderator role labels in UserProfile to maintain consistent layout on all screen sizes • Remove responsive width classes from role add buttons to prevent full-width behavior on mobile • Change role tags from flex to inline-flex to display naturally sized instead of stretched • Add top padding to touch device message borders for better visual spacing • Replace window.innerWidth check with isDesktop hook for consistent responsive detection • Ensure UserProfile modals maintain desktop-like appearance across all device sizes
Prevent duplicate space join messages and redundant invite sending by adding membership validation at key points in the invite flow. • Add membership check in joinInviteLink() to prevent duplicate member saves and join messages • Implement invite validation in useInviteManagement with localized warning display • Expose getSpaceMember() through MessageDB context for membership queries • Update Invites UI component to show warning callout when user already a member • Update documentation with duplicate prevention fixes
- Update useMessageFormatting to pass through thumbnailUrl and isLargeGif fields for embed content - Fix MessagePreview to use thumbnailUrl when available, falling back to full imageUrl - Reduces bandwidth usage by displaying smaller thumbnails for large GIFs (>500KB) and images (>300px)
• Fix device removal not persisting by properly reconstructing signed user registrations • Add visual feedback for pending device removals in Privacy tab with warning banner and disabled state • Move error messages to appear above Save Changes button in both UserSettings and SpaceSettings modals • Use ConstructUserRegistration API to ensure proper signature validation when devices are removed • Implement proper localization for singular/plural device removal messages • Add removedDevices state tracking to prevent UI confusion during save operations
Add explicit size props to icons in upload elements and maintenance page. Tabler icons require size prop instead of inheriting CSS font-size like FontAwesome did.
Create semantic typography system to consolidate text styling patterns and improve small text readability on mobile devices. Typography System: - Add _typography.scss with 7 semantic classes (text-title, text-subtitle, text-label, text-label-emphasis, text-body, text-small, text-small-desktop) - Each class consolidates font-size, weight, line-height, and default color - Designed to replace modal-specific classes with global equivalents Mobile Readability Improvements: - Replace fixed text-xs with text-xs-responsive in interactive elements - Input helper/error text now 14px on mobile (was 12px - too small) - Modal info and navigation titles now 14px on mobile - Input labels now 14px on mobile for better readability Input Primitive Fix: - Replace spacing variable $s-4 with semantic $font-input in Input.scss - Ensures consistent 16px font-size to prevent iOS zoom on mobile - Affects both default and onboarding input variants Files: - src/styles/_typography.scss (new) - src/index.scss (import typography) - src/components/primitives/Input/Input.scss (font-input, responsive helper text) - src/styles/_base.scss (responsive input labels) - src/styles/_modal_common.scss (responsive modal text)
Created global typography classes to consolidate text styling patterns and improve mobile readability across modal components. Typography System: - Created src/styles/_typography.scss with semantic classes - Classes: .text-title, .text-subtitle-2, .text-body, .text-label-strong, etc. - Fixed color rendering with rgb() wrapper for CSS variables - Mobile readability: changed $text-xs to $text-xs-responsive (14px mobile) Migrated Modals (13 files): - UserSettingsModal: All 4 components (General, Appearance, Privacy, Notifications) - SpaceSettingsModal: All 5 components (General, Account, Roles, Emojis, Stickers, Invites, Danger) - ChannelEditorModal, GroupEditorModal - Partial: CreateSpaceModal, NewDirectMessageModal, ConversationSettingsModal Pattern Applied: - .text-title: Main section headers - .text-subtitle-2: Sub-section headers - .text-body: Main description (only directly below title) - .text-label-strong: All other labels and descriptions - Replaced <Text> with <div> to avoid primitive default conflicts Remaining work: 5 high-priority modals need migration (ConfirmationModal, KickUserModal, LeaveSpaceModal, etc.)
Implemented semantic typography prop that enables cross-platform text styling without className conflicts. Text Primitive Changes: - Added typography prop to types.ts with 9 semantic values - Text.web.tsx: When typography prop used, applies semantic class only - Text.native.tsx: Maps typography values to theme colors and font styles - Backwards compatible: existing variant/size/weight props still work Typography Values: - title-large, title, subtitle, subtitle-2 - body, label, label-strong - small, small-desktop Benefits: - ✅ Cross-platform: Same API works on web and native - ✅ No conflicts: Typography prop bypasses default props - ✅ Semantic: Clear intent (typography="body" vs variant/size/weight combo) - ✅ Backwards compatible: Existing code unaffected Usage: <Text typography="body">Cross-platform text</Text> <Text typography="title">Modal title</Text> Documentation Updated: - API-REFERENCE.md: Added typography prop documentation - primitives-quick-reference.md: Added typography examples and reference table This enables simple cross-platform modals using Text primitive instead of platform-specific div/RNText elements.
Updated Text component examples to showcase new typography prop: primitivesConfig.json: - Added new "text-typography" section with 9 typography examples - Includes quickTips and codeExample for typography usage - Clear documentation of all typography values Text.tsx: - Split into two sections: Typography (new) and Legacy Props (old) - Typography section shows all semantic typography values - Legacy section shows original variant/size/weight props - Both sections use config-driven examples This allows developers to: - Visually compare all typography styles - See typography prop in action - Understand when to use typography vs legacy props - Copy code examples directly from playground
Consolidated Text primitive examples into one unified view: Changes: - Merged typography and legacy examples into single ExampleBox - Typography examples shown first (new recommended approach) - Legacy examples after (backwards compatible) - Combined quick tips with clear section labels (🆕 vs 📦) - Unified code example showing both approaches - Dynamic props only apply to legacy examples - Smart labels distinguish typography vs variant props Benefits: - Easier to compare approaches side-by-side - Cleaner UI with single example box - Clear visual hierarchy (new first, legacy second) - All 17 examples visible at once
Fixed typography prop to allow variant prop to override default colors. Now supports: <Text typography="body" variant="subtle"> for semantic sizing with flexible color control. Color priority: color prop > variant > typography default Also fixed handlePress declaration order in Text.native.tsx.
Updated migration examples to show typography + variant usage for flexible color control in remaining 5 modals.
Cross-platform modals (primitives-only): - ConfirmationModal: Added typography="body" - KickUserModal: Added typography="body" variant="subtle" - LeaveSpaceModal: Added typography="body" variant="subtle" - NewDirectMessageModal: Added typography="body" variant="subtle" and typography="label-strong" for switch label Web-only modal (CSS classes): - CreateSpaceModal: Updated to use .text-label-strong classes All changes use semantic typography for consistent sizing and optional color control via variant prop.
All 18 high-priority modals successfully migrated: - 13 web-only modals using CSS classes - 4 cross-platform modals using typography prop - CreateSpaceModal using CSS classes Typography prop now supports color override via variant prop.
Added documentation for typography + variant color override: - API-REFERENCE.md: Added color override section with examples - 02-primitives-quick-reference.md: Added variant override examples - Updated typography tables to show "Default Color" - Added color priority explanation
- Added "Body + Subtle" example showing typography + variant usage - Updated code example to demonstrate color override feature - Added color priority note to code example
Added tracking-wide (0.025em) letter-spacing to title-large, title, and subtitle typography for improved readability and visual polish. Applied to both web (_typography.scss) and native (Text.native.tsx) implementations.
Removed redundant text styling classes from _modal_common.scss: - .modal-text-label - .modal-text-section-header - .modal-text-small These are now replaced by semantic typography classes from _typography.scss (.text-title, .text-body, .text-label, etc.). Kept .modal-text-section as it's a layout class still in use.
- Add borderColor prop to ScrollContainer types (both web and native) - Support Tailwind border classes (e.g., 'border-surface-3') - Support CSS variables (e.g., 'var(--color-border-subtle)') - Default border color: var(--color-border-default) - Update API-REFERENCE.md with complete ScrollContainer documentation
- Reduce icon sizes from 10px to 14px for better visibility - Change icon color from text-muted to text-subtle for consistency - Reduce gap in dropdown-result-meta from 6px to 4px - Update MessagePreview to use shared dropdown-result-meta styles - Add user and calendar icons to MessagePreview header - Applies to: PinnedMessagesPanel, SearchResults, NotificationPanel, MessagePreview
- Create SpaceAvatar component (web + native) - Make space images optional in CreateSpaceModal - Update SpaceIcon to show initials when no image - Store null instead of default image for spaces - Add comprehensive avatar system documentation
Consolidate font weights to use only $font-medium (500) and $font-bold (700), removing the redundant $font-semibold (600). Updated all usages across components to use appropriate weights.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.