refactor: consolidate loading/error states and extract instance actions hook

Frontend:
- Create reusable DataStates components (LoadingState, ErrorState, EmptyState)
- Refactor 12 pages to use shared state components instead of inline JSX
- Extract useInstanceActions hook to eliminate session action duplication
- Update dashboard and sessions pages to use shared hook

OpenSpec:
- Archive completed mobile-app-usability change (44/44 tasks)
- Archive completed add-config-profiles change (15/15 tasks)

Quality: TypeScript check passes, production build succeeds
This commit is contained in:
Alex Blank
2026-05-25 22:50:18 +02:00
parent 4c216dd1ca
commit ab79080f0b
31 changed files with 258 additions and 266 deletions
+4 -6
View File
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import { EmptyState, ErrorState, LoadingState } from "../components/data-states";
import { Icon } from "../components/icon";
import { useMobileViewport } from "../hooks/use-mobile-viewport";
import { extractErrorMessage } from "../utils/errors";
@@ -491,7 +492,7 @@ export const ToolWorkshopPage = () => {
if (status === "loading") {
return (
<div className="container">
<p>Loading Tool Workshop...</p>
<LoadingState message="Loading Tool Workshop..." />
</div>
);
}
@@ -499,10 +500,7 @@ export const ToolWorkshopPage = () => {
if (status === "error") {
return (
<div className="container">
<p className="text-error">Failed to load Tool Workshop.</p>
<button onClick={loadData}>
<Icon name="refresh" size="sm" /> Retry
</button>
<ErrorState message="Failed to load Tool Workshop." onRetry={loadData} />
</div>
);
}
@@ -1305,7 +1303,7 @@ export const ToolWorkshopPage = () => {
<div className="stack" style={{ gap: "0.5rem" }}>
{toolConfigs.length === 0 ? (
<p className="muted">No configurations for this tool type yet.</p>
<EmptyState message="No configurations for this tool type yet." />
) : (
toolConfigs.map((config) => (
<div