Skip to content

feat(widgets): reset the widget order to the default, specs for the keyboard move - #159

Merged
inkly merged 2 commits into
mainfrom
feat/dashboard-widget-order
Nov 9, 2026
Merged

inkly merged 2 commits into
mainfrom
feat/dashboard-widget-order

Conversation

@inkly

@inkly inkly commented Nov 9, 2026

Copy link
Copy Markdown
Collaborator

What

Reordering the sidebar widgets by drag and drop already ships on main (v0.4.88, ported from IceWhaleTech/CasaOS-UI#270 by moderathor12, Apache-2.0): a drag handle per widget in Widgets Settings, arrow keys on the handle, and a saved order that survives a reload. This PR adds what that left out.

  • "Reset to the default order" link in Widgets Settings. Puts the widgets back in the order the dashboard ships them, keeps which ones are hidden, saves like any other change. Disabled while the order already is the shipped one. en_US and fr_FR strings.
  • Component specs for the keyboard move (Settings.spec.js): down, up, no-op at either end, visibility kept, focus follows the moved widget, reset button enabled/disabled and its result.
  • resetWidgetOrder in widgetOrder.js, with specs (a name the dashboard no longer ships goes last instead of being lost).
  • The shipped-widgets list moves from Settings.vue to shippedWidgets.js so a spec can replace webpack's require.context. No behaviour change.
  • CHANGELOG entry under Unreleased, crediting #270.

Where the order lives (unchanged, and why)

The user service's custom storage, key widgets_config, through $api.users.getCustomStorage / setCustomStorage. It is per user and follows them across browsers and phones, which localStorage would not. Loading goes through combineWidgetSettings: saved order wins, a widget a newer version adds goes at the end, one that is no longer shipped or is named twice is dropped, a missing or non-boolean show falls back to the shipped one. These cases were already specced.

The "widgets" that can be ordered are the four sidebar ones (Time, System status, Storage, Network). Backups, Statistics and Fleet are app-grid cards, not sidebar widgets, so they are outside this setting.

Checked

  • eslint on src/components/widgets: clean. Full vitest on Node 22 / pnpm 9: 182 files, 8297 tests pass.
  • Mock dev server (vue-cli-service serve --mode mock against the in-repo stub), desktop 1024 wide: ArrowDown on the Time handle moved it below System status, focus stayed on the handle, the sidebar followed, the saved list changed, the order survived a reload, the reset link was disabled at the shipped order and enabled afterwards, and clicking it restored clock, cpu, disks, network in the saved list.
  • Phone width (375): sidebar opens from the top bar, the Widgets Settings menu fits in the viewport with handles, the reset link and no horizontal scroll.
  • Not verified: mouse and touch dragging. The browser pane's synthetic drag does not start a native drag, so I could not exercise it. That code (vuedraggable) is untouched here and has shipped since v0.4.88.

inkly added 2 commits November 9, 2026 12:25
…he keyboard move

Widgets Settings gets a "Reset to the default order" link: the widgets go back
to the order the dashboard ships them, each keeping whether it is hidden. It is
disabled while the order already is the shipped one.

The shipped-widgets list moves out of Settings.vue into shippedWidgets.js so a
component spec can replace webpack's require.context. New specs cover the arrow
key move (down, up, ends, focus following the widget), the reset button, and
resetWidgetOrder with a name the dashboard no longer ships.

The drag handles and the arrow keys this completes come from
IceWhaleTech/CasaOS-UI#270 by moderathor12 (Apache-2.0).
# Conflicts:
#	CHANGELOG.md
#	src/assets/lang/en_US.json
#	src/assets/lang/fr_FR.json
@inkly
inkly merged commit e047894 into main Nov 9, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant