frontend: add saving of settings state. move logout button in navigation. add close button to settings dialog.

frontend/app/components/Settings/Settings.jsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { useUserStore } from "@/app/store/user-store";
+import { useSettingsStore } from "@/app/store/settings-store";
+
 function deleteAllSettings() {
   localStorage.removeItem("mode");
   localStorage.removeItem("theme");
@@ -9,7 +12,10 @@ function deleteSearchHistory() {
   localStorage.removeItem("searches");
 }
 
-export default function Settings() {
+export default function Settings(props) {
+  const userStore = useUserStore();
+  const settingsStore = useSettingsStore();
+
   return (
     <>
       <dialog
@@ -17,16 +23,28 @@ export default function Settings() {
         style={{ blockSize: "unset" }}
       >
         <h5>Настройки</h5>
-        <nav className="wrap">
-          <div className="max">
-            <h6 className="small">сохранение в истории просмотров</h6>
-          </div>
-          <label className="switch">
-            <input type="checkbox" />
-            <span></span>
-          </label>
-        </nav>
-        <li className="small-divider"></li>
+        {userStore.isAuth && (
+          <>
+            <nav className="wrap">
+              <div className="max">
+                <h6 className="small">сохранение в истории просмотров</h6>
+              </div>
+              <label className="switch">
+                <input
+                  type="checkbox"
+                  checked={settingsStore.saveToHistory}
+                  onChange={() =>
+                    settingsStore.setSettings({
+                      saveToHistory: !settingsStore.saveToHistory,
+                    })
+                  }
+                />
+                <span></span>
+              </label>
+            </nav>
+            <li className="small-divider"></li>
+          </>
+        )}
         <nav className="wrap small-space">
           <button className="red" onClick={() => deleteAllSettings()}>
             <i>delete_forever</i>
@@ -37,6 +55,15 @@ export default function Settings() {
             <span>Удалить историю поиска</span>
           </button>
         </nav>
+        <div className="medium-divider"></div>
+        <nav>
+          <button
+            className={`circle small transparent `}
+            onClick={() => props.setSettingsPopup(!props.settingsPopup)}
+          >
+            <i>close</i>
+          </button>
+        </nav>
       </dialog>
     </>
   );