mirror of
https://github.com/Dvorinka/Dash.git
synced 2026-06-03 23:12:56 +00:00
refactor(frontend): restructure project layout and update API schema
Relocate frontend source code from `next-app/` to `frontend/` to align with the new project structure. This includes removing the old Next.js boilerplate files and establishing a cleaner workspace. Additionally, updates the OpenAPI specification to include support for the `immich` widget type and its corresponding configuration schema. - Move frontend files to `frontend/` - Delete obsolete `next-app/` directory and its configuration - Add `immich` widget type to `openapi.yaml` - Update `FrontendPlan.md` with dashboard refactor and UX direction
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,110 @@
|
||||
import type {
|
||||
Dashboard,
|
||||
Group,
|
||||
Service,
|
||||
WidgetInstance,
|
||||
WidgetData,
|
||||
AssetFile,
|
||||
CreateGroupRequest,
|
||||
PatchGroupRequest,
|
||||
ServiceRequest,
|
||||
LayoutRequest,
|
||||
WidgetRequest,
|
||||
} from "./schema";
|
||||
|
||||
const API_BASE = process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8080";
|
||||
|
||||
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const res = await fetch(`${API_BASE}${path}`, {
|
||||
headers: { "Content-Type": "application/json", ...init?.headers },
|
||||
...init,
|
||||
});
|
||||
if (res.status === 204) return undefined as T;
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ message: res.statusText }));
|
||||
throw new ApiError(res.status, err.code || "unknown", err.message || "Request failed", err.details);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
public code: string,
|
||||
message: string,
|
||||
public details?: unknown,
|
||||
) {
|
||||
super(message);
|
||||
this.name = "ApiError";
|
||||
}
|
||||
}
|
||||
|
||||
// ── Dashboard ──
|
||||
export function getDashboard(): Promise<Dashboard> {
|
||||
return request("/api/v1/dashboard");
|
||||
}
|
||||
|
||||
// ── Groups ──
|
||||
export function listGroups(): Promise<Group[]> {
|
||||
return request("/api/v1/groups");
|
||||
}
|
||||
export function createGroup(body: CreateGroupRequest): Promise<Group> {
|
||||
return request("/api/v1/groups", { method: "POST", body: JSON.stringify(body) });
|
||||
}
|
||||
export function patchGroup(id: string, body: PatchGroupRequest): Promise<Group> {
|
||||
return request(`/api/v1/groups/${id}`, { method: "PATCH", body: JSON.stringify(body) });
|
||||
}
|
||||
export function deleteGroup(id: string, moveServices = false): Promise<void> {
|
||||
return request(`/api/v1/groups/${id}?moveServicesToUngrouped=${moveServices}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
// ── Services ──
|
||||
export function listServices(): Promise<Service[]> {
|
||||
return request("/api/v1/services");
|
||||
}
|
||||
export function createService(body: ServiceRequest): Promise<Service> {
|
||||
return request("/api/v1/services", { method: "POST", body: JSON.stringify(body) });
|
||||
}
|
||||
export function patchService(id: string, body: ServiceRequest): Promise<Service> {
|
||||
return request(`/api/v1/services/${id}`, { method: "PATCH", body: JSON.stringify(body) });
|
||||
}
|
||||
export function deleteService(id: string): Promise<void> {
|
||||
return request(`/api/v1/services/${id}`, { method: "DELETE" });
|
||||
}
|
||||
|
||||
// ── Layout ──
|
||||
export function putLayout(body: LayoutRequest): Promise<Dashboard> {
|
||||
return request("/api/v1/layout", { method: "PUT", body: JSON.stringify(body) });
|
||||
}
|
||||
|
||||
// ── Assets ──
|
||||
export async function uploadIcon(file: File): Promise<AssetFile> {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
const res = await fetch(`${API_BASE}/api/v1/assets/icons`, { method: "POST", body: form });
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ message: res.statusText }));
|
||||
throw new ApiError(res.status, err.code || "unknown", err.message || "Upload failed");
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ── Widgets ──
|
||||
export function listWidgets(): Promise<WidgetInstance[]> {
|
||||
return request("/api/v1/widgets");
|
||||
}
|
||||
export function createWidget(body: WidgetRequest): Promise<WidgetInstance> {
|
||||
return request("/api/v1/widgets", { method: "POST", body: JSON.stringify(body) });
|
||||
}
|
||||
export function patchWidget(id: string, body: WidgetRequest): Promise<WidgetInstance> {
|
||||
return request(`/api/v1/widgets/${id}`, { method: "PATCH", body: JSON.stringify(body) });
|
||||
}
|
||||
export function deleteWidget(id: string): Promise<void> {
|
||||
return request(`/api/v1/widgets/${id}`, { method: "DELETE" });
|
||||
}
|
||||
export function getWidgetData(id: string): Promise<WidgetData> {
|
||||
return request(`/api/v1/widgets/${id}/data`);
|
||||
}
|
||||
export function refreshWidget(id: string): Promise<WidgetData> {
|
||||
return request(`/api/v1/widgets/${id}/refresh`, { method: "POST" });
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import * as api from "./client";
|
||||
import type {
|
||||
Dashboard,
|
||||
CreateGroupRequest,
|
||||
PatchGroupRequest,
|
||||
ServiceRequest,
|
||||
LayoutRequest,
|
||||
WidgetRequest,
|
||||
} from "./schema";
|
||||
|
||||
const DASHBOARD_KEY = ["dashboard"];
|
||||
const WIDGETS_KEY = ["widgets"];
|
||||
|
||||
export function useDashboard() {
|
||||
return useQuery({ queryKey: DASHBOARD_KEY, queryFn: api.getDashboard });
|
||||
}
|
||||
|
||||
export function useCreateGroup() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (body: CreateGroupRequest) => api.createGroup(body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateGroup() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, ...body }: PatchGroupRequest & { id: string }) => api.patchGroup(id, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteGroup() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, moveServices }: { id: string; moveServices?: boolean }) =>
|
||||
api.deleteGroup(id, moveServices),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateService() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (body: ServiceRequest) => api.createService(body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateService() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, ...body }: ServiceRequest & { id: string }) => api.patchService(id, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteService() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.deleteService(id),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateLayout() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (body: LayoutRequest) => api.putLayout(body),
|
||||
onMutate: async () => {
|
||||
await qc.cancelQueries({ queryKey: DASHBOARD_KEY });
|
||||
const prev = qc.getQueryData<Dashboard>(DASHBOARD_KEY);
|
||||
return { prev };
|
||||
},
|
||||
onError: (_err, _vars, ctx) => {
|
||||
if (ctx?.prev) qc.setQueryData(DASHBOARD_KEY, ctx.prev);
|
||||
},
|
||||
onSettled: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUploadIcon() {
|
||||
return useMutation({ mutationFn: (file: File) => api.uploadIcon(file) });
|
||||
}
|
||||
|
||||
export function useCreateWidget() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (body: WidgetRequest) => api.createWidget(body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateWidget() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, ...body }: WidgetRequest & { id: string }) => api.patchWidget(id, body),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: DASHBOARD_KEY });
|
||||
qc.invalidateQueries({ queryKey: WIDGETS_KEY });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteWidget() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.deleteWidget(id),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: DASHBOARD_KEY }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useWidgetData(widgetId: string | null) {
|
||||
return useQuery({
|
||||
queryKey: ["widget-data", widgetId],
|
||||
queryFn: () => api.getWidgetData(widgetId!),
|
||||
enabled: !!widgetId,
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
export function useRefreshWidget() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.refreshWidget(id),
|
||||
onSuccess: (_data, id) => {
|
||||
qc.invalidateQueries({ queryKey: ["widget-data", id] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
|
||||
export function makeQueryClient() {
|
||||
return new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 30_000,
|
||||
refetchOnWindowFocus: false,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
let browserQueryClient: QueryClient | undefined;
|
||||
|
||||
export function getQueryClient() {
|
||||
if (typeof window === "undefined") return makeQueryClient();
|
||||
if (!browserQueryClient) browserQueryClient = makeQueryClient();
|
||||
return browserQueryClient;
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
// Auto-generated from ../openapi/openapi.yaml
|
||||
// Run: npm run api:generate
|
||||
|
||||
export interface Dashboard {
|
||||
groups: Group[];
|
||||
ungroupedServices: Service[];
|
||||
widgets: WidgetInstance[];
|
||||
}
|
||||
|
||||
export interface Group {
|
||||
id: string;
|
||||
name: string;
|
||||
sortOrder: number;
|
||||
collapsed: boolean;
|
||||
services: Service[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface Service {
|
||||
id: string;
|
||||
groupId: string | null;
|
||||
name: string;
|
||||
iconUrl: string | null;
|
||||
iconAssetId: string | null;
|
||||
sortOrder: number;
|
||||
urls: ServiceUrl[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface ServiceUrl {
|
||||
id: string;
|
||||
label: string;
|
||||
kind: "local" | "external" | "custom";
|
||||
url: string;
|
||||
sortOrder: number;
|
||||
isPrimary: boolean;
|
||||
}
|
||||
|
||||
export interface WidgetInstance {
|
||||
id: string;
|
||||
type: "clock" | "image" | "pihole" | "memos" | "immich";
|
||||
title: string;
|
||||
enabled: boolean;
|
||||
sortOrder: number;
|
||||
config: Record<string, unknown>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export interface WidgetData {
|
||||
widgetId: string;
|
||||
status: "fresh" | "stale" | "error";
|
||||
data?: Record<string, unknown>;
|
||||
error?: string | null;
|
||||
fetchedAt?: string | null;
|
||||
expiresAt?: string | null;
|
||||
}
|
||||
|
||||
export interface AssetFile {
|
||||
id: string;
|
||||
originalName: string;
|
||||
storedName: string;
|
||||
mimeType: string;
|
||||
sizeBytes: number;
|
||||
publicPath: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface ErrorResponse {
|
||||
code:
|
||||
| "validation_error"
|
||||
| "not_found"
|
||||
| "conflict"
|
||||
| "upload_too_large"
|
||||
| "unsupported_media_type"
|
||||
| "widget_fetch_failed"
|
||||
| "internal_error";
|
||||
message: string;
|
||||
details: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface CreateGroupRequest {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface PatchGroupRequest {
|
||||
name?: string;
|
||||
collapsed?: boolean;
|
||||
}
|
||||
|
||||
export interface ServiceRequest {
|
||||
groupId?: string | null;
|
||||
name: string;
|
||||
iconUrl?: string | null;
|
||||
iconAssetId?: string | null;
|
||||
urls: ServiceUrlInput[];
|
||||
}
|
||||
|
||||
export interface ServiceUrlInput {
|
||||
id?: string;
|
||||
label: string;
|
||||
kind: "local" | "external" | "custom";
|
||||
url: string;
|
||||
isPrimary?: boolean;
|
||||
}
|
||||
|
||||
export interface LayoutRequest {
|
||||
groupIds: string[];
|
||||
widgetIds: string[];
|
||||
ungroupedServiceIds: string[];
|
||||
groupServices: Record<string, string[]>;
|
||||
}
|
||||
|
||||
export interface WidgetRequest {
|
||||
type: "clock" | "image" | "pihole" | "memos" | "immich";
|
||||
title: string;
|
||||
enabled?: boolean;
|
||||
config: ClockWidgetConfig | ImageWidgetConfig | PiHoleWidgetConfig | MemosWidgetConfig | ImmichWidgetConfig;
|
||||
}
|
||||
|
||||
export interface ClockWidgetConfig {
|
||||
timezones?: string[];
|
||||
}
|
||||
|
||||
export interface ImageWidgetConfig {
|
||||
imageUrl: string;
|
||||
linkUrl?: string | null;
|
||||
}
|
||||
|
||||
export interface PiHoleWidgetConfig {
|
||||
baseUrl: string;
|
||||
apiToken: string;
|
||||
}
|
||||
|
||||
export interface MemosWidgetConfig {
|
||||
baseUrl: string;
|
||||
apiToken: string;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
export interface ImmichWidgetConfig {
|
||||
baseUrl: string;
|
||||
apiKey: string;
|
||||
}
|
||||
Reference in New Issue
Block a user