Remove three widget limit

[jose03pedro]

Issue #1990

Issue and requirements

Umbrel users can customize the homescreen by enabling widgets from installed apps and system features. Before this implementation, the widget selector only allowed three widgets to be enabled at the same time.

The issue requested removing this fixed three-widget limit because the homescreen already supports sliding between pages. The implemented change allows users to enable more than three widgets overall, while the existing layout still distributes them across multiple pages instead of placing every widget on the same page.

The issue can be found here.

The main goal of the solution was to allow users to enable more than three available widgets overall while relying on Umbrel's existing homescreen pagination to display them across multiple pages.

Source code files

The fix introduced both frontend and backend changes to remove the duplicated hardcoded widget limit.

Frontend changes

The widget selector logic was updated so it no longer blocks users after three selected widgets.

This interface now allows users to:

• Enable a fourth widget from the widget selector
• Continue enabling additional widgets after the fourth one
• Disable any selected widget normally
• Use the existing homescreen paging layout to view enabled widgets across multiple pages
• See copy that no longer says only three widgets can be selected

The relevant frontend source files submitted in the repository are:

• packages/ui/src/hooks/use-widgets.ts
• packages/ui/src/routes/edit-widgets/widget-selector.tsx
• packages/ui/src/modules/widgets/shared/constants.ts
• packages/ui/public/locales/*.json

Backend changes

Backend widget validation was updated so the server no longer rejects requests once three widgets are already enabled overall.

Backend support now:

• Keeps validating that the widget exists
• Keeps preventing duplicate enabled widgets
• Removes only the fixed MAX_ALLOWED_WIDGETS = 3 restriction
• Persists additional enabled widget IDs in the existing widget store
• Returns the updated widget list through the existing tRPC flow

The relevant backend source file submitted in the repository is:

• packages/umbreld/source/modules/widgets/routes.ts

The indirectly involved layout files are:

• packages/ui/src/modules/desktop/app-grid/app-grid.tsx
• packages/ui/src/modules/desktop/app-grid/app-pagination-utils.tsx
• packages/ui/src/modules/desktop/desktop-content.tsx

Design of the fix

The implementation is intentionally small because the homescreen layout already has the behavior needed to support more enabled widgets across multiple pages.

The previous limit existed in two places: the frontend blocked the user from enabling a fourth widget, and the backend rejected the same request if it reached the server. Removing only one side would not fully solve the issue, so both layers were updated.

The implemented solution allows users to:

• Enable more than three widgets overall
• Keep using the same widget selector interface
• Keep using the same backend widget storage
• Let the existing desktop pagination distribute widgets across pages, with each page still constrained by the current layout

Internally, no new rendering system was required. The existing app grid and pagination utilities already know how to place widgets and apps across homescreen pages, so the safest fix was to remove the obsolete validation instead of redesigning the desktop.

Special care was taken to ensure:

• The frontend no longer shows a false three-widget limit
• The backend still rejects invalid widget IDs
• Duplicate widget entries are still prevented
• Existing widget enable and disable behavior remains unchanged
• Homescreen pagination continues to handle the visual layout without changing the existing number of widgets that fit on a single page

Fix source code

The source-code fix was submitted as changes under the packages/ directory. The patch is represented by the GitHub commit / pull request diff, and the most relevant code fragments are documented with the GitHub diff screenshots already included in this page:

• frontend behavior change: packages/ui/src/hooks/use-widgets.ts
• widget selector behavior change: packages/ui/src/routes/edit-widgets/widget-selector.tsx
• shared constant removal: packages/ui/src/modules/widgets/shared/constants.ts
• backend validation change: packages/umbreld/source/modules/widgets/routes.ts

The screenshots above show the relevant fragments of the patch: the frontend limit check was removed, the widget selector no longer handles a "too many widgets" state, the shared MAX_WIDGETS constant was removed, and the backend no longer rejects valid widget-enable requests only because three widgets are already enabled.

The submitted code also updates the existing locale strings under packages/ui/public/locales/ so the user-facing copy no longer claims that only three widgets can be selected. These translation-only changes are part of the submitted packages/ changes but are not shown as separate source-code screenshots here.

Submit the fix

The fix is submitted through the GitHub repository by committing only the modified source files under the packages/ directory. The pull request should be linked to issue #1990, and this section should be updated with the final PR link once it is opened.