fix(widgets): improve widget handling and UI enhancements

- Change widgetsService.list() to accept dashboardId for scoped widget retrieval
- Update TRPC routers to require UUID format for dashboard and widget IDs
- Enhance dashboard widgets section with semantic HTML (hgroup, h4/h5 tags) and better layout
- Add "Remove" button to widget edit page for easier deletion
- Update breadcrumb navigation to include dashboard link when adding widgets
- Replace plain text and links with hgroup elements for better structure in dashboard list
- Add updateState method to WidgetsService for widget state updates via TRPC
- Adjust TRPC widgets.list query to accept dashboardId input for filtered results

Author: EndyKaufman

web/src/app/pages/dashboards/[dashboardId]/index.page.ts

@@ -61,42 +61,41 @@ import { WidgetsService } from '../../../services/widgets.service';
 
         <hr />
       </section>
+      <hgroup>
+        <h4>Widgets ({{ dashboardAndWidgets.widgets.length }})</h4>
+        <p>
+          <a
+            href="/dashboards/{{
+              dashboardAndWidgets.dashboard.id
+            }}/widgets/add/clock"
+            >Add clock</a
+          >
+          <a
+            style="padding-left: 1rem;"
+            href="/dashboards/{{
+              dashboardAndWidgets.dashboard.id
+            }}/widgets/add/calendar"
+            >Add calendar</a
+          >
+        </p>
+      </hgroup>
 
-      <h4>Widgets ({{ dashboardAndWidgets.widgets.length }})</h4>
-
-      <div class="grid">
-        <a
-          href="/dashboards/{{
-            dashboardAndWidgets.dashboard.id
-          }}/widgets/add/clock"
-          >Add clock</a
-        >
-        <a
-          href="/dashboards/{{
-            dashboardAndWidgets.dashboard.id
-          }}/widgets/add/calendar"
-          >Add calendar</a
-        >
-      </div>
       <hr />
 
       @for (widget of dashboardAndWidgets.widgets; track widget.id) {
         <details name="widget" open>
           <summary>
-            {{ widget.type }}
-            <a
-              href="/dashboards/{{
-                dashboardAndWidgets.dashboard.id
-              }}/widgets/{{ widget.id }}"
-              >Edit</a
-            >
-            <a
-              style="padding-left: 1rem;"
-              href="/dashboards/{{
-                dashboardAndWidgets.dashboard.id
-              }}/widgets/{{ widget.id }}/delete"
-              >Delete</a
-            >
+            <hgroup>
+              <h5>{{ widget.type }}</h5>
+              <p>
+                <a
+                  href="/dashboards/{{
+                    dashboardAndWidgets.dashboard.id
+                  }}/widgets/{{ widget.id }}"
+                  >Edit</a
+                >
+              </p>
+            </hgroup>
           </summary>
           <p>{{ widget | json }}</p>
         </details>
@@ -129,7 +128,7 @@ export default class DashboardsEditPageComponent {
                   dashboard => (this.model = dashboard as UpdateDashboardType)
                 )
               ),
-            widgets: this.widgetsService.list(),
+            widgets: this.widgetsService.list(dashboardId),
           })
         : of(null)
     ),

web/src/app/pages/dashboards/[dashboardId]/widgets/[widgetId]/index.page.ts

@@ -40,6 +40,14 @@ import { WidgetsService } from '../../../../../services/widgets.service';
           [model]="model"
         ></formly-form>
         <div class="grid">
+          <a
+            href="/dashboards/{{ dashboardAndWidget.dashboard.id }}/widgets/{{
+              dashboardAndWidget.widget.id
+            }}/delete"
+            type="button"
+            class="secondary"
+            >Remove</a
+          >
           <button type="submit">Save</button>
         </div>
       </form>

web/src/app/pages/dashboards/[dashboardId]/widgets/add/[type]/index.page.ts

@@ -21,7 +21,9 @@ import { WidgetsService } from '../../../../../../services/widgets.service';
         <nav aria-label="breadcrumb">
           <ul>
             <li><a href="/dashboards">Dashboards</a></li>
-            <li>{{ dashboard.name }}</li>
+            <li>
+              <a href="/dashboards/{{ dashboard.id }}">{{ dashboard.name }}</a>
+            </li>
             <li>Add {{ model.type }}</li>
           </ul>
         </nav>

web/src/app/pages/dashboards/index.page.ts

@@ -22,8 +22,12 @@ import { DashboardsService } from '../../services/dashboards.service';
     @for (dashboard of dashboards$ | async; track dashboard.id) {
       <details name="dashboard" open>
         <summary>
-          {{ dashboard.name }}<br />
-          <a href="/dashboards/{{ dashboard.id }}">Edit</a>
+          <hgroup>
+            <h5>{{ dashboard.name }}</h5>
+            <p>
+              <a href="/dashboards/{{ dashboard.id }}">Edit</a>
+            </p>
+          </hgroup>
         </summary>
         <p>{{ dashboard | json }}</p>
       </details>

web/src/app/services/widgets.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 
 import {
   CreateWidgetType,
+  UpdateWidgetStateType,
   UpdateWidgetType,
 } from '../../server/types/WidgetSchema';
 import { injectTrpcClient } from '../trpc-client';
@@ -28,7 +29,11 @@ export class WidgetsService {
     return this.trpc.widgets.delete.mutate({ id });
   }
 
-  list() {
-    return this.trpc.widgets.list.query();
+  list(dashboardId: string) {
+    return this.trpc.widgets.list.query({ dashboardId });
+  }
+
+  updateState(widget: UpdateWidgetStateType) {
+    return this.trpc.widgets.updateState.mutate(widget);
   }
 }

web/src/server/trpc/routers/dashboards.ts

@@ -36,7 +36,7 @@ export const dashboardsRouter = router({
   read: publicProcedure
     .input(
       z.object({
-        id: z.string(),
+        id: z.string().uuid(),
       })
     )
     .output(DashboardSchema)
@@ -76,7 +76,7 @@ export const dashboardsRouter = router({
   delete: publicProcedure
     .input(
       z.object({
-        id: z.string(),
+        id: z.string().uuid(),
       })
     )
     .mutation(async ({ input, ctx }) => {
@@ -130,7 +130,7 @@ export const dashboardsRouter = router({
   generateQrCode: publicProcedure
     .input(
       z.object({
-        dashboardId: z.string(),
+        dashboardId: z.string().uuid(),
       })
     )
     .output(GenerateQrCodeSchema)

web/src/server/trpc/routers/widgets.ts

@@ -45,7 +45,7 @@ export const widgetsRouter = router({
   read: publicProcedure
     .input(
       z.object({
-        id: z.string(),
+        id: z.string().uuid(),
       })
     )
     .output(WidgetSchema)
@@ -115,7 +115,7 @@ export const widgetsRouter = router({
   delete: publicProcedure
     .input(
       z.object({
-        id: z.string(),
+        id: z.string().uuid(),
       })
     )
     .mutation(async ({ input, ctx }) => {
@@ -134,11 +134,13 @@ export const widgetsRouter = router({
         },
       });
     }),
-  list: publicProcedure.query(async () => {
-    return (await prisma.widget.findMany({
-      where: { deletedAt: null },
-    })) as WidgetType[];
-  }),
+  list: publicProcedure
+    .input(z.object({ dashboardId: z.string().uuid() }))
+    .query(async () => {
+      return (await prisma.widget.findMany({
+        where: { deletedAt: null },
+      })) as WidgetType[];
+    }),
   updateState: publicProcedure
     .input(UpdateWidgetStateSchema)
     .mutation(async ({ input, ctx }) => {