feat: loader

src/app/dashboard/page.tsx

@@ -11,19 +11,21 @@ const DashboardPage = async () => {
     const { data: investigations, error } = await supabase.from("investigations").select("id, title, description")
     if (error) return unauthorized()
     return (
-        <div className='space-y-6 w-full max-w-5xl mx-auto p-6'>
-            <div>
-                <h1 className="text-3xl font-semibold mb-2">Vos investigations</h1>
-                <p className="mb-6 opacity-70">
-                    La liste de vos investigations. Vous pouvez également en créer d'autres.
-                </p>
-            </div>
-            <div className='flex gap-3'>
-                <NewCase>
-                    <Button><PlusIcon className='h-4 w-4' />Create</Button>
-                </NewCase>
-                <Button variant='secondary'><DownloadIcon className='h-4 w-4' />Upload</Button>
-                <Button variant='secondary'><FolderIcon className='h-4 w-4' />Create organization</Button>
+        <div className='space-y-6 w-full p-12'>
+            <div className='flex justify-between items-center'>
+                <div className=''>
+                    <h1 className="text-3xl font-semibold mb-2">Vos investigations</h1>
+                    <p className="mb-6 opacity-70">
+                        La liste de vos investigations. Vous pouvez également en créer d'autres.
+                    </p>
+                </div>
+                <div className='flex gap-3'>
+                    <NewCase>
+                        <Button><PlusIcon className='h-4 w-4' />Create</Button>
+                    </NewCase>
+                    {/* <Button variant='secondary'><DownloadIcon className='h-4 w-4' />Upload</Button>
+                <Button variant='secondary'><FolderIcon className='h-4 w-4' />Create organization</Button> */}
+                </div>
             </div>
             <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-5'>{investigations.map((investigation) => (
                 <Investigation key={investigation.id} investigation={investigation} />

src/app/investigations/[investigation_id]/left.tsx

@@ -29,7 +29,7 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
     )
 
     return (
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full">
             <Accordion type="single" collapsible defaultValue="individuals">
                 <AccordionItem value="individuals">
                     <AccordionTrigger className="p-2 px-4 hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm rounded-none">
@@ -92,7 +92,6 @@ const Left = ({ investigation_id }: { investigation_id: string }) => {
                     </AccordionContent>
                 </AccordionItem>
             </Accordion>
-
             <Accordion type="single" collapsible defaultValue="phones">
                 <AccordionItem value="phones">
                     <AccordionTrigger className="p-2 px-4 hover:bg-sidebar-accent text-sidebar-accent-foreground/60 hover:text-sidebar-accent-foreground text-sm rounded-none">

src/app/investigations/[investigation_id]/loading.tsx

@@ -1,8 +1,9 @@
+import Loader from '@/components/loader'
 import React from 'react'
 
 const loading = () => {
     return (
-        <div className='h-[90vh] w-full flex items-center justify-center gap-2'>Loading nodes and edges...</div>
+        <div className='h-[90vh] w-full flex items-center justify-center gap-2'><Loader />Loading nodes and edges...</div>
     )
 }
 

src/app/page.tsx

@@ -1,12 +1,14 @@
-import { Button } from '@/components/ui/button'
-import Link from "next/link";
+import { createClient } from '@/lib/supabase/server';
+import { redirect } from 'next/navigation';
 
-export default function Home() {
-  return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-xl text-center justify-center">
-        <Link href="/dashboard"><Button>Dashboard</Button></Link>
-      </div>
-    </section>
-  );
+export default async function Home() {
+  const supabase = await createClient()
+  const {
+    data: { user },
+    error: userError,
+  } = await supabase.auth.getUser();
+  if (!user || userError) {
+    return redirect("/login")
+  }
+  return redirect("/dashboard")
 }

src/components/investigations/graph.tsx

@@ -28,6 +28,7 @@ import { TooltipTrigger } from '@radix-ui/react-tooltip';
 import { cn } from '@/lib/utils';
 import { useInvestigationStore } from '@/store/investigation-store';
 import { useFlowStore } from '../../store/flow-store';
+import Loader from '../loader';
 // import CurrentNode from './current-node-card';
 
 const edgeTypes = {
@@ -206,7 +207,7 @@ export default function Graph({ graphQuery }: { graphQuery: any }) {
     if (!mounted || isLoading) {
         return (
             <div className='h-[calc(100vh_-_48px)] w-full flex items-center justify-center'>
-                Loading...
+                <Loader /> Loading...
             </div>
         );
     }

src/components/investigations/layout.tsx

@@ -30,7 +30,7 @@ const InvestigationLayout = ({
         <SidebarProvider defaultOpen={false}>
             <AppSidebar user={user} defaultChecked={false} />
             <PanelGroup autoSaveId="conditional" className='h-screen w-screen flex' direction="horizontal">
-                {panelOpen && <Panel id="left" order={1} className='h-screen' defaultSize={20} minSize={15}>
+                {panelOpen && <Panel id="left" order={1} className='h-screen' defaultSize={20} minSize={10}>
                     <div className='flex flex-col w-full h-full rounded-none shadow-none border-r'>
                         <div className='w-full rounded-none shadow-none h-12 border-b flex items-center gap-1 flex-row justify-between p-2'>
                             <Logo />
@@ -51,7 +51,7 @@ const InvestigationLayout = ({
                     </div>
                 </Panel>}
                 <PanelResizeHandle />
-                <Panel id="right" order={2} defaultSize={80} minSize={50} className='grow flex flex-col'>
+                <Panel id="right" order={2} defaultSize={90} minSize={50} className='grow flex flex-col'>
                     <div>
                         <div className='w-full rounded-none shadow-none h-12 justify-between border-b flex flex-row items-center'>
                             <div className='grow flex items-center justify-between p-2'>

src/components/investigations/nodes/individual.tsx

@@ -81,7 +81,7 @@ function Custom(props: any) {
                             <Card
                                 onDoubleClick={() => setIndividualId(data.id)}
                                 className={cn(
-                                    "p-1 border border-border hover:border-primary/40 duration-100 rounded-full shadow-none backdrop-blur bg-background/40",
+                                    "p-1 border border-border hover:border-primary duration-100 rounded-full shadow-none backdrop-blur bg-background/40",
                                     currentNode === data.id && "border-primary",
                                 )}
                             >

src/components/loader.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Loader = () => {
+    return (
+        <svg className="inline-block h-5 w-5 animate-spin m-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+    )
+}
+
+export default Loader

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm cursor-pointer text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0",
   {
     variants: {
       variant: {
@@ -22,8 +22,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 rounded-sm cursor-pointer px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-sm cursor-pointer px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
     },