package-lock.json

@@ -9,14 +9,19 @@
       "version": "0.1.0",
       "dependencies": {
         "@picocss/pico": "^2.0.6",
+        "@reduxjs/toolkit": "^2.2.3",
         "axios": "^1.6.8",
         "cheerio": "^1.0.0-rc.12",
         "classnames": "^2.5.1",
         "next": "14.2.2",
         "next-intl": "^3.11.3",
+        "next-nprogress-bar": "^2.3.11",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.1.0",
         "react-image": "^4.1.0",
+        "react-redux": "^9.1.1",
+        "redux-persist": "^6.0.0",
         "video.js": "^8.10.0",
         "videojs-hls-quality-selector": "^2.0.0"
       },
@@ -471,6 +476,29 @@
         "node": ">=14"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.3.tgz",
+      "integrity": "sha512-76dll9EnJXg4EVcI5YNxZA/9hSAmZsFqzMmNRHvIlzw2WS/twfcVX3ysYrWGJMClwEmChQFC4yRq74tn6fdzRA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -510,13 +538,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.2.79",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
       "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -531,6 +559,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
@@ -1350,7 +1383,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2705,6 +2738,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz",
+      "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -3601,6 +3643,14 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/next-nprogress-bar": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.11.tgz",
+      "integrity": "sha512-OjSvsQwgSWa2qBMYO478QreGG9Jt82tr4wTQptmiyzNqqjzHCyKZNkhANnzPrjuFAoelIvmruJuakODofSnvTQ==",
+      "dependencies": {
+        "nprogress": "^0.2.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3610,6 +3660,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -4044,6 +4099,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz",
+      "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-image": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.1.0.tgz",
@@ -4060,6 +4123,32 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-redux": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.1.tgz",
+      "integrity": "sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "react-native": ">=0.69",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4072,6 +4161,27 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -4116,6 +4226,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reselect": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
+      "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -4875,6 +4990,14 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.1.tgz",
+      "integrity": "sha512-6MCBDr76UJmRpbF8pzP27uIoTocf3tITaMJ52mccgAhMJycuh5A/RL6mDZCTwTisj0Qfeq69FtjMCUX27U78oA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/video.js": {
       "version": "8.10.0",
       "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.10.0.tgz",

package.json

@@ -10,14 +10,19 @@
   },
   "dependencies": {
     "@picocss/pico": "^2.0.6",
+    "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.8",
     "cheerio": "^1.0.0-rc.12",
     "classnames": "^2.5.1",
     "next": "14.2.2",
     "next-intl": "^3.11.3",
+    "next-nprogress-bar": "^2.3.11",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.1.0",
     "react-image": "^4.1.0",
+    "react-redux": "^9.1.1",
+    "redux-persist": "^6.0.0",
     "video.js": "^8.10.0",
     "videojs-hls-quality-selector": "^2.0.0"
   },

src/app/[locale]/layout.tsx

@@ -1,20 +1,22 @@
+'use client'
+
 import "@/styles/globals.scss"
 
+import ReduxProvider from "@/store/redux-provider";
+
 export default function RootLayout({
   children,
-  params: {locale}
+  // params: { locale }
 }: Readonly<{
   children: React.ReactNode;
-  params: {locale: string};
+  // params: { locale: string };
 }>) {
+
   return (
-      <html lang={locale}>
-        <head>
-          <meta charSet="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <title>Proxy Raye: un proxy per XVideos basato su PornInvidious</title>
-        </head>
-        <body>{children}</body>
-      </html>
+    <>
+      <ReduxProvider>
+        {children}
+      </ReduxProvider>
+    </>
   );
 }

src/components/Layout/Header/Header.module.scss

@@ -0,0 +1,6 @@
+.menuContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}

src/components/Layout/Header/Menu/Icon/Icon.module.scss

@@ -0,0 +1,8 @@
+@import 'spacing';
+
+.container {
+    cursor: pointer;
+    width: $spacing_24;
+    height: $spacing_24;
+    margin-left: $spacing_16;
+}

src/components/Layout/Header/Menu/Icon/index.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import React, { PropsWithChildren } from 'react';
+
+import style from './Icon.module.scss';
+
+
+interface Props {
+    handleClick():void
+}
+
+const Menu: React.FC<Props & React.PropsWithChildren> = (props) => {
+
+    const { handleClick, children } = props
+
+    return (
+        <div onClick={handleClick} className={style.container}>
+            {children}
+        </div>
+    );
+};
+
+export default Menu;

src/components/Layout/Header/Menu/Language/index.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import React from 'react';
+
+import { IoLanguage } from 'react-icons/io5';
+
+import Icon from '../Icon';
+
+const Menu: React.FC = () => {
+
+    return (
+        <Icon handleClick={() => {}}>
+            {<IoLanguage size={24} />}
+        </Icon>
+    );
+};
+
+export default Menu;

src/components/Layout/Header/Menu/Menu.module.scss

@@ -0,0 +1,6 @@
+@import 'spacing';
+
+.container {
+    display: flex;
+    flex-direction: row;
+}

src/components/Layout/Header/Menu/Theme/index.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import React from 'react';
+
+import { TbMoon, TbSun } from 'react-icons/tb';
+import { useAppDispatch, useAppSelector } from '@/store/store';
+import { Themes } from '@/meta/settings';
+import { setCurrentTheme } from '@/store/settingsSlice';
+
+import Icon from '../Icon';
+
+const Menu: React.FC = () => {
+
+    const theme = useAppSelector((state) => state.settings.theme);
+    const dispatch = useAppDispatch();
+
+    return (
+        <Icon handleClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))}>
+            {theme == Themes.dark && <TbMoon size={24} />}
+            {theme == Themes.light && <TbSun size={24} />}
+        </Icon>
+    );
+};
+
+export default Menu;

src/components/Layout/Header/Menu/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import style from './Menu.module.scss'
+
+import Theme from './Theme';
+import Language from './Language';
+
+const Menu: React.FC = () => {
+
+    return (
+        <div className={style.container}>
+            <Language />
+            <Theme />
+        </div>
+    );
+};
+
+export default Menu;

src/components/Layout/Header/index.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
 
+import style from './Header.module.scss';
+
 import Title from './Title';
+import Menu from './Menu';
+
 import Description from './Description';
-import Disclaimer from './Disclaimer';
+// import Disclaimer from './Disclaimer';
 
 const Header: React.FC = () => {
 
   return (
     <>
-      <Title />
+      <div className={style.menuContainer}>
+        <Title />
+        <Menu />
+      </div>
       <Description />
-      <Disclaimer />
+      {/* <Disclaimer /> */}
     </>
   );
 };

src/components/Layout/index.tsx

@@ -1,13 +1,38 @@
+'use client'
+
 import React from 'react';
 
+import Head from 'next/head';
+
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
+
+import { useAppSelector } from '@/store/store';
+import { LAYOUT_COLORS_PINK, LAYOUT_COLORS_YELLOW } from '@/constants/colors';
+import { Themes } from '@/meta/settings';
+
 const Layout: React.FC<React.PropsWithChildren> = (props) => {
 
   const { children } = props;
 
+  const theme = useAppSelector((state) => state.settings.theme);
+
   return (
-    <main className="container">
-      {children}
-    </main>
+    <html data-theme={theme} /*lang={locale}*/>
+      <Head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Proxy Raye: un proxy per XVideos basato su PornInvidious</title>
+      </Head>
+      <body>
+        <main className="container">{children}</main>
+        <ProgressBar
+          height="4px"
+          color={theme == Themes.dark ? LAYOUT_COLORS_YELLOW : LAYOUT_COLORS_PINK }
+          options={{ showSpinner: false }}
+          shallowRouting
+        />
+      </body>
+    </html>
   );
 };
 

src/constants/colors.ts

@@ -0,0 +1,2 @@
+export const LAYOUT_COLORS_YELLOW = '#fdd835';
+export const LAYOUT_COLORS_PINK = '#d81b60';

src/meta/settings.ts

@@ -0,0 +1,4 @@
+export enum Themes {
+    light= 'light',
+    dark= 'dark'
+}

src/store/redux-provider.tsx

@@ -0,0 +1,13 @@
+import { Provider } from "react-redux";
+import { store } from "./store";
+import { persistStore } from "redux-persist";
+
+persistStore(store);
+
+export default function ReduxProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Provider store={store}>{children}</Provider>;
+}

src/store/settingsSlice.ts

@@ -0,0 +1,26 @@
+import { Themes } from "@/meta/settings";
+
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+
+
+export interface ISettingsState {
+  theme: Themes;
+}
+
+const initialState: ISettingsState = {
+  theme: Themes.light,
+};
+
+export const settingsSlice = createSlice({
+  name: "settings",
+  initialState,
+  reducers: {
+    setCurrentTheme: (state, action: PayloadAction<Themes>) => {
+      state.theme = action.payload;
+    },
+  },
+});
+
+export const { setCurrentTheme } = settingsSlice.actions;
+export const settingsReducer = settingsSlice.reducer;

src/store/store.ts

@@ -0,0 +1,29 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import { useDispatch, TypedUseSelectorHook, useSelector } from "react-redux";
+
+import { settingsReducer } from "@/store/settingsSlice";
+
+import { persistReducer } from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+const settingsPersistConfig = {
+  key: "settings",
+  storage: storage,
+  whitelist: ["settingsState"],
+};
+
+const rootReducer = combineReducers({
+  settings: persistReducer(settingsPersistConfig, settingsReducer),
+});
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({ serializableCheck: false }),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/styles/_spacing.scss

@@ -1,6 +1,7 @@
 $spacing_4: 4px;
 $spacing_8: 8px;
 $spacing_16: 16px;
+$spacing_24: 24px;
 $spacing_32: 32px;
 $spacing_48: 48px;
 $spacing_64: 64px;