Dev

.husky/pre-commit

@@ -5,7 +5,7 @@
 if lsof -Pi :3000 -sTCP:LISTEN -t >/dev/null ; then
     echo "🚨🚨🚨"
     echo "Port 3000 is already in use, please close the process and try again."
-    echo "🚨🚨🚨"
+    echo "🤡🤡🤡"
     exit 1
 else
     npm run build

app/components/index.ts

@@ -0,0 +1,11 @@
+export * from './ui/index.ts'
+export * from './layout/index.ts'
+export * from './templates/index.ts'
+
+export * from './confetti.tsx'
+export * from './error-boundary.tsx'
+export * from './floating-toolbar.tsx'
+export * from './progress-bar.tsx'
+export * from './search-bar.tsx'
+export * from './spacer.tsx'
+export * from './toaster.tsx'

app/components/layout/content-actionbar.tsx

@@ -1,8 +1,7 @@
 import { Link } from '@remix-run/react'
+import { Button, Icon, type IconName } from '#app/components/index.ts'
 import { DeleteNote } from '#app/routes/users+/$username_+/notes.$noteId.tsx'
 import { floatingToolbarClassName } from '../floating-toolbar.tsx'
-import { Button } from '../ui/button.tsx'
-import { Icon, type IconName } from '../ui/icon.tsx'
 
 interface ContentActionbarProps {
 	timestamp?: string

app/components/layout/content.tsx

@@ -28,7 +28,6 @@ const Content = React.forwardRef<HTMLElement, ContentProps>(
 		if (ref && typeof ref !== 'function') {
 			throw new Error('Ref must be a function')
 		}
-
 		const Comp = asChild ? Slot : 'div'
 		return (
 			<Comp

app/components/layout/index.ts

@@ -4,16 +4,17 @@
 export * from './content-header.tsx'
 export * from './content-images.tsx'
 export * from './footer.tsx'
 export * from './header.tsx'
 export * from './list.tsx'
 export * from './list-item.tsx'
 export * from './main.tsx'
 export * from './main-container.tsx'
 export * from './main-content.tsx'
 export * from './nav.tsx'
 export * from './nav-logo.tsx'
 export * from './nav-search.tsx'
 export * from './nav-user-controls.tsx'
 export * from './sidebar.tsx'
+export * from './sidebar-header.tsx'
 export * from './sidebar-avatar.tsx'
 export * from './sidebar-list.tsx'

app/components/layout/nav-user-controls.tsx

@@ -1,8 +1,8 @@
 import { Link } from '@remix-run/react'
+import { Button } from '#app/components/index.ts'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
 import { useOptionalUser, useUser } from '#app/utils/user.ts'
 import DropdownNavigation from '../templates/dropdown-navigation.tsx'
-import { Button } from '../ui/button.tsx'
 
 function NavUserControls() {
 	const user = useOptionalUser()

app/components/layout/sidebar-avatar.tsx

@@ -1,33 +1,17 @@
-import { Link } from '@remix-run/react'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
 
 interface SidebarAvatarProps {
 	ownerDisplayName: string
-	ownerUsername: string
 	ownerImageId?: string | null
-	title?: string
 }
 
-function SidebarAvatar({
-	ownerDisplayName,
-	ownerUsername,
-	ownerImageId,
-	title,
-}: SidebarAvatarProps) {
+function SidebarAvatar({ ownerDisplayName, ownerImageId }: SidebarAvatarProps) {
 	return (
-		<Link
-			to={`/users/${ownerUsername}`}
-			className="flex flex-col items-center justify-center gap-2 bg-muted pb-4 pl-8 pr-4 pt-12 lg:flex-row lg:justify-start lg:gap-4"
-		>
-			<img
-				src={getUserImgSrc(ownerImageId)}
-				alt={ownerDisplayName}
-				className="h-16 w-16 rounded-full object-cover lg:h-24 lg:w-24"
-			/>
-			<h1 className="text-center text-base font-bold md:text-lg lg:text-left lg:text-2xl">
-				{title || ownerDisplayName}
-			</h1>
-		</Link>
+		<img
+			src={getUserImgSrc(ownerImageId)}
+			alt={ownerDisplayName}
+			className="h-16 w-16 rounded-full object-cover lg:h-24 lg:w-24"
+		/>
 	)
 }
 

app/components/layout/sidebar-header.tsx

@@ -0,0 +1,19 @@
+import { Link } from '@remix-run/react'
+
+interface SidebarHeaderProps {
+	to: string
+	children?: React.ReactNode
+}
+
+function SidebarHeader({ to, children }: SidebarHeaderProps) {
+	return (
+		<Link
+			to={to}
+			className="flex flex-col items-center justify-center gap-2 bg-muted pb-4 pl-8 pr-4 pt-12 lg:flex-row lg:justify-start lg:gap-4"
+		>
+			{children}
+		</Link>
+	)
+}
+
+export { SidebarHeader }

app/components/layout/sidebar-list.tsx

@@ -1,20 +1,21 @@
 import { NavLink } from '@remix-run/react'
+import { Icon } from '#app/components/index.ts'
 import { cn } from '#app/utils/misc.tsx'
 import { type OwnerListData } from '#app/utils/user.ts'
-import { Icon } from '../ui/icon.tsx'
 import { ListItem } from './list-item.tsx'
 import { List } from './list.tsx'
 
 interface SidebarAvatarProps {
-	isOwner: boolean
+	displayNew: boolean
 	items: OwnerListData[]
+	newTitle?: string
 }
 
 const navLinkDefaultClassName =
 	'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'
 
-function SidebarList({ isOwner, items }: SidebarAvatarProps) {
-	const newItem = () => {
+function SidebarList({ displayNew, items, newTitle }: SidebarAvatarProps) {
+	const NewItem = () => {
 		return (
 			<ListItem variant="sidebar">
 				<NavLink
@@ -23,15 +24,15 @@ function SidebarList({ isOwner, items }: SidebarAvatarProps) {
 						cn(navLinkDefaultClassName, isActive && 'bg-accent')
 					}
 				>
-					<Icon name="plus">New Note</Icon>
+					<Icon name="plus">{newTitle || 'Create New'}</Icon>
 				</NavLink>
 			</ListItem>
 		)
 	}
 
 	return (
 		<List variant="sidebar">
-			{isOwner ? newItem() : null}
+			{displayNew ? <NewItem /> : null}
 			{items.map(item => (
 				<ListItem key={item.id} variant="sidebar">
 					<NavLink

app/components/progress-bar.tsx

@@ -1,8 +1,8 @@
 import { useNavigation } from '@remix-run/react'
 import { useEffect, useRef, useState } from 'react'
 import { useSpinDelay } from 'spin-delay'
+import { Icon } from '#app/components/index.ts'
 import { cn } from '#app/utils/misc.tsx'
-import { Icon } from './ui/icon.tsx'
 
 function EpicProgress() {
 	const transition = useNavigation()

app/components/search-bar.tsx

@@ -1,10 +1,7 @@
 import { Form, useSearchParams, useSubmit } from '@remix-run/react'
 import { useId } from 'react'
+import { Input, Icon, Label, StatusButton } from '#app/components/index.ts'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
-import { Icon } from './ui/icon.tsx'
-import { Input } from './ui/input.tsx'
-import { Label } from './ui/label.tsx'
-import { StatusButton } from './ui/status-button.tsx'
 
 export function SearchBar({
 	status,

app/components/templates/dropdown-navigation.tsx

@@ -1,14 +1,15 @@
 import { Link, useSubmit, Form } from '@remix-run/react'
 import React, { useRef } from 'react'
-import { Button } from '#app/components/ui/button.tsx'
 import {
+	Button,
 	DropdownMenu,
 	DropdownMenuTrigger,
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuPortal,
-} from '#app/components/ui/dropdown-menu.tsx'
-import { Icon, type IconName } from '../ui/icon.tsx'
+	Icon,
+	type IconName,
+} from '#app/components/index.ts'
 
 interface DropdownNavigationMenuItem {
 	label: string

app/components/templates/layout/page-header.tsx

@@ -1,20 +1,24 @@
 import {
 	Header,
 	Nav,
 	NavLogo,
 	NavSearch,
 	NavUserControls,
 } from '#app/components/layout/index.ts'
 
-function PageHeader() {
+interface PageHeaderProps {
+	userId?: string | undefined
+}
+
+function PageHeader({ userId }: PageHeaderProps) {
 	return (
 		<Header className="container py-6">
 			<Nav variant="marketing">
 				<div className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
 					<NavLogo />
-					<NavSearch variant="desktop" />
+					{userId && <NavSearch variant="desktop" />}
 					<NavUserControls />
-					<NavSearch variant="mobile" />
+					{userId && <NavSearch variant="mobile" />}
 				</div>
 			</Nav>
 		</Header>