**Migrated from GitHub issue icub3d/decentcom#96** **Original Author:** @icub3d **Original Date:** 2026-04-18T21:17:43Z --- # Feature: Per-Server Management UI ## Overview Move the server configuration and management tools from the global sidebar settings icon to a dedicated trigger on each server icon. This makes it clearer which server is being managed and follows common patterns in similar applications. ## Background Currently, server settings (invites, bans, allowlist, roles) are accessed via a single cog icon at the bottom of the server sidebar. This icon only appears if you have permissions on the *currently active* server. Moving this to a per-server trigger improves discoverability and context. ## Requirements - [x] Remove the global \"Server settings\" cog from the bottom of \`ServerSidebar.tsx\`. - [x] Add a settings cog icon to each server button in the sidebar. - [x] Show the cog icon on hover for any server. - [x] Clicking the cog should open a server settings interface (modal or floating panel). - [x] If clicking settings for a server that isn't active, the app should switch to that server and then open settings. - [x] Ensure the server settings interface is still permission-aware. ## Design ### Component Changes - \`client/src/components/layout/ServerSidebar.tsx\`: - Remove the bottom \`⚙\` button. - Update the server icon mapping to include a hidden-by-default cog button. - Implement hover logic for showing the cog. - Update \`togglePanel\` or use a new modal state for server settings. - \`client/src/components/layout/AppShell.tsx\`: - Consider moving server settings from a sidebar panel to a proper \`Modal\` component for better focus. ## Task List - [x] Refactor \`ServerSidebar.tsx\` to remove the global server settings button. - [x] Implement hover state and cog icon for individual server items in \`ServerSidebar\`. - [x] Create a \`ServerSettingsModal\` component (or refactor the existing panel into one) to handle server-specific management tasks. - [x] Connect the per-server cog to the settings modal/panel. - [x] Implement logic to switch servers if settings are requested for a non-active server. ## Test List - [x] Verify that the global server settings icon is gone. - [x] Verify that hovering over a server reveals a settings cog. - [x] Verify that clicking the cog opens the settings for the correct server. - [x] Verify that clicking settings for an inactive server switches to that server. - [x] Verify that users without permissions cannot see or access management features (invites, bans, etc.) in the settings. ## Open Questions - Should the settings open in a Modal (centered) or a side panel (like now)? **Resolved: Modal (centered).** - How do we handle \"Connecting...\" state if a user clicks settings for a server they aren't connected to yet? **Resolved: show a \"Connecting to server…\" message in the modal.**

icub3d commented

2026-04-26 16:46:23 +00:00

Owner

Migrated from GitHub issue icub3d/decentcom#96
Original Author: @icub3d
Original Date: 2026-04-18T21:17:43Z

Feature: Per-Server Management UI

Overview

Move the server configuration and management tools from the global sidebar settings icon to a dedicated trigger on each server icon. This makes it clearer which server is being managed and follows common patterns in similar applications.

Background

Currently, server settings (invites, bans, allowlist, roles) are accessed via a single cog icon at the bottom of the server sidebar. This icon only appears if you have permissions on the currently active server. Moving this to a per-server trigger improves discoverability and context.

Requirements

Remove the global "Server settings" cog from the bottom of `ServerSidebar.tsx`.
Add a settings cog icon to each server button in the sidebar.
Show the cog icon on hover for any server.
Clicking the cog should open a server settings interface (modal or floating panel).
If clicking settings for a server that isn't active, the app should switch to that server and then open settings.
Ensure the server settings interface is still permission-aware.

Design

Component Changes

`client/src/components/layout/ServerSidebar.tsx`:
- Remove the bottom `⚙` button.
- Update the server icon mapping to include a hidden-by-default cog button.
- Implement hover logic for showing the cog.
- Update `togglePanel` or use a new modal state for server settings.
`client/src/components/layout/AppShell.tsx`:
- Consider moving server settings from a sidebar panel to a proper `Modal` component for better focus.

Task List

Refactor `ServerSidebar.tsx` to remove the global server settings button.
Implement hover state and cog icon for individual server items in `ServerSidebar`.
Create a `ServerSettingsModal` component (or refactor the existing panel into one) to handle server-specific management tasks.
Connect the per-server cog to the settings modal/panel.
Implement logic to switch servers if settings are requested for a non-active server.

Test List

Verify that the global server settings icon is gone.
Verify that hovering over a server reveals a settings cog.
Verify that clicking the cog opens the settings for the correct server.
Verify that clicking settings for an inactive server switches to that server.
Verify that users without permissions cannot see or access management features (invites, bans, etc.) in the settings.

Open Questions

Should the settings open in a Modal (centered) or a side panel (like now)? Resolved: Modal (centered).
How do we handle "Connecting..." state if a user clicks settings for a server they aren't connected to yet? Resolved: show a "Connecting to server…" message in the modal.

icub3d

closed this issue
added the
status:complete

area:ux

type:feature
labels

Rows
Columns

type:feature: Move server management to per-server settings component #68