add convex for svelte

apps/cli/templates/frontend/svelte/src/routes/+layout.svelte.hbs

@@ -1,8 +1,31 @@
+{{#if (eq backend "convex")}}
+<script lang="ts">
+	import '../app.css';
+    import Header from '../components/Header.svelte';
+    import { PUBLIC_CONVEX_URL } from '$env/static/public';
+	import { setupConvex } from 'convex-svelte';
+
+	const { children } = $props();
+	setupConvex(PUBLIC_CONVEX_URL);
+</script>
+
+<div class="grid h-svh grid-rows-[auto_1fr]">
+	<Header />
+	<main class="overflow-y-auto">
+		{@render children()}
+	</main>
+</div>
+{{else}}
 <script lang="ts">
     import { QueryClientProvider } from '@tanstack/svelte-query';
     import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import '../app.css';
+    {{#if (eq api "orpc")}}
     import { queryClient } from '$lib/orpc';
+    {{/if}}
+    {{#if (eq api "trpc")}}
+    import { queryClient } from '$lib/trpc';
+    {{/if}}
     import Header from '../components/Header.svelte';
 
 	let { children } = $props();
@@ -17,3 +40,4 @@
     </div>
     <SvelteQueryDevtools />
 </QueryClientProvider>
+{{/if}}

apps/cli/templates/frontend/svelte/src/routes/+page.svelte.hbs

@@ -1,8 +1,10 @@
+{{#if (eq backend "convex")}}
 <script lang="ts">
-import { orpc } from "$lib/orpc";
-import { createQuery } from "@tanstack/svelte-query";
+import { useQuery } from 'convex-svelte';
+import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
 
-const healthCheck = createQuery(orpc.healthCheck.queryOptions());
+
+const healthCheck = useQuery(api.healthCheck.get, {});
 
 
 const TITLE_TEXT = `
@@ -26,7 +28,62 @@ const TITLE_TEXT = `
 	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
 	<div class="grid gap-6">
 		<section class="rounded-lg border p-4">
-			<h2 class="mb-2 font-medium">API Status</h2>
+			<h2 class="mb-2 font-medium">API Status (Convex)</h2>
+			<div class="flex items-center gap-2">
+				<div
+					class={`h-2 w-2 rounded-full ${healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
+				></div>
+				<span class="text-muted-foreground text-sm">
+					{healthCheck.isLoading
+						? "Checking..."
+						: healthCheck.data
+							? "Connected"
+							: "Disconnected"}
+				</span>
+			</div>
+		</section>
+	</div>
+</div>
+{{else}}
+<script lang="ts">
+{{#if (eq api "orpc")}}
+import { orpc } from "$lib/orpc";
+{{/if}}
+{{#if (eq api "trpc")}}
+import { trpc } from "$lib/trpc";
+{{/if}}
+import { createQuery } from "@tanstack/svelte-query";
+
+{{#if (eq api "orpc")}}
+const healthCheck = createQuery(orpc.healthCheck.queryOptions());
+{{/if}}
+{{#if (eq api "trpc")}}
+const healthCheck = createQuery(trpc.healthCheck.queryOptions());
+{{/if}}
+
+
+const TITLE_TEXT = `
+   ██████╗ ███████╗████████╗████████╗███████╗██████╗
+   ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
+   ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
+   ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
+   ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
+   ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
+
+   ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
+   ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
+      ██║       ███████╗   ██║   ███████║██║     █████╔╝
+      ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
+      ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
+      ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
+   `;
+</script>
+
+<div class="container mx-auto max-w-3xl px-4 py-2">
+	<pre class="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
+	<div class="grid gap-6">
+		<section class="rounded-lg border p-4">
+			<h2 class="mb-2 font-medium">API Status{{#if (eq api "trpc")}} (tRPC){{/if}}{{#if (eq api "orpc")}} (oRPC){{/if}}</h2>
 			<div class="flex items-center gap-2">
 				<div
 					class={`h-2 w-2 rounded-full ${$healthCheck.data ? "bg-green-500" : "bg-red-500"}`}
@@ -42,3 +99,4 @@ const TITLE_TEXT = `
 		</section>
 	</div>
 </div>
+{{/if}}