Skip to content

Conversation

@Lucky-Sharma
Copy link

@Lucky-Sharma Lucky-Sharma commented Nov 12, 2025

Fixes #1436

This PR updates the Zulip Desktop sidebar to improve usability and match the web app design. The changes reorder the action buttons and enhance the Do Not Disturb tooltip for better clarity.

Key Changes:

  • Reordered sidebar action buttons for improved workflow: Back → Reload → Loading → Do Not Disturb → Settings
  • Back button now uses a flipped subdirectory_arrow_left icon (visually matches CornerUpLeft)
  • Widened the Do Not Disturb tooltip to display full text ("Enable/Disable Do Not Disturb") on a single line without truncation
  • Fixed tooltip label to show complete text when DND is disabled
  • Fixed CSS specificity and linting issues

Screenshots and screen captures:
image

Platforms this PR was tested on:

  • Windows
  • macOS (N/A - not available to test)
  • Linux (specify distro) (N/A - not available to test)
Self-review checklist
  • Self-reviewed the changes for clarity and maintainability
    (variable names, code reuse, readability, etc.).

Communicate decisions, questions, and potential concerns.

  • Explains differences from previous plans (e.g., issue description).
    • Reordered buttons to prioritize frequently-used actions (Back/Reload) at the top
    • Moved Do Not Disturb closer to Settings for related preferences
  • Highlights technical choices and bugs encountered.
    • Used scaleY(-1) transform to flip the back arrow icon horizontally
    • Widened DND tooltip with min-width: 220px and max-width: calc(100vw - 80px) to prevent overflow
    • Repositioned tooltip arrow to the left side for proper visual anchoring
    • Fixed CSS specificity violations by moving #back-action i rule after .tab related selectors
  • Calls out remaining decisions and concerns.
    • Tooltip width may need adjustment on very narrow displays (< 300px)
  • Automated tests verify logic where appropriate.
    • All linting checks pass (HTML, CSS, JavaScript, Prettier)

Individual commits are ready for review (see commit discipline).

  • Each commit is a coherent idea.
  • Commit message(s) explain reasoning and motivation for changes.
    • feat(desktop-sidebar): update sidebar buttons to match web app design

Completed manual review and testing of the following:

  • Visual appearance of the changes.
    • Back button icon flipped correctly
    • Button order matches expected workflow
    • Do Not Disturb tooltip displays full text on single line
  • Responsiveness and internationalization.
    • Tooltip width uses viewport-relative sizing for different screen sizes
    • Strings use translation utility (t.__())
  • Strings and tooltips.
    • Fixed truncated "Enable Do Not Disturb" tooltip text
    • All action button tooltips display correctly: "Go back", "Reload", "Loading", "Do Not Disturb", "Settings"
  • End-to-end functionality of buttons, interactions and flows.
    • Back button navigates correctly in webviews
    • Reload button works as expected
    • Do Not Disturb toggle functions properly
    • Settings button opens preferences
  • Corner cases, error conditions, and easily imagined bugs.
    • Back button disabled state maintained when no navigation history
    • Loading spinner animation continues to work
    • Tooltip arrow remains anchored on narrow viewports

@Lucky-Sharma Lucky-Sharma force-pushed the Update-icons-app-sidebar branch from 3e2d9cc to 011efab Compare November 14, 2025 19:15
@Lucky-Sharma Lucky-Sharma force-pushed the Update-icons-app-sidebar branch from 011efab to 833ddaf Compare November 15, 2025 08:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update icons in app sidebar

2 participants