chore: refactor admin components

src/app/(admin)/admin/UIHelpers.tsx

@@ -1,22 +1,16 @@
-'use client';
-
 import { Edit } from '@/components/Icons';
 import { Button } from '@/components/ui/button';
-import { forwardRef } from 'react';
 
-export const Section = forwardRef<
-    HTMLDivElement,
-    {
-        children: React.ReactNode;
-        title: string;
-        addButtonDialog?: React.ReactNode;
-    }
->(({ children, title, addButtonDialog, ...props }, forwardedRef) => (
-    <div
-        className="w-full rounded border border-border p-2 transition-all"
-        {...props}
-        ref={forwardedRef}
-    >
+export const Section = ({
+    children,
+    title,
+    addButtonDialog,
+}: {
+    children: React.ReactNode;
+    title: string;
+    addButtonDialog?: React.ReactNode;
+}) => (
+    <div className="w-full rounded border border-border p-2 transition-all">
         <div className="flex w-full justify-between">
             <Title>{title}</Title>
             {addButtonDialog && (
@@ -25,75 +19,49 @@ export const Section = forwardRef<
         </div>
         <List>{children}</List>
     </div>
-));
-
-Section.displayName = 'Section';
-
-export const Title = forwardRef<HTMLDivElement, { children: React.ReactNode }>(
-    ({ children, ...props }, forwardedRef) => (
-        <div className="p-2 text-lg font-bold" {...props} ref={forwardedRef}>
-            {children}
-        </div>
-    ),
 );
 
-Title.displayName = 'Title';
-
-export const List = forwardRef<HTMLDivElement, { children: React.ReactNode }>(
-    ({ children, ...props }, forwardedRef) => (
-        <div className="w-full py-1" {...props} ref={forwardedRef}>
-            {children}
-        </div>
-    ),
+export const Title = ({ children }: { children: React.ReactNode }) => (
+    <div className="p-2 text-lg font-bold">{children}</div>
 );
 
-List.displayName = 'List';
+export const List = ({ children }: { children: React.ReactNode }) => (
+    <div className="w-full py-1">{children}</div>
+);
 
-export const ListItem = forwardRef<
-    HTMLDivElement,
-    { children: React.ReactNode }
->(({ children, ...props }, forwardedRef) => (
+export const ListItem = ({
+    children,
+    ...props
+}: {
+    children: React.ReactNode;
+    props?: React.HTMLAttributes<HTMLDivElement>;
+}) => (
     <div
         className="w-full cursor-pointer rounded-lg px-2 py-1 underline-offset-4 hover:bg-secondary/60 hover:underline"
         {...props}
-        ref={forwardedRef}
     >
         {children}
     </div>
-));
-
-ListItem.displayName = 'ListItem';
-
-export const AddButton = forwardRef<HTMLButtonElement>(
-    (props, forwardedRef) => (
-        <Button
-            type="button"
-            className="text-xl font-medium"
-            variant="outline"
-            size="icon"
-            {...props}
-            ref={forwardedRef}
-        >
-            +
-        </Button>
-    ),
 );
 
-AddButton.displayName = 'AddButton';
-
-export const EditButton = forwardRef<HTMLButtonElement>(
-    (props, forwardedRef) => (
-        <Button
-            type="button"
-            className="text-xl font-medium"
-            variant="outline"
-            size="icon"
-            {...props}
-            ref={forwardedRef}
-        >
-            <Edit />
-        </Button>
-    ),
+export const AddButton = () => (
+    <Button
+        type="button"
+        className="text-xl font-medium"
+        variant="outline"
+        size="icon"
+    >
+        +
+    </Button>
 );
 
-EditButton.displayName = 'EditButton';
+export const EditButton = () => (
+    <Button
+        type="button"
+        className="text-xl font-medium"
+        variant="outline"
+        size="icon"
+    >
+        <Edit />
+    </Button>
+);

src/app/(admin)/admin/ai/TemplateSettings.tsx

@@ -8,7 +8,7 @@ import {
 import TemplateSelector from './TemplateSelector';
 import JobSelector from './JobSelector';
 import { AddButton, ListItem, Section } from '../UIHelpers';
-import JobDialog from '@/components/dialogs/admin/JobDialog';
+import JobDialog from '../components/dialog/JobDialog';
 import InterviewPhaseSelector from './InterviewPhaseSelector';
 
 export default function TemplateSettings({

src/components/dialogs/admin/ExperienceDialog.tsx → src/app/(admin)/admin/components/dialog/ExperienceDialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import ExperienceForm from '@/components/forms/admin/ExperienceForm';
+import ExperienceForm from '../forms/ExperienceForm';
 import ExperienceView from './ExperienceView';
 import { GenericDialog } from './GenericDialog';
 

src/components/dialogs/admin/JobDialog.tsx → src/app/(admin)/admin/components/dialog/JobDialog.tsx

@@ -1,6 +1,6 @@
 import JobView from './JobView';
 import { GenericDialog } from './GenericDialog';
-import JobForm from '@/components/forms/admin/JobForm';
+import JobForm from '../forms/JobForm';
 
 export default function JobDialog({
     children,

src/components/dialogs/admin/MessageDialog.tsx → src/app/(admin)/admin/components/dialog/MessageDialog.tsx

@@ -1,5 +1,9 @@
 'use client';
 
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
 import { Trash } from '@/components/Icons';
 import Markdown from '@/components/Markdown';
 import { Button } from '@/components/ui/button';
@@ -12,9 +16,6 @@ import {
 } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { deleteContact, readContact } from '@/lib/actions';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
 export default function MessageDialog({
     children,

src/components/dialogs/admin/ProjectDialog.tsx → src/app/(admin)/admin/components/dialog/ProjectDialog.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { GenericDialog } from './GenericDialog';
-import ProjectForm from '@/components/forms/admin/ProjectForm';
+import ProjectForm from '../forms/ProjectForm';
 import ProjectView from './ProjectView';
 
 export function ProjectDialog({

src/components/dialogs/admin/ProjectView.tsx → src/app/(admin)/admin/components/dialog/ProjectView.tsx

@@ -1,8 +1,9 @@
-import Markdown from '@/components/Markdown';
-import { Label } from '@/components/ui/label';
 import Image from 'next/image';
 import Link from 'next/link';
 
+import Markdown from '@/components/Markdown';
+import { Label } from '@/components/ui/label';
+
 export default function ExperienceView({ data }: { data?: Project }) {
     return (
         <div className="grid gap-2 sm:gap-4">

src/app/(admin)/admin/page.tsx

@@ -6,12 +6,11 @@ import {
     getAllProjects,
     getAbout,
 } from '@/lib/actions';
-import { ExperienceDialog } from '@/components/dialogs/admin/ExperienceDialog';
-import { ProjectDialog } from '@/components/dialogs/admin/ProjectDialog';
-import MessageDialog from '@/components/dialogs/admin/MessageDialog';
+import { ExperienceDialog } from './components/dialog/ExperienceDialog';
+import { ProjectDialog } from './components/dialog/ProjectDialog';
+import MessageDialog from './components/dialog/MessageDialog';
 import { Label } from '@/components/ui/label';
-import AboutDialog from '@/components/dialogs/admin/AboutDialog';
-import Markdown from '@/components/Markdown';
+import AboutDialog from './components/dialog/AboutDialog';
 import { AddButton, EditButton, ListItem, Section } from './UIHelpers';
 
 const SECTIONS = {
@@ -100,12 +99,6 @@ export default async function Page() {
                             <Label>Tags</Label>
                             <div>{about.tags.join(', ')}</div>
                         </div>
-                        {/* <div>
-                            <Label>Bio</Label>
-                            <div className="space-y-2">
-                                <Markdown>{about.description}</Markdown>
-                            </div>
-                        </div> */}
                     </div>
                 )}
             </Section>

src/app/(home)/Intro.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { ChevronDown } from 'lucide-react';
+import { useEffect } from 'react';
 
 import IconLinks from '@/components/IconLinks';
-import { useEffect } from 'react';
 
 export default function Intro({ about }: { about: About }) {
     useEffect(() => {

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import PlausibleProvider from 'next-plausible';
 import type { Metadata } from 'next/types';
+import { Suspense } from 'react';
 
 import '@/globals.css';
 import { Providers } from './providers';
@@ -49,7 +50,7 @@ export default async function RootLayout({
         <html
             suppressHydrationWarning={true}
             lang="en"
-            className="background-background select-none scroll-smooth text-base text-foreground selection:bg-neutral-300 selection:text-neutral-900 dark:selection:bg-neutral-400 dark:selection:text-neutral-900 sm:select-auto"
+            className="background-background select-none scroll-smooth text-base text-foreground selection:bg-neutral-300 selection:text-neutral-900 sm:select-auto dark:selection:bg-neutral-400 dark:selection:text-neutral-900"
         >
             <head>
                 <PlausibleProvider
@@ -61,7 +62,12 @@ export default async function RootLayout({
             <body className="relative mx-auto h-full w-full max-w-10xl">
                 <Providers>
                     <div className="fixed bottom-8 right-8 z-10 flex flex-col items-center justify-center gap-4 sm:bottom-12">
-                        <ProfileButton />
+                        {/* <Suspense fallback={null}>
+                            <ChatButton />
+                        </Suspense> */}
+                        <Suspense fallback={null}>
+                            <ProfileButton />
+                        </Suspense>
                         <ThemeToggle />
                     </div>
                     {children}

src/components/Icons.tsx

@@ -240,3 +240,21 @@ export const Profile = () => (
         />
     </svg>
 );
+
+export const ChatBubble = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        data-slot="icon"
+        className="h-6 w-6"
+    >
+        <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.068.157 2.148.279 3.238.364.466.037.893.281 1.153.671L12 21l2.652-3.978c.26-.39.687-.634 1.153-.67 1.09-.086 2.17-.208 3.238-.365 1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+        />
+    </svg>
+);

src/components/buttons/AdminButton.tsx

@@ -1,14 +1,13 @@
-'use client';
-
 import Link from 'next/link';
-import { useSession } from 'next-auth/react';
 
 import { Button } from '../ui/button';
 import { Profile } from '../Icons';
+import { getSession } from '@/lib/auth';
+
+export const ProfileButton = async () => {
+    const session = await getSession();
+    if (!session) return null;
 
-export const ProfileButton = () => {
-    const { data } = useSession();
-    if (!data) return null;
     return (
         <Button variant="outline" asChild size="icon">
             <Link href="/admin">

src/components/buttons/ChatButton.tsx

@@ -0,0 +1,14 @@
+import { Button } from '../ui/button';
+import { ChatBubble } from '../Icons';
+import { getSession } from '@/lib/auth';
+
+export const ChatButton = async () => {
+    const session = await getSession();
+    if (!session) return null;
+
+    return (
+        <Button variant="outline" size="icon">
+            <ChatBubble />
+        </Button>
+    );
+};