Chore: silent log-level can't be change

src/components/Select/index.tsx

@@ -24,11 +24,13 @@ interface SelectProps<T extends string | number> extends BaseComponentProps {
 
     options: Array<SelectOptions<T>>
 
+    disabled?: boolean
+
     onSelect?: (value: T, e: React.MouseEvent<HTMLLIElement>) => void
 }
 
 export function Select<T extends string | number> (props: SelectProps<T>) {
-    const { value, options, onSelect, className: cn, style } = props
+    const { value, options, onSelect, disabled, className: cn, style } = props
 
     const portalRef = useRef(document.createElement('div'))
     const targetRef = useRef<HTMLDivElement>(null)
@@ -52,6 +54,9 @@ export function Select<T extends string | number> (props: SelectProps<T>) {
     }, [])
 
     function handleShowDropList () {
+        if (disabled) {
+            return
+        }
         setShowDropDownList(!showDropDownList)
     }
 
@@ -88,7 +93,7 @@ export function Select<T extends string | number> (props: SelectProps<T>) {
     return (
         <>
             <div
-                className={classnames('select', cn)}
+                className={classnames('select', { disabled }, cn)}
                 style={style}
                 ref={targetRef}
                 onClick={handleShowDropList}

src/components/Select/style.scss

@@ -10,6 +10,10 @@
         margin-left: 5px;
         color: $color-primary-darken;
     }
+
+    &.disabled {
+        cursor: not-allowed;
+    }
 }
 
 .select-list {
@@ -24,7 +28,7 @@
         max-height: 300px;
         overflow: auto;
         background: $color-white;
-        padding: 5px 0;
+        padding: 0;
         transition: all 200ms ease;
 
         > .option {

src/containers/Logs/index.tsx

@@ -1,10 +1,10 @@
 import dayjs from 'dayjs'
-import { camelCase } from 'lodash-es'
+import { lowerCase } from 'lodash-es'
 import { useLayoutEffect, useEffect, useRef, useState } from 'react'
 
 import { Select, Card, Header } from '@components'
 import { Log } from '@models/Log'
-import { useConfig, useI18n, useLogsStreamReader } from '@stores'
+import { useConfig, useGeneral, useI18n, useLogsStreamReader } from '@stores'
 
 import './style.scss'
 
@@ -29,10 +29,13 @@ export default function Logs () {
     const [logs, setLogs] = useState<Log[]>([])
     const { translation } = useI18n()
     const { data: { logLevel }, set: setConfig } = useConfig()
+    const { general: { logLevel: configLevel } } = useGeneral()
     const { t } = translation('Logs')
     const logsStreamReader = useLogsStreamReader()
     const scrollHeightRef = useRef(listRef.current?.scrollHeight ?? 0)
 
+    const isConfigSilent = lowerCase(configLevel) === 'silent'
+
     useLayoutEffect(() => {
         const ul = listRef.current
         if (ul != null && scrollHeightRef.current === (ul.scrollTop + ul.clientHeight)) {
@@ -60,8 +63,9 @@ export default function Logs () {
             <Header title={ t('title') } >
                 <span className="text-primary-darken mr-2 text-sm">{t('levelLabel')}:</span>
                 <Select
+                    disabled={isConfigSilent}
                     options={logLevelOptions}
-                    value={camelCase(logLevel)}
+                    value={isConfigSilent ? 'silent' : logLevel}
                     onSelect={level => setConfig(c => { c.logLevel = level })}
                 />
             </Header>