feat(ui): simplify connection list selected state styling by ysfscream · Pull Request #2026 · emqx/MQTTX

ysfscream · 2026-01-20T09:52:57Z

Summary

Simplify connection list selected state to use solid background color
Remove gradient and shadow effects for cleaner UI

Test plan

Verify selected state is visible in light theme
Verify selected state is visible in dark theme
Verify selected state is visible in night theme

Use solid background color for selected state without additional effects

- Move badge to right: 8px position - Add left shadow mask to cover truncated text

- Remove send button and message shadows for cleaner dark/night themes - Adjust topic color indicator height calculations for better alignment

- Remove separator lines from message properties for consistent appearance - Add bottom border to connection list header - Add icons to new connection/group dropdown menu items - Adjust shadow and color variables in themes

Remove border-bottom from connection topbar for cleaner appearance. Add explicit tree node selection when clicking on connections/collections.

- Add button hover/active effects with smooth transitions - Improve subscription item shadows with layered effect - Add hover translateX animation for subscription items - Add color line height animation on hover - Improve close button with scale hover effect - Update entry animation to fade + slide up

- Merge connect button and dropdown into a single themed button group - Unify button border-radius to 8px across the application - Add 4px border-radius for Meta dropdown button in publish area

- Merge connect button and dropdown into themed button group - Unify button border-radius to 8px

- Sync leftbar styling with animations and indicator - Sync connection list to use text color for online status - Sync subscription list animations and hover effects - Sync message item styling and shadows - Update theme variables for shadows - Adjust layout positions for leftbar width

…tions - Add segmented control for view mode toggle with sliding animation - Redesign toolbar with compact filter controls and type pills - Optimize DiffView header with side-by-side comparison layout - Add badge-style metadata display (QoS, Retain, Size) - Move navigation buttons to header edges for better UX - Unify JSONViewer header with same design pattern - Remove colons from Previous/Current labels in translations

- Fix nav-right buttons not stretching to full header height - Add explicit hover styles for nav-right buttons - Ensure consistent hover effect across left and right navigation

Copilot

Pull request overview

This PR updates UI styling across the connections area and several viewer/components, aiming for a cleaner, more uniform look (solid selected states, updated spacing, and consistent rounding/shadows across themes).

Changes:

Adjusts left sidebar/layout offsets (e.g., 81→76px) and related fixed-position left margins.
Simplifies/modernizes connection list item layout (online indicator via text color, unread badge positioning).
Broad UI restyling across viewer widgets and shared components (toolbars, card radii, shadows, animations, theme variables).

Reviewed changes

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

Show a summary per file

File	Description
web/src/views/connections/index.vue	Adjusts left offset for the connection list container.
web/src/views/connections/ConnectionsList.vue	Refactors connection item markup/CSS; adjusts unread badge and online indicator.
web/src/views/connections/ConnectionsDetail.vue	Updates computed/fixed left offsets to match new sidebar widths.
web/src/views/connections/ConnectionForm.vue	Updates connect button/dropdown layout and styling.
web/src/views/Home.vue	Updates right pane offsets to match sidebar width changes.
web/src/components/SubscriptionsList.vue	Tweaks spacing, transitions, hover effects, and popover rounding.
web/src/components/MsgRightItem.vue	Adds shadow styling to outgoing message bubbles.
web/src/components/MsgLeftItem.vue	Updates message bubble background and layout metrics.
web/src/components/MessageList.vue	Updates scrollbar thumb radius.
web/src/components/Leftbar.vue	Restyles leftbar (sizes, gradients, hover/active states).
web/src/components/LeftPanel.vue	Updates fixed left offsets and slide animation endpoints.
web/src/assets/scss/theme/night.scss	Adjusts shadow-related theme variables.
web/src/assets/scss/theme/light.scss	Tweaks text color variable for right info.
web/src/assets/scss/theme/dark.scss	Adjusts shadow-related theme variables.
web/src/assets/scss/mixins.scss	Updates shared message mixin styles and spacing.
web/src/assets/scss/element/element-reset.scss	Updates Element UI mini button radius.
src/widgets/JSONViewer.vue	Significant JSON viewer header/navigation/search UI redesign.
src/widgets/DiffView.vue	Updates diff header UI and navigation controls layout/styles.
src/views/viewer/dashboard/DashboardView.vue	Updates dashboard card/layout radii to 8px.
src/views/viewer/PayloadInspector.vue	Replaces controls with a new toolbar + segmented view mode control.
src/views/script/index.vue	Updates container border radius.
src/views/log/index.vue	Updates container border radius.
src/views/connections/ConnectionsList.vue	Connection tree item UI updates; ensures current node selection; dropdown styling.
src/views/connections/ConnectionForm.vue	Updates connect button/dropdown grouping and styling.
src/views/Home.vue	Applies glassy topbar styling and updates rightbar margin-left.
src/utils/styles.ts	Updates shared layout constants for left offsets.
src/lang/viewer.ts	Removes trailing colons from “Previous/Current” labels.
src/components/charts/BigNumber.vue	Updates rounding to 8px.
src/components/ai/MCPSettings.vue	Updates rounding to 8px across several UI blocks.
src/components/ai/CopilotMessages.vue	Updates code block rounding to 8px.
src/components/SubscriptionsList.vue	Adds/updates button styling, transitions, hover effects, and popover rounding.
src/components/MsgRightItem.vue	Adds shadow styling to outgoing message bubbles.
src/components/MsgPublish.vue	Updates button radii and dropdown button styling.
src/components/MsgLeftItem.vue	Updates message bubble background, shadow, and topic color sizing logic.
src/components/Leftbar.vue	Restyles leftbar (sizes, gradients, hover/active states).
src/components/FullMsgDialog.vue	Updates container border radius.
src/components/EmptyPage.vue	Redesigns empty state visuals (animations, button styles, typography).
src/assets/scss/theme/night.scss	Adjusts shadow-related theme variables.
src/assets/scss/theme/light.scss	Tweaks text color variable for right info.
src/assets/scss/theme/dark.scss	Adjusts shadow-related theme variables.
src/assets/scss/theme/custom/prism-one-light.scss	Updates code toolbar rounding.
src/assets/scss/theme/custom/prism-one-dark.scss	Updates code toolbar rounding.
src/assets/scss/mixins.scss	Updates shared message mixin styles and spacing.
src/assets/scss/element/element-reset.scss	Updates Element UI rounding (mini buttons/progress).
src/assets/scss/connections.scss	Updates connection list left offset to match new leftbar width.
src/assets/scss/base.scss	Updates scrollbar thumb radius and textarea rounding.

Comments suppressed due to low confidence (4)

src/widgets/DiffView.vue:183

The this variable of this arrow function it will not be bound to the Vue instance.
The this variable of this arrow function it will not be bound to the Vue instance.

  private handleKeydown = (e: KeyboardEvent) => {
    const active = document.activeElement as HTMLElement | null
    const isEditable =
      !!active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)
    if (isEditable) return
    if (e.key === 'ArrowLeft') {
      e.preventDefault()
      this.goToPrevious()
    } else if (e.key === 'ArrowRight') {
      e.preventDefault()
      this.goToNext()
    }
  }

src/widgets/JSONViewer.vue:358

The this variable of this arrow function it will not be bound to the Vue instance.
The this variable of this arrow function it will not be bound to the Vue instance.

  private handleKeydown = (e: KeyboardEvent) => {
    const active = document.activeElement as HTMLElement | null
    const isEditable =
      !!active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)
    if (isEditable) return
    if (e.key === 'ArrowLeft') {
      e.preventDefault()
      this.goToPrevious()
    } else if (e.key === 'ArrowRight') {
      e.preventDefault()
      this.goToNext()
    }
  }

web/src/views/connections/ConnectionsDetail.vue:965

The this variable of this arrow function it will not be bound to the Vue instance.
src/views/viewer/dashboard/DashboardView.vue:821
Variable 'value' is of type date, object or regular expression, but it is compared to an expression of type null.

      } else if (typeof value === 'object' && value !== null && !Array.isArray(value)) {

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

Copilot · 2026-01-21T09:31:33Z

+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);
+  }
+}


@keyframes glow-pulse is defined but not referenced anywhere in this stylesheet. Consider removing it to avoid dead CSS, or add the corresponding animation: glow-pulse ... usage if it’s intended.

Copilot · 2026-01-21T09:31:33Z

+    background: var(--color-bg-glass);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-bottom: 1px solid var(--color-border-default);


--color-bg-glass is referenced here but isn’t defined in the theme variables (no --color-bg-glass: found in src/assets/scss/theme/*). This makes the background declaration invalid and will fall back unexpectedly. Define --color-bg-glass for all themes (or switch to an existing variable with an explicit fallback like var(--color-bg-normal, ...)).

Copilot · 2026-01-21T09:31:33Z

      .el-input.is-disabled .el-input__inner {
-        background-color: transparent;
+        background-color: var(--color-bg-msg-input);
      }


--color-bg-msg-input is used for disabled input backgrounds here but isn’t defined anywhere in the theme files. Add this CSS variable to each theme (or provide a fallback) to avoid invalid CSS / inconsistent disabled input styling.

Copilot · 2026-01-21T09:31:34Z

      .el-input.is-disabled .el-input__inner {
-        background-color: transparent;
+        background-color: var(--color-bg-msg-input);
      }


--color-bg-msg-input is used for disabled input backgrounds here but isn’t defined anywhere in the theme files. Add this CSS variable to each theme (or provide a fallback) to avoid invalid CSS / inconsistent disabled input styling.

Copilot · 2026-01-21T09:31:34Z

+  Show = '337px',
+  Hide = '77px',


LeftValues looks off-by-one vs the updated layout widths: src/components/Leftbar.vue:97 sets the left bar to 76px, and src/assets/scss/connections.scss:6 positions the connection list at left: 76px with width: 260px (so the content left should be 76px when hidden, 336px when shown). Current values Hide='77px' / Show='337px' will introduce a 1px gap/misalignment for views using these enums (e.g. ConnectionsDetail.vue topbar :style.left).

Suggested change

Show = '337px',

Hide = '77px',

Show = '336px',

Hide = '76px',

Copilot · 2026-01-21T09:31:34Z

 <template>
  <div class="json-tree-view">
-    <div class="json-header">
+    <div class="json-header" v-if="currentMessage && currentMessage.createAt">
+      <el-tooltip
+        :effect="theme !== 'light' ? 'light' : 'dark'"


The PR title/description says this is about simplifying the connection list selected-state styling, but this file contains a substantial redesign of the JSON viewer header/navigation/search UI. Please update the PR description to reflect the broader scope, or split these UI redesign changes into separate PR(s) to keep review risk manageable.

Copilot · 2026-01-21T09:31:35Z

+@keyframes glow-pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);
+  }
+}
+


@keyframes glow-pulse is defined but not referenced anywhere in this stylesheet. Consider removing it to avoid dead CSS, or add the corresponding animation: glow-pulse ... usage if it’s intended.

Suggested change

@keyframes glow-pulse {

0%,

100% {

box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);

}

50% {

box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.3);

}

}

feat(ui): simplify connection list selected state styling

1832c68

Use solid background color for selected state without additional effects

github-project-automation Bot added this to MQTTX Jan 20, 2026

ysfscream added 10 commits January 20, 2026 17:58

feat(ui): improve unread message badge position and add mask effect

a325909

- Move badge to right: 8px position - Add left shadow mask to cover truncated text

feat(ui): refine message item styling and remove shadows

5b74d54

- Remove send button and message shadows for cleaner dark/night themes - Adjust topic color indicator height calculations for better alignment

feat(ui): improve connection list and message item styling

f128faf

- Remove separator lines from message properties for consistent appearance - Add bottom border to connection list header - Add icons to new connection/group dropdown menu items - Adjust shadow and color variables in themes

feat(ui): remove connection topbar divider and improve tree selection

02aee92

Remove border-bottom from connection topbar for cleaner appearance. Add explicit tree node selection when clicking on connections/collections.

feat(ui): unify button styles and merge connect button group

0e77019

- Merge connect button and dropdown into a single themed button group - Unify button border-radius to 8px across the application - Add 4px border-radius for Meta dropdown button in publish area

feat(web): sync UI button styles from desktop

e73e2ce

- Merge connect button and dropdown into themed button group - Unify button border-radius to 8px

fix(ui): fix navigation buttons height and hover consistency

0b07008

- Fix nav-right buttons not stretching to full header height - Add explicit hover styles for nav-right buttons - Ensure consistent hover effect across left and right navigation

ysfscream marked this pull request as ready for review January 21, 2026 09:21

Copilot AI review requested due to automatic review settings January 21, 2026 09:21

ysfscream self-assigned this Jan 21, 2026

ysfscream added enhancement New feature or request UI/UX Improve some UI \ UX web MQTTX Web desktop MQTTX Desktop labels Jan 21, 2026

ysfscream moved this to In Progress in MQTTX Jan 21, 2026

ysfscream added this to the v1.13.0 milestone Jan 21, 2026

Copilot started reviewing on behalf of ysfscream January 21, 2026 09:22 View session

ysfscream merged commit f5ba609 into main Jan 21, 2026
10 checks passed

ysfscream deleted the ui/connection-list-selected-state branch January 21, 2026 09:22

github-project-automation Bot moved this from In Progress to Done in MQTTX Jan 21, 2026

Copilot AI reviewed Jan 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): simplify connection list selected state styling#2026

feat(ui): simplify connection list selected state styling#2026
ysfscream merged 11 commits intomainfrom
ui/connection-list-selected-state

ysfscream commented Jan 20, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Copilot AI Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ysfscream commented Jan 20, 2026

Summary

Test plan

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants