Merge pull request #120 from emiljohansson/feature/supabase-projects

Feature/supabase projects

.prettierignore

@@ -23,3 +23,6 @@ yarn.lock
 apps/next/tsconfig.json
 
 *.timestamp-*.mjs
+
+# supabase database types
+apps/next/src/lib/database.types.ts

apps/next/package.json

@@ -17,26 +17,27 @@
 	"dependencies": {
 		"@emiljohansson/random-string": "1.1.2",
 		"@faker-js/faker": "7.4.0",
+		"@nanostores/react": "0.7.1",
 		"@radix-ui/react-accessible-icon": "1.0.2",
 		"@radix-ui/react-label": "1.0.0",
 		"@radix-ui/react-progress": "1.0.0",
 		"@radix-ui/react-select": "1.0.0",
 		"@radix-ui/react-tabs": "1.0.0",
+		"@supabase/ssr": "0.0.10",
 		"@vercel/analytics": "1.1.1",
 		"@vercel/kv": "1.0.0",
-		"@vercel/postgres": "0.5.1",
 		"crypto-js": "4.2.0",
 		"framer-motion": "6.2.3",
 		"jsonwebtoken": "9.0.2",
 		"just-range": "4.1.1",
 		"lib": "workspace:*",
+		"nanostores": "0.9.5",
 		"next": "14.0.4",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "4.7.1",
 		"swr": "1.3.0",
-		"ui": "workspace:*",
-		"zustand": "4.3.8"
+		"ui": "workspace:*"
 	},
 	"devDependencies": {
 		"@types/crypto-js": "4.1.1",

apps/next/public/images/logo/old/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/images/logo/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/images/logo/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/next/public/images/logo/site.webmanifest

@@ -1,19 +1 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "/images/logo/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/images/logo/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

apps/next/src/app/CommandMenu.tsx

@@ -1,39 +1,34 @@
 'use client'
 
-import type { Project } from './types'
-
 import { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { FiSearch } from 'react-icons/fi'
-import { create } from 'zustand'
 import { useClickOutside } from '@/hooks/useClickOutside'
+import { Tables } from '@/lib/database.types'
+import { action, atom } from 'nanostores'
+import { useStore } from '@nanostores/react'
 
-type State = {
-	commandMenuIsOpen: boolean
-}
-
-type Action = {
-	openCommandMenu: () => void
-	closeCommandMenu: () => void
-}
+export const $commandMenuIsOpen = atom(false)
+export const openCommandMenu = action(
+	$commandMenuIsOpen,
+	'openCommandMenu',
+	() => $commandMenuIsOpen.set(true),
+)
+export const closeCommandMenu = action(
+	$commandMenuIsOpen,
+	'closeCommandMenu',
+	() => $commandMenuIsOpen.set(false),
+)
 
-export const useCommandMenu = create<State & Action>((set) => ({
-	commandMenuIsOpen: false,
-	openCommandMenu: () => set(() => ({ commandMenuIsOpen: true })),
-	closeCommandMenu: () => set(() => ({ commandMenuIsOpen: false })),
-}))
-
-export function CommandMenu({ projects }: { projects: Project[] }) {
-	const { commandMenuIsOpen, openCommandMenu, closeCommandMenu } =
-		useCommandMenu()
+export function CommandMenu({ projects }: { projects: Tables<'project'>[] }) {
+	const commandMenuIsOpen = useStore($commandMenuIsOpen)
 	const initList = useMemo(
 		() => [
 			{
 				href: '/',
 				title: 'Home',
 				description: 'Return to the home page.',
 				test: 'home-page',
-			} as Project,
+			} as Tables<'project'>,
 			...projects,
 		],
 		[],
@@ -43,7 +38,7 @@ export function CommandMenu({ projects }: { projects: Project[] }) {
 	const [list, setList] = useState(initList)
 	const fieldRef = useRef<HTMLInputElement>(null)
 
-	const handleAction = (action?: Project) => {
+	const handleAction = (action?: Tables<'project'>) => {
 		if (!action) return
 		setList([...initList])
 		closeCommandMenu()
@@ -84,46 +79,42 @@ export function CommandMenu({ projects }: { projects: Project[] }) {
 		return () => document.removeEventListener('keydown', onKeyDown)
 	}, [selectedIndex, list, commandMenuIsOpen])
 
+	if (!commandMenuIsOpen) return null
+
 	return (
-		<>
-			{commandMenuIsOpen && (
-				<Modal onClose={closeCommandMenu}>
-					<div className="flex items-center">
-						<FiSearch width={20} height={20} />
-						<input
-							ref={fieldRef}
-							id="input1"
-							className="input flex-1"
-							placeholder="Type a command or search..."
-							onChange={(event) => {
-								setSelectedIndex(0)
-								setList(
-									initList.filter(
-										({ title }) =>
-											title.toLowerCase().indexOf(event.currentTarget.value) >
-											-1,
-									),
-								)
-							}}
-						/>
-					</div>
-					<span className="sr-only">{selectedIndex}</span>
-					<div>
-						{list.map((project, index) => (
-							<div
-								key={index}
-								className="aria-selected:bg-primary"
-								aria-selected={index === selectedIndex}
-								onMouseOver={() => setSelectedIndex(index)}
-								onClick={() => handleAction(list[index])}
-							>
-								{project.title}
-							</div>
-						))}
+		<Modal onClose={closeCommandMenu}>
+			<div className="flex items-center border-gray-200 border-b">
+				<input
+					ref={fieldRef}
+					id="input1"
+					className="input text-sm border-none px-4 py-6 flex-1"
+					placeholder="Type a command or search..."
+					onChange={(event) => {
+						setSelectedIndex(0)
+						setList(
+							initList.filter(
+								({ title }) =>
+									title.toLowerCase().indexOf(event.currentTarget.value) > -1,
+							),
+						)
+					}}
+				/>
+			</div>
+			<span className="sr-only">{selectedIndex}</span>
+			<div className="p-2">
+				{list.map((project, index) => (
+					<div
+						key={index}
+						className="aria-selected:bg-gray-300 text-sm px-2 py-2 rounded"
+						aria-selected={index === selectedIndex}
+						onMouseOver={() => setSelectedIndex(index)}
+						onClick={() => handleAction(list[index])}
+					>
+						{project.title}
 					</div>
-				</Modal>
-			)}
-		</>
+				))}
+			</div>
+		</Modal>
 	)
 }
 
@@ -134,16 +125,18 @@ const Modal = ({
 	const rootRef = useClickOutside<HTMLDivElement>(onClose)
 
 	return (
-		<div>
-			<div className="fixed inset-0 z-40 min-h-screen flex items-center justify-center">
+		<>
+			<div className="fixed inset-0 z-40 min-h-screen">
 				<div
 					ref={rootRef}
-					className="w-full max-w-md rounded border-gray-100 shadow-xl overflow-hidden"
+					className="w-full max-w-md rounded shadow-xl overflow-hidden mx-auto mt-20"
 				>
-					<div className="bg-white dark:bg-black-rich p-4">{children}</div>
+					<div className="bg-white dark:bg-black-rich rounded border-gray-200 border">
+						{children}
+					</div>
 				</div>
 			</div>
 			<div className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"></div>
-		</div>
+		</>
 	)
 }

apps/next/src/app/Content.tsx

@@ -1,15 +1,13 @@
 'use client'
 
-import type { Project } from './types'
-
+import type { Tables } from '@/lib/database.types'
 import Link from 'next/link'
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
 import { FiCommand, FiExternalLink } from 'react-icons/fi'
 import { GrGithub } from 'react-icons/gr'
-import { useCommandMenu } from './CommandMenu'
+import { openCommandMenu } from './CommandMenu'
 
-export function Content({ projects }: { projects: Project[] }) {
-	const { openCommandMenu } = useCommandMenu()
+export function Content({ projects }: { projects: Tables<'project'>[] }) {
 	return (
 		<>
 			<div className="flex flex-col gap-4 items-center justify-center text-center h-1/2">
@@ -48,34 +46,40 @@ export function Content({ projects }: { projects: Project[] }) {
 				</button>
 			</div>
 			<div className="h-screen p-3 m-0 max-w-md mx-auto">
-				{projects.map(({ title, href, description, external, test }, index) => (
-					<Link
-						key={index}
-						href={href}
-						className="
+				{projects.map(({ title, href, description, test }, index) => {
+					const external = href.startsWith('http')
+
+					return (
+						<Link
+							key={index}
+							href={href}
+							className="
               flex flex-col rounded-md p-4 m-3 relative
 							bg-white dark:bg-black
               ease-in-out duration-100
 							shadow-sm 
               hover:no-underline hover:-translate-y-1 hover:shadow-lg
               dark:shadow-lg-white
             "
-						target={external ? '_blank' : undefined}
-						data-test={test}
-					>
-						<span className="flex items-center mb-1">
-							{title}{' '}
-							{external && (
-								<FiExternalLink
-									width={18}
-									height={18}
-									className="absolute right-3"
-								/>
-							)}
-						</span>
-						<p className="text-gray-600 text-xs no-underline">{description}</p>
-					</Link>
-				))}
+							target={external ? '_blank' : undefined}
+							data-test={test}
+						>
+							<span className="flex items-center mb-1">
+								{title}{' '}
+								{external && (
+									<FiExternalLink
+										width={18}
+										height={18}
+										className="absolute right-3"
+									/>
+								)}
+							</span>
+							<p className="text-gray-600 text-xs no-underline">
+								{description}
+							</p>
+						</Link>
+					)
+				})}
 			</div>
 		</>
 	)

apps/next/src/app/HeaderCurrentProject.tsx

@@ -1,8 +1,10 @@
 'use client'
 
+import type { Tables } from '@/lib/database.types'
 import { usePathname } from 'next/navigation'
 import { useEffect, useState } from 'react'
-import { Project } from './types'
+
+type Project = Tables<'project'>
 
 export function HeaderCurrentProject({
 	projects,