Merge branch 'dev' into fraud-protection

Author: mantrakp04

apps/backend/src/app/api/latest/internal/email-templates/[templateId]/route.tsx

@@ -68,7 +68,6 @@ export const PATCH = createSmartRouteHandler({
       [`emails.templates.${templateId}.tsxSource`]: body.tsx_source,
     };
 
-    // Only add themeId if it's explicitly provided
     if (body.theme_id !== undefined) {
       configOverride[`emails.templates.${templateId}.themeId`] = body.theme_id;
     }
@@ -120,6 +119,7 @@ export const DELETE = createSmartRouteHandler({
       projectId: tenancy.project.id,
       branchId: tenancy.branchId,
       environmentConfigOverrideOverride: {
+        // null means delete this key, but the override map type does not model null-valued deletes.
         [`emails.templates.${templateId}`]: null as any,
       },
     });

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx

@@ -21,7 +21,7 @@ import {
   DesignSelectorDropdown,
   DesignUserList,
 } from "@/components/design-components";
-import { DataTableColumnHeader, Typography } from "@/components/ui";
+import { DataTableColumnHeader, SearchToolbarItem, Typography } from "@/components/ui";
 import {
   CheckCircle,
   Cube,
@@ -246,6 +246,8 @@ export default function PageClient() {
   // Data Table
   const [tableClickableRows, setTableClickableRows] = useState(false);
   const [tableLastRowClick, setTableLastRowClick] = useState("");
+  const [tableGlass, setTableGlass] = useState<boolean | undefined>(undefined);
+  const [tableShowToolbar, setTableShowToolbar] = useState(false);
 
   // Editable Grid
   const [gridCols, setGridCols] = useState<1 | 2>(2);
@@ -546,6 +548,8 @@ export default function PageClient() {
             data={DEMO_PRODUCTS}
             columns={tableColumns}
             defaultSorting={[{ id: "name", desc: false }]}
+            glassmorphic={tableGlass}
+            toolbarRender={tableShowToolbar ? (table) => <SearchToolbarItem table={table} keyName="name" placeholder="Filter by name" /> : undefined}
             onRowClick={tableClickableRows ? (row) => setTableLastRowClick(row.name) : undefined}
           />
           {tableLastRowClick && (
@@ -1049,6 +1053,12 @@ export default function PageClient() {
     if (selected === "data-table") {
       return (
         <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 sm:gap-4 items-end">
+          <PropField label="Glassmorphic">
+            <GlassmorphicToggle value={tableGlass} onChange={setTableGlass} />
+          </PropField>
+          <PropField label="Toolbar">
+            <BoolToggle value={tableShowToolbar} onChange={setTableShowToolbar} on="Shown" off="Hidden" />
+          </PropField>
           <PropField label="Row Click">
             <BoolToggle value={tableClickableRows} onChange={setTableClickableRows} on="Enabled" off="Disabled" />
           </PropField>
@@ -1475,10 +1485,12 @@ export default function PageClient() {
 />`;
     }
     if (selected === "data-table") {
+      const glassProp = tableGlass === undefined ? "" : `\n  glassmorphic={${tableGlass}}`;
+      const toolbarProp = tableShowToolbar ? `\n  toolbarRender={(table) => <SearchToolbarItem table={table} keyName="name" placeholder="Filter by name" />}` : "";
       return `<DesignDataTable
   data={products}
   columns={columns}
-  defaultSorting={[{ id: "name", desc: false }]}
+  defaultSorting={[{ id: "name", desc: false }]}${glassProp}${toolbarProp}
   onRowClick={${tableClickableRows ? "(row) => setLastClickedRow(row.name)" : "undefined"}}
 />`;
     }

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/line-chart.tsx

@@ -4,8 +4,10 @@ import {
   Typography
 } from "@/components/ui";
 import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
+import { DesignCardTint, DesignCategoryTabs, DesignPillToggle } from "@/components/design-components";
 import { UserAvatar } from '@stackframe/stack';
 import { fromNow, isWeekend } from '@stackframe/stack-shared/dist/utils/dates';
+import { urlString } from "@stackframe/stack-shared/dist/utils/urls";
 import { useState } from "react";
 import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, TooltipProps, XAxis, YAxis } from "recharts";
 
@@ -181,13 +183,13 @@ export function ChartCard({
   className?: string,
   gradientColor?: GradientColor,
 }) {
-  const hoverTints: Record<GradientColor, string> = {
-    blue: "group-hover:bg-slate-500/[0.02]",
-    purple: "group-hover:bg-slate-500/[0.02]",
-    green: "group-hover:bg-slate-500/[0.02]",
-    orange: "group-hover:bg-slate-500/[0.02]",
-    slate: "group-hover:bg-slate-500/[0.02]",
-    cyan: "group-hover:bg-slate-500/[0.02]",
+  const designCardGradients: Record<GradientColor, "blue" | "cyan" | "purple" | "green" | "orange" | "default"> = {
+    blue: "blue",
+    purple: "purple",
+    green: "green",
+    orange: "orange",
+    slate: "default",
+    cyan: "cyan",
   };
 
   return (
@@ -203,23 +205,17 @@ export function ChartCard({
           }
         `}
       </style>
-      <div className={cn(
-        "group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none chart-card-tooltip-escape",
-        "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]",
-        "shadow-sm hover:shadow-md hover:z-10",
-        className
-      )}>
-        {/* Subtle glassmorphic background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.06] via-foreground/[0.02] dark:from-foreground/[0.03] dark:via-foreground/[0.01] to-transparent pointer-events-none rounded-2xl overflow-hidden" />
-        {/* Accent hover tint */}
-        <div className={cn(
-          "absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl overflow-hidden",
-          hoverTints[gradientColor]
-        )} />
-        <div className="relative h-full flex flex-col">
+      <DesignCardTint
+        gradient={designCardGradients[gradientColor]}
+        className={cn(
+          "chart-card-tooltip-escape h-full overflow-visible hover:z-10 [&>div]:h-full [&>div]:min-h-0 [&>div]:flex [&>div]:flex-col [&>div]:overflow-visible",
+          className
+        )}
+      >
+        <div className="h-full flex flex-col">
           {children}
         </div>
-      </div>
+      </DesignCardTint>
     </>
   );
 }
@@ -231,30 +227,26 @@ export function TimeRangeToggle({
   timeRange: TimeRange,
   onTimeRangeChange: (range: TimeRange) => void,
 }) {
-  const options: { value: TimeRange, label: string }[] = [
-    { value: '7d', label: '7d' },
-    { value: '30d', label: '30d' },
-    { value: 'all', label: 'All' },
+  const options: { id: TimeRange, label: string }[] = [
+    { id: '7d', label: '7d' },
+    { id: '30d', label: '30d' },
+    { id: 'all', label: 'All' },
   ];
 
   return (
-    <div className="inline-flex items-center gap-1 rounded-xl bg-foreground/[0.04] p-1 backdrop-blur-sm">
-      {options.map((option) => (
-        <button
-          key={option.value}
-          type="button"
-          onClick={() => onTimeRangeChange(option.value)}
-          className={cn(
-            "px-3 py-1.5 text-xs font-medium rounded-lg transition-all duration-150 hover:transition-none",
-            timeRange === option.value
-              ? "bg-background text-foreground shadow-sm ring-1 ring-foreground/[0.06] dark:bg-[hsl(240,71%,70%)]/10 dark:text-[hsl(240,71%,90%)] dark:ring-[hsl(240,71%,70%)]/20"
-              : "text-muted-foreground hover:text-foreground hover:bg-background/50"
-          )}
-        >
-          {option.label}
-        </button>
-      ))}
-    </div>
+    <DesignPillToggle
+      options={options}
+      selected={timeRange}
+      size="sm"
+      glassmorphic
+      onSelect={(selectedId) => {
+        if (selectedId === '7d' || selectedId === '30d' || selectedId === 'all') {
+          onTimeRangeChange(selectedId);
+          return;
+        }
+        throw new Error(`Unsupported time range selected: ${selectedId}`);
+      }}
+    />
   );
 }
 
@@ -295,15 +287,6 @@ export function TabbedMetricsCard({
   // For "all" time range, use totalAllTime if provided (which includes data beyond 30 days)
   const displayTotal = timeRange === 'all' && totalAllTime !== undefined ? totalAllTime : total;
 
-  const activeTabColors: Record<GradientColor, string> = {
-    blue: "bg-blue-500 dark:bg-[hsl(240,71%,70%)]",
-    purple: "bg-purple-500 dark:bg-[hsl(200,91%,70%)]",
-    green: "bg-emerald-500 dark:bg-[hsl(200,91%,70%)]",
-    orange: "bg-orange-500 dark:bg-[hsl(240,71%,70%)]",
-    slate: "bg-slate-500 dark:bg-[hsl(240,71%,70%)]",
-    cyan: "bg-cyan-500 dark:bg-[hsl(200,91%,70%)]",
-  };
-
   const hoverAccentColors: Record<GradientColor, string> = {
     blue: "hover:bg-blue-500/[0.06]",
     purple: "hover:bg-purple-500/[0.06]",
@@ -313,40 +296,31 @@ export function TabbedMetricsCard({
     cyan: "hover:bg-cyan-500/[0.06]",
   };
 
-  const activeColorClass = activeTabColors[gradientColor];
   const hoverAccentClass = hoverAccentColors[gradientColor];
+  const tabsGradient: "blue" | "cyan" | "purple" | "green" | "orange" | "default" = gradientColor === "slate" ? "default" : gradientColor;
 
   return (
     <ChartCard className="h-full flex flex-col" gradientColor={gradientColor}>
       <div className={cn("flex items-center justify-between border-b border-foreground/[0.05]", compact ? "px-4" : "px-5")}>
-        <div className="flex items-center gap-1">
-          <button
-            type="button"
-            onClick={() => setView('chart')}
-            className={cn(
-              "relative px-3 py-3.5 text-xs font-medium transition-all duration-150 hover:transition-none rounded-t-lg",
-              view === 'chart' ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            {config.name}
-            {view === 'chart' && (
-              <div className={cn("absolute bottom-0 left-3 right-3 h-0.5 rounded-full", activeColorClass)} />
-            )}
-          </button>
-          <button
-            type="button"
-            onClick={() => setView('list')}
-            className={cn(
-              "relative px-3 py-3.5 text-xs font-medium transition-all duration-150 hover:transition-none rounded-t-lg",
-              view === 'list' ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-            )}
-          >
-            {listTitle}
-            {view === 'list' && (
-              <div className={cn("absolute bottom-0 left-3 right-3 h-0.5 rounded-full", activeColorClass)} />
-            )}
-          </button>
-        </div>
+        <DesignCategoryTabs
+          categories={[
+            { id: "chart", label: config.name },
+            { id: "list", label: listTitle },
+          ]}
+          selectedCategory={view}
+          onSelect={(selectedId) => {
+            if (selectedId === "chart" || selectedId === "list") {
+              setView(selectedId);
+              return;
+            }
+            throw new Error(`Unsupported metrics tab selected: ${selectedId}`);
+          }}
+          showBadge={false}
+          size="sm"
+          glassmorphic={false}
+          gradient={tabsGradient}
+          className="flex-1 min-w-0 border-0 [&>button]:rounded-none [&>button]:px-3 [&>button]:py-3.5 [&>button]:text-xs"
+        />
 
         {view === 'chart' && showTotal && (
           <span className="text-lg font-semibold text-foreground tabular-nums">
@@ -390,7 +364,7 @@ export function TabbedMetricsCard({
                 {listData.map((user) => (
                   <button
                     key={user.id}
-                    onClick={() => router.push(`/projects/${projectId}/users/${user.id}`)}
+                    onClick={() => router.push(urlString`/projects/${projectId}/users/${user.id}`)}
                     className={cn(
                       "w-full flex items-center gap-3 p-2.5 rounded-xl transition-all duration-150 hover:transition-none text-left group",
                       hoverAccentClass

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx

@@ -493,7 +493,7 @@ function MetricsContent({
         ref={gridContainerRef}
         className={cn(
           "grid gap-4 sm:gap-5 min-h-[400px]",
-          gridHeightFromGlobe ? "" : "h-[calc(100vh-180px)]",
+          gridHeightFromGlobe ? "" : "min-h-[calc(100vh-180px)]",
           showGlobe ? "grid-cols-1 lg:grid-cols-12" : "grid-cols-1"
         )}
         style={gridHeightFromGlobe ? { height: gridHeightFromGlobe } : undefined}
@@ -527,7 +527,7 @@ function MetricsContent({
         {/* Right Column: Stats Grid */}
         <div
           className={cn(
-            "flex flex-col gap-12 h-full min-h-0",
+            "flex flex-col gap-12 h-full",
             showGlobe && shouldShowGlobeSection ? "lg:col-span-7" : showGlobe ? "lg:col-span-12" : ""
           )}
         >
@@ -550,14 +550,14 @@ function MetricsContent({
             <div
               ref={chartsGridRef}
               className={cn(
-                "flex-1 min-h-0 grid gap-4",
+                "flex-1 grid gap-4",
                 chartWidgets.length === 1
                   ? "grid-cols-1"
                   : shouldUseTwoColumns ? "grid-cols-2" : "grid-cols-1"
               )}
             >
               {chartWidgets.map(widgetId => (
-                <div key={widgetId} className="min-h-0">
+                <div key={widgetId} className="min-h-[200px]">
                   {renderWidget(widgetId)}
                 </div>
               ))}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx

@@ -4,7 +4,8 @@ import { CodeBlock } from '@/components/code-block';
 import { APIEnvKeys, NextJsEnvKeys } from '@/components/env-keys';
 import { InlineCode } from '@/components/inline-code';
 import { StyledLink } from '@/components/link';
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@/components/ui";
+import { Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@/components/ui";
+import { DesignButton } from "@/components/design-components";
 import { useThemeWatcher } from '@/lib/theme';
 import { BookIcon, XIcon } from "@phosphor-icons/react";
 import { use } from "@stackframe/stack-shared/dist/utils/react";
@@ -426,10 +427,10 @@ export default function SetupPage(props: { toMetrics: () => void }) {
   return (
     <PageLayout width={1000}>
       <div className="flex justify-end">
-        <Button variant='plain' onClick={props.toMetrics}>
+        <DesignButton variant='plain' onClick={props.toMetrics}>
           Close Setup
           <XIcon className="w-4 h-4 ml-1 mt-0.5" />
-        </Button>
+        </DesignButton>
       </div>
       <div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
         <GlobeIllustration />
@@ -446,7 +447,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
           </div>
 
           <Typography>
-            <Button
+            <DesignButton
               variant='outline'
               size='sm'
               onClick={() => {
@@ -455,7 +456,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
             >
               <BookIcon className="w-4 h-4 mr-2" />
               Full Documentation
-            </Button>
+            </DesignButton>
           </Typography>
         </div>
       </div>
@@ -489,7 +490,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
                     reverseIfDark: false,
                     imgSrc: '/python-logo.svg',
                   }] as const).map(({ name, imgSrc: src, reverseIfDark, id }) => (
-                    <Button
+                    <DesignButton
                       key={id}
                       variant={id === selectedFramework ? 'secondary' : 'plain'} className='h-24 w-24 flex flex-col items-center justify-center gap-2 '
                       onClick={() => setSelectedFramework(id)}
@@ -505,7 +506,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
                         style={{ width: '30px', height: 'auto' }}
                       />
                       <Typography type='label'>{name}</Typography>
-                    </Button>
+                    </DesignButton>
                   ))}
                 </div>
               </div>,
@@ -637,9 +638,9 @@ function StackAuthKeys(props: {
         </>
       ) : (
         <div className="flex items-center justify-center">
-          <Button onClick={props.onGenerateKeys}>
+          <DesignButton onClick={props.onGenerateKeys}>
             Generate Keys
-          </Button>
+          </DesignButton>
         </div>
       )}
     </div>