Jolkr Privacy-first community messaging

Market gap: Discord and Slack offer mature community tools (servers, channels, roles, permissions, and voice) but store messages without encryption. Signal and Matrix provide end-to-end encryption but lack the rich server and channel structures communities rely on. No product meets both needs.

Navigation problem: a permanent server list on the left does not work well beyond a few communities. Every server stays visible whether or not it is active, taking attention and screen space. This model assumes one or two servers, but many users now manage dozens across games, work, and other communities.

Scope: Jolkr is a full community platform, not only a secure messenger. The front end covers servers, channels, roles, DMs, voice, and the navigation that connects them. Encryption protects both DMs and group channels. One React + Tauri codebase targets the web, macOS, Windows, Linux, Android, and iOS.

Decision: replace the permanent server list on the left with a horizontal tab bar, based on how browsers handle open pages. The idea came from counting the icons in the studio's Discord one morning: thirty-one servers, but only four used each day. Servers became context windows that users can open, switch between, and close, instead of a fixed list that grows with every community.

Implementation: the tab strip's edge fade took three attempts. The first two stuttered and clipped the content too sharply, which made navigation feel unreliable. The shipped version scrolls horizontally and uses a CSS mask-image fade. A RAF-based lerp loop calculates it from the scroll offset with sub-pixel precision, without extra DOM or layout thrashing. Opening a server creates a tab with its icon, name, and unread indicator. Users can drag tabs to reorder them and close them with a middle-click or button.

Input models: touch platforms disable drag-to-reorder to avoid conflicts with scrolling. A long press replaces the right-click menu for server actions (mute, mark read, settings, close, and leave). The DM inbox, global search, notifications, and user profile stay on the right side of the bar, available from every tab.

Server browser: a + button at the far left of the tab bar opens a list of every server the user belongs to. It shows which servers are already open and offers actions to join or create one. It is a navigation tool, not a permanent fixture.

Constraint: every conversation must use end-to-end encryption. It is never a setting users enable. Because there is no unencrypted mode, the interface needs no toggle: security is part of the architecture, not an option. This removes a whole category of UX complexity. The design question changes from "how to configure encryption" to "how to show that it is working."

Design response: quiet visual indicators build trust instead of settings panels. A shield badge in every channel header shows that encryption is active. Nonce presence proves integrity, and verified states in DMs confirm the recipient's identity. During normal use, the encryption layer stays out of the way, so users never think about key exchange. It appears immediately when something is wrong. As with the tab bar, complexity belongs where people look every minute and should stay hidden where they should never need to look.

Constraint: one codebase must support six targets (web, macOS, Windows, Linux, Android, and iOS) with no platform-specific forks. Every interface decision must work across screens from 375 px to 5120 px, mouse, touch, and keyboard input, safe-area geometries, and OS conventions. A layout built for a 27-inch monitor must also work on a phone. A component designed for a wide sidebar cannot break in a narrow panel.

Architecture: each platform is a view into the same component and layout system, not a separate design target. Each of the 62+ React components has one job (tab bar, server browser, DM sidebar, or message composer) and can be combined without tight coupling. The design system builds safe-area awareness into the grid primitives instead of patching each platform. One component set, one layout system, and a state model built for real-time sync keep behaviour consistent across all six targets without visual drift.

FEATURE SURFACE

Navigation: the tab bar replaces a permanent server rail that does not scale beyond a few communities. Servers become closable context windows, so active use shapes the interface instead of total membership. The model is familiar to anyone who uses a browser. Thirty-one icons become the four tabs that matter.

Encryption: privacy is the application's only mode, not a feature users enable. Shield badges and verified states show that protection without relying on settings panels. By design, the server can never access message content.

Scope: one component set supports six targets with consistent behaviour across web and native platforms. More than 62 React components form a system designed for dozens of community contexts at once. Design led the key decisions: the tab metaphor, encryption UX, and interaction model for switching contexts.