Added end to end encryption

src/views/SettingsModalView/SettingsModalView.tsx

@@ -0,0 +1,69 @@
+import { createSignal, type Component, type JSXElement } from "solid-js";
+import { ISettingsModalViewProps } from "./types";
+import SettingsServersPage from "./pages/SettingsServersPage/SettingsServersPage";
+import SettingsSessionPage from "./pages/SettingsSessionsPage/SettingsSessionsPage";
+import { SettingsItem } from "../../components/SettingsItem";
+import { Dynamic } from "solid-js/web";
+
+const SettingsModalView: Component<ISettingsModalViewProps> = (
+    props: ISettingsModalViewProps,
+) => {
+    const [getSelectedPage, setSelectedPage] = createSignal<string | undefined>(
+        undefined,
+    );
+
+    const pages = new Map<string, Component>([
+        ["Servers", SettingsServersPage],
+        ["Sessions", SettingsSessionPage],
+    ]);
+
+    const getCurrentPage = (): JSXElement => {
+        const selectedPage = getSelectedPage();
+
+        if (selectedPage) {
+            return <Dynamic component={pages.get(selectedPage)} />;
+        } else {
+            return undefined;
+        }
+    };
+
+    const mapPageButton = (page: [string, Component]): JSXElement => (
+        <SettingsItem
+            id={page[0]}
+            text={page[0]}
+            active={page[0] === getSelectedPage()}
+            onClick={setSelectedPage}
+        />
+    );
+
+    return (
+        <div>
+            <dialog
+                ref={props.dialogRef}
+                class="modal outline-none bg-[#00000050]"
+            >
+                <div class="modal-box w-10/12 max-w-5xl h-8/12 bg-stone-950 rounded-3xl">
+                    <h3 class="text-lg font-bold text-center">Settings</h3>
+                    <div class="divider"></div>
+                    <div class="flex flex-row gap-4 px-4">
+                        <div class="flex flex-col gap-2">
+                            <h3 class="text-lg font-bold text-center mb-4">
+                                Categories
+                            </h3>
+                            {[...pages].map(mapPageButton)}
+                        </div>
+                        <div class="divider divider-horizontal"></div>
+                        {getCurrentPage()}
+                    </div>
+                </div>
+                <form
+                    onClick={props.onClose}
+                    method="dialog"
+                    class="modal-backdrop"
+                ></form>
+            </dialog>
+        </div>
+    );
+};
+
+export default SettingsModalView;