add header, look change

xerosanyam · May 27, 2024 · a646f2e · a646f2e
1 parent 1f8b432
commit a646f2e
Show file tree

Hide file tree

Showing 16 changed files with 413 additions and 171 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -1,53 +1,53 @@
 {
-	"name": "remfo",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
-	},
-	"devDependencies": {
-		"@libsql/client": "0.6.0",
-		"@lucia-auth/adapter-postgresql": "3.1.2",
-		"@lucia-auth/adapter-sqlite": "3.0.1",
-		"@sveltejs/adapter-auto": "3.2.1",
-		"@sveltejs/adapter-vercel": "5.3.0",
-		"@sveltejs/kit": "2.5.10",
-		"@sveltejs/vite-plugin-svelte": "3.1.0",
-		"@types/eslint": "8.56.10",
-		"@typescript-eslint/eslint-plugin": "7.10.0",
-		"@typescript-eslint/parser": "7.10.0",
-		"arctic": "1.9.0",
-		"autoprefixer": "10.4.19",
-		"dotenv": "16.4.5",
-		"drizzle-kit": "0.21.4",
-		"drizzle-orm": "0.30.10",
-		"eslint": "8.57.0",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-svelte": "2.39.0",
-		"lucia": "3.2.0",
-		"postcss": "8.4.38",
-		"postgres": "3.4.4",
-		"prettier": "3.2.5",
-		"prettier-plugin-svelte": "3.2.3",
-		"svelte": "5.0.0-next.141",
-		"svelte-check": "3.7.1",
-		"sveltekit-superforms": "2.13.1",
-		"tailwindcss": "3.4.3",
-		"tslib": "2.6.2",
-		"typescript": "5.4.5",
-		"vite": "5.2.11",
-		"vitest": "1.6.0",
-		"zod": "3.23.8",
-		"@tailwindcss/typography": "0.5.13",
-		"prettier-plugin-tailwindcss": "0.5.14"
-	},
-	"type": "module",
-	"dependencies": {}
+  "name": "remfo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@libsql/client": "0.6.0",
+    "@lucia-auth/adapter-postgresql": "3.1.2",
+    "@lucia-auth/adapter-sqlite": "3.0.1",
+    "@sveltejs/adapter-auto": "3.2.1",
+    "@sveltejs/adapter-vercel": "5.3.0",
+    "@sveltejs/kit": "2.5.10",
+    "@sveltejs/vite-plugin-svelte": "3.1.0",
+    "@types/eslint": "8.56.10",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
+    "@typescript-eslint/parser": "7.10.0",
+    "arctic": "1.9.0",
+    "autoprefixer": "10.4.19",
+    "dotenv": "16.4.5",
+    "drizzle-kit": "0.21.4",
+    "drizzle-orm": "0.30.10",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-svelte": "2.39.0",
+    "lucia": "3.2.0",
+    "postcss": "8.4.38",
+    "postgres": "3.4.4",
+    "prettier": "3.2.5",
+    "prettier-plugin-svelte": "3.2.3",
+    "svelte": "5.0.0-next.142",
+    "svelte-check": "3.7.1",
+    "sveltekit-superforms": "2.14.0",
+    "tailwindcss": "3.4.3",
+    "tslib": "2.6.2",
+    "typescript": "5.4.5",
+    "vite": "5.2.11",
+    "vitest": "1.6.0",
+    "zod": "3.23.8",
+    "@tailwindcss/typography": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14"
+  },
+  "type": "module",
+  "dependencies": {}
 }
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 84% 4.9%;
+
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 84% 4.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 84% 4.9%;
+
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
+
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
+
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
+
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: 222.2 84% 4.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 222.2 84% 4.9%;
+		--foreground: 210 40% 98%;
+
+		--muted: 217.2 32.6% 17.5%;
+		--muted-foreground: 215 20.2% 65.1%;
+
+		--popover: 222.2 84% 4.9%;
+		--popover-foreground: 210 40% 98%;
+
+		--card: 222.2 84% 4.9%;
+		--card-foreground: 210 40% 98%;
+
+		--border: 217.2 32.6% 17.5%;
+		--input: 217.2 32.6% 17.5%;
+
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 11.2%;
+
+		--secondary: 217.2 32.6% 17.5%;
+		--secondary-foreground: 210 40% 98%;
+
+		--accent: 217.2 32.6% 17.5%;
+		--accent-foreground: 210 40% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: hsl(212.7, 26.8%, 83.9);
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
diff --git a/src/lib/components/Google.svelte b/src/lib/components/Google.svelte
@@ -3,5 +3,5 @@
 </script>
 
 <form action="/login/google">
-	<button>{text} with Google</button>
+	<button type="submit">{text} with Google</button>
 </form>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Logout from '$lib/components/Logout.svelte';
+</script>
+
+<header class="body-font sticky top-0 z-10 border-b bg-white text-gray-600">
+	<div class="container mx-auto flex flex-col flex-wrap items-center p-2 md:flex-row">
+		<a class="title-font mb-4 flex items-center font-medium text-gray-900 md:mb-0" href="/">
+			<img src="/logo.png" class="h-10 w-10 rounded-full" alt="logo" />
+		</a>
+		<nav class="flex flex-wrap items-center justify-center text-base md:ml-auto md:mr-auto">
+			<a class="mr-5 hover:text-gray-900" href="/">Home</a>
+			<a class="mr-5 hover:text-gray-900" href="/all">All Cards</a>
+		</nav>
+		<Logout />
+	</div>
+</header>
diff --git a/src/lib/db/tables/card.table.ts b/src/lib/db/tables/card.table.ts
@@ -1,7 +1,7 @@
 import { db } from '$lib/db/turso.db';
 import { cardTable, type SelectCard } from '$lib/db/turso.schema';
 import type { Difficulty } from '$lib/schemas';
-import { and, eq } from 'drizzle-orm';
+import { and, count, eq } from 'drizzle-orm';
 
 const initialCard = {
 	repetitions: 0,
@@ -37,6 +37,30 @@ export const getCards = async (userId: string) => {
 	}
 }
 
+export const getCard = async (userId: string) => {
+	try {
+		console.time('getCard')
+		const data = await db.select().from(cardTable).where(eq(cardTable.userId, userId)).orderBy(cardTable.nextPractice).limit(1)
+		console.timeEnd('getCard')
+		return data[0] || {}
+	} catch (err) {
+		console.error('getCards ~ err:', err)
+		return {}
+	}
+}
+export const getTotalCards = async (userId: string) => {
+	try {
+		console.time('getTotalCard')
+		const data = await db.select({ count: count() }).from(cardTable).where(eq(cardTable.userId, userId))
+		console.log('getTotalCards ~ data:', data)
+		console.timeEnd('getTotalCard')
+		return data[0]?.count || 0
+	} catch (err) {
+		console.error('getCards ~ err:', err)
+		return 0
+	}
+}
+
 export const deleteCard = async ({ cardId, userId }: { cardId: string, userId: string }) => {
 	try {
 		console.time('deleteCard')

diff --git a/src/routes/(protected)/+layout.svelte b/src/routes/(protected)/+layout.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Header from '$lib/components/Header.svelte';
+</script>
+
+<div class="relative min-h-screen">
+	<Header />
+	<slot></slot>
+</div>
diff --git a/src/routes/(protected)/all/+page.svelte b/src/routes/(protected)/all/+page.svelte
@@ -2,14 +2,40 @@
 	export let data;
 </script>
 
-{#each data.cards as card}
-	<div class="border">
-		<div>{card.front}</div>
-		<div>{card.back}</div>
-		<form method="post" action="?/delete">
-			<input type="hidden" name="id" value={card.id} />
-			<button type="submit">Delete</button>
-		</form>
-		<hr />
+<section class="body-font text-gray-600">
+	<div class="container mx-auto flex max-w-screen-md flex-wrap px-5">
+		{#each data.cards as card}
+			<div class="relative mx-auto flex pb-10 pt-10 sm:items-center md:w-2/3">
+				<div class="absolute inset-0 flex h-full w-6 items-center justify-center">
+					<div class="pointer-events-none h-full w-1 bg-gray-200"></div>
+				</div>
+				<div
+					class="title-font bg-grayo-500 relative z-0 -mx-10 mt-10 inline-flex flex-shrink-0 items-center justify-center rounded-full p-2 text-sm font-medium text-white sm:mt-0"
+				>
+					{`${new Date(card.nextPractice).getDate()} - ${new Date(card.nextPractice).getMonth()} - ${new Date(card.nextPractice).getFullYear()}`}
+				</div>
+				<div class="flex flex-grow flex-col items-start pl-6 sm:flex-row sm:items-center md:pl-8">
+					<div class="mt-6 flex-grow sm:mt-0 sm:pl-6">
+						<span class="text-xs text-gray-600">{card.id.slice(-6)}</span>
+						<p class="title-font mb-1 text-lg font-medium text-gray-900">{card.front}</p>
+						<p class="leading-relaxed">
+							{card.back}
+						</p>
+						<div class="flex space-x-2">
+							<form method="post" action="?/delete">
+								<input type="hidden" name="id" value={card.id} />
+								<button class="rounded-md border bg-gray-600 px-2 py-2 text-white" type="submit"
+									>Delete</button
+								>
+							</form>
+							<form method="post" action="?/reset">
+								<input type="hidden" name="id" value={card.id} />
+								<button class="rounded-md border px-2 py-2" type="submit">Reset</button>
+							</form>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/each}
 	</div>
-{/each}
+</section>
diff --git a/src/routes/(protected)/home/+page.server.ts b/src/routes/(protected)/home/+page.server.ts
@@ -5,7 +5,7 @@ import { zod } from "sveltekit-superforms/adapters";
 import { ROUTES } from "$lib/routes.util.js";
 
 import type { RequestEvent } from "./$types.js";
-import { getCards, insertCard, reviewCard } from "$lib/db/tables/card.table.js";
+import { getCard, getTotalCards, insertCard, reviewCard } from "$lib/db/tables/card.table.js";
 import { cardAddSchema, cardReviewSchema } from "$lib/schemas.js";
 import { sessionExists } from "$lib/common.util.js";
 
@@ -21,7 +21,8 @@ export async function load({ locals }) {
 	return {
 		addForm,
 		reviewForm,
-		cards: await getCards(locals.user.id)
+		card: await getCard(locals.user.id),
+		totalCards: await getTotalCards(locals.user.id)
 	};
 }
 

diff --git a/src/routes/(protected)/home/+page.svelte b/src/routes/(protected)/home/+page.svelte
@@ -1,36 +1,20 @@
 <script lang="ts">
-	import Logout from '$lib/components/Logout.svelte';
-	import CardAddTable from './CardAddTable.svelte';
-	import CardReviewTable from './CardReviewTable.svelte';
+	import AddNewCard from './AddNewCard.svelte';
+	import ReviewCard from './ReviewCard.svelte';
 	export let data;
 </script>
 
-<img src={data.user?.picture} alt="User's display" />
-<h1>Hey {data.user?.name},</h1>
-
-<ol type="A">
-	<li>
-		<CardAddTable data={data.addForm} />
-		<hr />
-	</li>
-	<li>
-		{#if data.cards.length > 0}
-			<CardReviewTable data={data.reviewForm} card={data.cards[0]} />
-		{/if}
-		Total cards: {data.cards?.length}
-		<hr />
-	</li>
-	<li>
-		<h2>Others</h2>
-		<nav>
-			<ol>
-				<li>
-					<a href="/all">All Cards</a>
-				</li>
-				<li>
-					<Logout />
-				</li>
-			</ol>
-		</nav>
-	</li>
-</ol>
+<section class="body-font text-gray-600">
+	<div class="container mx-auto flex max-w-screen-md flex-wrap px-5 py-10">
+		<div class="-m-4 flex w-full flex-wrap">
+			<div class="p-4 md:w-full lg:w-1/2">
+				<AddNewCard data={data.addForm} />
+			</div>
+			<div class="p-4 md:w-full lg:w-1/2">
+				{#if data.card}
+					<ReviewCard data={data.reviewForm} card={data.card} />
+				{/if}
+			</div>
+		</div>
+	</div>
+</section>