add: enhance new installs ui components and skeleton loaders for better ux

Author: devarshishimpi

src/client/components/features/dashboard/updates-email-prompt.tsx

@@ -49,20 +49,21 @@ export function UpdatesEmailPrompt() {
 
   return (
     <section className="surface overflow-hidden">
-      <div className="flex flex-col gap-4 px-4 py-4 sm:px-5 lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex flex-col gap-4 px-4 py-4 sm:px-5 md:flex-row md:items-center md:justify-between md:gap-6">
         <div className="flex min-w-0 items-start gap-3">
-          <span className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+          <span className="mt-0.5 hidden sm:flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
             <Mail size={16} strokeWidth={2.1} />
           </span>
           <div className="min-w-0">
             <h2 className="text-sm font-semibold text-foreground">Get important Codra updates</h2>
-            <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Add an email for release notes, security fixes, and upgrade heads-up. You can opt out from any update email later. No spam.
+            <p className="mt-0.5 text-sm text-muted-foreground leading-relaxed">
+              Add an email for release notes, security fixes, and upgrade heads-up.{' '}
+              <span className="hidden sm:inline">You can opt out from any update email later. No spam.</span>
             </p>
           </div>
         </div>
 
-        <form onSubmit={subscribe} className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center lg:w-[31rem]">
+        <form onSubmit={subscribe} className="flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:items-center md:w-auto md:shrink-0 md:basis-[26rem]">
           <Input
             type="email"
             required
@@ -72,12 +73,10 @@ export function UpdatesEmailPrompt() {
             className="h-9 min-w-0 flex-1"
             aria-label="Email for Codra release updates"
           />
-          <div className="flex shrink-0 gap-2">
-            <Button type="submit" size="sm" disabled={submitting} className="flex-1 gap-2 sm:flex-none">
-              {submitting ? <RefreshCw size={13} className="animate-spin" /> : <Check size={13} />}
-              Save email
-            </Button>
-          </div>
+          <Button type="submit" size="sm" disabled={submitting} className="w-full gap-2 sm:w-auto sm:shrink-0">
+            {submitting ? <RefreshCw size={13} className="animate-spin" /> : <Check size={13} />}
+            Save email
+          </Button>
         </form>
       </div>
     </section>

src/client/components/layout/page-header.tsx

@@ -3,7 +3,7 @@ import { cn } from '@client/lib/utils';
 import { UpdatesEmailPrompt } from '@client/components/features/dashboard/updates-email-prompt';
 
 interface PageHeaderProps extends React.HTMLAttributes<HTMLElement> {
-  category: string;
+  category?: string;
   title: string;
   description?: React.ReactNode;
   actions?: React.ReactNode;
@@ -21,16 +21,13 @@ export function PageHeader({
   return (
     <>
       <header
-        className={cn('flex flex-col sm:flex-row sm:items-end justify-between gap-4 sm:gap-0', className)}
+        className={cn('flex flex-col sm:flex-row sm:items-center justify-between gap-3', className)}
         {...props}
       >
         <div>
-          <p className="text-xs font-semibold uppercase tracking-widest text-primary/70 mb-1">
-            {category}
-          </p>
           <h1
-            className="flex items-center gap-3 text-xl md:text-2xl font-bold text-foreground"
-            style={{ letterSpacing: '-0.025em' }}
+            className="flex items-center gap-3 text-xl font-bold text-foreground"
+            style={{ letterSpacing: '-0.02em' }}
           >
             {title}
             {props.versionBadge && (
@@ -40,13 +37,13 @@ export function PageHeader({
             )}
           </h1>
           {description && (
-            <div className="mt-1 text-sm text-muted-foreground">
+            <div className="mt-0.5 text-sm text-muted-foreground">
               {description}
             </div>
           )}
         </div>
         {actions && (
-          <div className="flex flex-wrap items-center gap-2 sm:gap-3 w-full sm:w-auto">
+          <div className="flex flex-wrap items-center gap-2 sm:gap-2.5 w-full sm:w-auto sm:shrink-0">
             {actions}
           </div>
         )}
@@ -55,3 +52,4 @@ export function PageHeader({
     </>
   );
 }
+

src/client/components/shared/empty-state.tsx

@@ -1,41 +1,88 @@
 import React from 'react';
-import { Button } from '@client/components/ui/button';
 import { cn } from '@client/lib/utils';
 
 interface EmptyStateProps {
   icon?: React.ReactNode;
   title: string;
   description?: string;
+  /** Bullet-point hints shown with green dot prefix (Beetle-style) */
+  hints?: string[];
+  /** Renders an outlined link button below the hints */
+  linkAction?: {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+  };
+  /** Legacy single action button */
   action?: {
     label: string;
     onClick: () => void;
   };
   className?: string;
 }
 
-export function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
+export function EmptyState({ icon, title, description, hints, linkAction, action, className }: EmptyStateProps) {
   return (
     <div
       className={cn(
-        'flex flex-col items-center justify-center gap-4 rounded-md border border-dashed border-border/70 bg-card/30 px-8 py-16 text-center',
+        'flex flex-col items-center justify-center gap-4 px-8 py-16 text-center',
         className,
       )}
     >
       {icon && (
-        <div className="flex h-16 w-16 items-center justify-center rounded-full bg-accent/10 text-accent [&_svg]:h-8 [&_svg]:w-8">
+        <div className="flex h-14 w-14 items-center justify-center text-muted-foreground/40 [&_svg]:h-9 [&_svg]:w-9 [&_svg]:stroke-[1.35]">
           {icon}
         </div>
       )}
       <div className="space-y-1.5">
-        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+        <h3 className="text-base font-semibold text-foreground">{title}</h3>
         {description && (
           <p className="max-w-sm text-sm text-muted-foreground leading-relaxed">{description}</p>
         )}
       </div>
+
+      {hints && hints.length > 0 && (
+        <ul className="mt-1 flex flex-col gap-1.5 text-left">
+          {hints.map((hint, i) => (
+            <li key={i} className="flex items-start gap-2.5 text-sm text-muted-foreground">
+              <span className="mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full bg-primary opacity-80" />
+              <span>{hint}</span>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {linkAction && (
+        <div className="mt-3">
+          {linkAction.href ? (
+            <a
+              href={linkAction.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center rounded-md border border-border bg-card px-4 py-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-secondary hover:border-border/80"
+            >
+              {linkAction.label}
+            </a>
+          ) : (
+            <button
+              type="button"
+              onClick={linkAction.onClick}
+              className="inline-flex items-center rounded-md border border-border bg-card px-4 py-2 text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-secondary hover:border-border/80"
+            >
+              {linkAction.label}
+            </button>
+          )}
+        </div>
+      )}
+
       {action && (
-        <Button onClick={action.onClick} className="mt-2">
+        <button
+          type="button"
+          onClick={action.onClick}
+          className="mt-2 inline-flex items-center rounded border border-border/60 bg-transparent px-4 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-border hover:text-foreground"
+        >
           {action.label}
-        </Button>
+        </button>
       )}
     </div>
   );

src/client/components/shared/jobs-table.tsx

@@ -29,16 +29,16 @@ interface JobsTableProps {
 }
 
 const DEFAULT_COLUMNS: Column[] = [
-  'repo',
   'pr',
+  'repo',
   'status',
   'verdict',
   'created',
   'action',
 ];
 
 const thCls =
-  'px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.16em] text-muted-foreground select-none';
+  'px-4 py-3 text-left text-xs font-semibold text-muted-foreground/70 select-none';
 
 const COLUMN_CLASSES: Record<Column, string> = {
   repo: 'w-[190px] max-w-[190px]',
@@ -53,12 +53,12 @@ const COLUMN_CLASSES: Record<Column, string> = {
 
 const COLUMN_HEADERS: Record<Column, string> = {
   repo: 'Repository',
-  pr: 'Pull request',
+  pr: 'Title',
   status: 'Status',
   verdict: 'Verdict',
   files: 'Files',
   tokens: 'Tokens',
-  created: 'Created',
+  created: 'Last Updated',
   action: '',
 };
 
@@ -228,7 +228,7 @@ export function JobsTable({ jobs, loading, columns }: JobsTableProps) {
       <div className="hidden max-w-full overflow-x-auto sm:block">
         <table className={cn('w-full border-separate border-spacing-0 text-sm', tableMinWidth)}>
           <thead>
-            <tr className="bg-secondary/60">
+            <tr className="border-b border-border/60 bg-muted/30">
               {cols.map((col) => (
                 <th
                   key={col}

src/client/pages/dashboard.tsx

@@ -2,8 +2,9 @@ import { useState } from 'react';
 import { api } from '@client/lib/api';
 import type { StatsPayload } from '@shared/schema';
 import type { JobSummary } from '@shared/schema';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, GitPullRequest } from 'lucide-react';
 import { JobsTable } from '@client/components/shared/jobs-table';
+import { EmptyState } from '@client/components/shared/empty-state';
 import { PageHeaderActions } from '@client/components/shared/page-header-actions';
 import { Link } from 'react-router-dom';
 
@@ -47,7 +48,6 @@ export function DashboardPage() {
     <section className="page-enter flex flex-col gap-6">
 
       <PageHeader
-        category="Home"
         title="Dashboard"
         description="Totals and recent review jobs for the selected time range."
         actions={
@@ -84,6 +84,23 @@ export function DashboardPage() {
         <div className="surface min-w-0 overflow-hidden">
           <JobsTable jobs={recentJobs} loading={loading} />
 
+          {!loading && recentJobs.length === 0 && (
+            <EmptyState
+              icon={<GitPullRequest />}
+              title="No jobs yet"
+              description="Your pull request analysis logs will appear here"
+              hints={[
+                'Once you open a PR in any of the connected repos, analysis triggers automatically',
+                'To trigger manually, comment @codra on any PR',
+              ]}
+              linkAction={{
+                label: 'See how to interact with Codra',
+                href: 'https://github.com/devarshishimpi/codra#readme',
+              }}
+              className="rounded-none border-0"
+            />
+          )}
+
           {!loading && recentJobs.length > 0 && (
             <div className="px-5 py-2.5 bg-muted/20 border-t border-border/50">
               <p className="text-[10px] font-semibold uppercase tracking-[0.2em] text-muted-foreground/40 text-center">
@@ -96,3 +113,4 @@ export function DashboardPage() {
     </section>
   );
 }
+