feat: implement skeleton layout for settings and search pages (#366)

Co-authored-by: Lê Nhân Phụng <lenhanphung@Phung-Mac-M4.local>

src/features/Search/SearchResultsPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SearchResultsPage() {
+  return (
+    <main className="main-layout search-layout">
+      <h1>Search Results</h1>
+    </main>
+  );
+}

src/features/Settings/SettingsPage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SettingsPage() {
+  return (
+    <main className="main-layout settings-layout">
+      <h1>Settings Page</h1>
+    </main>
+  );
+}

src/features/Settings/SettingsSlice.ts

@@ -2,6 +2,7 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface SettingsState {
   language: string;
+  view: "calendar" | "settings" | "search";
 }
 
 const savedLang = localStorage.getItem("lang");
@@ -9,6 +10,7 @@ const defaultLang = savedLang ?? (window as any).LANG ?? "en";
 
 const initialState: SettingsState = {
   language: defaultLang,
+  view: "calendar",
 };
 
 export const settingsSlice = createSlice({
@@ -19,8 +21,14 @@ export const settingsSlice = createSlice({
       state.language = action.payload;
       localStorage.setItem("lang", action.payload);
     },
+    setView: (
+      state,
+      action: PayloadAction<"calendar" | "settings" | "search">
+    ) => {
+      state.view = action.payload;
+    },
   },
 });
 
-export const { setLanguage } = settingsSlice.actions;
+export const { setLanguage, setView } = settingsSlice.actions;
 export default settingsSlice.reducer;