feat(settings): add titles to options and improve initial render handling in visibility toggle

src/components/Layout/Settings/Hero/Hero.jsx

@@ -21,6 +21,12 @@ const Preview = (props) => {
 };
 
 const VisibilityToggleButton = ({ setting, onClick }) => {
+  const [isInitialRender, setIsInitialRender] = useState(true);
+
+  useEffect(() => {
+    setIsInitialRender(false);
+  }, []);
+
   const iconVariants = {
     initial: { opacity: 0, scale: 0.8 },
     animate: { opacity: 1, scale: 1 },
@@ -65,9 +71,9 @@ const VisibilityToggleButton = ({ setting, onClick }) => {
         </motion.span>
       </AnimatePresence>
       <motion.span
-        initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+        initial={isInitialRender ? { opacity: 1 } : { opacity: 0 }}
         animate={{ opacity: 1 }}
-        transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
+        transition={{ duration: isInitialRender ? 0 : prefersReducedMotion ? 0 : 0.2 }}
         className="text-base text-gray-900 dark:text-gray-100"
       >
         {setting ? 'Hide' : 'Show'}
@@ -130,7 +136,7 @@ const Controls = (props) => {
 
   const memoizedToggle = useMemo(
     () => <VisibilityToggleButton setting={setting} onClick={changeSetting} />,
-    [setting],
+    [setting, changeSetting],
   );
 
   return (

src/components/Layout/Settings/PreferencesWrapper/PreferencesWrapper.jsx

@@ -31,7 +31,7 @@ const PreferencesWrapper = ({ children, ...props }) => {
 
   return (
     <div
-      className={`preferences transition-all duration-1000 delay-75 ease-cubic ${
+      className={`preferences transition-all duration-200 delay-75 ease-cubic ${
         shown ? 'opacity-100 pointer-events-auto' : 'opacity-40 pointer-events-none'
       } bg-modal-content-light dark:bg-modal-content-dark p-10 rounded`}
     >

src/features/date/options/DateOptions.jsx

@@ -92,6 +92,7 @@ function DateOptions() {
           element=".date"
           zoomSetting="zoomDate"
           visibilityToggle={true}
+          title={variables.getMessage('settings:sections.date.title')}
         />
       </Hero>
       <PreferencesWrapper setting="date">

src/features/quicklinks/options/QuickLinksOptions.jsx

@@ -214,6 +214,7 @@ class QuickLinksOptions extends PureComponent {
             category="quicklinks"
             visibilityToggle={true}
             zoomSetting="zoomQuicklinks"
+            title="Quick Link Options"
           />
         </Hero>
         <PreferencesWrapper>

src/features/time/options/TimeOptions.jsx

@@ -258,6 +258,7 @@ const TimeOptions = () => {
           element=".clock-container"
           zoomSetting="zoomClock"
           visibilityToggle={true}
+          title={variables.getMessage(`${TIME_SECTION}.title`)}
         />
       </Hero>
       <h1 className="py-3 uppercase tracking-tight text-neutral-300">options</h1>

src/features/weather/options/WeatherOptions.jsx

@@ -196,6 +196,7 @@ const WeatherOptions = () => {
           zoomSetting="zoomWeather"
           zoomCategory="weather"
           visibilityToggle={true}
+          title={variables.getMessage(`${WEATHER_SECTION}.title`)}
         />
       </Hero>
       {/*<PreferencesWrapper