feat: prettier tailwind

client/.prettierrc

@@ -3,7 +3,10 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": [
+		"prettier-plugin-svelte",
+		"prettier-plugin-tailwindcss"
+	],
 	"overrides": [
 		{
 			"files": "*.svelte",

client/README.md

@@ -1,38 +0,0 @@
-# sv
-
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

client/package-lock.json

@@ -23,6 +23,7 @@
 				"globals": "^16.0.0",
 				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.3.3",
+				"prettier-plugin-tailwindcss": "^0.6.11",
 				"svelte": "^5.0.0",
 				"svelte-check": "^4.0.0",
 				"tailwindcss": "^4.0.13",
@@ -3381,6 +3382,85 @@
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/prettier-plugin-tailwindcss": {
+			"version": "0.6.11",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+			"integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=14.21.3"
+			},
+			"peerDependencies": {
+				"@ianvs/prettier-plugin-sort-imports": "*",
+				"@prettier/plugin-pug": "*",
+				"@shopify/prettier-plugin-liquid": "*",
+				"@trivago/prettier-plugin-sort-imports": "*",
+				"@zackad/prettier-plugin-twig": "*",
+				"prettier": "^3.0",
+				"prettier-plugin-astro": "*",
+				"prettier-plugin-css-order": "*",
+				"prettier-plugin-import-sort": "*",
+				"prettier-plugin-jsdoc": "*",
+				"prettier-plugin-marko": "*",
+				"prettier-plugin-multiline-arrays": "*",
+				"prettier-plugin-organize-attributes": "*",
+				"prettier-plugin-organize-imports": "*",
+				"prettier-plugin-sort-imports": "*",
+				"prettier-plugin-style-order": "*",
+				"prettier-plugin-svelte": "*"
+			},
+			"peerDependenciesMeta": {
+				"@ianvs/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@prettier/plugin-pug": {
+					"optional": true
+				},
+				"@shopify/prettier-plugin-liquid": {
+					"optional": true
+				},
+				"@trivago/prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"@zackad/prettier-plugin-twig": {
+					"optional": true
+				},
+				"prettier-plugin-astro": {
+					"optional": true
+				},
+				"prettier-plugin-css-order": {
+					"optional": true
+				},
+				"prettier-plugin-import-sort": {
+					"optional": true
+				},
+				"prettier-plugin-jsdoc": {
+					"optional": true
+				},
+				"prettier-plugin-marko": {
+					"optional": true
+				},
+				"prettier-plugin-multiline-arrays": {
+					"optional": true
+				},
+				"prettier-plugin-organize-attributes": {
+					"optional": true
+				},
+				"prettier-plugin-organize-imports": {
+					"optional": true
+				},
+				"prettier-plugin-sort-imports": {
+					"optional": true
+				},
+				"prettier-plugin-style-order": {
+					"optional": true
+				},
+				"prettier-plugin-svelte": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

client/package.json

@@ -29,6 +29,7 @@
 		"globals": "^16.0.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.13",

client/src/lib/transport.ts

@@ -0,0 +1,26 @@
+import { createConnectTransport } from "@connectrpc/connect-web"
+import { Code, ConnectError, createClient } from "@connectrpc/connect"
+import { AuthService } from "$lib/services/user/v1/auth_pb";
+import { UserService } from "$lib/services/user/v1/user_pb";
+import type { Interceptor } from "@connectrpc/connect";
+import { goto } from "$app/navigation";
+
+const redirector: Interceptor = (next) => async (req) => {
+    try {
+        return await next(req);
+    } catch (e) {
+        const error = ConnectError.from(e);
+        if (error.code === Code.Unauthenticated) {
+            await goto('/auth');
+        }
+        throw e;
+    }
+};
+
+const transport = createConnectTransport({
+    baseUrl: `${window.location.origin}/grpc`,
+    interceptors: [redirector],
+});
+
+export const AuthClient = createClient(AuthService, transport);
+export const UserClient = createClient(UserService, transport);

client/src/routes/+page.svelte

@@ -1,2 +1,2 @@
-<h1>Welcome to SvelteKit</h1>
+<h1>Welcome to TrevStack</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<p>Visit <a href="https://github.com/spotdemo4/trevstack">github.com/spotdemo4/trevstack</a> to read the documentation</p>

client/src/routes/auth/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Tabs } from 'bits-ui';
+</script>
+
+<div class="pt-6">
+	<Tabs.Root
+		value="outbound"
+		class="rounded-card border-muted bg-background-alt shadow-card w-[390px] border p-3"
+	>
+		<Tabs.List
+			class="rounded-9px bg-dark-10 shadow-mini-inset dark:bg-background grid w-full grid-cols-2 gap-1 p-1 text-sm font-semibold leading-[0.01em] dark:border dark:border-neutral-600/30"
+		>
+			<Tabs.Trigger
+				value="outbound"
+				class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
+			>
+				Outbound
+			</Tabs.Trigger>
+			<Tabs.Trigger
+				value="inbound"
+				class="data-[state=active]:shadow-mini dark:data-[state=active]:bg-muted h-8 rounded-[7px] bg-transparent py-2 data-[state=active]:bg-white"
+			>
+				Inbound
+			</Tabs.Trigger>
+		</Tabs.List>
+		<Tabs.Content value="outbound" class="select-none pt-3">Test1</Tabs.Content>
+		<Tabs.Content value="inbound" class="select-none pt-3">Test2</Tabs.Content>
+	</Tabs.Root>
+</div>