Updated ui layout.

ui/src/Pages/SettingsPage/ThumbnailPreferences.tsx

@@ -1,7 +1,11 @@
 import { gql } from '@apollo/client'
 import React, { useRef, useState } from 'react'
 import { useMutation, useQuery } from '@apollo/client'
-import { InputLabelDescription, InputLabelTitle } from './SettingsPage'
+import {
+  SectionTitle,
+  InputLabelDescription,
+  InputLabelTitle,
+} from './SettingsPage'
 import { useTranslation } from 'react-i18next'
 import { thumbnailMethodQuery } from './__generated__/thumbnailMethodQuery'
 import {
@@ -60,133 +64,71 @@ const ThumbnailPreferences = () => {
   const methodItems: DropdownItem[] = [
     {
       label: t(
-        'settings.thumbnails.downsample_method.nearest_neighbor',
+        'settings.thumbnails.method.filter.nearest_neighbor',
-        'Nearest Neighbor'
+        'Nearest Neighbor (default)'
       ),
       value: 0,
     },
     {
-      label: t('settings.thumbnails.downsample_method.box', 'Box'),
+      label: t('settings.thumbnails.method.filter.box', 'Box'),
       value: 1,
     },
     {
-      label: t('settings.thumbnails.downsample_method.linear', 'Linear'),
+      label: t('settings.thumbnails.method.filter.linear', 'Linear'),
       value: 2,
     },
     {
       label: t(
-        'settings.thumbnails.downsample_method.mitchell_netravali',
+        'settings.thumbnails.method.filter.mitchell_netravali',
         'Mitchell-Netravali'
       ),
       value: 3,
     },
     {
-      label: t(
+      label: t('settings.thumbnails.method.filter.catmull_rom', 'Catmull-Rom'),
-        'settings.thumbnails.downsample_method.catmull_rom',
-        'Catmull-Rom'
-      ),
       value: 4,
     },
     {
-      label: t('settings.thumbnails.downsample_method.Lanczos', 'Lanczos'),
+      label: t(
+        'settings.thumbnails.method.filter.Lanczos',
+        'Lanczos (highest quality)'
+      ),
       value: 5,
     },
   ]
 
-  // const [enablePeriodicScanner, setEnablePeriodicScanner] = useState(false)
-  // const [thumbnailMethod, setThumbnailMethod] = useState({
-  //   value: 0,
-  //   unit: TimeUnit.Second,
-  // })
-  //
-  // const scanIntervalServerValue = useRef<number | null>(null)
-  //
-  // const scanIntervalQuery = useQuery<scanIntervalQuery>(SCAN_INTERVAL_QUERY, {
-  //   onCompleted(data) {
-  //     const queryScanInterval = data.siteInfo.periodicScanInterval
-  //
-  //     if (queryScanInterval == 0) {
-  //       setScanInterval({
-  //         unit: TimeUnit.Second,
-  //         value: 0,
-  //       })
-  //     } else {
-  //       setScanInterval(
-  //         convertToAppropriateUnit({
-  //           unit: TimeUnit.Second,
-  //           value: queryScanInterval,
-  //         })
-  //       )
-  //     }
-  //
-  //     setEnablePeriodicScanner(queryScanInterval > 0)
-  //   },
-  // })
-  //
-  // const [setScanIntervalMutation, { loading: scanIntervalMutationLoading }] =
-  //   useMutation<
-  //     changeScanIntervalMutation,
-  //     changeScanIntervalMutationVariables
-  //   >(SCAN_INTERVAL_MUTATION)
-  //
-  // const onScanIntervalCheckboxChange = (checked: boolean) => {
-  //   setEnablePeriodicScanner(checked)
-  //
-  //   onScanIntervalUpdate(
-  //     checked ? scanInterval : { value: 0, unit: TimeUnit.Second }
-  //   )
-  // }
-  //
-  // const onScanIntervalUpdate = (scanInterval: TimeValue) => {
-  //   const seconds = convertToSeconds(scanInterval)
-  //
-  //   if (scanIntervalServerValue.current != seconds) {
-  //     setScanIntervalMutation({
-  //       variables: {
-  //         interval: seconds,
-  //       },
-  //     })
-  //     scanIntervalServerValue.current = seconds
-  //   }
-  // }
-
   return (
-    <>
+    <div>
-      <div className="mt-4">
+      <SectionTitle>
-        <label htmlFor="thumbnail_method_field">
+        {t('settings.thumbnails.title', 'Thumbnail preferences')}
-          <InputLabelTitle>
+      </SectionTitle>
-            {t('settings.thumbnails.field.label', 'Downsampling method')}
+      <label htmlFor="thumbnail_method_field">
-          </InputLabelTitle>
+        <InputLabelTitle>
-          <InputLabelDescription>
+          {t('settings.thumbnails.method.label', 'Downsampling method')}
-            {t(
+        </InputLabelTitle>
-              'settings.thumbnails.field.description',
+        <InputLabelDescription>
-              'The filter to use when generating thumbnails'
+          {t(
-            )}
+            'settings.thumbnails.method.description',
-          </InputLabelDescription>
+            'The filter to use when generating thumbnails'
-        </label>
+          )}
-        <div className="flex gap-2">
+        </InputLabelDescription>
-          <Dropdown
+      </label>
-            aria-label="Method"
+      <Dropdown
-            items={methodItems}
+        aria-label="Method"
-            selected={downsampleMethod}
+        items={methodItems}
-            setSelected={value => {
+        selected={downsampleMethod}
-              setDownsampleMethod(value)
+        setSelected={value => {
-              updateDownsampleMethod(value)
+          setDownsampleMethod(value)
-            }}
+          updateDownsampleMethod(value)
-          />
+        }}
-        </div>
+      />
-      </div>
       <Loader
         active={downsampleMethodQuery.loading || downsampleMutationData.loading}
         size="small"
         style={{ marginLeft: 16 }}
       />
-    </>
+    </div>
   )
 }
 
 export default ThumbnailPreferences
-
-// <h3 className="font-semibold text-lg mt-4 mb-2">
-//   {t('settings.thumbnails.title', 'Thumbnail preferences')}
-// </h3>