Merge pull request #34 from nathanvale/kent

Kent

.eslintrc.cjs

@@ -18,7 +18,7 @@ module.exports = {
 				fixStyle: 'inline-type-imports',
 			},
 		],
-		'@typescript-eslint/no-duplicate-imports': 'warn',
+		'import/no-duplicates': 'warn',
 	},
 	overrides: [
 		{

.prettierrc.cjs

@@ -25,4 +25,5 @@ module.exports = {
 			},
 		},
 	],
+	plugins: [require('prettier-plugin-tailwindcss')],
 }

.vscode/settings.json

@@ -3,5 +3,10 @@
     "@remix-run/server-runtime",
     "@remix-run/router",
     "react-router"
-  ]
+  ],
+  "tailwindCSS.experimental.classRegex": [
+		[
+			"cn\\(([^)]*)\\)"
+		]
+	]
 }

app/components/confetti.tsx

@@ -0,0 +1,22 @@
+import { Index as ConfettiShower } from 'confetti-react'
+import { ClientOnly } from 'remix-utils'
+
+/**
+ * confetti is a unique random identifier which re-renders the component
+ */
+export function Confetti({ confetti }: { confetti?: string }) {
+	return (
+		<ClientOnly>
+			{() => (
+				<ConfettiShower
+					key={confetti}
+					run={Boolean(confetti)}
+					recycle={false}
+					numberOfPieces={500}
+					width={window.innerWidth}
+					height={window.innerHeight}
+				/>
+			)}
+		</ClientOnly>
+	)
+}

app/components/ui/checkbox.tsx

@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
 		{...props}
 	>
 		<CheckboxPrimitive.Indicator
-			className={cn('flex items-center justify-center text-current border')}
+			className={cn('flex items-center justify-center border text-current')}
 		>
 			<Check className="h-4 w-4" />
 		</CheckboxPrimitive.Indicator>

app/components/ui/icon.tsx

@@ -63,17 +63,17 @@ export function Icon({
 }
 
 type IconName =
-  | "avatar"
-  | "camera"
-  | "check"
-  | "cross-1"
-  | "exit"
-  | "laptop"
-  | "lock-closed"
-  | "lock-open-1"
-  | "moon"
-  | "pencil-1"
-  | "pencil-2"
-  | "plus"
-  | "sun"
-  | "trash"
+	| 'avatar'
+	| 'camera'
+	| 'check'
+	| 'cross-1'
+	| 'exit'
+	| 'laptop'
+	| 'lock-closed'
+	| 'lock-open-1'
+	| 'moon'
+	| 'pencil-1'
+	| 'pencil-2'
+	| 'plus'
+	| 'sun'
+	| 'trash'

app/components/ui/toast.tsx

@@ -3,7 +3,6 @@ import * as ToastPrimitives from '@radix-ui/react-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { X } from 'lucide-react'
 import { cn } from '~/utils/misc.ts'
-
 const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
@@ -81,7 +80,7 @@ const ToastClose = React.forwardRef<
 		{...props}
 	>
 		<X className="h-4 w-4" />
-	</ToastPrimitives.Close>
+</ToastPrimitives.Close>
 ))
 ToastClose.displayName = ToastPrimitives.Close.displayName
 

app/components/ui/toaster.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
 	Toast,
 	ToastClose,

app/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import { cn } from "~/utils/misc.ts"
+import { cn } from '~/utils/misc.ts'
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -10,18 +10,18 @@ const Tooltip = TooltipPrimitive.Root
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 

app/components/ui/use-toast.ts

@@ -1,9 +1,9 @@
 // Inspired by react-hot-toast library
 import * as React from 'react'
 
-import type { ToastActionElement, ToastProps } from './toast.tsx'
+import type { ToastActionElement, ToastProps } from '~/components/ui/toast.tsx'
 
-const TOAST_LIMIT = 1
+const TOAST_LIMIT = 4
 const TOAST_REMOVE_DELAY = 1000000
 
 type ToasterToast = ToastProps & {

app/root.tsx

@@ -24,7 +24,6 @@ import { authenticator, getUserId } from './utils/auth.server.ts'
 import { ClientHintCheck, getHints } from './utils/client-hints.tsx'
 import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
-import { getDomainUrl } from './utils/misc.server.ts'
 import { useNonce } from './utils/nonce-provider.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
 import { TailwindIndicator } from './components/tailwind-indicator.tsx'
@@ -33,6 +32,10 @@ import { SiteHeader } from './components/site-header.tsx'
 import { SiteFooter } from './components/site-footer.tsx'
 import { useOptionalUser } from './utils/user.ts'
 import { href as iconsHref } from '~/components/ui/icon.tsx'
+import { Confetti } from './components/confetti.tsx'
+import { getFlashSession } from './utils/flash-session.server.ts'
+import { combineHeaders, getDomainUrl } from './utils/misc.ts'
+import { useToast } from './utils/useToast.tsx'
 
 export const links: LinksFunction = () => {
 	return [
@@ -88,6 +91,7 @@ export async function loader({ request }: DataFunctionArgs) {
 		// them in the database. Maybe they were deleted? Let's log them out.
 		await authenticator.logout(request, { redirectTo: '/' })
 	}
+	const { flash, headers: flasHeaders } = await getFlashSession(request)
 
 	return json(
 		{
@@ -101,11 +105,13 @@ export async function loader({ request }: DataFunctionArgs) {
 				},
 			},
 			ENV: getEnv(),
+			flash,
 		},
 		{
-			headers: {
-				'Server-Timing': timings.toString(),
-			},
+			headers: combineHeaders(
+				{ 'Server-Timing': timings.toString() },
+				flasHeaders,
+			),
 		},
 	)
 }
@@ -122,6 +128,7 @@ function App() {
 	const nonce = useNonce()
 	const user = useOptionalUser()
 	const theme = useTheme()
+	useToast(data.flash?.toast)
 
 	return (
 		<html lang="en" className={`${theme}`}>
@@ -142,6 +149,7 @@ function App() {
 					<SiteFooter />
 				</div>
 				<TailwindIndicator />
+				<Confetti confetti={data.flash?.confetti} />
 				<Toaster />
 				<ScrollRestoration nonce={nonce} />
 				<Scripts nonce={nonce} />

app/routes/_auth+/forgot-password/index.tsx

@@ -13,7 +13,7 @@ import { ErrorList, Field } from '~/components/forms.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import { prisma } from '~/utils/db.server.ts'
 import { sendEmail } from '~/utils/email.server.ts'
-import { getDomainUrl } from '~/utils/misc.server.ts'
+import { getDomainUrl } from '~/utils/misc.ts'
 import { generateTOTP } from '~/utils/totp.server.ts'
 import { emailSchema, usernameSchema } from '~/utils/user-validation.ts'
 import { ForgotPasswordEmail } from './email.server.tsx'

app/routes/_auth+/onboarding.tsx

@@ -27,6 +27,7 @@ import {
 	usernameSchema,
 } from '~/utils/user-validation.ts'
 import { checkboxSchema } from '~/utils/zod-extensions.ts'
+import { redirectWithConfetti } from '~/utils/flash-session.server.ts'
 
 export const onboardingEmailSessionKey = 'onboardingEmail'
 
@@ -114,7 +115,7 @@ export async function action({ request }: DataFunctionArgs) {
 	const newCookie = await commitSession(cookieSession, {
 		expires: remember ? session.expirationDate : undefined,
 	})
-	return redirect(safeRedirect(redirectTo, '/'), {
+	return redirectWithConfetti(safeRedirect(redirectTo, '/'), {
 		headers: { 'Set-Cookie': newCookie },
 	})
 }

app/routes/_auth+/signup/index.tsx

@@ -18,7 +18,7 @@ import { ErrorList, Field } from '~/components/forms.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import { prisma } from '~/utils/db.server.ts'
 import { sendEmail } from '~/utils/email.server.ts'
-import { getDomainUrl } from '~/utils/misc.server.ts'
+import { getDomainUrl } from '~/utils/misc.ts'
 import { generateTOTP } from '~/utils/totp.server.ts'
 import { emailSchema } from '~/utils/user-validation.ts'
 import { SignupEmail } from './email.server.tsx'

app/routes/resources+/delete-note.tsx

@@ -1,4 +1,4 @@
-import { json, type DataFunctionArgs, redirect } from '@remix-run/node'
+import { json, type DataFunctionArgs } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import { ErrorList } from '~/components/forms.tsx'
 import { useForm } from '@conform-to/react'
@@ -7,6 +7,7 @@ import { z } from 'zod'
 import { requireUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
 import { StatusButton } from '~/components/ui/status-button.tsx'
+import { redirectWithToast } from '~/utils/flash-session.server.ts'
 
 const DeleteFormSchema = z.object({
 	noteId: z.string(),
@@ -49,7 +50,10 @@ export async function action({ request }: DataFunctionArgs) {
 		where: { id: note.id },
 	})
 
-	return redirect(`/users/${note.owner.username}/notes`)
+	return redirectWithToast(`/users/${note.owner.username}/notes`, {
+		title: 'Note deleted',
+		variant: 'destructive',
+	})
 }
 
 export function DeleteNote({ id }: { id: string }) {

app/routes/resources+/note-editor.tsx

@@ -1,13 +1,14 @@
 import { conform, useForm } from '@conform-to/react'
 import { getFieldsetConstraint, parse } from '@conform-to/zod'
-import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
+import { json, type DataFunctionArgs } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import { z } from 'zod'
 import { Button } from '~/components/ui/button.tsx'
 import { StatusButton } from '~/components/ui/status-button.tsx'
 import { requireUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
 import { ErrorList, Field, TextareaField } from '~/components/forms.tsx'
+import { redirectWithToast } from '~/utils/flash-session.server.ts'
 
 export const NoteEditorSchema = z.object({
 	id: z.string().optional(),
@@ -74,7 +75,9 @@ export async function action({ request }: DataFunctionArgs) {
 	} else {
 		note = await prisma.note.create({ data, select })
 	}
-	return redirect(`/users/${note.owner.username}/notes/${note.id}`)
+	return redirectWithToast(`/users/${note.owner.username}/notes/${note.id}`, {
+		title: id ? 'Note updated' : 'Note created',
+	})
 }
 
 export function NoteEditor({

app/routes/settings+/profile.two-factor.verify.tsx

@@ -9,7 +9,7 @@ import { StatusButton } from '~/components/ui/status-button.tsx'
 import { requireUserId } from '~/utils/auth.server.ts'
 import { prisma } from '~/utils/db.server.ts'
 import { Field } from '~/components/forms.tsx'
-import { getDomainUrl } from '~/utils/misc.server.ts'
+import { getDomainUrl } from '~/utils/misc.ts'
 import { getTOTPAuthUri, verifyTOTP } from '~/utils/totp.server.ts'
 
 export const verificationType = '2fa-verify'