Improves the graph query section side bar

Author: samejr

apps/webapp/app/components/code/ChartConfigPanel.tsx

@@ -6,6 +6,7 @@ import { Paragraph } from "../primitives/Paragraph";
 import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
 import { Select, SelectItem } from "../primitives/Select";
 import { Switch } from "../primitives/Switch";
+import SegmentedControl from "../primitives/SegmentedControl";
 import { Button } from "../primitives/Buttons";
 import {
   type AggregationType,
@@ -234,54 +235,38 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
   }
 
   return (
-    <div className={cn("flex flex-col gap-2 p-2", className)}>
+    <div className={cn("flex flex-col gap-3 p-2", className)}>
       {/* Chart Type */}
       <div className="flex flex-col gap-3">
         <ConfigField label="Type">
-          <div className="flex items-center">
-            <Button
-              type="button"
-              variant="tertiary/small"
-              className={cn(
-                "rounded-r-none border-b pl-1 pr-2",
-                config.chartType === "bar" ? "border-indigo-500" : "border-transparent"
-              )}
-              iconSpacing="gap-x-1"
-              onClick={() => updateConfig({ chartType: "bar" })}
-              LeadingIcon={BarChart}
-              leadingIconClassName={
-                config.chartType === "bar" ? "text-indigo-500" : "text-text-dimmed"
-              }
-            >
-              <span className={config.chartType === "bar" ? "text-indigo-500" : "text-text-dimmed"}>
-                Bar
-              </span>
-            </Button>
-            <Button
-              type="button"
-              variant="tertiary/small"
-              className={cn(
-                "rounded-l-none border-b pl-1 pr-2",
-                config.chartType === "line" ? "border-indigo-500" : "border-transparent"
-              )}
-              iconSpacing="gap-x-1"
-              onClick={() => updateConfig({ chartType: "line" })}
-              LeadingIcon={LineChart}
-              leadingIconClassName={
-                config.chartType === "line" ? "text-indigo-500" : "text-text-dimmed"
-              }
-            >
-              <span
-                className={config.chartType === "line" ? "text-indigo-500" : "text-text-dimmed"}
-              >
-                Line
-              </span>
-            </Button>
-          </div>
+          <SegmentedControl
+            name="chartType"
+            value={config.chartType}
+            variant="secondary/small"
+            options={[
+              {
+                label: (
+                  <span className="flex items-center gap-1">
+                    <BarChart className="size-3" /> Bar
+                  </span>
+                ),
+                value: "bar",
+              },
+              {
+                label: (
+                  <span className="flex items-center gap-1">
+                    <LineChart className="size-3" /> Line
+                  </span>
+                ),
+                value: "line",
+              },
+            ]}
+            onChange={(value) => updateConfig({ chartType: value as "bar" | "line" })}
+          />
         </ConfigField>
       </div>
 
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-3">
         {/* X-Axis */}
         <ConfigField label="X-Axis">
           <Select
@@ -543,7 +528,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
 function ConfigField({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex flex-col gap-1">
-      {label && <span className="text-xs text-text-dimmed">{label}</span>}
+      {label && <span className="text-xs text-text-bright">{label}</span>}
       {children}
     </div>
   );