chore: refactor code to separate client and server

Author: brettkolodny

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.5",
     "@fontsource/dm-mono": "^5.2.5",
+    "@hono/valibot-validator": "^0.5.2",
     "@microlink/react-json-view": "^1.26.2",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -26,6 +27,7 @@
     "hono": "^4.7.11",
     "lucide-react": "^0.511.0",
     "motion": "^12.15.0",
+    "nanoid": "^5.1.5",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

pnpm-lock.yaml

@@ -1,20 +1,35 @@
-import { Editor } from "@/Editor";
-import { Preview } from "@/Preview";
-import { Logo } from "@/components/Logo";
-import { ResizableHandle, ResizablePanelGroup } from "@/components/Resizable";
-import { useStore } from "@/store";
+import { Editor } from "@/client/Editor";
+import { Preview } from "@/client/Preview";
+import { Logo } from "@/client/components/Logo";
+import {
+	ResizableHandle,
+	ResizablePanelGroup,
+} from "@/client/components/Resizable";
+import { useStore } from "@/client/store";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuPortal,
 	DropdownMenuTrigger,
-} from "@/components/DropdownMenu";
-import { type FC, useEffect, useMemo } from "react";
-
-import { useTheme } from "@/contexts/theme";
+} from "@/client/components/DropdownMenu";
+import {
+	type FC,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { useTheme } from "@/client/contexts/theme";
 import { MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
-import { Button } from "./components/Button";
+import { Button } from "@/client/components/Button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/client/components/Tooltip";
+import { rpc } from "@/utils/rpc";
 
 type GoPreviewDef = (v: unknown) => Promise<string>;
 
@@ -73,11 +88,15 @@ export const App = () => {
 		<main className="flex h-dvh w-screen flex-col items-center bg-surface-primary">
 			{/* NAV BAR */}
 			<nav className="flex h-16 w-full justify-between border-b border-b-surface-quaternary px-6 py-2">
-				<div className="flex items-center gap-2">
-					<Logo className="text-content-primary" height={24} />
-					<p className="font-semibold text-content-primary text-xl">
-						Playground
-					</p>
+				<div className="flex items-center justify-center gap-4">
+					<div className="flex items-center gap-2">
+						<Logo className="text-content-primary" height={24} />
+						<p className="font-semibold text-content-primary text-xl">
+							Playground
+						</p>
+					</div>
+
+					<ShareButton />
 				</div>
 
 				<div className="flex items-center gap-3">
@@ -160,3 +179,51 @@ const ThemeSelector: FC = () => {
 		</DropdownMenu>
 	);
 };
+
+const ShareButton: FC = () => {
+	const $code = useStore((state) => state.code);
+	const [isCopied, setIsCopied] = useState(() => false);
+	const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+	const onShare = useCallback(async () => {
+		try {
+			const { id } = await rpc.parameters
+				.$post({ json: { code: $code } })
+				.then((res) => res.json());
+
+			const { protocol, host } = window.location;
+			window.navigator.clipboard.writeText(
+				`${protocol}//${host}/parameters/${id}`,
+			);
+
+			setIsCopied(() => true);
+		} catch (e) {
+			console.error(e);
+		}
+	}, [$code]);
+
+	useEffect(() => {
+		if (!isCopied) {
+			return;
+		}
+
+		clearTimeout(timeoutId.current);
+		const id = setTimeout(() => {
+			setIsCopied(() => false);
+		}, 1000);
+		timeoutId.current = id;
+
+		return () => clearTimeout(timeoutId.current);
+	}, [isCopied]);
+
+	return (
+		<Tooltip open={isCopied}>
+			<TooltipTrigger asChild={true}>
+				<Button size="sm" onClick={onShare}>
+					Share
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>Copied to clipboard</TooltipContent>
+		</Tooltip>
+	);
+};

src/App.tsx renamed to src/client/App.tsx

@@ -1,15 +1,15 @@
-import { Button } from "@/components/Button";
+import { Button } from "@/client/components/Button";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuPortal,
 	DropdownMenuTrigger,
-} from "@/components/DropdownMenu";
-import { ResizablePanel } from "@/components/Resizable";
-import * as Tabs from "@/components/Tabs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
-import { useStore } from "@/store";
+} from "@/client/components/DropdownMenu";
+import { ResizablePanel } from "@/client/components/Resizable";
+import * as Tabs from "@/client/components/Tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/client/components/Tooltip";
+import { useStore } from "@/client/store";
 import {
 	BookIcon,
 	CheckIcon,

src/Editor.tsx renamed to src/client/Editor.tsx

@@ -1,18 +1,18 @@
-import { Button } from "@/components/Button";
+import { Button } from "@/client/components/Button";
 import {
 	ResizableHandle,
 	ResizablePanel,
 	ResizablePanelGroup,
-} from "@/components/Resizable";
-import * as Tabs from "@/components/Tabs";
+} from "@/client/components/Resizable";
+import * as Tabs from "@/client/components/Tabs";
 import {
 	type Diagnostic,
 	type InternalDiagnostic,
 	outputToDiagnostics,
-} from "@/diagnostics";
+} from "@/client/diagnostics";
 import type { ParserLog, PreviewOutput } from "@/gen/types";
-import { useDebouncedValue } from "@/hooks/debounce";
-import { useStore } from "@/store";
+import { useDebouncedValue } from "@/client/hooks/debounce";
+import { useStore } from "@/client/store";
 import { cn } from "@/utils/cn";
 import * as Dialog from "@radix-ui/react-dialog";
 import {
@@ -29,7 +29,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
 import ReactJsonView from "@microlink/react-json-view";
-import { useTheme } from "@/contexts/theme";
+import { useTheme } from "@/client/contexts/theme";
 
 export const Preview: FC = () => {
 	const $wasmState = useStore((state) => state.wasmState);

src/Preview.tsx renamed to src/client/Preview.tsx

@@ -5,7 +5,7 @@
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import { cn } from "../utils/cn";
+import { cn } from "@/utils/cn";
 
 export const buttonVariants = cva(
 	`inline-flex items-center justify-center gap-1 whitespace-nowrap

src/components/Button.tsx renamed to src/client/components/Button.tsx

@@ -3,7 +3,7 @@ import type {
 	Parameter,
 	ParserLog,
 	PreviewOutput,
-} from "./gen/types";
+} from "@/gen/types";
 
 type FriendlyDiagnosticWithoutKind = Omit<FriendlyDiagnostic, "extra">;
 

src/components/DropdownMenu.tsx renamed to src/client/components/DropdownMenu.tsx

@@ -1,10 +1,10 @@
-import { TooltipProvider } from "@/components/Tooltip";
-import { ThemeProvider } from "@/contexts/theme.tsx";
+import { TooltipProvider } from "@/client/components/Tooltip";
+import { ThemeProvider } from "@/client/contexts/theme.tsx";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router";
 import { App } from "./App.tsx";
-import "./index.css";
+import "@/client/index.css";
 
 const root = document.getElementById("root");
 

src/components/Logo.tsx renamed to src/client/components/Logo.tsx

@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import type { Diagnostic } from "@/diagnostics";
+import type { Diagnostic } from "@/client/diagnostics";
 
 const defaultCode = `terraform {
   required_providers {