massive landing page improvements

packages/frontend/src/components/server-configuration.tsx

@@ -114,7 +114,7 @@ export function ServerConfiguration({ trigger }: { trigger?: ReactNode }) {
         <DialogTrigger asChild>
           {trigger || (
             <IconButton size="lg" className="absolute top-2 right-2" title={"Server Configuration"}>
-              <Icon icon="serverIcon" className="size-4" />
+              <Icon icon="server" className="size-4" />
             </IconButton>
           )}
         </DialogTrigger>

packages/frontend/src/components/ui/icon.tsx

@@ -2,6 +2,7 @@ import {
   Alert as PixelAlert,
   Check as PixelCheck,
   Checkbox as PixelCheckbox,
+  CheckboxOn as PixelCheckboxOn,
   ChevronDown as PixelChevronDown,
   ChevronLeft as PixelChevronLeft,
   ChevronRight as PixelChevronRight,
@@ -10,7 +11,10 @@ import {
   Clock as PixelClock,
   Close as PixelClose,
   MessagePlus as PixelCommentSend,
+  CreditCard as PixelCreditCard,
+  Dashboard as PixelDashboard,
   Debug as PixelDebug,
+  DebugOff as PixelDebugOff,
   Edit as PixelEdit,
   Home as PixelHome,
   InfoBox as PixelInfo,
@@ -24,14 +28,18 @@ import {
   Play as PixelPlay,
   Plus as PixelPlus,
   Server as PixelServer,
+  Shield as PixelShield,
+  Ship as PixelShip,
   CheckboxOn as PixelStop,
   Sun as PixelSun,
   Trash as PixelTrash,
   Undo as PixelUndo,
   User as PixelUser,
   ViewportWide as PixelViewportWide,
+  Zap as PixelZap,
 } from "@nsmr/pixelart-react";
 import {
+  ArrowCounterClockwiseIcon as PhosphorArrowCounterClockwise,
   BugIcon as PhosphorBug,
   CheckIcon as PhosphorCheck,
   CheckCircleIcon as PhosphorCheckCircle,
@@ -41,8 +49,9 @@ import {
   CaretRightIcon as PhosphorChevronRight,
   CaretUpIcon as PhosphorChevronUp,
   CircleIcon as PhosphorCircle,
-  ClockIcon as PhosphorClock,
   ChatTextIcon as PhosphorComment,
+  CreditCardIcon as PhosphorCreditCard,
+  CubeIcon as PhosphorCube,
   DotsSixVerticalIcon as PhosphorDotsSixVertical,
   DotsThreeVerticalIcon as PhosphorDotsThreeVertical,
   PencilSimpleIcon as PhosphorEdit,
@@ -50,6 +59,8 @@ import {
   HashStraightIcon as PhosphorHashStraight,
   HouseIcon as PhosphorHome,
   InfoIcon as PhosphorInfo,
+  LayoutIcon as PhosphorLayout,
+  LightningIcon as PhosphorLightning,
   LinkIcon as PhosphorLink,
   SpinnerGapIcon as PhosphorLoader,
   SignOutIcon as PhosphorLogOut,
@@ -59,11 +70,13 @@ import {
   PlayIcon as PhosphorPlay,
   PlusIcon as PhosphorPlus,
   QuestionIcon as PhosphorQuestion,
+  RocketLaunchIcon as PhosphorRocketLaunch,
   HardDrivesIcon as PhosphorServer,
+  ShieldCheckIcon as PhosphorShieldCheck,
   StopIcon as PhosphorStop,
   SunIcon as PhosphorSun,
+  TimerIcon as PhosphorTimer,
   TrashIcon as PhosphorTrash,
-  ArrowCounterClockwiseIcon as PhosphorUndo,
   UserIcon as PhosphorUser,
   WarningIcon as PhosphorWarning,
   XIcon as PhosphorX,
@@ -71,7 +84,9 @@ import {
 import type { IconStyle } from "@sprint/shared";
 import {
   AlertTriangle,
+  Box,
   Bug,
+  BugOff,
   Check,
   CheckIcon,
   ChevronDown,
@@ -79,15 +94,16 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   ChevronUp,
-  ChevronUpIcon,
   CircleCheckIcon,
   CircleIcon,
   CircleQuestionMark,
+  CreditCard,
   Edit,
   EllipsisVertical,
   GripVerticalIcon,
   Hash,
   InfoIcon,
+  LayoutDashboard,
   Link,
   Loader,
   Loader2Icon,
@@ -99,17 +115,22 @@ import {
   Pause,
   Play,
   Plus,
+  Rocket,
+  RotateCcw,
   ServerIcon,
+  ShieldCheck,
   Square,
   SquareCheck,
   Sun,
   Timer,
+  TimerOff,
   Trash,
   TriangleAlertIcon,
   Undo,
   Undo2,
   UserRound,
   X,
+  Zap,
 } from "lucide-react";
 import { useSessionSafe } from "@/components/session-provider";
 
@@ -118,7 +139,9 @@ import { useSessionSafe } from "@/components/session-provider";
 // phosphor: https://phosphoricons.com/
 const icons = {
   alertTriangle: { lucide: AlertTriangle, pixel: PixelAlert, phosphor: PhosphorWarning },
+  box: { lucide: Box, pixel: PixelCheckboxOn, phosphor: PhosphorCube },
   bug: { lucide: Bug, pixel: PixelDebug, phosphor: PhosphorBug },
+  bugOff: { lucide: BugOff, pixel: PixelDebugOff, phosphor: PhosphorBug },
   check: { lucide: Check, pixel: PixelCheck, phosphor: PhosphorCheck },
   checkIcon: { lucide: CheckIcon, pixel: PixelCheck, phosphor: PhosphorCheck },
   checkBox: { lucide: SquareCheck, pixel: PixelCheckbox, phosphor: PhosphorCheckSquare },
@@ -127,11 +150,11 @@ const icons = {
   chevronLeftIcon: { lucide: ChevronLeftIcon, pixel: PixelChevronLeft, phosphor: PhosphorChevronLeft },
   chevronRightIcon: { lucide: ChevronRightIcon, pixel: PixelChevronRight, phosphor: PhosphorChevronRight },
   chevronUp: { lucide: ChevronUp, pixel: PixelChevronUp, phosphor: PhosphorChevronUp },
-  chevronUpIcon: { lucide: ChevronUpIcon, pixel: PixelChevronUp, phosphor: PhosphorChevronUp },
-  circleCheckIcon: { lucide: CircleCheckIcon, pixel: PixelCheck, phosphor: PhosphorCheckCircle },
+  circleCheck: { lucide: CircleCheckIcon, pixel: PixelCheck, phosphor: PhosphorCheckCircle },
   circleIcon: { lucide: CircleIcon, pixel: PixelCircle, phosphor: PhosphorCircle },
   circleQuestionMark: { lucide: CircleQuestionMark, pixel: PixelNoteDelete, phosphor: PhosphorQuestion },
   comment: { lucide: MessageSquarePlus, pixel: PixelCommentSend, phosphor: PhosphorComment },
+  creditCard: { lucide: CreditCard, pixel: PixelCreditCard, phosphor: PhosphorCreditCard },
   edit: { lucide: Edit, pixel: PixelEdit, phosphor: PhosphorEdit },
   ellipsisVertical: {
     lucide: EllipsisVertical,
@@ -145,26 +168,32 @@ const icons = {
   },
   hash: { lucide: Hash, pixel: PhosphorHashStraight, phosphor: PhosphorHash },
   home: { lucide: LucideHome, pixel: PixelHome, phosphor: PhosphorHome },
-  infoIcon: { lucide: InfoIcon, pixel: PixelInfo, phosphor: PhosphorInfo },
+  info: { lucide: InfoIcon, pixel: PixelInfo, phosphor: PhosphorInfo },
+  layoutDashboard: { lucide: LayoutDashboard, pixel: PixelDashboard, phosphor: PhosphorLayout },
   link: { lucide: Link, pixel: PixelLink, phosphor: PhosphorLink },
   loader: { lucide: Loader, pixel: PixelLoader, phosphor: PhosphorLoader },
-  loader2Icon: { lucide: Loader2Icon, pixel: PixelLoader, phosphor: PhosphorLoader },
+  loader2: { lucide: Loader2Icon, pixel: PixelLoader, phosphor: PhosphorLoader },
   logOut: { lucide: LogOut, pixel: PixelLogout, phosphor: PhosphorLogOut },
   moon: { lucide: Moon, pixel: PixelMoon, phosphor: PhosphorMoon },
-  octagonXIcon: { lucide: OctagonXIcon, pixel: PixelClose, phosphor: PhosphorOctagon },
+  octagonX: { lucide: OctagonXIcon, pixel: PixelClose, phosphor: PhosphorOctagon },
   pause: { lucide: Pause, pixel: PixelPause, phosphor: PhosphorPause },
   play: { lucide: Play, pixel: PixelPlay, phosphor: PhosphorPlay },
   plus: { lucide: Plus, pixel: PixelPlus, phosphor: PhosphorPlus },
-  serverIcon: { lucide: ServerIcon, pixel: PixelServer, phosphor: PhosphorServer },
+  rocket: { lucide: Rocket, pixel: PixelShip, phosphor: PhosphorRocketLaunch },
+  rotateCcw: { lucide: RotateCcw, pixel: PixelUndo, phosphor: PhosphorArrowCounterClockwise },
+  server: { lucide: ServerIcon, pixel: PixelServer, phosphor: PhosphorServer },
+  shieldCheck: { lucide: ShieldCheck, pixel: PixelShield, phosphor: PhosphorShieldCheck },
   sun: { lucide: Sun, pixel: PixelSun, phosphor: PhosphorSun },
   stop: { lucide: Square, pixel: PixelStop, phosphor: PhosphorStop },
-  timer: { lucide: Timer, pixel: PixelClock, phosphor: PhosphorClock },
+  timer: { lucide: Timer, pixel: PixelClock, phosphor: PhosphorTimer },
+  timerOff: { lucide: TimerOff, pixel: PixelClock, phosphor: PhosphorTimer },
   trash: { lucide: Trash, pixel: PixelTrash, phosphor: PhosphorTrash },
-  triangleAlertIcon: { lucide: TriangleAlertIcon, pixel: PixelAlert, phosphor: PhosphorWarning },
-  undo: { lucide: Undo, pixel: PixelUndo, phosphor: PhosphorUndo },
-  undo2: { lucide: Undo2, pixel: PixelUndo, phosphor: PhosphorUndo },
+  triangleAlert: { lucide: TriangleAlertIcon, pixel: PixelAlert, phosphor: PhosphorWarning },
+  undo: { lucide: Undo, pixel: PixelUndo, phosphor: PhosphorArrowCounterClockwise },
+  undo2: { lucide: Undo2, pixel: PixelUndo, phosphor: PhosphorArrowCounterClockwise },
   userRound: { lucide: UserRound, pixel: PixelUser, phosphor: PhosphorUser },
   x: { lucide: X, pixel: PixelClose, phosphor: PhosphorX },
+  zap: { lucide: Zap, pixel: PixelZap, phosphor: PhosphorLightning },
 };
 
 export type IconName = keyof typeof icons;
@@ -202,7 +231,7 @@ export default function Icon({
   // lucide fills sillily
   if (color && resolvedStyle !== "lucide") {
     fill = color;
-  } else if (resolvedStyle === "pixel" && ["bug", "moon", "hash"].includes(icon)) {
+  } else if (resolvedStyle === "pixel" && ["bug", "moon", "hash", "bugOff"].includes(icon)) {
     fill = "var(--foreground)";
   } else if (resolvedStyle === "phosphor") {
     fill = "var(--foreground)";

packages/frontend/src/components/ui/select.tsx

@@ -198,7 +198,7 @@ function SelectScrollUpButton({
       className={cn("flex cursor-default items-center justify-center py-1", className)}
       {...props}
     >
-      <Icon icon="chevronUpIcon" className="size-4" />
+      <Icon icon="chevronUp" className="size-4" />
     </SelectPrimitive.ScrollUpButton>
   );
 }

packages/frontend/src/components/ui/sonner.tsx

@@ -10,11 +10,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: <Icon icon="circleCheckIcon" className="size-4" />,
-        info: <Icon icon="infoIcon" className="size-4" />,
-        warning: <Icon icon="triangleAlertIcon" className="size-4" />,
-        error: <Icon icon="octagonXIcon" className="size-4" />,
-        loading: <Icon icon="loader2Icon" className="size-4 animate-spin" />,
+        success: <Icon icon="circleCheck" className="size-4" />,
+        info: <Icon icon="info" className="size-4" />,
+        warning: <Icon icon="triangleAlert" className="size-4" />,
+        error: <Icon icon="octagonX" className="size-4" />,
+        loading: <Icon icon="loader2" className="size-4 animate-spin" />,
       }}
       style={
         {