theme global save

src/app/modules/header.module.tsx

@@ -20,7 +20,8 @@ export interface Query {
     joined_at: Date;
     banner_color: string;
     has_unreaded_notifications: Boolean,
-    permissions: string[]
+    permissions: string[],
+    profile_theme: number
 }
 
 const Header = (): JSX.Element => {

src/app/modules/me.module.tsx

@@ -54,17 +54,17 @@ export const Me = ({ children, user_data }: { children: JSX.Element, user_data?:
     const [islogged, setIsLogged] = useState<boolean>(false);
     const pathname = usePathname();
     const path = pathname.split('/')[pathname.split('/').length - 1];
-    const cookies = useCookies();
-    const initial_theme = Number(cookies.get('theme')) || 0
-    const [theme, setTheme] = useState<number>(initial_theme);
+    const [theme, setTheme] = useState<number>(user_data?.profile_theme || 0);
 
     const { data, isLoading, isError } = useQuery({
         queryKey: [`user_${user_data?.username}`],
         retry: 5,
         queryFn: async () => {
             if (!user_data) {
                 const res = await authApi.get("/user/me", { withCredentials: true });
-                return res.data as Query;
+                const data = res.data as Query;
+                setTheme(data.profile_theme);
+                return data;
             } else {
                 return user_data;
             }
@@ -75,10 +75,6 @@ export const Me = ({ children, user_data }: { children: JSX.Element, user_data?:
         setIsLogged(true);
     }
 
-    useEffect(() => {
-        cookies.set('theme', theme.toString(), { expires: (365 * 10) });
-    }, [theme]);
-
     let background;
     switch (theme) {
         case 1:
@@ -92,18 +88,14 @@ export const Me = ({ children, user_data }: { children: JSX.Element, user_data?:
             break;
     }
 
-    if (!!user_data) {
-        background = <Default data={data as Query} islogged={islogged} />;
-    }
-
     return (
         <div className={style_sidebar.main_container}>
             <div style={islogged ? { opacity: "1", transform: "translateY(0)" } : {}} className={style_sidebar.hidable}>
                 <div className={style_sidebar.main}>
                     <div className={style_sidebar.side}>
                         <div style={{ position: 'relative' }}>
                             {background}
-                            {!user_data && <Menu initialValue={initial_theme} color_available={!!data?.banner_color} onChange={setTheme} />}
+                            {!user_data && <Menu initialValue={theme} color_available={!!data?.banner_color} onChange={setTheme} />}
                         </div>
                         {!user_data &&
                             <div className={style_sidebar.card} style={{ alignItems: "stretch", gap: ".5rem" }}>

src/app/modules/theme_select.module.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Styles from '@/app/styles/theme_selector.module.css';
 import Image from 'next/image';
+import { authApi } from '../api.module';
 
 interface MenuProps {
     initialValue?: number;
@@ -25,11 +26,17 @@ const getIcon = (theme: number) => {
 const Menu = ({ initialValue, color_available, onChange }: MenuProps) => {
     const [expanded, setExpanded] = useState<boolean>(false);
     const [theme, setTheme] = useState<number>(initialValue);
+    const [firstLoad, setFirstLoad] = useState<boolean>(false);
 
     useEffect(() => {
         onChange(theme);
+        !firstLoad ? setFirstLoad(true) : theme !== initialValue && authApi.post('/user/me/profile_theme', { theme: theme });
     }, [theme]);
 
+    useEffect(() => {
+        setTheme(initialValue);
+    }, [initialValue])
+
 
     return (<div className={Styles.main}>
         <button className={Styles.style_change} onClick={() => setExpanded(_prev => !_prev)}>

src/app/users/[name]/page.tsx

@@ -5,17 +5,13 @@ import { redirect } from "next/navigation";
 import UsersClient from "./client_code";
 import { headers } from "next/headers";
 import { numbersTxt } from "@/app/modules/time.module";
+import { Query } from "@/app/modules/header.module";
 
-export interface Users {
+export interface Users extends Query {
     userID: number,
-    discordID: number,
-    username: string,
-    name: string,
-    joined_at: Date,
-    avatar: string,
-    banner_color: string,
     works: Bandage[],
-    is_self: boolean
+    is_self: boolean,
+    profile_theme: number
 }
 
 const Users = async ({ params }: { params: { name: string } }) => {