Reworking more of the side menu items

Author: samejr

apps/webapp/app/assets/icons/ChartBarIcon.tsx

@@ -9,17 +9,17 @@ export function ChartBarIcon({ className }: { className?: string }) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M9 6C9 4.89543 9.89543 4 11 4H13C14.1046 4 15 4.89543 15 6V21H9V6Z"
+        d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V21H9V5Z"
         stroke="currentColor"
         strokeWidth="2"
       />
       <path
-        d="M15 12C15 10.8954 15.8954 10 17 10H19C20.1046 10 21 10.8954 21 12V20C21 20.5523 20.5523 21 20 21H15V12Z"
+        d="M15 13C15 11.8954 15.8954 11 17 11H19C20.1046 11 21 11.8954 21 13V20C21 20.5523 20.5523 21 20 21H15V13Z"
         stroke="currentColor"
         strokeWidth="2"
       />
       <path
-        d="M3 16C3 14.8954 3.89543 14 5 14H7C8.10457 14 9 14.8954 9 16V21H4C3.44772 21 3 20.5523 3 20V16Z"
+        d="M3 10C3 8.89543 3.89543 8 5 8H7C8.10457 8 9 8.89543 9 10V21H4C3.44772 21 3 20.5523 3 20V10Z"
         stroke="currentColor"
         strokeWidth="2"
       />

apps/webapp/app/assets/icons/PadlockIcon.tsx

@@ -12,7 +12,7 @@ export function PadlockIcon({ className }: { className?: string }) {
       <rect x="11" y="13" width="2" height="5" rx="1" fill="currentColor" />
       <rect x="10" y="12" width="4" height="4" rx="2" fill="currentColor" />
       <path
-        d="M16 8V7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7V8"
+        d="M17 9V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V9"
         stroke="currentColor"
         strokeWidth="2"
       />

apps/webapp/app/assets/icons/ShieldIcon.tsx

@@ -9,7 +9,7 @@ export function ShieldIcon({ className }: { className?: string }) {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11.4199 3.2207C11.7981 3.1061 12.2019 3.1061 12.5801 3.2207L18.5801 5.03906C19.4233 5.29464 20 6.072 20 6.95312V11.4951C20 13.7676 18.8965 15.899 17.041 17.2109L12 20.7754L6.95898 17.2109C5.10346 15.899 4 13.7676 4 11.4951V6.95312C4 6.072 4.57669 5.29464 5.41992 5.03906L11.4199 3.2207Z"
+        d="M6 3H18C19.1046 3 20 3.89543 20 5V12.0029C20 14.0232 19.1268 15.9452 17.6055 17.2744L14.6318 19.8721C13.1244 21.1891 10.8756 21.1891 9.36816 19.8721L6.39453 17.2744C4.8732 15.9452 4.00005 14.0232 4 12.0029V5L4.01074 4.7959C4.11301 3.78722 4.96435 3 6 3Z"
         stroke="currentColor"
         strokeWidth="2"
       />

apps/webapp/app/components/navigation/DashboardDialogs.tsx

@@ -120,20 +120,30 @@ export function CreateDashboardPageButton({
   project,
   environment,
   shortcut,
+  children,
 }: {
   organization: { slug: string };
   project: { slug: string };
   environment: { slug: string };
   shortcut?: ShortcutDefinition;
+  /** Custom trigger element. When omitted, a default primary button is rendered. */
+  children?: React.ReactNode;
 }) {
   const dashboard = useCreateDashboard({ organization, project, environment });
 
   return (
     <Dialog open={dashboard.isOpen} onOpenChange={dashboard.setIsOpen}>
       <DialogTrigger asChild>
-        <Button variant="primary/small" LeadingIcon={PlusIcon} shortcut={shortcut} className="pr-2">
-          Create custom dashboard
-        </Button>
+        {children ?? (
+          <Button
+            variant="primary/small"
+            LeadingIcon={PlusIcon}
+            shortcut={shortcut}
+            className="pr-2"
+          >
+            Create custom dashboard
+          </Button>
+        )}
       </DialogTrigger>
       {dashboard.isAtLimit ? (
         <CreateDashboardUpgradeDialog

apps/webapp/app/components/navigation/DashboardList.tsx

@@ -6,10 +6,7 @@ import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { type MatchedOrganization, useCustomDashboards } from "~/hooks/useOrganizations";
 import { type UserWithDashboardPreferences } from "~/models/user.server";
 import { type RenderIcon } from "~/components/primitives/Icon";
-import {
-  v3BuiltInDashboardPath,
-  v3CustomDashboardPath,
-} from "~/utils/pathBuilder";
+import { v3BuiltInDashboardPath, v3CustomDashboardPath } from "~/utils/pathBuilder";
 import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
 import { SideMenuItem } from "./SideMenuItem";
 import { TreeConnectorBranch, TreeConnectorEnd } from "./TreeConnectors";
@@ -59,25 +56,27 @@ export function DashboardList({
     {
       key: "builtin:overview",
       kind: "builtin",
-      label: "Runs",
+      label: "Run metrics",
       path: v3BuiltInDashboardPath(organization, project, environment, "overview"),
       collapsedIcon: RunsIcon,
       activeColor: "text-runs",
     },
     {
       key: "builtin:llm",
       kind: "builtin",
-      label: "Agents",
+      label: "AI metrics",
       path: v3BuiltInDashboardPath(organization, project, environment, "llm"),
       collapsedIcon: AIMetricsIcon,
       activeColor: "text-aiMetrics",
     },
-    ...customDashboards.map((d): DashboardChild => ({
-      key: `custom:${d.friendlyId}`,
-      kind: "custom",
-      label: d.title,
-      path: v3CustomDashboardPath(organization, project, environment, d),
-    })),
+    ...customDashboards.map(
+      (d): DashboardChild => ({
+        key: `custom:${d.friendlyId}`,
+        kind: "custom",
+        label: d.title,
+        path: v3CustomDashboardPath(organization, project, environment, d),
+      })
+    ),
   ];
 
   const initialOrder =
@@ -171,17 +170,10 @@ function DashboardChildMenuItem({
         ? item.activeColor
         : undefined
       : isCollapsed
-      ? "text-customDashboards"
+      ? "text-text-bright"
       : undefined;
 
-  const inactiveIconColor =
-    item.kind === "builtin"
-      ? isCollapsed
-        ? item.activeColor
-        : "text-charcoal-700"
-      : isCollapsed
-      ? "text-customDashboards"
-      : "text-charcoal-700";
+  const inactiveIconColor = isCollapsed ? "text-text-dimmed" : "text-charcoal-700";
 
   return (
     <SideMenuItem

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -387,9 +387,15 @@ export function SideMenu({
               </div>
             </div>
 
-            <div className="w-full">
+            <SideMenuSection
+              title="Tasks"
+              isSideMenuCollapsed={isCollapsed}
+              itemSpacingClassName="space-y-0"
+              initialCollapsed={getSectionCollapsed(user.dashboardPreferences.sideMenu, "tasks")}
+              onCollapseToggle={handleSectionToggle("tasks")}
+            >
               <SideMenuItem
-                name="Agent tasks"
+                name="Agents"
                 icon={CubeSparkleIcon}
                 activeIconColor="text-agents"
                 inactiveIconColor="text-text-dimmed"
@@ -398,7 +404,7 @@ export function SideMenu({
                 isCollapsed={isCollapsed}
               />
               <SideMenuItem
-                name="Standard tasks"
+                name="Standard"
                 icon={TaskIcon}
                 activeIconColor="text-tasks"
                 inactiveIconColor="text-text-dimmed"
@@ -407,7 +413,7 @@ export function SideMenu({
                 isCollapsed={isCollapsed}
               />
               <SideMenuItem
-                name="Scheduled tasks"
+                name="Schedules"
                 icon={ClockIcon}
                 activeIconColor="text-schedules"
                 inactiveIconColor="text-text-dimmed"
@@ -433,7 +439,7 @@ export function SideMenu({
                 data-action="sessions"
                 isCollapsed={isCollapsed}
               />
-            </div>
+            </SideMenuSection>
 
             {(user.admin || user.isImpersonating || featureFlags.hasAiAccess) && (
               <SideMenuSection

apps/webapp/app/components/navigation/sideMenuTypes.ts

@@ -7,6 +7,7 @@ export const SideMenuSectionIdSchema = z.enum([
   "metrics",
   "deployments",
   "project-settings",
+  "tasks",
 ]);
 
 // Inferred type from the schema

apps/webapp/app/components/primitives/Headers.tsx

@@ -2,11 +2,11 @@ import { cn } from "~/utils/cn";
 
 const headerVariants = {
   header1: {
-    text: "font-sans text-2xl leading-5 md:leading-6 lg:leading-7 font-semibold",
+    text: "font-sans text-2xl leading-5 md:leading-6 lg:leading-7 font-semibold tracking-tight",
     spacing: "mb-2",
   },
   header2: {
-    text: "font-sans text-base leading-6 font-semibold",
+    text: "font-sans text-base leading-6 font-semibold tracking-tight",
     spacing: "mb-2",
   },
   header3: {

apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts

@@ -3,7 +3,7 @@ import { z } from "zod";
 
 const overviewDashboard: BuiltInDashboard = {
   key: "overview",
-  title: "Metrics",
+  title: "Run metrics",
   filters: ["tasks", "queues"],
   layout: {
     version: "1",

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents._index/route.tsx

@@ -62,7 +62,7 @@ import { CubeSparkleIcon } from "~/assets/icons/CubeSparkleIcon";
 import { PlaygroundIcon } from "~/assets/icons/PlaygroundIcon";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "Agents | Trigger.dev" }];
+  return [{ title: "Agent tasks | Trigger.dev" }];
 };
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {