segmented buttons states and styles

src/features/edge-detail/components/ArchiveView.tsx

@@ -96,6 +96,7 @@ export function ArchiveView({
   onToggleTag,
 }: ArchiveViewProps) {
   const [avgLineMode, setAvgLineMode] = useState<AvgLineMode>('auto');
+  const [selectedRangePresetId, setSelectedRangePresetId] = useState<string>('24h');
   const [selectorOpen, setSelectorOpen] = useState(false);
   const selectedPreview = selectedTags.slice(0, 10);
   const hiddenSelectedCount = Math.max(0, selectedTags.length - selectedPreview.length);
@@ -106,6 +107,7 @@ export function ArchiveView({
   const fromIso = toIsoFromInput(range.from) as string;
   const toIso = toIsoFromInput(range.to) as string;
   const updateRangePart = (rangePart: RangePart, inputPart: RangeInputPart, value: string) => {
+    setSelectedRangePresetId('');
     onRangeChange({
       ...range,
       [rangePart]: updateRangeInputPart(range[rangePart], inputPart, value),
@@ -152,14 +154,14 @@ export function ArchiveView({
                 <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск" />
               </label>
               <div className="tag-selector__tools">
-                <button type="button" onClick={onSelectFirstTags}>
+                {/* <button type="button" onClick={onSelectFirstTags}>
                   Первый
-                </button>
+                </button> */}
                 <button type="button" onClick={onSelectVisibleTags}>
-                  Выбрать найденный
+                  Выбрать все
                 </button>
                 <button type="button" onClick={onClearVisibleTags}>
-                  Снять найденные
+                  Снять все
                 </button>
                 <button type="button" onClick={onClearTags}>
                   Сбросить все
@@ -212,12 +214,22 @@ export function ArchiveView({
         onPointerEnter={() => setSelectorOpen(false)}
       >
         <div className="toolbar">
-          <div className="segmented segmented--range-preset">
+          <div className="archive-toolbar-segmented-control">
-            {RANGE_PRESETS.map((preset) => (
+            <div className="segmented segmented--range-preset">
-              <button key={preset.id} type="button" onClick={() => onRangeChange(createRange(preset.hours))}>
+              {RANGE_PRESETS.map((preset) => (
-                {preset.label}
+                <button
-              </button>
+                  key={preset.id}
-            ))}
+                  type="button"
+                  className={preset.id === selectedRangePresetId ? 'segmented__button--active' : undefined}
+                  onClick={() => {
+                    setSelectedRangePresetId(preset.id);
+                    onRangeChange(createRange(preset.hours));
+                  }}
+                >
+                  {preset.label}
+                </button>
+              ))}
+            </div>
           </div>
           <div className="archive-date-range">
             <span>С</span>

src/features/history-chart/HistoryChartAvgLineModeControl.tsx

@@ -8,19 +8,19 @@ type HistoryChartAvgLineModeControlProps = {
 const AVG_LINE_MODES: Array<{ value: AvgLineMode; label: string }> = [
   { value: 'auto', label: 'Авто' },
   { value: 'show', label: 'Рисовать' },
-  { value: 'hide', label: 'Не рисовать' },
+  { value: 'hide', label: 'Скрывать' },
 ];
 
 export function HistoryChartAvgLineModeControl({ value, onChange }: HistoryChartAvgLineModeControlProps) {
   return (
-    <div className="archive-avgline-mode-control" aria-label="Режим соединительной линии avg">
+    <div className="archive-toolbar-segmented-control archive-avgline-mode-control" aria-label="Режим соединительной линии avg">
-      <span>Линия avg</span>
+      <span>Соединительная линия</span>
       <div className="segmented history-chart-line-mode">
         {AVG_LINE_MODES.map((mode) => (
           <button
             key={mode.value}
             type="button"
-            className={mode.value === value ? 'history-chart-line-mode__button--active' : undefined}
+            className={mode.value === value ? 'segmented__button--active' : undefined}
             onClick={() => onChange(mode.value)}
             aria-pressed={mode.value === value}
           >

src/styles/charts.css

@@ -60,11 +60,6 @@
   font-size: inherit;
 }
 
-.history-chart-line-mode__button--active {
-  border-color: var(--line-strong);
-  background: rgba(201, 122, 61, 0.18);
-}
-
 .chart-section--archive .history-chart-shell,
 .chart-section--archive .history-chart {
   flex: 1;

src/styles/components/controls.css

@@ -73,6 +73,12 @@
   background: rgba(201, 122, 61, 0.18);
 }
 
+.segmented__button--active {
+  border-color: rgba(212, 165, 116, 0.34);
+  background: rgba(201, 122, 61, 0.14);
+  color: #f8fafc;
+}
+
 .source-chip,
 .status-pill,
 .metric-card__state {

src/styles/detail/archive.css

@@ -216,7 +216,7 @@
   font-size: 0.84rem;
 }
 
-.archive-avgline-mode-control {
+.archive-toolbar-segmented-control {
   display: inline-flex;
   align-items: center;
   gap: 8px;