frontend: add settings boilerplate

frontend/app/App.jsx

@@ -6,6 +6,7 @@ import { NavigationRail } from "@/app/components/NavigationRail/NavigationRail";
 import { useEffect, useState } from "react";
 import { ColorPicker } from "@/app/components/ColorPicker/ColorPicker";
 import { useUserStore } from "./store/user-store";
+import Settings from "./components/Settings/Settings";
 
 function setMode(mode) {
   localStorage.setItem("mode", mode);
@@ -23,6 +24,7 @@ function getTheme() {
 
 export const App = (props) => {
   const [colorPicker, setColorPicker] = useState(false);
+  const [settingsPopup, setSettingsPopup] = useState(false);
   const userStore = useUserStore();
 
   const theme = async (from) => {
@@ -57,7 +59,9 @@ export const App = (props) => {
       <div>
         <NavigationRail
           colorPicker={colorPicker}
+          settingsPopup={settingsPopup}
           setColorPicker={setColorPicker}
+          setSettingsPopup={setSettingsPopup}
         />
         {colorPicker && (
           <ColorPicker
@@ -67,6 +71,7 @@ export const App = (props) => {
             setColorPicker={setColorPicker}
           />
         )}
+        {settingsPopup && <Settings />}
       </div>
       <main className="responsive">{props.children}</main>
     </body>

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -78,7 +78,10 @@ export const NavigationRail = (props) => {
       })}
 
       <span className="max"></span>
-      <button className="circle transparent">
+      <button
+        className="circle transparent"
+        onClick={() => props.setSettingsPopup(!props.settingsPopup)}
+      >
         <i>settings</i>
       </button>
 

frontend/app/components/Settings/Settings.jsx

@@ -0,0 +1,32 @@
+export default function Settings() {
+  return (
+    <>
+      <dialog
+        className="active left round bottom small"
+        style={{ blockSize: "unset" }}
+      >
+        <h5>Настройки</h5>
+        <nav className="wrap">
+          <div class="max">
+            <h6 className="small">сохранение в истории просмотров</h6>
+          </div>
+          <label class="switch">
+            <input type="checkbox" />
+            <span></span>
+          </label>
+        </nav>
+        <li className="small-divider"></li>
+        <nav className="wrap small-space">
+          <button className="red">
+            <i>delete_forever</i>
+            <span>Удалить все настройки</span>
+          </button>
+          <button className="red">
+            <i>delete_history</i>
+            <span>Удалить историю поиска</span>
+          </button>
+        </nav>
+      </dialog>
+    </>
+  );
+}