chore: update segment control in view permissions to ds one

apps/studio/components/interfaces/Account/AccessTokens/Scoped/TokenCapabilities/CapabilityLevelToggle.tsx

@@ -1,4 +1,4 @@
-import { Button, cn } from 'ui'
+import { ToggleGroup, ToggleGroupItem } from 'ui'
 
 import type { CapabilityLevelFilter } from './TokenCapabilities.utils'
 
@@ -13,31 +13,23 @@ const OPTIONS: { value: CapabilityLevelFilter; label: string }[] = [
   { value: 'readwrite', label: 'Read-write' },
 ]
 
-/**
- * Segmented control matching the "Show all / Error only" pattern from Auth's UserLogs: adjacent
- * Buttons with their variant swapped on selection, glued together via rounding/border removal
- * and a thin divider, rather than a dedicated segmented-control primitive.
- */
 export const CapabilityLevelToggle = ({ value, onChange }: CapabilityLevelToggleProps) => (
-  <div className="flex items-center">
-    {OPTIONS.map(({ value: optionValue, label }, index) => (
-      <div key={optionValue} className="flex items-center">
-        {index > 0 && <div className="border-button border border-l-0 py-3" />}
-        <Button
-          type="button"
-          size="tiny"
-          variant={value === optionValue ? 'secondary' : 'default'}
-          aria-pressed={value === optionValue}
-          className={cn(
-            index === 0 && 'rounded-r-none border-r-0',
-            index === OPTIONS.length - 1 && 'rounded-l-none border-l-0',
-            index > 0 && index < OPTIONS.length - 1 && 'rounded-none border-x-0'
-          )}
-          onClick={() => onChange(optionValue)}
-        >
-          {label}
-        </Button>
-      </div>
+  <ToggleGroup
+    type="single"
+    variant="segmented"
+    size="tiny"
+    tone="outline"
+    value={value}
+    onValueChange={(newValue) => {
+      if (newValue) onChange(newValue as CapabilityLevelFilter)
+    }}
+    allowDeselect={false}
+    aria-label="Filter capabilities by permission level"
+  >
+    {OPTIONS.map(({ value: optionValue, label }) => (
+      <ToggleGroupItem key={optionValue} value={optionValue}>
+        {label}
+      </ToggleGroupItem>
     ))}
-  </div>
+  </ToggleGroup>
 )