Cleaned up empty card display

.mise.toml

@@ -18,7 +18,7 @@ outputs = ['build/bin/backend']
 [tasks."build:frontend"]
 description = 'Build the Frontend'
 run = "node --no-warnings=ExperimentalWarning 'util/build.mjs' -q -o frontend"
-sources = ['package.json', 'lib/package.json', '{src,lib}/**/*.{ts,tsx,codegen}']
+sources = ['package.json', 'lib/package.json', '{src,lib,docs}/**/*.{ts,tsx,codegen}']
 outputs = ['dist/index.js']
 
 [tasks."build:collect"]

build.sh

@@ -1,3 +1,2 @@
 #!/bin/bash
 exec node "--no-warnings=ExperimentalWarning" "util/build.mjs" "$@"
-

docs/index.mdx

@@ -1,4 +1,4 @@
-import { Navigation, SideMenu } from "decky-frontend-lib";
+import { Navigation, SideMenu } from "@decky/ui";
 import { CurrentCard } from "./components/CurrentCard";
 import { CheckList, CheckListItem } from "./components/QuickStart/CheckList";
 import { FaPlug } from "react-icons/fa"

src/index.tsx

@@ -51,14 +51,18 @@ function EditCardButton(props: EditCardButtonProps) {
 	)
 }
 
-function Content() {
-	const { currentCardAndGames, cardsAndGames, microSDeck } = useMicroSDeckContext();
+function CardsList({ cardsAndGames, currentCardAndGames, microSDeck }: { cardsAndGames: CardAndGames[], currentCardAndGames: CardAndGames | undefined, microSDeck: MicroSDeck }) {
 
 	const [currentCard] = currentCardAndGames || [undefined];
 
-	const isLoaded = !!cardsAndGames;
+	function CardInteractables({ entry }: {
+		entry: ReorderableEntry<MicroSDCard>
+	}) {
+		const cardAndGames = cardsAndGames.find(([card]) => card.uid == entry.data!.uid)!;
+		return (<EditCardButton {...{ cardAndGames, currentCard, microSDeck: microSDeck }} />);
+	}
 
-	const entries = cardsAndGames?.sort(([a], [b]) => a.position - b.position).map(([card], index) => {
+	const entries = cardsAndGames.sort(([a], [b]) => a.position - b.position).map(([card], index) => {
 		const currentCardMark = card.uid === currentCard?.uid ? (<small style={{ marginLeft: "0.5em" }}><FaStar size={12} /></small>) : "";
 
 		return {
@@ -76,42 +80,56 @@ function Content() {
 		};
 	});
 
-	function CardInteractables({ entry }: {
-		entry: ReorderableEntry<MicroSDCard>
-	}) {
-		const cardAndGames = cardsAndGames!.find(([card]) => card.uid == entry.data!.uid)!;
-		return (<EditCardButton {...{ cardAndGames, currentCard, microSDeck: microSDeck }} />);
+	if (entries.length == 0) {
+		return (
+			<div style={{ width: "100%", display: "flex", justifyContent: "center", alignItems: "center", padding: "5px" }}>
+				No Cards (yet)
+			</div>
+		);
 	}
 
+	return (
+		<ReorderableList<MicroSDCard>
+			entries={entries!}
+			interactables={CardInteractables}
+			onSave={async (entries: ReorderableEntry<MicroSDCard>[]) => {
+				await backend.fetchUpdateCards({
+					url: API_URL, logger: Logger, cards: entries.map(v => {
+						v.data!.position = v.position;
+						return v.data!;
+					})
+				});
+
+				Logger.Log(`Reordered Tabs`)
+			}}
+		/>
+	);
+}
+
+function Content() {
+	const { currentCardAndGames, cardsAndGames, microSDeck } = useMicroSDeckContext();
+
+	const isLoaded = !!cardsAndGames;
+
+	//TODO: Add docs card
+
 	return (
 		<>
 			<Focusable onMenuActionDescription='Open Docs' onMenuButton={() => { Navigation.CloseSideMenus(); Navigation.Navigate(DOCUMENTATION_PATH); }}>
 				<div style={{ margin: "5px", marginTop: "0px" }}>
 					Edit MicroSD Cards
 				</div>
+
 				<PanelSection title="Cards">
 					{isLoaded ? (
-						<ReorderableList<MicroSDCard>
-							entries={entries!}
-							interactables={CardInteractables}
-							onSave={async (entries: ReorderableEntry<MicroSDCard>[]) => {
-								await backend.fetchUpdateCards({
-									url: API_URL, logger: Logger, cards: entries.map(v => {
-										v.data!.position = v.position;
-										return v.data!;
-									})
-								});
-
-								Logger.Log(`Reordered Tabs`)
-							}}
-						/>
+						<CardsList cardsAndGames={cardsAndGames} currentCardAndGames={currentCardAndGames} microSDeck={microSDeck} />
 					) : (
 						<div style={{ width: "100%", display: "flex", justifyContent: "center", alignItems: "center", padding: "5px" }}>
 							Loading...
 						</div>
 					)}
 				</PanelSection>
-			</Focusable>
+			</Focusable >
 		</>
 	);
 };
@@ -128,7 +146,7 @@ export default definePlugin(() => {
 	const patch = PatchAppScreen(window.MicroSDeck);
 
 	routerHook.addRoute(DOCUMENTATION_PATH, () => (
-		<MicroSDeckContextProvider microSDeck={window.MicroSDeck || (() => {throw "MicroSDeck not initialized";})()}>
+		<MicroSDeckContextProvider microSDeck={window.MicroSDeck || (() => { throw "MicroSDeck not initialized"; })()}>
 			<Docs />
 		</MicroSDeckContextProvider>));
 

util/build.mjs

@@ -155,14 +155,20 @@ if (is_local && tasks.includes('copy')) {
 if (tasks.includes('upload')) {
 	Logger.Log("Uploading plugin to SteamDeck");
 
+	var deployJsonPath = join(basePath, 'deploy.json');
 	try {
-		statfsSync(join(basePath, 'deploy.json'))
+		statfsSync(deployJsonPath)
 	} catch (e) {
-		Logger.Error("deploy.json not found. Cannot deploy without it");
+		Logger.Error(`deploy.json not found under \"${basePath}\" Cannot deploy without it`);
 		exit(1);
 	}
 
-	const { host, user, keyfile } = importJson('deploy.json');
+	const { host, user, keyfile } = await importJson(deployJsonPath);
+
+	if (!host || !user) {
+		Logger.Error('malformed deploy.json. missing host and user fields');
+		exit(1);
+	}
 
 	// ping host to make sure its avaliable
 	try {