Merge pull request #369 from Cipulot/test

Addition of explicit slider values option

Author: Cipulot

src/components/inputs/accent-range.tsx

@@ -1,28 +1,61 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import styled from 'styled-components';
+import {useAppSelector} from 'src/store/hooks';
+import {getShowSliderValues} from 'src/store/settingsSlice';
 
-const Container = styled.span`
-  display: inline-block;
+const Container = styled.span<{$showValue?: boolean}>`
+  display: inline-flex;
+  align-items: center;
   line-height: initial;
-  width: 200px;
+  gap: ${(props) => (props.$showValue ? '10px' : '0')};
+  width: ${(props) => (props.$showValue ? 'auto' : '200px')};
 `;
 
 const SliderInput = styled.input.attrs({type: 'range'})<any>`
   accent-color: var(--color_accent);
-  width: 100%;
+  width: ${(props) => (props.$showValue ? '200px' : '100%')};
+  flex: none;
+`;
+
+const ValueDisplay = styled.span`
+  text-align: right;
+  font-size: 20px;
+  color: var(--color_label_highlighted);
+  white-space: nowrap;
+  min-width: 40px;
 `;
 
 export const AccentRange: React.FC<
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
     onChange: (x: number) => void;
   }
-> = (props) => (
-  <Container>
-    <SliderInput
-      {...props}
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-        props.onChange && props.onChange(+e.target.value);
-      }}
-    />
-  </Container>
-);
+> = (props) => {
+  // Get the dynamic value from Redux store
+  const showValue = useAppSelector(getShowSliderValues);
+
+  const [currentValue, setCurrentValue] = useState<number>(
+    Number(props.defaultValue || props.value || props.min || 0),
+  );
+
+  useEffect(() => {
+    const newValue = Number(
+      props.defaultValue || props.value || props.min || 0,
+    );
+    setCurrentValue(newValue);
+  }, [props.defaultValue, props.value, props.min]);
+
+  return (
+    <Container $showValue={showValue}>
+      {showValue && <ValueDisplay>{currentValue}</ValueDisplay>}
+      <SliderInput
+        {...props}
+        $showValue={showValue}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const newValue = +e.target.value;
+          setCurrentValue(newValue);
+          props.onChange && props.onChange(newValue);
+        }}
+      />
+    </Container>
+  );
+};

src/components/panes/settings.tsx

@@ -17,8 +17,10 @@ import {useAppSelector} from 'src/store/hooks';
 import {
   getShowDesignTab,
   getDisableFastRemap,
+  getShowSliderValues,
   toggleCreatorMode,
   toggleFastRemap,
+  toggleShowSliderValues,
   getThemeMode,
   toggleThemeMode,
   getThemeName,
@@ -57,6 +59,7 @@ export const Settings = () => {
   const dispatch = useDispatch();
   const showDesignTab = useAppSelector(getShowDesignTab);
   const disableFastRemap = useAppSelector(getDisableFastRemap);
+  const showSliderValues = useAppSelector(getShowSliderValues);
   const themeMode = useAppSelector(getThemeMode);
   const themeName = useAppSelector(getThemeName);
   const renderMode = useAppSelector(getRenderMode);
@@ -120,6 +123,15 @@ export const Settings = () => {
                 />
               </Detail>
             </ControlRow>
+            <ControlRow>
+              <Label>Show Slider Values</Label>
+              <Detail>
+                <AccentSlider
+                  onChange={() => dispatch(toggleShowSliderValues())}
+                  isChecked={showSliderValues}
+                />
+              </Detail>
+            </ControlRow>
             <ControlRow>
               <Label>Light Mode</Label>
               <Detail>

src/store/settingsSlice.ts

@@ -42,6 +42,9 @@ const settingsSlice = createSlice({
     toggleFastRemap: (state) => {
       toggleBool(state, 'disableFastRemap');
     },
+    toggleShowSliderValues: (state) => {
+      toggleBool(state, 'showSliderValues');
+    },
     toggleCreatorMode: (state) => {
       toggleBool(state, 'showDesignTab');
     },
@@ -103,6 +106,7 @@ const settingsSlice = createSlice({
 
 export const {
   toggleFastRemap,
+  toggleShowSliderValues,
   toggleCreatorMode,
   setTestMatrixEnabled,
   setTestKeyboardSoundsSettings,
@@ -123,6 +127,8 @@ export const getAllowGlobalHotKeys = (state: RootState) =>
   state.settings.allowGlobalHotKeys;
 export const getDisableFastRemap = (state: RootState) =>
   state.settings.disableFastRemap;
+export const getShowSliderValues = (state: RootState) =>
+  state.settings.showSliderValues;
 export const getShowDesignTab = (state: RootState) =>
   state.settings.showDesignTab;
 export const getRestartRequired = (state: RootState) =>

src/types/types.ts

@@ -84,6 +84,7 @@ export type TestKeyboardSoundsSettings = {
 export type Settings = {
   showDesignTab: boolean;
   disableFastRemap: boolean;
+  showSliderValues: boolean;
   renderMode: '3D' | '2D';
   themeMode: 'light' | 'dark';
   themeName: string;

src/utils/device-store.ts

@@ -30,6 +30,7 @@ const defaultStoreData = {
   settings: {
     showDesignTab: false,
     disableFastRemap: false,
+    showSliderValues: false,
     renderMode: '2D' as const,
     themeMode: 'dark' as const,
     designDefinitionVersion: 'v3' as const,