refactor(frontend): improved layout manager & added recommended shards amount

[zowks]

This pull request refactors and enhances the bot layout management UI and related backend/frontend integration. The main focus is on improving the layout editing experience, streamlining state management, and introducing recommended shard functionality. The changes also clean up code, improve error handling, and modularize UI components.

Frontend Layout Management Refactor:

• Refactored LayoutManager.svelte.ts to simplify cluster and shard state management, replacing the Shard class with a more efficient Map-based approach and improving mutation tracking for clusters and shards. This enables more robust add/remove/clone/reset operations and clearer UI feedback.
• Updated the main layout page (+page.svelte) to use new modular components (Actions, Cluster, RecommendedShards), implement better loading/error states, and clean up the UI logic for cluster display and actions.
• Added new UI components for layout actions (Actions.svelte) and cluster display (Cluster.svelte), providing improved UX for saving, resetting, adding, removing, and cloning clusters, as well as per-cluster shard management.

Backend/Frontend Integration:

• Added GetRecommendedShardsDto and exported it from the backend DTO index, enabling the frontend to fetch recommended shard counts for improved user guidance.
• Implemented the getRecommendedShards query in the frontend remote, with enhanced error handling and redirects for authentication/setup issues.

General Improvements:

• Improved error logging and consistent usage of the authentication token across all bot-related remote calls.
• Updated the layout page structure to include a contextual app bar and better responsive design.

These changes collectively improve maintainability, user experience, and reliability of the bot layout management feature.

Screenshots

/layout

---

Checklist

• My code follows the project's coding style
• Tests pass locally
• I added/updated relevant tests
• I updated documentation (if needed)
• This PR is ready for review

---

Additional Notes

[a9ex]

Depends on unmerged branches. Imports $lib/components/BoundaryFailed.svelte + $lib/components/Widget.svelte (from refactor/frontend/clusters) and $lib/components/ConfirmButton.svelte (from refactor/frontend/navigation). Won't build standalone. Merge order: clusters + navigation → this. Findings below are independent of those.

Good news up front: I traced the shard-assignment logic against the backend validateLayout, and the parity is mostly correct — shard IDs stay contiguous [0, total-1] (add uses maxShardId+1; remove decrements all higher IDs), duplicates/ranges match, and empty/deleted clusters are filtered from export(). The issues are elsewhere.

Major

• Actions.svelte — // @ts-expect-error placed inside an element's attribute list. Svelte markup has no // comments mid-tag, so // and @ts-expect-error become bogus attributes and do not suppress the intended TS error. Remove it and fix the underlying cause (below).
• updateBotLayout.pending doesn't exist on a command remote (that's what the @ts-expect-error was hiding). !!undefined is always false, so the Save button never disables while the request is in flight → a double-click fires concurrent PATCH /bot calls. Track pending with a local $state boolean around the await.
• Deleting all clusters produces layout: [], which the backend rejects. UpdateBotSchema.layout is .min(1); export() returns [] when every cluster is deleted, but changed is true so Save stays enabled → confusing 400. Block export / disable Save when no non-deleted cluster remains.
• Error handling swallows the real message + can throw. The updateBotLayout remote maps failures to a generic error(500, "An error occurred") via its default: branch, so backend 400 messages (duplicate shard IDs, out-of-range, …) never reach the user. And the toast callback does JSON.parse(error) on what is actually an HttpError/Redirect object → throws inside the catch. Surface the backend message from the response body, and don't JSON.parse the client error object.
  - Backend DTO mismatch: get-recommended-shards.dto.ts declares shards: z.number().positive(), but the source (discord.service.getGatewayBot) is z.number().int().nonnegative(). positive() excludes 0 (a valid Discord value) and drops .int(). No runtime 500 (the controller returns the raw value), but the shared type consumed by the frontend is subtly wrong. Change to z.number().int().nonnegative().
  #119

Minor

• LayoutManager.svelte.ts — current/previous are plain fields, not $state; reactivity works only because every mutator reassigns the $state shards map and the UI reads shards. Fragile: any future reactive read of cluster.current won't update. Consider $state-wrapping it or documenting the invariant.
• Cluster.svelte — non-null assertions on cluster.shards! everywhere mask a genuinely optional type; grid math Math.round(Math.sqrt(...)) is safe for size 0 but worth a guard.

Verified fine

• Backend DTO barrel change (index.dto.ts) is structurally valid; the frontend consumes GetRecommendedShardsDto correctly.
• Layout validation parity with validateLayout (aside from the all-deleted case above).

Verdict: draft, blocked on clusters+navigation for missing components. Once rebased, fix the @ts-expect-error/.pending pair, the layout: [] gap, and the error-message handling (all Major); align the recommended-shards DTO.

[a9ex]

Implement backend errors in the future instead of the generic 500 error