Merge pull request #77 from rbouteiller/fix/setup-device-reliability

Fix/setup device reliability

Author: rbouteiller

.env.example

@@ -34,8 +34,7 @@ FORCE_WIKIPEDIA_RESERVOIR=false
 # Set to "false" to disable authentication (mono-user mode)
 AUTH_ENABLED=true
 BETTER_AUTH_SECRET=your_better_auth_secret_32_characters_min
-# Admin email - users signing up with this email will automatically become admin
-ADMIN_EMAIL=
+# The first account created during setup becomes admin automatically.
 
 # TRMNL Live Proxy (Optional)
 # By default the read-only TRMNL endpoints (/api/models, /api/palettes,

Dockerfile

@@ -40,6 +40,7 @@ ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 ENV CHROME_EXECUTABLE_PATH=/headless-shell/headless-shell
+ENV XDG_CACHE_HOME=/home/nextjs/.cache
 
 # Copy Node.js binary from build stage
 COPY --from=base /usr/local/bin/node /usr/local/bin/node
@@ -53,6 +54,9 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 RUN groupadd -g 1001 nodejs \
     && useradd -u 1001 -g nodejs -s /bin/false nextjs
 
+RUN mkdir -p /var/cache/fontconfig /home/nextjs/.cache/fontconfig /home/nextjs/.fontconfig \
+    && chown -R nextjs:nodejs /var/cache/fontconfig /home/nextjs
+
 # Copy built application
 COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./

README.md

@@ -115,10 +115,12 @@ Create `.env.local` (for `pnpm dev`) or `.env` (for Docker Compose) with the key
 | `BETTER_AUTH_SECRET` | Required when `AUTH_ENABLED=true`. Generate with `openssl rand -base64 32`. |
 | `BETTER_AUTH_URL` | Public URL of your deployment (defaults to `http://localhost:3000`). |
 | `AUTH_ENABLED` | Set to `false` to disable authentication (mono-user mode). |
-| `ADMIN_EMAIL` | Email that receives admin role on first sign-up. |
 | `REACT_RENDERER` | `takumi` (default), `satori`, or `browser`. See below. |
 | `ENABLE_EXTERNAL_CATALOG` | Allow fetching the community / TRMNL recipe catalog. |
 
+When authentication is enabled, visit `/setup` after configuring the database.
+The first account created during setup is assigned the admin role automatically.
+
 ### Renderer Options
 - **`takumi`** (default): fast Rust-backed Satori-compatible renderer.
 - **`satori`**: original Vercel Satori renderer.

app/(app)/client-page.tsx

@@ -15,6 +15,10 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {
+	DEFAULT_IMAGE_HEIGHT,
+	DEFAULT_IMAGE_WIDTH,
+} from "@/lib/recipes/constants";
 import { normalizeGrayscale } from "@/lib/trmnl/grayscale";
 import { DEFAULT_MODEL_NAME } from "@/lib/trmnl/types";
 import type { Device, SystemLog } from "@/lib/types";
@@ -48,8 +52,16 @@ export default function DashboardClientPage({
 			: null;
 
 	const isPortrait = lastUpdatedDevice?.screen_orientation === "portrait";
+	// Orientation-adjusted device resolution, used for BOTH the rendered image
+	// and the frame aspect ratio so the preview isn't cropped by object-cover.
+	const previewWidth = isPortrait
+		? lastUpdatedDevice?.screen_height || DEFAULT_IMAGE_HEIGHT
+		: lastUpdatedDevice?.screen_width || DEFAULT_IMAGE_WIDTH;
+	const previewHeight = isPortrait
+		? lastUpdatedDevice?.screen_width || DEFAULT_IMAGE_WIDTH
+		: lastUpdatedDevice?.screen_height || DEFAULT_IMAGE_HEIGHT;
 	const latestScreenSrc = lastUpdatedDevice
-		? buildLatestScreenSrc(lastUpdatedDevice)
+		? buildLatestScreenSrc(lastUpdatedDevice, previewWidth, previewHeight)
 		: "";
 
 	return (
@@ -87,7 +99,11 @@ export default function DashboardClientPage({
 									isPortrait ? "max-w-[260px]" : "max-w-[520px]",
 								)}
 							>
-								<DeviceFrame size="lg" portrait={isPortrait}>
+								<DeviceFrame
+									size="lg"
+									portrait={isPortrait}
+									screenAspectRatio={`${previewWidth} / ${previewHeight}`}
+								>
 									<Image
 										src={latestScreenSrc}
 										alt={`${lastUpdatedDevice.name} screen`}
@@ -233,8 +249,14 @@ export default function DashboardClientPage({
 	);
 }
 
-function buildLatestScreenSrc(device: Device): string {
+function buildLatestScreenSrc(
+	device: Device,
+	width: number,
+	height: number,
+): string {
 	const params = new URLSearchParams({
+		width: String(width),
+		height: String(height),
 		grayscale: String(normalizeGrayscale(device.grayscale)),
 		model: device.model?.trim() || DEFAULT_MODEL_NAME,
 	});

app/(app)/device/[friendly_id]/client-page.tsx

@@ -396,6 +396,21 @@ export default function DeviceClientPage({
 		});
 	};
 
+	const handleRemoveTimeRange = (index: number) => {
+		if (!editedDevice.refresh_schedule) return;
+
+		setEditedDevice({
+			...editedDevice,
+			refresh_schedule: {
+				default_refresh_rate:
+					editedDevice.refresh_schedule.default_refresh_rate,
+				time_ranges: editedDevice.refresh_schedule.time_ranges.filter(
+					(_, currentIndex) => currentIndex !== index,
+				),
+			},
+		});
+	};
+
 	useEffect(() => {
 		if (editedDevice.playlist_id) {
 			const playlistScreens = playlistItems
@@ -490,6 +505,7 @@ export default function DeviceClientPage({
 					onRegenerateApiKey={handleRegenerateApiKey}
 					onRegenerateFriendlyId={handleRegenerateFriendlyId}
 					onAddTimeRange={handleAddTimeRange}
+					onRemoveTimeRange={handleRemoveTimeRange}
 					onSubmit={handleSubmit}
 					onCancel={handleCancel}
 				/>

app/(app)/device/[friendly_id]/page.tsx

@@ -1,8 +1,8 @@
 import { notFound } from "next/navigation";
 import { Suspense } from "react";
-import { fetchRecipes } from "@/app/actions/mixup";
 import { Skeleton } from "@/components/ui/skeleton";
 import { getInitData } from "@/lib/getInitData";
+import { listAllRecipes } from "@/lib/recipes/catalog";
 import { listModels, listPalettes } from "@/lib/trmnl/registry";
 import { getDeviceStatus } from "@/utils/helpers";
 import DeviceClientPage from "./client-page";
@@ -44,7 +44,7 @@ const DeviceData = async ({ friendlyId }: { friendlyId: string }) => {
 		trmnlPalettes,
 	] = await Promise.all([
 		getInitData(),
-		fetchRecipes(),
+		listAllRecipes(),
 		listModels(),
 		listPalettes(),
 	]);
@@ -62,7 +62,7 @@ const DeviceData = async ({ friendlyId }: { friendlyId: string }) => {
 		status: getDeviceStatus(device),
 	};
 
-	// Convert recipes to availableScreens array
+	// Convert renderable recipe catalog rows to screen dropdown options.
 	const availableScreens = recipes.map((recipe) => ({
 		id: recipe.slug,
 		title: recipe.name,

app/(app)/page.tsx

@@ -2,7 +2,7 @@ import { connection } from "next/server";
 import { Suspense } from "react";
 import { PageTemplate } from "@/components/common/page-template";
 import { DashboardSkeleton } from "@/components/dashboard/dashboard-skeleton";
-import { DbInitializer } from "@/components/dashboard/db-initializer";
+import { DatabaseSetupPanel } from "@/components/setup/database-setup-panel";
 import { Badge } from "@/components/ui/badge";
 import { getInitData } from "@/lib/getInitData";
 import DashboardClientPage from "./client-page";
@@ -15,100 +15,7 @@ const DashboardData = async () => {
 	if (!dbStatus.ready) {
 		return (
 			<>
-				<div className="mt-4 rounded-lg border bg-card shadow-sm">
-					{dbStatus.error === "ERROR_ENV_VAR_DATABASE_URL_NOT_SET" && (
-						<div className="p-6 border-b">
-							<h3 className="font-bold text-2xl mb-2 tracking-tight">
-								Database not configured
-							</h3>
-							<p className="mb-4 text-muted-foreground">
-								The{" "}
-								<span className="font-mono text-foreground bg-muted px-1.5 py-0.5 rounded text-sm">
-									DATABASE_URL
-								</span>{" "}
-								environment variable is not set. Add it to your{" "}
-								<span className="font-mono text-foreground bg-muted px-1.5 py-0.5 rounded text-sm">
-									.env
-								</span>{" "}
-								file to continue.
-							</p>
-
-							<div className="mt-6 space-y-4">
-								<p className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
-									How to fix
-								</p>
-
-								<div className="pl-4 border-l-2 border-primary/40">
-									<p className="font-medium mb-1">
-										Option 1 — Vercel + Supabase integration
-									</p>
-									<p className="text-sm text-muted-foreground">
-										Open{" "}
-										<a
-											href="https://app.supabase.com/project/_/settings/integrations"
-											className="text-primary hover:underline font-medium"
-										>
-											Supabase Dashboard Integrations
-										</a>
-										, verify your Vercel connection, toggle
-										&ldquo;Development&rdquo; on, then &ldquo;Manage&rdquo;
-										&rarr; &ldquo;Resync environment variables&rdquo;. Locally,
-										run{" "}
-										<span className="font-mono text-foreground bg-muted px-1.5 py-0.5 rounded text-xs">
-											vercel link
-										</span>{" "}
-										and{" "}
-										<span className="font-mono text-foreground bg-muted px-1.5 py-0.5 rounded text-xs">
-											vercel env pull
-										</span>
-										.
-									</p>
-								</div>
-
-								<div className="pl-4 border-l-2 border-primary/40">
-									<p className="font-medium mb-1">
-										Option 2 — Add credentials manually
-									</p>
-									<p className="text-sm text-muted-foreground">
-										Grab credentials from{" "}
-										<a
-											href="https://app.supabase.com/project/_/settings/api?showConnect=true"
-											className="text-primary hover:underline font-medium"
-										>
-											Supabase API Settings
-										</a>{" "}
-										(under &ldquo;App Frameworks&rdquo;), save to{" "}
-										<span className="font-mono text-foreground bg-muted px-1.5 py-0.5 rounded text-xs">
-											.env
-										</span>
-										, then run the SQL below in the{" "}
-										<a
-											href="https://app.supabase.com/project/_/sql/new"
-											className="text-primary hover:underline font-medium"
-										>
-											Supabase SQL Editor
-										</a>
-										.
-									</p>
-								</div>
-							</div>
-						</div>
-					)}
-					{dbStatus.error?.includes("Missing required tables") && (
-						<div className="p-6 border-b">
-							<h3 className="font-bold text-2xl mb-2 tracking-tight">
-								Database schema incomplete
-							</h3>
-							<p className="text-muted-foreground">
-								Missing tables:{" "}
-								<span className="font-mono text-foreground">
-									{dbStatus.error?.replace("Missing required tables: ", "")}
-								</span>
-							</p>
-						</div>
-					)}
-					<DbInitializer databaseConfigured={dbStatus.databaseConfigured} />
-				</div>
+				<DatabaseSetupPanel dbStatus={dbStatus} />
 				<DashboardSkeleton className="filter blur-[1px] pointer-events-none mt-6" />
 			</>
 		);

app/(app)/recipes/screens/album/album.tsx

@@ -4,6 +4,10 @@ import {
 	DEFAULT_IMAGE_WIDTH,
 } from "@/lib/recipes/constants";
 import type { RecipeDefinition } from "@/lib/recipes/types";
+import {
+	createScreenProfile,
+	type ScreenProfile,
+} from "@/lib/trmnl/screen-profile";
 import { PreSatori } from "@/utils/pre-satori";
 
 const DEFAULT_IMAGE_URL = "https://byos-nextjs.vercel.app/album/london.png";
@@ -21,33 +25,40 @@ export const dataSchema = paramsSchema;
 interface AlbumProps {
 	width?: number;
 	height?: number;
+	screen?: ScreenProfile;
 	params?: {
 		imageUrl?: string;
 	};
 }
 
 export default async function Album({
-	width = DEFAULT_IMAGE_WIDTH,
-	height = DEFAULT_IMAGE_HEIGHT,
+	width: renderWidth = DEFAULT_IMAGE_WIDTH,
+	height: renderHeight = DEFAULT_IMAGE_HEIGHT,
+	screen,
 	params,
 }: AlbumProps) {
+	const screenProfile =
+		screen ?? createScreenProfile({ width: renderWidth, height: renderHeight });
 	const imageUrl = params?.imageUrl || DEFAULT_IMAGE_URL;
 
 	return (
-		<PreSatori width={width} height={height}>
+		<PreSatori
+			width={screenProfile.logicalWidth}
+			height={screenProfile.logicalHeight}
+		>
 			<div className="w-full h-full bg-black flex flex-col items-center justify-center relative">
 				<picture className="w-full h-full absolute inset-0">
 					<source srcSet={imageUrl} type="image/png" />
 					<img
 						src={imageUrl}
 						alt="Album"
-						width={width}
-						height={height}
+						width={screenProfile.logicalWidth}
+						height={screenProfile.logicalHeight}
 						className="w-full h-full object-cover"
 						style={{ imageRendering: "pixelated" }}
 					/>
 				</picture>
-				<div className="text-[60px] text-white absolute top-0 right-0 p-4 flex flex-col items-end leading-none">
+				<div className="text-6xl lg:text-7xl 2xl:text-8xl text-white absolute top-0 right-0 p-4 lg:p-8 2xl:p-10 flex flex-col items-end leading-none">
 					<span className="">
 						{new Date().toLocaleTimeString("en-GB", {
 							timeZone: "Europe/London",
@@ -87,7 +98,7 @@ export const definition: RecipeDefinition<typeof paramsSchema> = {
 	},
 	paramsSchema,
 	dataSchema,
-	Component: ({ width, height, params }) => (
-		<Album width={width} height={height} params={params} />
+	Component: ({ width, height, screen, params }) => (
+		<Album width={width} height={height} screen={screen} params={params} />
 	),
 };