feat: show current UI zoom state on workspace settings page

[Herrtian]

Summary

• Display the current UI scale/zoom percentage in the Workspace settings page
• Shows the zoom level as a percentage (e.g., "100%") under the Appearance section
• Includes a description with keyboard shortcut hints (Ctrl+/-/0 or ⌘+/-/0)

How it works

• Reads the current scale factor from WindowSizeManager
• Displays it as a simple percentage label in the settings
• Shows platform-appropriate keyboard shortcut hints

Closes #5396

Screenshots

N/A (text-only display of current zoom percentage)

Summary by Sourcery

New Features:

• Show the current UI scale/zoom percentage in the Workspace settings Appearance section, including platform-specific keyboard shortcut hints for adjusting and resetting zoom.

[sourcery-ai]

Reviewer's Guide

Adds a new UI scale display section to the Workspace settings Appearance area, reading the current zoom factor from WindowSizeManager and rendering it as a percentage with platform-specific keyboard shortcut guidance.

Sequence diagram for loading and displaying UI scale in workspace settings

sequenceDiagram
  actor User
  participant SettingsWorkspaceView
  participant UIScaleFactorDisplay
  participant UIScaleFactorDisplayState
  participant WindowSizeManager

  User->>SettingsWorkspaceView: Open workspace settings
  activate SettingsWorkspaceView
  SettingsWorkspaceView->>UIScaleFactorDisplay: Build UIScaleFactorDisplay
  activate UIScaleFactorDisplay
  UIScaleFactorDisplay->>UIScaleFactorDisplayState: createState
  deactivate UIScaleFactorDisplay
  activate UIScaleFactorDisplayState
  UIScaleFactorDisplayState->>UIScaleFactorDisplayState: initState
  UIScaleFactorDisplayState->>WindowSizeManager: getScaleFactor
  activate WindowSizeManager
  WindowSizeManager-->>UIScaleFactorDisplayState: scaleFactor (double)
  deactivate WindowSizeManager
  UIScaleFactorDisplayState->>UIScaleFactorDisplayState: setState update _scaleFactor
  UIScaleFactorDisplayState->>SettingsWorkspaceView: build SettingsCategory with percentage
  deactivate UIScaleFactorDisplayState
  SettingsWorkspaceView-->>User: Show UI Scale section with current zoom and shortcuts
  deactivate SettingsWorkspaceView

Loading

Class diagram for new UI scale display in workspace settings

classDiagram
  class SettingsWorkspaceView {
    +build(context)
  }

  class UIScaleFactorDisplay {
    +UIScaleFactorDisplay()
    +createState() UIScaleFactorDisplayState
  }

  class UIScaleFactorDisplayState {
    -WindowSizeManager _windowSizeManager
    -double _scaleFactor
    +initState()
    +_loadScaleFactor() Future~void~
    +build(context)
  }

  class WindowSizeManager {
    +WindowSizeManager()
    +getScaleFactor() Future~double~
  }

  class SettingsCategory {
    +title
    +description
    +children
  }

  class Row {
    +children
  }

  class FlowyText {
    +semibold(text, fontSize)
  }

  SettingsWorkspaceView --> UIScaleFactorDisplay : contains
  UIScaleFactorDisplay --> UIScaleFactorDisplayState : creates
  UIScaleFactorDisplayState --> WindowSizeManager : uses
  UIScaleFactorDisplayState --> SettingsCategory : builds
  UIScaleFactorDisplayState --> Row : builds
  UIScaleFactorDisplayState --> FlowyText : displays_percentage

Loading

File-Level Changes

Change	Details	Files
Introduce a UI scale/zoom display in the Workspace settings Appearance section that shows the current zoom percentage and keyboard shortcuts.	Import the WindowSizeManager so the settings page can query the current UI scale factor. Insert a new UI scale display widget and a spacer into the Appearance section before the theme settings. Implement a stateful _UIScaleFactorDisplay widget that asynchronously fetches the scale factor, converts it to a percentage, and renders it as a SettingsCategory. Determine the correct modifier key label (⌘ vs Ctrl) based on the current platform and include shortcut hints in the description text.	frontend/appflowy_flutter/lib/workspace/presentation/settings/pages/settings_workspace_view.dart

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#5396	Display the current UI zoom/scale state on the Workspace settings page (Workspace/Appearance section) so users can see the current zoom level.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• All user-facing strings in _UIScaleFactorDisplay (title, description text) are hard-coded; consider moving these into the existing localization system (LocaleKeys) to match the rest of the settings UI.
• The scale factor is only read once in initState; if the zoom can change while the settings page is open, consider wiring this to existing state (e.g., a Cubit/stream or a listener on WindowSizeManager) so the displayed percentage stays in sync with the actual UI scale.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- All user-facing strings in `_UIScaleFactorDisplay` (title, description text) are hard-coded; consider moving these into the existing localization system (`LocaleKeys`) to match the rest of the settings UI.
- The scale factor is only read once in `initState`; if the zoom can change while the settings page is open, consider wiring this to existing state (e.g., a Cubit/stream or a listener on `WindowSizeManager`) so the displayed percentage stays in sync with the actual UI scale.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}