refactor(ui): drawer replica filter uses DS Select

ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/CheckpointDetailDrawer.module.css

@@ -49,6 +49,12 @@
   font-size: 12px;
 }
 
+.replicaLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .emptyState {
   padding: 16px;
   color: var(--text-muted);

ui/src/pages/AppsTab/AppDeploymentPage/CheckpointDetailDrawer/LogsPanel.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { Select } from '@cameleer/design-system';
 import { useInfiniteApplicationLogs } from '../../../../api/queries/logs';
 import type { Deployment } from '../../../../api/queries/admin/apps';
 import { instanceIdsFor } from './instance-id';
@@ -28,23 +29,24 @@ export function LogsPanel({ deployment, appSlug, envSlug }: Props) {
     isAtTop: true,
   });
 
+  const replicaOptions = [
+    { value: 'all', label: `all (${deployment.replicaStates.length})` },
+    ...deployment.replicaStates.map((_, i) => ({ value: String(i), label: String(i) })),
+  ];
+
   return (
     <div>
       <div className={styles.filterBar}>
-        <label>
+        <label className={styles.replicaLabel}>
-          Replica:&nbsp;
+          <span>Replica:</span>
-          <select
+          <Select
             value={String(replicaFilter)}
             onChange={(e) => {
               const v = e.target.value;
               setReplicaFilter(v === 'all' ? 'all' : Number(v));
             }}
-          >
+            options={replicaOptions}
-            <option value="all">all ({deployment.replicaStates.length})</option>
+          />
-            {deployment.replicaStates.map((_, i) => (
-              <option key={i} value={i}>{i}</option>
-            ))}
-          </select>
         </label>
       </div>
       {logs.items.length === 0 && !logs.isLoading && (