feat(ui): Minimalize onboarding and nav (#141)

frontend/src/app/onboarding/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import ConfettiExplosion from "react-confetti-explosion"
 
+import { PawPrint, WorkflowIcon } from "lucide-react"
 import { useUser } from "@/lib/auth"
 import { completeOnboarding, newUserFlow } from "@/lib/onboarding"
 import { Button } from "@/components/ui/button"
@@ -36,15 +37,22 @@ export default function OnboardingComponent() {
   return (
     <div className="flex h-screen w-full items-center justify-center">
       <div className="container-sm flex aspect-auto max-w-[40vw] flex-1 items-center justify-center rounded-lg border bg-white p-16 shadow-md">
-        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+        <div className="flex flex-col items-center justify-center space-y-12 text-center">
           <div className="h-0">{isExploding && <ConfettiExplosion />}</div>
-          <h3 className="text-2xl font-bold">🎉 Welcome to Tracecat!</h3>
-          <p className="text-sm text-muted-foreground">
-            We&apos;re an early stage startup so your feedback is incredibly
-            valuable to the direction of the product. You can find us on our
-            Discord channel or Github. We&apos;d love for you to join our
-            community!
-          </p>
+          <h3 className="flex text-3xl font-bold">
+            <PawPrint className="inline-block mr-5 size-8" />
+            Hello from the Tracecat team
+          </h3>
+          <div className="space-y-4">
+            <p className="text-sm">
+              Tracecat is the modern SecOps automation platform designed to reduce noise.
+            </p>
+            <p className="text-sm text-muted-foreground">
+              We are doing it open source with security practitioners such as yourself.
+              You can find us on Discord or GitHub.
+              We are excited to have you join our community!
+            </p>
+          </div>
           <Button
             onClick={handleSubmit}
             disabled={isLoading}
@@ -57,11 +65,14 @@ export default function OnboardingComponent() {
                 Preparing your dashbaord
               </>
             ) : (
-              <>Continue</>
+              <>
+                <WorkflowIcon className="mr-2 h-4 w-4" />
+                Continue to workflows
+              </>
             )}
           </Button>
         </div>
       </div>
-    </div>
+    </div >
   )
 }

frontend/src/app/page.tsx

@@ -8,6 +8,7 @@ import TracecatIcon from "public/icon.png"
 
 import { auth } from "@/lib/auth"
 import { cn } from "@/lib/utils"
+import { LogInIcon } from "lucide-react"
 import { buttonVariants } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
 import PrivacyPolicy from "@/components/privacy-policy"
@@ -30,35 +31,29 @@ export default async function HomePage() {
             "absolute right-4 top-4 md:right-8 md:top-8"
           )}
         >
-          <Link href="/sign-in">Sign In</Link>
+          <Link href="/sign-in" className="flex flex-column">
+            <LogInIcon className="mr-3 size-5" />
+            <span>Sign In</span>
+          </Link>
         </div>
         <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
           <div className="absolute inset-0 bg-zinc-900" />
-          <div className="relative z-20 flex items-center text-lg font-semibold tracking-wider">
-            <Icons.logo className="mr-1 size-5" />
-            Tracecat
-          </div>
-          <div className="relative z-20 mt-auto">
-            <blockquote className="space-y-2">
-              <p className="text-md italic">
-                &ldquo;Make something people want.&rdquo;
-              </p>
-              {/* <footer className="text-sm">Paul Graham</footer> */}
-            </blockquote>
+          <div className="relative z-20 flex items-center text-xl font-semibold tracking-wider">
+            <Icons.logo className="mr-4 size-6" />
+            <h1>Tracecat</h1>
           </div>
         </div>
         <div className="lg:p-8">
-          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-            <div className="flex flex-col space-y-4 text-center">
-              <Image
-                src={TracecatIcon}
-                alt="Tracecat"
-                className="mx-auto h-16 w-16"
-              />
-              <h1 className="text-2xl font-semibold">Tracecat Cloud</h1>
-              <p className="text-md text-muted-foreground">Public Alpha v2.0</p>
-            </div>
-
+          <div className="mx-auto flex w-full flex-col justify-center text-center space-y-8 sm:w-[350px]">
+            <Image
+              src={TracecatIcon}
+              alt="Tracecat"
+              className="mx-auto size-16"
+            />
+            <h2 className="text-md text-muted-foreground">
+              The modern security automation platform
+              designed to reduce noise.
+            </h2>
             <PrivacyPolicy />
           </div>
         </div>

frontend/src/app/playbooks/layout.tsx

@@ -0,0 +1,24 @@
+import { type Metadata } from "next"
+
+import Navbar from "@/components/nav/navbar"
+import { WorkflowProvider } from "@/providers/workflow"
+
+export const metadata: Metadata = {
+  title: "Playbooks",
+  description: "Pre-built workflows ready to deploy."
+}
+
+export default async function WorkflowsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <WorkflowProvider>
+      <div className="no-scrollbar flex h-screen max-h-screen flex-col">
+        <Navbar />
+        {children}
+      </div>
+    </WorkflowProvider>
+  )
+}

frontend/src/app/playbooks/loading.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from "lucide-react"
+
+export default function Loading() {
+  return (
+    <div className="container flex h-full max-w-[800px] flex-col justify-center space-y-2 p-16">
+      <Loader2 className="mx-auto animate-spin text-gray-500" />
+    </div>
+  )
+}

frontend/src/app/playbooks/page.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+import { WorkflowsDashboard } from "@/components/playbooks/workflows-dashboard"
+
+export default async function Page() {
+    return <WorkflowsDashboard />
+}

frontend/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
     return <AuthDisabled />
   }
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex size-full items-center justify-center">
       <SignIn
         // NOTE: Don't force redirect here as when a session expires, the user
         // should be redirected to the page they were on before relogging.

frontend/src/app/sign-up/[[...sign-up]]/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
     return <AuthDisabled />
   }
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex size-full items-center justify-center">
       <SignUp
         path="/sign-up"
         signInUrl="/sign-in"

frontend/src/app/status/page.tsx

@@ -8,8 +8,8 @@ import { AlertNotification } from "@/components/notifications"
 
 export default async function Page() {
   return (
-    <main className="container flex h-full w-full max-w-[400px] flex-col items-center justify-center space-y-4">
-      <Image src={TracecatIcon} alt="Tracecat" className="mb-8 h-16 w-16" />
+    <main className="container flex size-full max-w-[400px] flex-col items-center justify-center space-y-4">
+      <Image src={TracecatIcon} alt="Tracecat" className="mb-8 size-16" />
       <h1 className="text-lg font-semibold">
         We&apos;re sorry for the inconvenience.
       </h1>

frontend/src/app/workflows/[workflowId]/console/page.tsx

@@ -13,7 +13,7 @@ export default function Dashboard() {
   return (
     <TooltipProvider>
       <div className="flex-1 overflow-auto">
-        <div className="grid h-full max-h-full w-full pl-[53px]">
+        <div className="grid h-full max-size-full pl-[53px]">
           <SideNav />
           <Console />
         </div>

frontend/src/app/workflows/[workflowId]/loading.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils"
 
 export default function Loading() {
   return (
-    <div className="flex h-full w-full items-center justify-center">
+    <div className="flex size-full items-center justify-center">
       <Loader2 className={cn("h-6 w-6 animate-spin text-muted-foreground")} />
     </div>
   )

frontend/src/components/auth-disabled.tsx

@@ -5,6 +5,7 @@ import Image from "next/image"
 import { useRouter } from "next/navigation"
 import TracecatIcon from "public/icon.png"
 
+import { PawPrintIcon } from "lucide-react"
 import { newUserFlow } from "@/lib/onboarding"
 import { Button } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
@@ -22,17 +23,18 @@ export function AuthDisabled() {
     router.push("/workflows")
   }
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center space-y-4">
-      <Image src={TracecatIcon} alt="Tracecat" className="mx-auto h-16 w-16" />
-      <h1 className="text-lg font-bold">Proceed to workflows</h1>
+    <div className="flex size-full flex-col items-center justify-center space-y-8">
+      <Image src={TracecatIcon} alt="Tracecat" className="mx-auto size-16" />
       <p className="max-w-[30vw] text-center text-sm text-muted-foreground">
-        Authentication is disabled. You can activate this by setting the
-        environment variable `TRACECAT__DISABLE_AUTH=0" and linking your Clerk account.
+        Thank you for installing Tracecat.
+        Please note that auth is disabled in self-hosted.
+        Instructions for enabling auth can be found in the docs.
       </p>
       <Button className="text-xs" onClick={handleClick} disabled={isLoading}>
         {isLoading && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
-        Continue to dashboard
+        <PawPrintIcon className="mr-2 h-4 w-4" />
+        Continue to workflows
       </Button>
-    </div>
+    </div >
   )
 }

frontend/src/components/console/console.tsx

@@ -46,7 +46,7 @@ export function Console() {
   return (
     <FormProvider {...methods}>
       <form className="h-full overflow-auto">
-        <main className="grid h-full w-full flex-1 items-center gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-6">
+        <main className="grid size-full flex-1 items-center gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-6">
           <ConsolePanel className="col-span-2" />
           <ConsoleFeed className="col-span-4" />
         </main>

frontend/src/components/console/control-panel.tsx

@@ -79,7 +79,7 @@ export function ConsolePanel({
         className
       )}
     >
-      <Card className="flex h-full w-full flex-col space-y-4 rounded-lg border p-4 shadow-sm">
+      <Card className="flex size-full flex-col space-y-4 rounded-lg border p-4 shadow-sm">
         <div className="space-y-3">
           <div className="flex justify-between">
             <legend className="-ml-1 px-1 text-sm font-semibold">

frontend/src/components/console/event-feed-item.tsx

@@ -204,7 +204,7 @@ function EventFeedItemResultOrError({
           {JSON.stringify(result.output, null, 2)}
         </SyntaxHighlighter>
       ) : (
-        <pre className="h-full w-full overflow-auto text-wrap rounded-md bg-[#292c33] p-2">
+        <pre className="size-full overflow-auto text-wrap rounded-md bg-[#292c33] p-2">
           <code className="max-w-full overflow-auto rounded-md text-xs text-red-400/80">
             {error_msg}
           </code>

frontend/src/components/dashboard/create-workflow-button.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { useRouter } from "next/navigation";
+import { PlusCircleIcon } from "lucide-react";
+
+import { createWorkflow } from "@/lib/flow";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+
+const CreateWorkflowButton: React.FC = () => {
+    const router = useRouter();
+
+    const handleCreateWorkflow = async () => {
+        try {
+            // Get the current date and format it
+            const currentDate = new Date();
+            const formattedDate = currentDate.toLocaleString('en-US', {
+                month: 'short',
+                day: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false,
+            });
+            const title = `${formattedDate}`;
+            const description = `New workflow created ${formattedDate}.`;
+
+            const response = await createWorkflow(title, description);
+
+            toast({
+                title: title,
+                description: description,
+            });
+
+            // Redirect to the new workflow's page
+            router.push(`/workflows/${response.id}`);
+        } catch (error) {
+            console.error("Error adding workflow:", error);
+        }
+    };
+
+    return (
+        <Button
+            variant="outline"
+            role="combobox"
+            className="space-x-2"
+            onClick={handleCreateWorkflow}
+        >
+            <PlusCircleIcon className="h-4 w-4" />
+            <span>New workflow</span>
+        </Button>
+    );
+};
+
+export default CreateWorkflowButton;

frontend/src/components/dashboard/workflows-dashboard-item.tsx

@@ -25,7 +25,7 @@ export function WorkflowItem({ workflow }: { workflow: WorkflowMetadata }) {
             <span
               className={cn(
                 "flex h-2 w-2 rounded-full",
-                workflow.status === "online" ? "bg-green-400" : "bg-gray-400"
+                workflow.status === "online" ? "bg-emerald-600" : "bg-gray-400"
               )}
             />
           </div>