frontend:

Fix undefined api call
Simplify some parts
Better theme management
Add color picker (dynamic themes wohoo)
Add missing lists keys

frontend/app/components/ColorPicker/ColorPicker.jsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import Styles from "./ColorPicker.module.css"
+
+export const ColorPicker = (props) => {
+  const colors = [
+    { hex: "#ffffff", color: "white" },
+    { hex: "#e91e63", color: "pink" },
+    { hex: "#ff9800", color: "orange" },
+    { hex: "#4caf50", color: "green" },
+    { hex: "#009688", color: "teal" },
+    { hex: "#9c27b0", color: "purple" },
+    { hex: "#673ab7", color: "deep-purple" },
+    { hex: "#ffeb3b", color: "yellow" },
+    { hex: "#ffc8ff", color: Styles["radiquum-pink"]},
+    { hex: "#0087c7", color: Styles["fuxigen-blue"]},
+    { hex: "#e54040", color: Styles["anixart-red"]},
+  ];
+  const [mode, setMode] = useState(ui("mode"));
+
+  return (
+    <dialog className="active">
+      <h5>Theme Select</h5>
+      <div className="grid center-align">
+        {colors.map((item) => {
+          return (
+            <button
+              key={item.color}
+              className={`circle small ${item.color} s2`}
+              onClick={() => props.theme(item.hex)}
+            ></button>
+          );
+        })}
+      </div>
+      <div className="medium-divider"></div>
+      <button
+        className={`circle small transparent`}
+        onClick={() => {
+          props.mode();
+          setMode(ui("mode"));
+        }}
+      >
+        {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
+      </button>
+    </dialog>
+  );
+};

frontend/app/components/ColorPicker/ColorPicker.module.css

@@ -0,0 +1,9 @@
+.radiquum-pink{
+    background-color: #ffc8ff !important;
+}
+.fuxigen-blue{
+    background-color: #0087c7 !important;
+}
+.anixart-red{
+    background-color: #e54040 !important;
+}

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -1,12 +1,38 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { useThemeStore } from "@/app/store/theme-store";
 import Link from "next/link";
 
-export const NavigationRail = () => {
+export const NavigationRail = (props) => {
   const pathname = usePathname();
-  const themeStore = useThemeStore();
+
+  const items = [
+    {
+      title: "Домашняя",
+      icon: "home",
+      path: "/",
+    },
+    {
+      title: "Поиск",
+      icon: "search",
+      path: "/search",
+    },
+    {
+      title: "Закладки",
+      icon: "bookmark",
+      path: "/bookmarks",
+    },
+    {
+      title: "Избранное",
+      icon: "favorite",
+      path: "/favorites",
+    },
+    {
+      title: "История",
+      icon: "history",
+      path: "/history",
+    },
+  ];
 
   return (
     <nav className="left">
@@ -14,40 +40,27 @@ export const NavigationRail = () => {
         <img className="responsive" src="/favicon.ico"></img>
       </button>
 
-      <Link href="/" className={pathname == "/" ? "active" : ""}>
-        <i>home</i>
-        <div>Домашняя</div>
-      </Link>
-      <Link href="/search" className={pathname == "/search" ? "active" : ""}>
-        <i>search</i>
-        <div>Поиск</div>
-      </Link>
-      <Link
-        href="/bookmarks"
-        className={pathname == "/bookmarks" ? "active" : ""}
-      >
-        <i>bookmark</i>
-        <div>Закладки</div>
-      </Link>
-      <Link
-        href="/favorites"
-        className={pathname == "/favorites" ? "active" : ""}
-      >
-        <i>favorite</i>
-        <div>Избранное</div>
-      </Link>
-      <Link href="/history" className={pathname == "/history" ? "active" : ""}>
-        <i>history</i>
-        <div>История</div>
-      </Link>
-      {/* <a>
-        <i>share</i>
-        <div>share</div>
-      </a> */}
+      {items.map((item) => {
+        return (
+          <Link
+            key={item.path}
+            href={item.path}
+            className={pathname == item.path ? "active" : ""}
+          >
+            <i>{item.icon}</i>
+            <div>{item.title}</div>
+          </Link>
+        );
+      })}
+
       <span className="max"></span>
-      <button className="circle transparent" onClick={() => themeStore.changeTheme(themeStore.theme == "dark" ? "light" : "dark")}>
+      <button
+        className="circle transparent"
+        onClick={() => props.setColorPicker(!props.colorPicker)}
+      >
         <i>palette</i>
       </button>
+
     </nav>
   );
 };