Feat: Add compact workspace drawer style

[DenysMb]

Pre-flight Checklist

Please ensure you've completed all of the following.

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.

Description of Change

Added an option "Use compact workspace drawer". This option shows a smaller version of the workspace drawer (the same width as the sidebar), displaying the "All services" workspace as displaying the first character of the name of all the user-created workspace (so if we start the name of the workspace with an emoji, for example, we'll display the emoji).
I always fixed a bug

Motivation and Context

The workspace drawer is too big to use the "Always show workspace drawer" option comfortably.
In order to fix this, I added a option to use a compact workspace drawer style.

Screenshots

Screencast_20251122_201902.mp4

Screencast_20251122_202119.mp4

Checklist

• My pull request is properly named
• The changes respect the code style of the project (pnpm prepare-code)
• pnpm test passes
• I tested/previewed my changes locally

Release Notes

Added "Use compact workspace drawer" option.

[tbaumann]

I love this. Switching workplaces takes so many clicks right now. (keeping the drawer open is not an option at it's current size)

[Copilot]

Pull request overview

Adds a new “Use compact workspace drawer” option to render a narrower workspace drawer (aligned with sidebar width) and adjusts styling/animations to improve drawer UX.

Changes:

• Introduces compact drawer mode (new setting + theme/style support) and renders compact workspace items (icon/initial).
• Reworks drawer width/transform logic using CSS variables and dynamic appearance-generated CSS.
• Tweaks workspace switching delays to respect prefers-reduced-motion and avoid animation jank.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/themes/default/index.ts	Adds a compactWidth theme value for the drawer.
src/styles/vertical.scss	Adjusts active workspace button styling behavior for compact mode.
src/styles/layout.scss	Introduces --workspace-drawer-width CSS variable + drawer shadow overlay styling.
src/i18n/locales/en-US.json	Adds strings for the new setting and a “services” label.
src/features/workspaces/store.ts	Changes workspace switching timing to align with animation duration / reduced motion.
src/features/workspaces/components/WorkspaceDrawerItem.tsx	Renders compact item UI (icon/initial) and adds compact-specific styles.
src/features/workspaces/components/WorkspaceDrawer.tsx	Adds compact drawer layout + passes compact state down to items.
src/features/appearance/index.ts	Adds compact drawer CSS generation, transform logic, and reactions for transition control.
src/containers/settings/EditSettingsScreen.tsx	Adds the new setting metadata for the settings screen.
src/config.ts	Adds default app setting useCompactWorkspaceDrawer.
src/components/settings/settings/EditSettingsForm.tsx	Adds the toggle control to the settings form.
src/components/layout/AppLayout.tsx	Adds app--compact-workspace class and adjusts transform to respect compact width.

Comments suppressed due to low confidence (1)

src/features/workspaces/components/WorkspaceDrawerItem.tsx:165

• In compact mode the visual label is reduced to an icon/initial, but the tooltip content only shows the keyboard shortcut and not the workspace name—making it harder for users (and assistive tech) to identify items. Consider adding aria-label={name} (and/or including name in data-tooltip-content, or adding a title) so the compact representation remains discoverable and screen-reader friendly.

        data-tooltip-id="tooltip-workspaces-drawer"
        data-tooltip-content={acceleratorString({
          index: shortcutIndex,
          keyCombo: `${cmdOrCtrlShortcutKey(false)}+${altKey(false)}`,
        })}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.