Small details in my Mastodon client that I wanted more people to notice
5 hours ago
- #User experience
- #Frontend development
- #Mastodon client design
- Readable CSS classes: Uses readable class names via Svelte's component CSS scoping, CSS modules, and a custom preprocessor for styling child components.
- Global variables: Exposes global variables (e.g., _settings.display_accent, _api) for userscripts and debugging.
- Responsive design: Features a responsive layout with a sidebar that switches to icon-only mode at specific breakpoints to save space.
- Mobile navigation: Adjusts UI elements like the 'create post' button position for mobile vs. desktop, with navigation mimicking mobile tab switching.
- Thread representation: Displays posts as disconnected bubbles that connect only when threaded, with visual adjustments for self-replies to reduce clutter.
- Display names: Shows handles instead of display names by default to balance design, with special handling for replies and boosts.
- Media handling: Supports images, videos, and audio with carousels for multiple attachments, lazy loading, and custom lightboxes with alt text captions.
- Click-to-open: Makes entire post boxes clickable while avoiding text selection or interactive element conflicts for opening posts.
- Hover effects: Uses CSS hacks (e.g., ::before with z-index) to implement hover backgrounds without breaking reply layouts.
- Tree-style replies: Represents replies as a tree with indentation and color-coding to clarify conversation structure.
- Post positioning: Ensures posts with many ancestors appear near the center of the screen using spacers for consistency.
- User info display: Shows user information on the side when focusing on a post to improve awareness in conversations.
- Follow buttons: Limits follow buttons to user profiles only, avoiding clutter and encouraging profile review before following.
- Soft filters: Treats soft filters similarly to content warnings, displaying them with icons and grayed-out text.
- Timeline tweaks: Merges boosts and thread ancestors in the home timeline to reduce duplication and maintain chronological order.
- Mention grouping: Groups multiple mentions into a single clickable element to save space and clean up post text.
- HTML parsing: Parses incoming HTML to process mentions and hashtags, improving user experience despite backend inconsistencies.
- Hashtag handling: Removes inline hashtags and lists them at the bottom of posts, with special rules to clean up hashtag-heavy content.
- Grouped notifications: Groups notifications manually for backends without native support, inspired by Phanpy's implementation.
- Reaction management: Converts certain emoji reactions to favorites, displays reactions next to interaction buttons, and handles backend inconsistencies.
- Quote display: Shows quotes at the top of posts, flattening nested quotes, with intentions to encourage 'yes, and...' style interactions.
- Post box design: Adapts post dialog position for mobile (bottom-up) and desktop (top-down), though it has limitations like lack of file upload support.