Feature/pages ordering by rajnandan1 · Pull Request #611 · rajnandan1/kener

rajnandan1 · 2026-02-26T05:17:51Z

This pull request introduces a new feature that allows administrators to control the display order of pages in the public page switcher via the "Manage → Customizations" interface. It adds a new pageOrderingSettings object to site data, updates the backend API to respect this ordering, and provides a UI for reordering pages. Additionally, it improves the monitor group UI to allow reordering of monitors. Documentation is updated to describe the new functionality.

Request in #609

Page Ordering Feature

Added a new PageOrderingSettings interface and integrated it into site data, allowing page order and enable/disable state to be stored and retrieved (src/lib/types/site.ts, src/lib/server/controllers/siteDataController.ts, src/lib/server/controllers/siteDataKeys.ts). [1] [2] [3] [4]
Updated the backend endpoint to return pages in the custom order if pageOrderingSettings is enabled (src/lib/server/api-server/pages/get.ts).
Modified the page selector logic to use the correct default home page when custom ordering is enabled (src/lib/components/PageSelector.svelte).

Admin UI for Page Ordering

Added a new section in the customization page to enable/disable page ordering and reorder pages with up/down arrows, persisting changes to the backend (src/routes/(manage)/manage/app/customizations/+page.svelte). [1] [2] [3] [4] [5] [6] [7]

Monitor Group UI Improvements

Enhanced the monitor group management UI to allow reordering monitors within a group using up/down arrows (src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelte). (src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelteR4-R11, src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelteR102-R119, src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelteL226-R287)

Documentation Updates

Updated documentation to describe the new page ordering feature, its storage, and how to verify its behavior (src/routes/(docs)/docs/content/v4/setup/customizations.md). [1] [2] [3]

Minor Fixes

Removed the placeholder from the page path input field for clarity (src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte). (src/routes/(manage)/manage/app/pages/[page_id]/+page.svelteL465)

…hing logic

… buttons

…stomizations

Copilot

Pull request overview

Adds admin-controlled ordering for public pages (page switcher) by persisting a new pageOrderingSettings site-data object, applying it in the pages API, and providing a Manage UI to reorder pages. Also adds up/down reordering UI for monitors inside a monitor group, and updates docs.

Changes:

Introduce PageOrderingSettings in shared types + site-data plumbing (siteDataKeys, SiteDataTransformed).
Apply pageOrderingSettings ordering in /dashboard-apis/pages and adjust PageSelector home-page selection behavior.
Add Manage → Customizations UI to enable and reorder pages; add monitor-group reorder UI; update docs.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/lib/types/site.ts	Adds `PageOrderingSettings` interface.
src/lib/server/controllers/siteDataController.ts	Extends transformed site data typing to include `pageOrderingSettings`.
src/lib/server/controllers/siteDataKeys.ts	Registers `pageOrderingSettings` as a validated site-data key.
src/lib/server/api-server/pages/get.ts	Sorts returned pages according to `pageOrderingSettings` when enabled.
src/lib/components/PageSelector.svelte	Adjusts how the default home page is selected when current path isn’t found.
src/routes/(manage)/manage/app/customizations/+page.svelte	Adds UI and persistence for enabling/reordering pages in the switcher.
src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelte	Adds up/down reordering UI for group monitor members.
src/routes/(docs)/docs/content/v4/setup/customizations.md	Documents page ordering and verification steps.
src/routes/(manage)/manage/app/pages/[page_id]/+page.svelte	Removes the page-path placeholder.

Copilot · 2026-02-26T05:24:46Z

src/routes/(manage)/manage/app/customizations/+page.svelte

+                      class="h-8 w-8"
+                      disabled={index === 0}
+                      onclick={() => movePageUp(index)}
+                    >
+                      <ArrowUp class="h-4 w-4" />


These icon-only reorder buttons don’t provide an accessible name. Add an aria-label (or visually-hidden text) so screen readers can announce the action (e.g., “Move page up/down”).

Copilot · 2026-02-26T05:24:46Z

src/routes/(manage)/manage/app/customizations/+page.svelte

+                      disabled={index === displayPages.length - 1}
+                      onclick={() => movePageDown(index)}
+                    >
+                      <ArrowDown class="h-4 w-4" />
+                    </Button>


These icon-only reorder buttons don’t provide an accessible name. Add an aria-label (or visually-hidden text) so screen readers can announce the action (e.g., “Move page up/down”).

Copilot · 2026-02-26T05:24:47Z

src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelte

+              disabled={index === 0}
+              onclick={() => moveMonitorUp(index)}
+            >
+              <ArrowUp class="h-3.5 w-3.5" />
+            </Button>


These icon-only reorder buttons don’t provide an accessible name. Add an aria-label (or visually-hidden text) so screen readers can announce the action (e.g., “Move monitor up/down”).

Copilot · 2026-02-26T05:24:47Z

src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelte

+              disabled={index === formData.monitors.length - 1}
+              onclick={() => moveMonitorDown(index)}
+            >
+              <ArrowDown class="h-3.5 w-3.5" />
+            </Button>


These icon-only reorder buttons don’t provide an accessible name. Add an aria-label (or visually-hidden text) so screen readers can announce the action (e.g., “Move monitor up/down”).

Copilot · 2026-02-26T05:24:47Z

src/routes/(docs)/docs/content/v4/setup/customizations.md

@@ -13,6 +13,7 @@ Use **Manage → Customizations** to control visual behavior of the public statu
 - Default theme and theme toggle
 - Site-wide announcement banner
 - Custom CSS (stored now, injection pending)


The intro list still says “Custom CSS (stored now, injection pending)”, but the public layout currently injects customCSS into the <head> as a <style> block. Please update this bullet to match the current runtime behavior.

Suggested change

- Custom CSS (stored now, injection pending)

- Custom CSS injected into the public layout `<head>`

Copilot · 2026-02-26T05:24:47Z

src/lib/components/PageSelector.svelte

  let currentPath = $derived(page.params.page_path);

  let pages = $state<PageNavItem[]>([]);
  let pagesLoading = $state(false);
-
-  const currentPage = $derived(pages.find((p) => p.page_path === currentPath) || pages[0]);
+  const defaultHomePage = $derived(pages.find((p) => p.page_path == ""));


currentPath is derived directly from page.params.page_path, which will be undefined on the home route. That makes the later comparisons (page.page_path === currentPath) not match the home page and can prevent the correct active page highlighting. Consider normalizing currentPath to an empty string (e.g. page.params.page_path ?? "") and use strict equality when finding the default home page.

Copilot · 2026-02-26T05:24:48Z

src/routes/(manage)/manage/app/customizations/+page.svelte

+  async function fetchPages() {
+    loadingPages = true;
+    try {
+      const response = await fetch(clientResolver(resolve, "/manage/api"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "getPages" })
+      });


fetchPages calls the getPages admin action, which (per manage/api/+server.ts) loads monitors for each page via GetPageMonitors (N+1 queries). This customization screen only needs id/page_path/page_title, so this can become unnecessarily expensive with many pages/monitors. Consider adding a lightweight action/endpoint (or an includeMonitors flag) and using that here.

Copilot · 2026-02-26T05:24:48Z

src/routes/(manage)/manage/app/monitors/[tag]/types/monitor-group.svelte

+        <p class="text-sm font-medium">Selected: {formData.monitors.length} monitor(s) — Execution Order</p>
+        <p class="text-muted-foreground text-xs">Monitors will be executed in this order. Use arrows to reorder.</p>


The header/copy says “Execution Order” / “Monitors will be executed in this order”, but group monitors don’t execute member checks; they aggregate the latest results from member monitors (see GroupCall). Since ordering doesn’t affect the computed result, this wording is misleading. Please rephrase to something like “Display order” / “Evaluation order (no functional impact)”.

Suggested change

Selected: {formData.monitors.length} monitor(s) — Execution Order

Monitors will be executed in this order. Use arrows to reorder.

Selected: {formData.monitors.length} monitor(s) — Display order

Evaluation order (no functional impact). Use arrows to reorder.

rajnandan1 added 3 commits February 26, 2026 09:45

refactor: Implement page ordering functionality and enhance page fetc…

7a29d2f

…hing logic

Refactor: Implement monitor reordering functionality with up and down…

555fd3a

… buttons

refactor: Enhance documentation for page ordering functionality in cu…

e581346

…stomizations

Copilot AI review requested due to automatic review settings February 26, 2026 05:17

Copilot started reviewing on behalf of rajnandan1 February 26, 2026 05:18 View session

rajnandan1 merged commit 23b0bae into main Feb 26, 2026
2 checks passed

Copilot AI reviewed Feb 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feature/pages ordering#611

Feature/pages ordering#611
rajnandan1 merged 3 commits intomainfrom
feature/pages-ordering

rajnandan1 commented Feb 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Copilot AI Feb 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	- Custom CSS (stored now, injection pending)
	- Custom CSS injected into the public layout `<head>`

		<p class="text-sm font-medium">Selected: {formData.monitors.length} monitor(s) — Execution Order</p>
		<p class="text-muted-foreground text-xs">Monitors will be executed in this order. Use arrows to reorder.</p>

Uh oh!

Conversation

rajnandan1 commented Feb 26, 2026

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 Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants