chore: sidebar responsiveness.

god-mode/app/ai/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useInstance from "hooks/use-instance";
+// ui
+import { Loader } from "@plane/ui";
+// icons
+import { Lightbulb } from "lucide-react";
+// components
+import { InstanceAIForm } from "components/forms";
+
+const InstanceAIPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">
+          AI features for all your workspaces
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Configure your AI API credentials so Plane AI features are turned on
+          for all your workspaces.
+        </div>
+      </div>
+      {formattedConfig ? (
+        <>
+          <div>
+            <div className="pb-1 text-xl font-medium text-custom-text-100">
+              OpenAI
+            </div>
+            <div className="text-sm font-normal text-custom-text-300">
+              If you use ChatGPT, this is for you.
+            </div>
+          </div>
+          <InstanceAIForm config={formattedConfig} />
+          <div className="my-2 flex">
+            <div className="flex items-center gap-2 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 px-4 py-2 text-xs text-custom-primary-200">
+              <Lightbulb height="14" width="14" />
+              <div>
+                If you have a preferred AI models vendor, please get in touch
+                with us.
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+export default InstanceAIPage;

god-mode/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import NextAuth from "next-auth";
+// auth
+// import { getNextAuthOptions } from "@plane/lib";
+
+export default async function auth(req: NextApiRequest, res: NextApiResponse) {
+  // const authOptions = getAuthOptions(req, res);
+  // Do whatever you want here, before the request is passed down to `NextAuth`
+  return await NextAuth(req, res, authOptions);
+}

god-mode/app/authorization/page.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useInstance from "hooks/use-instance";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Loader, ToggleSwitch } from "@plane/ui";
+// components
+import { InstanceGithubConfigForm, InstanceGoogleConfigForm } from "components/forms";
+
+const InstanceAuthorizationPage = observer(() => {
+  // store
+  const {
+    fetchInstanceConfigurations,
+    formattedConfig,
+    updateInstanceConfigurations,
+  } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  // toast
+  const { setToastAlert } = useToast();
+
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  const enableSignup = formattedConfig?.ENABLE_SIGNUP ?? "0";
+  const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "0";
+  // const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "0";
+
+  const updateConfig = async (
+    key: "ENABLE_SIGNUP" | "ENABLE_MAGIC_LINK_LOGIN" | "ENABLE_EMAIL_PASSWORD",
+    value: string
+  ) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    await updateInstanceConfigurations(payload)
+      .then(() => {
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "SSO and OAuth Settings updated successfully",
+        });
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setToastAlert({
+          title: "Error",
+          type: "error",
+          message: "Failed to update SSO and OAuth Settings",
+        });
+        setIsSubmitting(false);
+      });
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">
+          Single sign-on and OAuth
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Make your teams life easy by letting them sign-up with their Google
+          and GitHub accounts, and below are the settings.
+        </div>
+      </div>
+      {formattedConfig ? (
+        <>
+          <div className="flex w-full flex-col gap-12 border-b border-custom-border-100 pb-8 lg:w-2/5">
+            <div className="pointer-events-none mr-4 flex items-center gap-14 opacity-50">
+              <div className="grow">
+                <div className="text-sm font-medium text-custom-text-100">
+                  Turn Magic Links{" "}
+                  {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}
+                </div>
+                <div className="text-xs font-normal text-custom-text-300">
+                  <p>Slack-like emails for authentication.</p>
+                  You need to have set up email{" "}
+                  <Link href="email">
+                    <span className="text-custom-primary-100 hover:underline">
+                      here
+                    </span>
+                  </Link>{" "}
+                  to enable this.
+                </div>
+              </div>
+              <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+                <ToggleSwitch
+                  value={Boolean(parseInt(enableMagicLogin))}
+                  onChange={() => {}}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+            <div className="mr-4 flex items-center gap-14">
+              <div className="grow">
+                <div className="text-sm font-medium text-custom-text-100">
+                  Let your users log in via the methods below
+                </div>
+                <div className="text-xs font-normal text-custom-text-300">
+                  Toggling this off will disable all previous configs. Users
+                  will only be able to login with an e-mail and password combo.
+                </div>
+              </div>
+              <div className={`shrink-0 ${isSubmitting && "opacity-70"}`}>
+                <ToggleSwitch
+                  value={Boolean(parseInt(enableSignup))}
+                  onChange={() => {
+                    Boolean(parseInt(enableSignup)) === true
+                      ? updateConfig("ENABLE_SIGNUP", "0")
+                      : updateConfig("ENABLE_SIGNUP", "1");
+                  }}
+                  size="sm"
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-y-6 py-2">
+            <div className="w-full">
+              <div className="flex items-center justify-between border-b border-custom-border-100 py-2">
+                <span className="text-lg font-medium tracking-tight">
+                  Google
+                </span>
+              </div>
+              <div className="px-2 py-6">
+                <InstanceGoogleConfigForm config={formattedConfig} />
+              </div>
+            </div>
+            <div className="w-full">
+              <div className="flex items-center justify-between border-b border-custom-border-100 py-2">
+                <span className="text-lg font-medium tracking-tight">
+                  Github
+                </span>
+              </div>
+              <div className="px-2 py-6">
+                <InstanceGithubConfigForm config={formattedConfig} />
+              </div>
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+export default InstanceAuthorizationPage;

god-mode/app/email/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useInstance from "hooks/use-instance";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstanceEmailForm } from "components/forms";
+
+const InstanceEmailPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">
+          Secure emails from your own instance
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Plane can send useful emails to you and your users from your own
+          instance without talking to the Internet.
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Set it up below and please test your settings before you save them.{" "}
+          <span className="text-red-400">
+            Misconfigs can lead to email bounces and errors.
+          </span>
+        </div>
+      </div>
+      {formattedConfig ? (
+        <InstanceEmailForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+export default InstanceEmailPage;

god-mode/app/globals.css

@@ -0,0 +1,342 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .text-1\.5xl {
+    font-size: 1.375rem;
+    line-height: 1.875rem;
+  }
+
+  .text-2\.5xl {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "Inter", sans-serif;
+  }
+
+  :root {
+    color-scheme: light !important;
+
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 8px -1px rgba(16, 24, 40, 0.1);
+    --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
+      0px 1px 12px 0px rgba(0, 0, 0, 0.12);
+    --color-shadow-rg: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 4px 4px 0px rgba(16, 24, 40, 0.08),
+      0px 1px 12px 0px rgba(16, 24, 40, 0.04);
+    --color-shadow-md: 0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-lg: 0px 6px 12px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 24px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
+      0px 0px 52px 0px rgba(16, 24, 40, 0.16);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
+      0px 1px 48px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-4xl: 0px 8px 40px 0px rgba(0, 0, 61, 0.05), 0px 12px 32px -16px rgba(0, 0, 0, 0.05);
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+
+    --color-sidebar-shadow-2xs: var(--color-shadow-2xs);
+    --color-sidebar-shadow-xs: var(--color-shadow-xs);
+    --color-sidebar-shadow-sm: var(--color-shadow-sm);
+    --color-sidebar-shadow-rg: var(--color-shadow-rg);
+    --color-sidebar-shadow-md: var(--color-shadow-md);
+    --color-sidebar-shadow-lg: var(--color-shadow-lg);
+    --color-sidebar-shadow-xl: var(--color-shadow-xl);
+    --color-sidebar-shadow-2xl: var(--color-shadow-2xl);
+    --color-sidebar-shadow-3xl: var(--color-shadow-3xl);
+    --color-sidebar-shadow-4xl: var(--color-shadow-4xl);
+  }
+
+  [data-theme="light"],
+  [data-theme="light-contrast"] {
+    color-scheme: light !important;
+
+    --color-background-100: 255, 255, 255; /* primary bg */
+    --color-background-90: 250, 250, 250; /* secondary bg */
+    --color-background-80: 245, 245, 245; /* tertiary bg */
+  }
+
+  [data-theme="light"] {
+    --color-text-100: 23, 23, 23; /* primary text */
+    --color-text-200: 58, 58, 58; /* secondary text */
+    --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-400: 163, 163, 163; /* placeholder text */
+
+    --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
+    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
+
+    --color-onboarding-text-100: 23, 23, 23;
+    --color-onboarding-text-200: 58, 58, 58;
+    --color-onboarding-text-300: 82, 82, 82;
+    --color-onboarding-text-400: 163, 163, 163;
+
+    --color-onboarding-background-100: 236, 241, 255;
+    --color-onboarding-background-200: 255, 255, 255;
+    --color-onboarding-background-300: 236, 241, 255;
+    --color-onboarding-background-400: 177, 206, 250;
+
+    --color-onboarding-border-100: 229, 229, 229;
+    --color-onboarding-border-200: 217, 228, 255;
+    --color-onboarding-border-300: 229, 229, 229, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+  }
+
+  [data-theme="light-contrast"] {
+    --color-text-100: 11, 11, 11; /* primary text */
+    --color-text-200: 38, 38, 38; /* secondary text */
+    --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+  }
+
+  [data-theme="dark"],
+  [data-theme="dark-contrast"] {
+    color-scheme: dark !important;
+
+    --color-background-100: 7, 7, 7; /* primary bg */
+    --color-background-90: 11, 11, 11; /* secondary bg */
+    --color-background-80: 23, 23, 23; /* tertiary bg */
+
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-xs: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-sm: 0px 0px 4px 0px rgba(0, 0, 0, 0.2), 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-rg: 0px 0px 6px 0px rgba(0, 0, 0, 0.2), 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-md: 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
+    --color-shadow-lg: 0px 4px 12px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
+    --color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
+    --color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
+  }
+
+  [data-theme="dark"] {
+    --color-text-100: 229, 229, 229; /* primary text */
+    --color-text-200: 163, 163, 163; /* secondary text */
+    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-400: 82, 82, 82; /* placeholder text */
+
+    --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
+
+    --color-border-100: 34, 34, 34; /* subtle border= 1 */
+    --color-border-200: 38, 38, 38; /* subtle border- 2 */
+    --color-border-300: 46, 46, 46; /* strong border- 1 */
+    --color-border-400: 58, 58, 58; /* strong border- 2 */
+
+    /* onboarding colors */
+    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
+    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
+    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
+
+    --color-onboarding-text-100: 237, 238, 240;
+    --color-onboarding-text-200: 176, 180, 187;
+    --color-onboarding-text-300: 118, 123, 132;
+    --color-onboarding-text-400: 105, 110, 119;
+
+    --color-onboarding-background-100: 54, 58, 64;
+    --color-onboarding-background-200: 40, 42, 45;
+    --color-onboarding-background-300: 40, 42, 45;
+    --color-onboarding-background-400: 67, 72, 79;
+
+    --color-onboarding-border-100: 54, 58, 64;
+    --color-onboarding-border-200: 54, 58, 64;
+    --color-onboarding-border-300: 34, 35, 38, 0.5;
+
+    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+  }
+
+  [data-theme="dark-contrast"] {
+    --color-text-100: 250, 250, 250; /* primary text */
+    --color-text-200: 241, 241, 241; /* secondary text */
+    --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-400: 115, 115, 115; /* placeholder text */
+
+    --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
+
+    --color-border-100: 245, 245, 245; /* subtle border= 1 */
+    --color-border-200: 229, 229, 229; /* subtle border- 2 */
+    --color-border-300: 212, 212, 212; /* strong border- 1 */
+    --color-border-400: 185, 185, 185; /* strong border- 2 */
+  }
+
+  [data-theme="light"],
+  [data-theme="dark"],
+  [data-theme="light-contrast"],
+  [data-theme="dark-contrast"] {
+    --color-primary-10: 236, 241, 255;
+    --color-primary-20: 217, 228, 255;
+    --color-primary-30: 197, 214, 255;
+    --color-primary-40: 178, 200, 255;
+    --color-primary-50: 159, 187, 255;
+    --color-primary-60: 140, 173, 255;
+    --color-primary-70: 121, 159, 255;
+    --color-primary-80: 101, 145, 255;
+    --color-primary-90: 82, 132, 255;
+    --color-primary-100: 63, 118, 255;
+    --color-primary-200: 57, 106, 230;
+    --color-primary-300: 50, 94, 204;
+    --color-primary-400: 44, 83, 179;
+    --color-primary-500: 38, 71, 153;
+    --color-primary-600: 32, 59, 128;
+    --color-primary-700: 25, 47, 102;
+    --color-primary-800: 19, 35, 76;
+    --color-primary-900: 13, 24, 51;
+
+    --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
+    --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
+    --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */
+
+    --color-sidebar-text-100: var(--color-text-100); /* primary sidebar text */
+    --color-sidebar-text-200: var(--color-text-200); /* secondary sidebar text */
+    --color-sidebar-text-300: var(--color-text-300); /* tertiary sidebar text */
+    --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
+
+    --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  color: rgba(var(--color-text-100));
+}
+
+/* scrollbar style */
+::-webkit-scrollbar {
+  display: none;
+}
+
+.horizontal-scroll-enable {
+  overflow-x: scroll;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar {
+  display: block;
+  height: 7px;
+  width: 0;
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-track {
+  height: 7px;
+  background-color: rgba(var(--color-background-100));
+}
+
+.horizontal-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-scrollbar));
+}
+
+.vertical-scroll-enable::-webkit-scrollbar {
+  display: block;
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-track {
+  width: 5px;
+}
+
+.vertical-scroll-enable::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(var(--color-background-90));
+}
+/* end scrollbar style */
+
+/* progress bar */
+.progress-bar {
+  fill: currentColor;
+  color: rgba(var(--color-sidebar-background-100));
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  color: rgb(var(--color-text-400));
+}

god-mode/app/header.tsx

@@ -1,21 +1,43 @@
+"use client";
+
 import { FC } from "react";
+import { usePathname } from "next/navigation";
 // mobx
 import { observer } from "mobx-react-lite";
 // ui
 import { Breadcrumbs } from "@plane/ui";
 // icons
 import { Settings } from "lucide-react";
+// components
+import { SidebarHamburgerToggle } from "components/sidebar/sidebar-menu-hamburger-toogle";
 
-export interface IInstanceAdminHeader {
-  title?: string;
-}
+export const InstanceHeader: FC = observer(() => {
+  const pathName = usePathname();
 
-export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) => {
-  const { title } = props;
+  const getHeaderTitle = () => {
+    if (pathName === "/") {
+      return "General";
+    }
+    if (pathName === "/ai") {
+      return "Artificial Intelligence";
+    }
+    if (pathName === "/email") {
+      return "Email";
+    }
+    if (pathName === "/authorization") {
+      return "Authorization";
+    }
+    if (pathName === "/image") {
+      return "Image";
+    }
+    return;
+  };
+  const title = getHeaderTitle();
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+        <SidebarHamburgerToggle />
         {title && (
           <div>
             <Breadcrumbs>
@@ -23,7 +45,6 @@ export const InstanceAdminHeader: FC<IInstanceAdminHeader> = observer((props) =>
                 type="text"
                 icon={<Settings className="h-4 w-4 text-custom-text-300" />}
                 label="Settings"
-                link="/god-mode"
               />
               <Breadcrumbs.BreadcrumbItem type="text" label={title} />
             </Breadcrumbs>

god-mode/app/image/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useInstance from "hooks/use-instance";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstanceImageConfigForm } from "components/forms";
+
+const InstanceImagePage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig } = useInstance();
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">
+          Third-party image libraries
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Let your users search and choose images from third-party libraries
+        </div>
+      </div>
+      {formattedConfig ? (
+        <InstanceImageConfigForm config={formattedConfig} />
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+export default InstanceImagePage;

god-mode/app/layout.tsx

@@ -0,0 +1,41 @@
+// lib
+import AppWrapper from "lib/wrappers/app-wrapper";
+import { UserAuthWrapper } from "lib/wrappers/user-auth-wrapper";
+// components
+import { InstanceSidebar } from "./sidebar";
+import { InstanceHeader } from "./header";
+// styles
+import "./globals.css";
+
+export const metadata = {
+  title: "God Mode",
+  description: "You are god now.",
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export const RootLayout = async ({ children }: RootLayoutProps) => (
+  <html lang="en">
+    <body className={`antialiased`}>
+      <AppWrapper>
+        <UserAuthWrapper>
+          <div className="relative flex h-screen w-full overflow-hidden">
+            <InstanceSidebar />
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+              <InstanceHeader />
+              <div className="h-full w-full overflow-hidden px-10 py-12">
+                <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">
+                  {children}
+                </div>
+              </div>
+            </main>
+          </div>
+        </UserAuthWrapper>
+      </AppWrapper>
+    </body>
+  </html>
+);
+
+export default RootLayout;

god-mode/app/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import useInstance from "hooks/use-instance";
+// ui
+import { Loader } from "@plane/ui";
+// components
+import { InstanceGeneralForm } from "components/forms";
+
+const GeneralSettingsPage = observer(() => {
+  // store
+  const { instance, instanceAdmins, fetchInstanceInfo, fetchInstanceAdmins } =
+    useInstance();
+
+  // fetching instance information
+  useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
+  // fetching instance admins
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  return (
+    <div className="flex h-full w-full flex-col gap-8">
+      <div className="mb-2 border-b border-custom-border-100 pb-3">
+        <div className="pb-1 text-xl font-medium text-custom-text-100">
+          ID your instance easily
+        </div>
+        <div className="text-sm font-normal text-custom-text-300">
+          Change the name of your instance and instance admin e-mail addresses.
+          If you have a paid subscription, you will find your license key here.
+        </div>
+      </div>
+      {instance && instanceAdmins ? (
+        <InstanceGeneralForm
+          instance={instance}
+          instanceAdmins={instanceAdmins}
+        />
+      ) : (
+        <Loader className="space-y-4">
+          <div className="grid grid-cols-2 gap-x-8 gap-y-4">
+            <Loader.Item height="50px" />
+            <Loader.Item height="50px" />
+          </div>
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
+
+export default GeneralSettingsPage;

god-mode/app/sidebar.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { FC, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+// hooks
+import useAppTheme from "hooks/use-theme";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+// components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "components/sidebar";
+
+export interface IInstanceSidebar {}
+
+export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
+  // store
+  const themeStore = useAppTheme();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (themeStore.sidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        themeStore.toggleSidebar();
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        themeStore.toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [themeStore]);
+
+  return (
+    <div
+      className={`inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300
+        fixed md:relative
+        ${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        sm:${themeStore.sidebarCollapsed ? "-ml-[280px]" : ""}
+        md:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+        lg:ml-0 ${themeStore.sidebarCollapsed ? "w-[80px]" : "w-[280px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-1 flex-col">
+        <SidebarDropdown />
+        <SidebarMenu />
+        <HelpSection />
+      </div>
+    </div>
+  );
+});

god-mode/components/forms/ai-form.tsx

@@ -0,0 +1,151 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceAIForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface AIFormValues {
+  OPENAI_API_KEY: string;
+  GPT_ENGINE: string;
+}
+
+export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
+  const { config } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+  // store
+  const { updateInstanceConfigurations } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<AIFormValues>({
+    defaultValues: {
+      OPENAI_API_KEY: config["OPENAI_API_KEY"],
+      GPT_ENGINE: config["GPT_ENGINE"],
+    },
+  });
+
+  const onSubmit = async (formData: AIFormValues) => {
+    const payload: Partial<AIFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "AI Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <>
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-3">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">GPT_ENGINE</h4>
+          <Controller
+            control={control}
+            name="GPT_ENGINE"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GPT_ENGINE"
+                name="GPT_ENGINE"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GPT_ENGINE)}
+                placeholder="gpt-3.5-turbo"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+          <p className="text-xs text-custom-text-400">
+            Choose an OpenAI engine.{" "}
+            <a
+              href="https://platform.openai.com/docs/models/overview"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              Learn more
+            </a>
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">API key</h4>
+          <div className="relative">
+            <Controller
+              control={control}
+              name="OPENAI_API_KEY"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="OPENAI_API_KEY"
+                  name="OPENAI_API_KEY"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.OPENAI_API_KEY)}
+                  placeholder="sk-asddassdfasdefqsdfasd23das3dasdcasd"
+                  className="w-full rounded-md !pr-10 font-medium"
+                />
+              )}
+            />
+            {showPassword ? (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(false)}
+              >
+                <EyeOff className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <p className="text-xs text-custom-text-400">
+            You will find your API key{" "}
+            <a
+              href="https://platform.openai.com/api-keys"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              here.
+            </a>
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </>
+  );
+};

god-mode/components/forms/email-form.tsx

@@ -0,0 +1,266 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input, ToggleSwitch } from "@plane/ui";
+import { Eye, EyeOff } from "lucide-react";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceEmailForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface EmailFormValues {
+  EMAIL_HOST: string;
+  EMAIL_PORT: string;
+  EMAIL_HOST_USER: string;
+  EMAIL_HOST_PASSWORD: string;
+  EMAIL_USE_TLS: string;
+  // EMAIL_USE_SSL: string;
+  EMAIL_FROM: string;
+}
+
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
+  const { config } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<EmailFormValues>({
+    defaultValues: {
+      EMAIL_HOST: config["EMAIL_HOST"],
+      EMAIL_PORT: config["EMAIL_PORT"],
+      EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
+      EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
+      EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
+      // EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_FROM: config["EMAIL_FROM"],
+    },
+  });
+
+  const onSubmit = async (formData: EmailFormValues) => {
+    const payload: Partial<EmailFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Email Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <>
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Host</h4>
+          <Controller
+            control={control}
+            name="EMAIL_HOST"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_HOST"
+                name="EMAIL_HOST"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_HOST)}
+                placeholder="email.google.com"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Port</h4>
+          <Controller
+            control={control}
+            name="EMAIL_PORT"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_PORT"
+                name="EMAIL_PORT"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_PORT)}
+                placeholder="8080"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+        </div>
+      </div>
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Username</h4>
+          <Controller
+            control={control}
+            name="EMAIL_HOST_USER"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_HOST_USER"
+                name="EMAIL_HOST_USER"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_HOST_USER)}
+                placeholder="getitdone@projectplane.so"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Password</h4>
+          <div className="relative">
+            <Controller
+              control={control}
+              name="EMAIL_HOST_PASSWORD"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="EMAIL_HOST_PASSWORD"
+                  name="EMAIL_HOST_PASSWORD"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.EMAIL_HOST_PASSWORD)}
+                  placeholder="Password"
+                  className="w-full rounded-md !pr-10 font-medium"
+                />
+              )}
+            />
+            {showPassword ? (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(false)}
+              >
+                <EyeOff className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">From address</h4>
+          <Controller
+            control={control}
+            name="EMAIL_FROM"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="EMAIL_FROM"
+                name="EMAIL_FROM"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.EMAIL_FROM)}
+                placeholder="no-reply@projectplane.so"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+          <p className="text-xs text-custom-text-400">
+            This is the email address your users will see when getting emails
+            from this instance. You will need to verify this address.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
+        <div className="mr-8 flex items-center gap-10 pt-4">
+          <div className="grow">
+            <div className="text-sm font-medium text-custom-text-100">
+              Turn TLS{" "}
+              {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
+            </div>
+            <div className="text-xs font-normal text-custom-text-300">
+              Use this if your email domain supports TLS.
+            </div>
+          </div>
+          <div className="shrink-0">
+            <Controller
+              control={control}
+              name="EMAIL_USE_TLS"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch
+                  value={Boolean(parseInt(value))}
+                  onChange={() => {
+                    Boolean(parseInt(value)) === true
+                      ? onChange("0")
+                      : onChange("1");
+                  }}
+                  size="sm"
+                />
+              )}
+            />
+          </div>
+        </div>
+
+        {/* <div className="flex items-center gap-10 pt-4 mr-8">
+          <div className="grow">
+            <div className="text-custom-text-100 font-medium text-sm">
+              Turn SSL {Boolean(parseInt(watch("EMAIL_USE_SSL"))) ? "off" : "on"}
+            </div>
+            <div className="text-custom-text-300 font-normal text-xs">
+              Most email domains support SSL. Use this to secure comms between this instance and your users.
+            </div>
+          </div>
+          <div className="shrink-0">
+            <Controller
+              control={control}
+              name="EMAIL_USE_SSL"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch
+                  value={Boolean(parseInt(value))}
+                  onChange={() => {
+                    Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
+                  }}
+                  size="sm"
+                />
+              )}
+            />
+          </div>
+        </div> */}
+      </div>
+
+      <div className="flex max-w-4xl items-center py-1">
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </>
+  );
+};

god-mode/components/forms/general-form.tsx

@@ -0,0 +1,130 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IInstance, IInstanceAdmin } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceGeneralForm {
+  instance: IInstance;
+  instanceAdmins: IInstanceAdmin[];
+}
+
+export interface GeneralFormValues {
+  instance_name: string;
+  // is_telemetry_enabled: boolean;
+}
+
+export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
+  const { instance, instanceAdmins } = props;
+  // store hooks
+  const { updateInstanceInfo } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GeneralFormValues>({
+    defaultValues: {
+      instance_name: instance.instance_name,
+      // is_telemetry_enabled: instance.is_telemetry_enabled,
+    },
+  });
+
+  const onSubmit = async (formData: GeneralFormValues) => {
+    const payload: Partial<GeneralFormValues> = { ...formData };
+
+    await updateInstanceInfo(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <>
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Name of instance</h4>
+          <Controller
+            control={control}
+            name="instance_name"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="instance_name"
+                name="instance_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.instance_name)}
+                placeholder="Instance Name"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Admin email</h4>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            value={instanceAdmins[0].user_detail.email ?? ""}
+            placeholder="Admin email"
+            className="w-full cursor-not-allowed !text-custom-text-400"
+            disabled
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Instance ID</h4>
+          <Input
+            id="instance_id"
+            name="instance_id"
+            type="text"
+            value={instance.instance_id}
+            className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
+            disabled
+          />
+        </div>
+      </div>
+
+      {/* <div className="flex items-center gap-12 pt-4">
+        <div>
+          <div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</div>
+          <div className="text-custom-text-300 font-normal text-xs">
+            Help us understand how you use Plane so we can build better for you.
+          </div>
+        </div>
+        <div>
+          <Controller
+            control={control}
+            name="is_telemetry_enabled"
+            render={({ field: { value, onChange } }) => <ToggleSwitch value={value} onChange={onChange} size="sm" />}
+          />
+        </div>
+      </div> */}
+
+      <div className="flex items-center py-1">
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </>
+  );
+};

god-mode/components/forms/github-config-form.tsx

@@ -0,0 +1,187 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Copy, Eye, EyeOff } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceGithubConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface GithubConfigFormValues {
+  GITHUB_CLIENT_ID: string;
+  GITHUB_CLIENT_SECRET: string;
+}
+
+export const InstanceGithubConfigForm: FC<IInstanceGithubConfigForm> = (
+  props
+) => {
+  const { config } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GithubConfigFormValues>({
+    defaultValues: {
+      GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
+      GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
+    },
+  });
+
+  const onSubmit = async (formData: GithubConfigFormValues) => {
+    const payload: Partial<GithubConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Github Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const originURL = typeof window !== "undefined" ? window.location.origin : "";
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid-col grid w-full grid-cols-1 justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client ID</h4>
+          <Controller
+            control={control}
+            name="GITHUB_CLIENT_ID"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GITHUB_CLIENT_ID"
+                name="GITHUB_CLIENT_ID"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GITHUB_CLIENT_ID)}
+                placeholder="70a44354520df8bd9bcd"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+          <p className="text-xs text-custom-text-400">
+            You will get this from your{" "}
+            <a
+              href="https://github.com/settings/applications/new"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              GitHub OAuth application settings.
+            </a>
+          </p>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client secret</h4>
+          <div className="relative">
+            <Controller
+              control={control}
+              name="GITHUB_CLIENT_SECRET"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="GITHUB_CLIENT_SECRET"
+                  name="GITHUB_CLIENT_SECRET"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.GITHUB_CLIENT_SECRET)}
+                  placeholder="9b0050f94ec1b744e32ce79ea4ffacd40d4119cb"
+                  className="w-full rounded-md !pr-10 font-medium"
+                />
+              )}
+            />
+            {showPassword ? (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(false)}
+              >
+                <EyeOff className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+
+          <p className="text-xs text-custom-text-400">
+            Your client secret is also found in your{" "}
+            <a
+              href="https://github.com/settings/applications/new"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              GitHub OAuth application settings.
+            </a>
+          </p>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Origin URL</h4>
+          <Button
+            variant="neutral-primary"
+            className="flex items-center justify-between py-2"
+            onClick={() => {
+              navigator.clipboard.writeText(originURL);
+              setToastAlert({
+                message:
+                  "The Origin URL has been successfully copied to your clipboard",
+                type: "success",
+                title: "Copied to clipboard",
+              });
+            }}
+          >
+            <p className="text-sm font-medium">{originURL}</p>
+            <Copy size={18} color="#B9B9B9" />
+          </Button>
+          <p className="text-xs text-custom-text-400">
+            We will auto-generate this. Paste this into the Authorization
+            callback URL field{" "}
+            <a
+              href="https://github.com/settings/applications/new"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              here.
+            </a>
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center">
+          <Button
+            variant="primary"
+            onClick={handleSubmit(onSubmit)}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Saving..." : "Save changes"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

god-mode/components/forms/google-config-form.tsx

@@ -0,0 +1,136 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Copy } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceGoogleConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface GoogleConfigFormValues {
+  GOOGLE_CLIENT_ID: string;
+  GOOGLE_CLIENT_SECRET: string;
+}
+
+export const InstanceGoogleConfigForm: FC<IInstanceGoogleConfigForm> = (
+  props
+) => {
+  const { config } = props;
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GoogleConfigFormValues>({
+    defaultValues: {
+      GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
+      GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
+    },
+  });
+
+  const onSubmit = async (formData: GoogleConfigFormValues) => {
+    const payload: Partial<GoogleConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Google Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  const originURL = typeof window !== "undefined" ? window.location.origin : "";
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="grid-col grid w-full grid-cols-1 justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Client ID</h4>
+          <Controller
+            control={control}
+            name="GOOGLE_CLIENT_ID"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="GOOGLE_CLIENT_ID"
+                name="GOOGLE_CLIENT_ID"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.GOOGLE_CLIENT_ID)}
+                placeholder="840195096245-0p2tstej9j5nc4l8o1ah2dqondscqc1g.apps.googleusercontent.com"
+                className="w-full rounded-md font-medium"
+              />
+            )}
+          />
+          <p className="text-xs text-custom-text-400">
+            Your client ID lives in your Google API Console.{" "}
+            <a
+              href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              Learn more
+            </a>
+          </p>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">JavaScript origin URL</h4>
+          <Button
+            variant="neutral-primary"
+            className="flex items-center justify-between py-2"
+            onClick={() => {
+              navigator.clipboard.writeText(originURL);
+              setToastAlert({
+                message:
+                  "The Origin URL has been successfully copied to your clipboard",
+                type: "success",
+                title: "Copied to clipboard",
+              });
+            }}
+          >
+            <p className="text-sm font-medium">{originURL}</p>
+            <Copy size={18} color="#B9B9B9" />
+          </Button>
+          <p className="text-xs text-custom-text-400">
+            We will auto-generate this. Paste this into your Authorized
+            JavaScript origins field. For this OAuth client{" "}
+            <a
+              href="https://console.cloud.google.com/apis/credentials/oauthclient"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              here.
+            </a>
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center">
+          <Button
+            variant="primary"
+            onClick={handleSubmit(onSubmit)}
+            loading={isSubmitting}
+          >
+            {isSubmitting ? "Saving..." : "Save changes"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

god-mode/components/forms/image-config-form.tsx

@@ -0,0 +1,119 @@
+import { FC, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+// ui
+import { Button, Input } from "@plane/ui";
+// types
+import { IFormattedInstanceConfiguration } from "@plane/types";
+// hooks
+import useInstance from "hooks/use-instance";
+import useToast from "hooks/use-toast";
+
+export interface IInstanceImageConfigForm {
+  config: IFormattedInstanceConfiguration;
+}
+
+export interface ImageConfigFormValues {
+  UNSPLASH_ACCESS_KEY: string;
+}
+
+export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (
+  props
+) => {
+  const { config } = props;
+  // states
+  const [showPassword, setShowPassword] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<ImageConfigFormValues>({
+    defaultValues: {
+      UNSPLASH_ACCESS_KEY: config["UNSPLASH_ACCESS_KEY"],
+    },
+  });
+
+  const onSubmit = async (formData: ImageConfigFormValues) => {
+    const payload: Partial<ImageConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Image Configuration Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
+  return (
+    <>
+      <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-2">
+        <div className="flex max-w-md flex-col gap-1">
+          <h4 className="text-sm">Access key from your Unsplash account</h4>
+          <div className="relative">
+            <Controller
+              control={control}
+              name="UNSPLASH_ACCESS_KEY"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="UNSPLASH_ACCESS_KEY"
+                  name="UNSPLASH_ACCESS_KEY"
+                  type={showPassword ? "text" : "password"}
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.UNSPLASH_ACCESS_KEY)}
+                  placeholder="oXgq-sdfadsaeweqasdfasdf3234234rassd"
+                  className="w-full rounded-md !pr-10 font-medium"
+                />
+              )}
+            />
+            {showPassword ? (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(false)}
+              >
+                <EyeOff className="h-4 w-4" />
+              </button>
+            ) : (
+              <button
+                className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+                onClick={() => setShowPassword(true)}
+              >
+                <Eye className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+          <p className="text-xs text-custom-text-400">
+            You will find your access key in your Unsplash developer console.{" "}
+            <a
+              href="https://unsplash.com/documentation#creating-a-developer-account"
+              target="_blank"
+              className="text-custom-primary-100 hover:underline"
+              rel="noreferrer"
+            >
+              Learn more.
+            </a>
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving..." : "Save changes"}
+        </Button>
+      </div>
+    </>
+  );
+};

god-mode/components/forms/index.ts

@@ -0,0 +1,6 @@
+export * from "./general-form";
+export * from "./ai-form";
+export * from "./email-form";
+export * from "./github-config-form";
+export * from "./google-config-form";
+export * from "./image-config-form";

god-mode/components/sidebar/help-section.tsx

@@ -0,0 +1,135 @@
+import { FC, useState, useRef } from "react";
+import { Transition } from "@headlessui/react";
+import Link from "next/link";
+import { FileText, HelpCircle, MoveLeft } from "lucide-react";
+// hooks
+import { useAppTheme } from "hooks/use-theme";
+// icons
+import { DiscordIcon, GithubIcon } from "@plane/ui";
+// assets
+import packageJson from "package.json";
+
+const helpOptions = [
+  {
+    name: "Documentation",
+    href: "https://docs.plane.so/",
+    Icon: FileText,
+  },
+  {
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
+  },
+  {
+    name: "Report a bug",
+    href: "https://github.com/makeplane/plane/issues/new/choose",
+    Icon: GithubIcon,
+  },
+];
+
+export const HelpSection: FC = () => {
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  // store
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  // refs
+  const helpOptionsRef = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <div
+      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
+        sidebarCollapsed ? "flex-col" : ""
+      }`}
+    >
+      <div
+        className={`flex items-center gap-1 ${
+          sidebarCollapsed ? "flex-col justify-center" : "w-full justify-end"
+        }`}
+      >
+        <button
+          type="button"
+          className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
+            sidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+        >
+          <HelpCircle className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
+          onClick={() => toggleSidebar()}
+        >
+          <MoveLeft className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+            sidebarCollapsed ? "w-full" : ""
+          }`}
+          onClick={() => toggleSidebar()}
+        >
+          <MoveLeft
+            className={`h-3.5 w-3.5 duration-300 ${
+              sidebarCollapsed ? "rotate-180" : ""
+            }`}
+          />
+        </button>
+      </div>
+
+      <div className="relative">
+        <Transition
+          show={isNeedHelpOpen}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <div
+            className={`absolute bottom-2 min-w-[10rem] ${
+              sidebarCollapsed ? "left-full" : "-left-[75px]"
+            } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
+            ref={helpOptionsRef}
+          >
+            <div className="space-y-1 pb-2">
+              {helpOptions.map(({ name, Icon, href }) => {
+                if (href)
+                  return (
+                    <Link href={href} key={name} target="_blank">
+                      <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
+                        <div className="grid flex-shrink-0 place-items-center">
+                          <Icon
+                            className="h-3.5 w-3.5 text-custom-text-200"
+                            size={14}
+                          />
+                        </div>
+                        <span className="text-xs">{name}</span>
+                      </div>
+                    </Link>
+                  );
+                else
+                  return (
+                    <button
+                      key={name}
+                      type="button"
+                      className="flex w-full items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80"
+                    >
+                      <div className="grid flex-shrink-0 place-items-center">
+                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                      </div>
+                      <span className="text-xs">{name}</span>
+                    </button>
+                  );
+              })}
+            </div>
+            <div className="px-2 pb-1 pt-2 text-[10px]">
+              Version: v{packageJson.version}
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  );
+};

god-mode/components/sidebar/index.ts

@@ -0,0 +1,3 @@
+export * from "./help-section";
+export * from "./sidebar-menu";
+export * from "./sidebar-dropdown";

god-mode/components/sidebar/sidebar-dropdown.tsx

@@ -0,0 +1,128 @@
+import { Fragment } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+// components
+import { Menu, Transition } from "@headlessui/react";
+// icons
+import { LogOut, UserCog2, Palette } from "lucide-react";
+// hooks
+import { useAppTheme } from "hooks/use-theme";
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// ui
+import { Avatar } from "@plane/ui";
+
+export const SidebarDropdown = observer(() => {
+  // router
+  const router = useRouter();
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  const { signOut, currentUser } = useUser();
+  // hooks
+  const { setToastAlert } = useToast();
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const handleSignOut = async () => {
+    await signOut()
+      .then(() => {
+        mutate("CURRENT_USER_DETAILS", null);
+        setTheme("system");
+        router.push("/");
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      );
+  };
+
+  const handleThemeSwitch = () => {
+    const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+  };
+
+  return (
+    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+      <div className="h-full w-full truncate">
+        <div
+          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
+            sidebarCollapsed ? "justify-center" : ""
+          }`}
+        >
+          <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+            <UserCog2 className="h-5 w-5 text-custom-text-200" />
+          </div>
+
+          {!sidebarCollapsed && (
+            <div className="flex w-full gap-2">
+              <h4 className="grow truncate text-base font-medium text-custom-text-200">
+                Instance admin
+              </h4>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!sidebarCollapsed && currentUser && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <Avatar
+              name={currentUser.display_name}
+              src={currentUser.avatar}
+              size={24}
+              shape="square"
+              className="!text-base"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items
+              className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
+          divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+            >
+              <div className="flex flex-col gap-2.5 pb-2">
+                <span className="px-2 text-custom-sidebar-text-200">
+                  {currentUser?.email}
+                </span>
+              </div>
+              <div className="py-2">
+                <Menu.Item
+                  as="button"
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                  onClick={handleThemeSwitch}
+                >
+                  <Palette className="h-4 w-4 stroke-[1.5]" />
+                  Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+                </Menu.Item>
+              </div>
+              <div className="py-2">
+                <Menu.Item
+                  as="button"
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                  onClick={handleSignOut}
+                >
+                  <LogOut className="h-4 w-4 stroke-[1.5]" />
+                  Sign out
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

god-mode/components/sidebar/sidebar-menu-hamburger-toogle.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useAppTheme } from "hooks/use-theme";
+// icons
+import { Menu } from "lucide-react";
+
+export const SidebarHamburgerToggle: FC = observer(() => {
+  const { toggleSidebar } = useAppTheme();
+  return (
+    <div
+      className="w-7 h-7 rounded flex justify-center items-center bg-custom-background-80 transition-all hover:bg-custom-background-90 cursor-pointer group md:hidden"
+      onClick={() => toggleSidebar()}
+    >
+      <Menu
+        size={14}
+        className="text-custom-text-200 group-hover:text-custom-text-100 transition-all"
+      />
+    </div>
+  );
+});

god-mode/components/sidebar/sidebar-menu.tsx

@@ -0,0 +1,110 @@
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+// hooks
+import { useAppTheme } from "hooks/use-theme";
+// ui
+import { Tooltip } from "@plane/ui";
+import { observer } from "mobx-react-lite";
+
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details",
+    href: `/`,
+  },
+  {
+    Icon: Mail,
+    name: "Email",
+    description: "Set up emails to your users",
+    href: `/email`,
+  },
+  {
+    Icon: Lock,
+    name: "SSO and OAuth",
+    description: "Configure your Google and GitHub SSOs",
+    href: `/authorization`,
+  },
+  {
+    Icon: BrainCog,
+    name: "Artificial intelligence",
+    description: "Configure your OpenAI creds",
+    href: `/ai`,
+  },
+  {
+    Icon: Image,
+    name: "Images in Plane",
+    description: "Allow third-party image libraries",
+    href: `/image`,
+  },
+];
+
+export const SidebarMenu = observer(() => {
+  // store hooks
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  // router
+  const pathName = usePathname();
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-6">
+      {INSTANCE_ADMIN_LINKS.map((item, index) => {
+        const isActive =
+          item.name === "Settings"
+            ? pathName.includes(item.href)
+            : pathName === item.href;
+
+        return (
+          <Link key={index} href={item.href} onClick={handleItemClick}>
+            <div>
+              <Tooltip
+                tooltipContent={item.name}
+                position="right"
+                className="ml-2"
+                disabled={!sidebarCollapsed}
+              >
+                <div
+                  className={`group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none ${
+                    isActive
+                      ? "bg-custom-primary-100/10 text-custom-primary-100"
+                      : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                  } ${sidebarCollapsed ? "justify-center" : ""}`}
+                >
+                  {<item.Icon className="h-4 w-4" />}
+                  {!sidebarCollapsed && (
+                    <div className="flex flex-col leading-snug">
+                      <span
+                        className={`text-sm font-medium ${
+                          isActive
+                            ? "text-custom-primary-100"
+                            : "text-custom-sidebar-text-200"
+                        }`}
+                      >
+                        {item.name}
+                      </span>
+                      <span
+                        className={`text-[10px] ${
+                          isActive
+                            ? "text-custom-primary-90"
+                            : "text-custom-sidebar-text-400"
+                        }`}
+                      >
+                        {item.description}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </Tooltip>
+            </div>
+          </Link>
+        );
+      })}
+    </div>
+  );
+});

god-mode/components/toast-alert/index.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+// hooks
+import useToast from "hooks/use-toast";
+// icons
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
+
+const ToastAlerts = () => {
+  const { alerts, removeAlert } = useToast();
+
+  if (!alerts) return null;
+
+  return (
+    <div className="pointer-events-none fixed right-5 top-5 z-50 h-full w-80 space-y-5 overflow-hidden">
+      {alerts.map((alert) => (
+        <div className="relative overflow-hidden rounded-md text-white" key={alert.id}>
+          <div className="absolute right-1 top-1">
+            <button
+              type="button"
+              className="pointer-events-auto inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2"
+              onClick={() => removeAlert(alert.id)}
+            >
+              <span className="sr-only">Dismiss</span>
+              <X className="h-5 w-5" aria-hidden="true" />
+            </button>
+          </div>
+          <div
+            className={`px-2 py-4 ${
+              alert.type === "success"
+                ? "bg-[#06d6a0]"
+                : alert.type === "error"
+                  ? "bg-[#ef476f]"
+                  : alert.type === "warning"
+                    ? "bg-[#e98601]"
+                    : "bg-[#1B9aaa]"
+            }`}
+          >
+            <div className="flex items-center gap-x-3">
+              <div className="flex-shrink-0">
+                {alert.type === "success" ? (
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
+                ) : alert.type === "error" ? (
+                  <XCircle className="h-8 w-8" />
+                ) : alert.type === "warning" ? (
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
+                ) : (
+                  <Info className="h-8 w-8" />
+                )}
+              </div>
+              <div>
+                <p className="font-semibold">{alert.title}</p>
+                {alert.message && <p className="mt-1 text-xs">{alert.message}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ToastAlerts;

god-mode/constants/swr-config.ts

@@ -0,0 +1,8 @@
+export const SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnMount: true,
+  refreshInterval: 600000,
+  errorRetryCount: 3,
+};

god-mode/helpers/common.helper.ts

@@ -0,0 +1,3 @@
+export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL
+  ? process.env.NEXT_PUBLIC_API_BASE_URL
+  : "";

god-mode/hooks/use-instance.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+// mobx store
+import { InstanceContext } from "lib/instance-provider";
+// types
+import { IInstanceStore } from "store/instance.store";
+
+const useInstance = (): IInstanceStore => {
+  const context = useContext(InstanceContext);
+  if (context === undefined)
+    throw new Error("useInstance must be used within InstanceProvider");
+  return context;
+};
+
+export default useInstance;

god-mode/hooks/use-outside-click-detector.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect } from "react";
+
+const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  });
+};
+
+export default useOutsideClickDetector;

god-mode/hooks/use-theme.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+// mobx store
+import { ThemeContext } from "lib/theme-provider";
+// types
+import { IThemeStore } from "store/theme.store";
+
+export const useAppTheme = (): IThemeStore => {
+  const context = useContext(ThemeContext);
+  if (context === undefined)
+    throw new Error("useTheme must be used within ThemeProvider");
+  return context;
+};
+
+export default useAppTheme;

god-mode/hooks/use-toast.tsx

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { toastContext } from "lib/toast-provider";
+
+const useToast = () => {
+  const toastContextData = useContext(toastContext);
+  return toastContextData;
+};
+
+export default useToast;

god-mode/hooks/use-user.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+// mobx store
+import { UserContext } from "lib/user-provider";
+// types
+import { IUserStore } from "store/user.store";
+
+const useUser = (): IUserStore => {
+  const context = useContext(UserContext);
+  if (context === undefined)
+    throw new Error("useUser must be used within UserProvider");
+  return context;
+};
+
+export default useUser;

god-mode/lib/instance-provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { createContext } from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+// mobx store
+import { InstanceStore } from "store/instance.store";
+
+let instanceStore = new InstanceStore();
+
+export const InstanceContext = createContext<InstanceStore>(instanceStore);
+
+const initializeStore = () => {
+  const _instanceStore = instanceStore ?? new InstanceStore();
+  if (typeof window === "undefined") return _instanceStore;
+  if (!instanceStore) instanceStore = _instanceStore;
+  return _instanceStore;
+};
+
+export function InstanceProvider({ children, ...props }: ThemeProviderProps) {
+  const store = initializeStore();
+  return (
+    <>
+      <InstanceContext.Provider value={store}>
+        <NextThemesProvider {...props}>{children}</NextThemesProvider>
+      </InstanceContext.Provider>
+    </>
+  );
+}

god-mode/lib/theme-provider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+
+import { createContext } from "react";
+// mobx store
+import { ThemeStore } from "store/theme.store";
+
+let themeStore = new ThemeStore();
+
+export const ThemeContext = createContext<ThemeStore>(themeStore);
+
+const initializeStore = () => {
+  const _themeStore = themeStore ?? new ThemeStore();
+  if (typeof window === "undefined") return _themeStore;
+  if (!themeStore) themeStore = _themeStore;
+  return _themeStore;
+};
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const store = initializeStore();
+  return (
+    <>
+      <ThemeContext.Provider value={store}>
+        <NextThemesProvider {...props}>{children}</NextThemesProvider>
+      </ThemeContext.Provider>
+    </>
+  );
+}

god-mode/lib/toast-provider.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { createContext, useCallback, useReducer } from "react";
+// uuid
+import { v4 as uuid } from "uuid";
+// components
+import ToastAlert from "components/toast-alert";
+
+export const toastContext = createContext<ContextType>({} as ContextType);
+
+// types
+type ToastAlert = {
+  id: string;
+  title: string;
+  message?: string;
+  type: "success" | "error" | "warning" | "info";
+};
+
+type ReducerActionType = {
+  type: "SET_TOAST_ALERT" | "REMOVE_TOAST_ALERT";
+  payload: ToastAlert;
+};
+
+type ContextType = {
+  alerts?: ToastAlert[];
+  removeAlert: (id: string) => void;
+  setToastAlert: (data: {
+    title: string;
+    type?: "success" | "error" | "warning" | "info" | undefined;
+    message?: string | undefined;
+  }) => void;
+};
+
+type StateType = {
+  toastAlerts?: ToastAlert[];
+};
+
+type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;
+
+export const initialState: StateType = {
+  toastAlerts: [],
+};
+
+export const reducer: ReducerFunctionType = (state, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case "SET_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: [...(state.toastAlerts ?? []), payload],
+      };
+
+    case "REMOVE_TOAST_ALERT":
+      return {
+        ...state,
+        toastAlerts: state.toastAlerts?.filter((toastAlert) => toastAlert.id !== payload.id),
+      };
+
+    default: {
+      return state;
+    }
+  }
+};
+
+export const ToastContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const removeAlert = useCallback((id: string) => {
+    dispatch({
+      type: "REMOVE_TOAST_ALERT",
+      payload: { id, title: "", message: "", type: "success" },
+    });
+  }, []);
+
+  const setToastAlert = useCallback(
+    (data: { title: string; type?: "success" | "error" | "warning" | "info"; message?: string }) => {
+      const id = uuid();
+      const { title, type, message } = data;
+      dispatch({
+        type: "SET_TOAST_ALERT",
+        payload: { id, title, message, type: type ?? "success" },
+      });
+
+      const timer = setTimeout(() => {
+        removeAlert(id);
+        clearTimeout(timer);
+      }, 3000);
+    },
+    [removeAlert]
+  );
+
+  return (
+    <toastContext.Provider value={{ setToastAlert, removeAlert, alerts: state.toastAlerts }}>
+      <ToastAlert />
+      {children}
+    </toastContext.Provider>
+  );
+};

god-mode/lib/user-provider.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { createContext } from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ThemeProviderProps } from "next-themes/dist/types";
+// mobx store
+import { UserStore } from "store/user.store";
+
+let userStore = new UserStore();
+
+export const UserContext = createContext<UserStore>(userStore);
+
+const initializeStore = () => {
+  const _userStore = userStore ?? new UserStore();
+  if (typeof window === "undefined") return _userStore;
+  if (!userStore) userStore = _userStore;
+  return _userStore;
+};
+
+export function UserProvider({ children, ...props }: ThemeProviderProps) {
+  const store = initializeStore();
+  return (
+    <>
+      <UserContext.Provider value={store}>
+        <NextThemesProvider {...props}>{children}</NextThemesProvider>
+      </UserContext.Provider>
+    </>
+  );
+}

god-mode/lib/wrappers/app-wrapper.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { SWRConfig } from "swr";
+// lib
+import { ThemeProvider } from "lib/theme-provider";
+import { ToastContextProvider } from "lib/toast-provider";
+// hooks
+import useAppTheme from "hooks/use-theme";
+import useUser from "hooks/use-user";
+// constants
+import { SWR_CONFIG } from "constants/swr-config";
+
+interface IAppWrapper {
+  children: ReactNode;
+}
+
+const AppWrapper: FC<IAppWrapper> = observer(({ children }) => {
+  // store hooks
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { currentUser } = useUser();
+
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
+  useEffect(() => {
+    const localValue =
+      localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue
+      ? localValue === "true"
+        ? true
+        : false
+      : false;
+
+    if (localValue && sidebarCollapsed === undefined)
+      toggleSidebar(localBoolValue);
+  }, [sidebarCollapsed, currentUser, toggleSidebar]);
+
+  return (
+    <ThemeProvider
+      themes={["light", "dark"]}
+      defaultTheme="system"
+      enableSystem
+    >
+      <ToastContextProvider>
+        <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
+      </ToastContextProvider>
+    </ThemeProvider>
+  );
+});
+
+export default AppWrapper;

god-mode/lib/wrappers/user-auth-wrapper.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+// import { useRouter, usePathname } from "next/navigation";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { Spinner } from "@plane/ui";
+
+export interface IUserAuthWrapper {
+  children: ReactNode;
+}
+
+export const UserAuthWrapper: FC<IUserAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const {
+    currentUser,
+    currentUserLoader,
+    currentUserError,
+    fetchCurrentUser,
+    fetchCurrentUserInstanceAdminStatus,
+  } = useUser();
+  // router
+  // const router = useRouter();
+  // const pathname = usePathname();
+  // fetching user information
+  useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+  // fetching current user instance admin status
+  useSWRImmutable(
+    "CURRENT_USER_INSTANCE_ADMIN_STATUS",
+    () => fetchCurrentUserInstanceAdminStatus(),
+    {
+      shouldRetryOnError: false,
+    }
+  );
+
+  if (currentUserLoader && !currentUser && !currentUserError) {
+    return (
+      <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  // TODO: Login page
+  if (currentUserError) {
+    // router.push(`/?next_path=${pathname}`);
+    // return null;
+    return <div>Login Page</div>;
+  }
+
+  return <>{children}</>;
+});

god-mode/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

god-mode/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;

god-mode/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "god-mode",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "turbo run develop",
+    "develop": "next dev --port 3333",
+    "build": "next build",
+    "preview": "next build && next start",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@plane/types": "*",
+    "@plane/ui": "*",
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "10.4.14",
+    "axios": "^1.6.7",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
+    "js-cookie": "^3.0.5",
+    "mobx": "^6.12.0",
+    "mobx-react-lite": "^4.0.5",
+    "next": "^14.1.0",
+    "next-auth": "^4.24.5",
+    "next-themes": "^0.2.1",
+    "postcss": "8.4.23",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^2.2.4",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@types/node": "18.16.1",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "eslint-config-custom": "*",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*"
+  }
+}

god-mode/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

god-mode/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

god-mode/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

god-mode/services/api.service.ts

@@ -0,0 +1,94 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+export abstract class APIService {
+  protected baseURL: string;
+  protected headers: any = {};
+
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
+  }
+
+  setRefreshToken(token: string) {
+    Cookies.set("refreshToken", token, { expires: 30 });
+  }
+
+  getRefreshToken() {
+    return Cookies.get("refreshToken");
+  }
+
+  purgeRefreshToken() {
+    Cookies.remove("refreshToken", { path: "/" });
+  }
+
+  setAccessToken(token: string) {
+    Cookies.set("accessToken", token, { expires: 30 });
+  }
+
+  getAccessToken() {
+    return Cookies.get("accessToken");
+  }
+
+  purgeAccessToken() {
+    Cookies.remove("accessToken", { path: "/" });
+  }
+
+  getHeaders() {
+    return {
+      Authorization: `Bearer ${this.getAccessToken()}`,
+    };
+  }
+
+  get(url: string, config = {}): Promise<any> {
+    return axios({
+      method: "get",
+      url: this.baseURL + url,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  post(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "post",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  put(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "put",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  patch(url: string, data = {}, config = {}): Promise<any> {
+    return axios({
+      method: "patch",
+      url: this.baseURL + url,
+      data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  delete(url: string, data?: any, config = {}): Promise<any> {
+    return axios({
+      method: "delete",
+      url: this.baseURL + url,
+      data: data,
+      headers: this.getAccessToken() ? this.getHeaders() : {},
+      ...config,
+    });
+  }
+
+  request(config = {}) {
+    return axios(config);
+  }
+}

god-mode/services/auth.service.ts

@@ -0,0 +1,148 @@
+// services
+import { APIService } from "services/api.service";
+// types
+import {
+  IEmailCheckData,
+  IEmailCheckResponse,
+  ILoginTokenResponse,
+  IMagicSignInData,
+  IPasswordSignInData,
+} from "@plane/types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class AuthService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async emailCheck(data: IEmailCheckData): Promise<IEmailCheckResponse> {
+    return this.post("/api/email-check/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async passwordSignIn(data: IPasswordSignInData): Promise<ILoginTokenResponse> {
+    return this.post("/api/sign-in/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async sendResetPasswordLink(data: { email: string }): Promise<any> {
+    return this.post(`/api/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async setPassword(data: { password: string }): Promise<any> {
+    return this.post(`/api/users/me/set-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async resetPassword(
+    uidb64: string,
+    token: string,
+    data: {
+      new_password: string;
+    }
+  ): Promise<ILoginTokenResponse> {
+    return this.post(`/api/reset-password/${uidb64}/${token}/`, data, { headers: {} })
+      .then((response) => {
+        if (response?.status === 200) {
+          this.setAccessToken(response?.data?.access_token);
+          this.setRefreshToken(response?.data?.refresh_token);
+          return response?.data;
+        }
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async emailSignUp(data: { email: string; password: string }): Promise<ILoginTokenResponse> {
+    return this.post("/api/sign-up/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async socialAuth(data: any): Promise<ILoginTokenResponse> {
+    return this.post("/api/social-auth/", data, { headers: {} })
+      .then((response) => {
+        this.setAccessToken(response?.data?.access_token);
+        this.setRefreshToken(response?.data?.refresh_token);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async generateUniqueCode(data: { email: string }): Promise<any> {
+    return this.post("/api/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async magicSignIn(data: IMagicSignInData): Promise<any> {
+    return await this.post("/api/magic-sign-in/", data, { headers: {} })
+      .then((response) => {
+        if (response?.status === 200) {
+          this.setAccessToken(response?.data?.access_token);
+          this.setRefreshToken(response?.data?.refresh_token);
+          return response?.data;
+        }
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async instanceAdminSignIn(data: IPasswordSignInData): Promise<ILoginTokenResponse> {
+    return await this.post("/api/instances/admins/sign-in/", data, { headers: {} })
+      .then((response) => {
+        if (response?.status === 200) {
+          this.setAccessToken(response?.data?.access_token);
+          this.setRefreshToken(response?.data?.refresh_token);
+          return response?.data;
+        }
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async signOut(): Promise<any> {
+    return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
+      .then((response) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        return response?.data;
+      })
+      .catch((error) => {
+        this.purgeAccessToken();
+        this.purgeRefreshToken();
+        throw error?.response?.data;
+      });
+  }
+}

god-mode/services/instance.service.ts

@@ -0,0 +1,53 @@
+import { APIService } from "services/api.service";
+// types
+import type { IFormattedInstanceConfiguration, IInstance, IInstanceAdmin, IInstanceConfiguration } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class InstanceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getInstanceInfo(): Promise<IInstance> {
+    return this.get("/api/instances/", { headers: {} })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async getInstanceAdmins(): Promise<IInstanceAdmin[]> {
+    return this.get("/api/instances/admins/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
+    return this.patch("/api/instances/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getInstanceConfigurations() {
+    return this.get("/api/instances/configurations/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async updateInstanceConfigurations(
+    data: Partial<IFormattedInstanceConfiguration>
+  ): Promise<IInstanceConfiguration[]> {
+    return this.patch("/api/instances/configurations/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}

god-mode/services/user.service.ts

@@ -0,0 +1,35 @@
+// services
+import { APIService } from "services/api.service";
+// types
+import type { IUser, IInstanceAdminStatus } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class UserService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  currentUserConfig() {
+    return {
+      url: `${this.baseURL}/api/users/me/`,
+      headers: this.getHeaders(),
+    };
+  }
+
+  async currentUser(): Promise<IUser> {
+    return this.get("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async currentUserInstanceAdminStatus(): Promise<IInstanceAdminStatus> {
+    return this.get("/api/users/me/instance-admin/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}

god-mode/store/instance.store.ts

@@ -0,0 +1,149 @@
+import {
+  observable,
+  action,
+  computed,
+  makeObservable,
+  runInAction,
+} from "mobx";
+// types
+import {
+  IInstance,
+  IInstanceConfiguration,
+  IFormattedInstanceConfiguration,
+  IInstanceAdmin,
+} from "@plane/types";
+// services
+import { InstanceService } from "services/instance.service";
+
+export interface IInstanceStore {
+  // issues
+  instance: IInstance | null;
+  instanceAdmins: IInstanceAdmin[] | null;
+  configurations: IInstanceConfiguration[] | null;
+  // computed
+  formattedConfig: IFormattedInstanceConfiguration | null;
+  // action
+  fetchInstanceInfo: () => Promise<IInstance>;
+  fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
+  updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
+  fetchInstanceConfigurations: () => Promise<any>;
+  updateInstanceConfigurations: (
+    data: Partial<IFormattedInstanceConfiguration>
+  ) => Promise<IInstanceConfiguration[]>;
+}
+
+export class InstanceStore implements IInstanceStore {
+  instance: IInstance | null = null;
+  instanceAdmins: IInstanceAdmin[] | null = null;
+  configurations: IInstanceConfiguration[] | null = null;
+  // service
+  instanceService;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      instance: observable,
+      instanceAdmins: observable,
+      configurations: observable,
+      // computed
+      formattedConfig: computed,
+      // actions
+      fetchInstanceInfo: action,
+      fetchInstanceAdmins: action,
+      updateInstanceInfo: action,
+      fetchInstanceConfigurations: action,
+      updateInstanceConfigurations: action,
+    });
+
+    this.instanceService = new InstanceService();
+  }
+
+  /**
+   * computed value for instance configurations data for forms.
+   * @returns configurations in the form of {key, value} pair.
+   */
+  get formattedConfig() {
+    if (!this.configurations) return null;
+    return this.configurations?.reduce(
+      (formData: IFormattedInstanceConfiguration, config) => {
+        formData[config.key] = config.value;
+        return formData;
+      },
+      {}
+    );
+  }
+
+  /**
+   * fetch instance info from API
+   */
+  fetchInstanceInfo = async () => {
+    try {
+      const instance = await this.instanceService.getInstanceInfo();
+      runInAction(() => {
+        this.instance = instance;
+      });
+      return instance;
+    } catch (error) {
+      console.log("Error while fetching the instance info");
+      throw error;
+    }
+  };
+
+  /**
+   * fetch instance admins from API
+   */
+  fetchInstanceAdmins = async () => {
+    const instanceAdmins = await this.instanceService.getInstanceAdmins();
+    runInAction(() => {
+      this.instanceAdmins = instanceAdmins;
+    });
+    return instanceAdmins;
+  };
+
+  /**
+   * update instance info
+   * @param data
+   */
+  updateInstanceInfo = async (data: Partial<IInstance>) =>
+    await this.instanceService.updateInstanceInfo(data).then((response) => {
+      runInAction(() => {
+        this.instance = response;
+      });
+      return response;
+    });
+
+  /**
+   * fetch instance configurations from API
+   */
+  fetchInstanceConfigurations = async () => {
+    try {
+      const configurations =
+        await this.instanceService.getInstanceConfigurations();
+      runInAction(() => {
+        this.configurations = configurations;
+      });
+      return configurations;
+    } catch (error) {
+      console.log("Error while fetching the instance configurations");
+      throw error;
+    }
+  };
+
+  /**
+   * update instance configurations
+   * @param data
+   */
+  updateInstanceConfigurations = async (
+    data: Partial<IFormattedInstanceConfiguration>
+  ) =>
+    await this.instanceService
+      .updateInstanceConfigurations(data)
+      .then((response) => {
+        runInAction(() => {
+          this.configurations = this.configurations
+            ? [...this.configurations, ...response]
+            : response;
+        });
+        return response;
+      });
+}

god-mode/store/theme.store.ts

@@ -0,0 +1,206 @@
+// mobx
+import { action, observable, makeObservable } from "mobx";
+
+type TRgb = { r: number; g: number; b: number };
+
+type TShades = {
+  10: TRgb;
+  20: TRgb;
+  30: TRgb;
+  40: TRgb;
+  50: TRgb;
+  60: TRgb;
+  70: TRgb;
+  80: TRgb;
+  90: TRgb;
+  100: TRgb;
+  200: TRgb;
+  300: TRgb;
+  400: TRgb;
+  500: TRgb;
+  600: TRgb;
+  700: TRgb;
+  800: TRgb;
+  900: TRgb;
+};
+
+export interface IThemeStore {
+  // observables
+  theme: string | undefined;
+  sidebarCollapsed: boolean | undefined;
+  // actions
+  toggleSidebar: (collapsed?: boolean) => void;
+  setTheme: (theme: any) => void;
+}
+
+export class ThemeStore implements IThemeStore {
+  // observables
+  sidebarCollapsed: boolean | undefined = undefined;
+  theme: string | undefined = undefined;
+  themePallette: any | undefined = undefined;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      sidebarCollapsed: observable.ref,
+      theme: observable.ref,
+      // action
+      toggleSidebar: action,
+      setTheme: action,
+      // computed
+    });
+  }
+
+  /**
+   * Toggle the sidebar collapsed state
+   * @param collapsed
+   */
+  toggleSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+    } else {
+      this.sidebarCollapsed = collapsed;
+    }
+    localStorage.setItem(
+      "god_mode_sidebar_collapsed",
+      this.sidebarCollapsed.toString()
+    );
+  };
+
+  /**
+   * Sets the user theme and applies it to the platform
+   * @param _theme
+   */
+  setTheme = async (_theme: { theme: any }) => {
+    try {
+      const currentTheme: string = _theme?.theme?.theme?.toString();
+      // updating the local storage theme value
+      localStorage.setItem("theme", currentTheme);
+      // updating the mobx theme value
+      this.theme = currentTheme;
+      // applying the theme to platform if the selected theme is custom
+      if (currentTheme === "custom" && this.themePallette) {
+        this.applyTheme(
+          this.themePallette?.theme?.palette !== ",,,,"
+            ? this.themePallette?.theme?.palette
+            : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          this.themePallette?.theme?.darkPalette
+        );
+      } else this.unsetCustomCssVariables();
+    } catch (error) {
+      console.error("setting user theme error", error);
+    }
+  };
+
+  calculateShades = (hexValue: string): TShades => {
+    const shades: Partial<TShades> = {};
+    const { r, g, b } = this.hexToRgb(hexValue);
+
+    const convertHexToSpecificShade = (shade: number): TRgb => {
+      if (shade <= 100) {
+        const decimalValue = (100 - shade) / 100;
+
+        const newR = Math.floor(r + (255 - r) * decimalValue);
+        const newG = Math.floor(g + (255 - g) * decimalValue);
+        const newB = Math.floor(b + (255 - b) * decimalValue);
+
+        return {
+          r: newR,
+          g: newG,
+          b: newB,
+        };
+      } else {
+        const decimalValue = 1 - Math.ceil((shade - 100) / 100) / 10;
+
+        const newR = Math.ceil(r * decimalValue);
+        const newG = Math.ceil(g * decimalValue);
+        const newB = Math.ceil(b * decimalValue);
+
+        return {
+          r: newR,
+          g: newG,
+          b: newB,
+        };
+      }
+    };
+
+    for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10))
+      shades[i as keyof TShades] = convertHexToSpecificShade(i);
+
+    return shades as TShades;
+  };
+
+  unsetCustomCssVariables = () => {
+    for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
+      const dom = document.querySelector<HTMLElement>("[data-theme='custom']");
+      dom?.style.removeProperty(`--color-background-${i}`);
+      dom?.style.removeProperty(`--color-text-${i}`);
+      dom?.style.removeProperty(`--color-border-${i}`);
+      dom?.style.removeProperty(`--color-primary-${i}`);
+      dom?.style.removeProperty(`--color-sidebar-background-${i}`);
+      dom?.style.removeProperty(`--color-sidebar-text-${i}`);
+      dom?.style.removeProperty(`--color-sidebar-border-${i}`);
+      dom?.style.removeProperty("--color-scheme");
+    }
+  };
+
+  applyTheme = (palette: string, isDarkPalette: boolean) => {
+    if (!palette) return;
+    const dom = document?.querySelector<HTMLElement>("[data-theme='custom']");
+    // palette: [bg, text, primary, sidebarBg, sidebarText]
+    const values: string[] = palette.split(",");
+    values.push(isDarkPalette ? "dark" : "light");
+
+    const bgShades = this.calculateShades(values[0]);
+    const textShades = this.calculateShades(values[1]);
+    const primaryShades = this.calculateShades(values[2]);
+    const sidebarBackgroundShades = this.calculateShades(values[3]);
+    const sidebarTextShades = this.calculateShades(values[4]);
+
+    for (let i = 10; i <= 900; i >= 100 ? (i += 100) : (i += 10)) {
+      const shade = i as keyof TShades;
+
+      const bgRgbValues = `${bgShades[shade].r}, ${bgShades[shade].g}, ${bgShades[shade].b}`;
+      const textRgbValues = `${textShades[shade].r}, ${textShades[shade].g}, ${textShades[shade].b}`;
+      const primaryRgbValues = `${primaryShades[shade].r}, ${primaryShades[shade].g}, ${primaryShades[shade].b}`;
+      const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
+      const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
+
+      dom?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
+      dom?.style.setProperty(`--color-text-${shade}`, textRgbValues);
+      dom?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
+      dom?.style.setProperty(
+        `--color-sidebar-background-${shade}`,
+        sidebarBackgroundRgbValues
+      );
+      dom?.style.setProperty(
+        `--color-sidebar-text-${shade}`,
+        sidebarTextRgbValues
+      );
+
+      if (i >= 100 && i <= 400) {
+        const borderShade =
+          i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
+
+        dom?.style.setProperty(
+          `--color-border-${shade}`,
+          `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
+        );
+        dom?.style.setProperty(
+          `--color-sidebar-border-${shade}`,
+          `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
+        );
+      }
+    }
+
+    dom?.style.setProperty("--color-scheme", values[5]);
+  };
+
+  hexToRgb = (hex: string): TRgb => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    return { r, g, b };
+  };
+}

god-mode/store/user.store.ts

@@ -0,0 +1,100 @@
+import { action, observable, runInAction, makeObservable } from "mobx";
+// services
+import { UserService } from "services/user.service";
+import { AuthService } from "services/auth.service";
+// interfaces
+import { IUser } from "@plane/types";
+
+export interface IUserStore {
+  // states
+  currentUserError: any | null;
+  currentUserLoader: boolean;
+  // observables
+  isUserLoggedIn: boolean | null;
+  currentUser: IUser | null;
+  isUserInstanceAdmin: boolean | null;
+  // fetch actions
+  fetchCurrentUser: () => Promise<IUser>;
+  fetchCurrentUserInstanceAdminStatus: () => Promise<boolean>;
+
+  signOut: () => Promise<void>;
+}
+
+export class UserStore implements IUserStore {
+  // states
+  currentUserError: any | null = null;
+  currentUserLoader: boolean = false;
+  // observables
+  isUserLoggedIn: boolean | null = null;
+  currentUser: IUser | null = null;
+  isUserInstanceAdmin: boolean | null = null;
+
+  // services
+  userService;
+  authService;
+
+  constructor() {
+    makeObservable(this, {
+      // states
+      currentUserError: observable.ref,
+      currentUserLoader: observable.ref,
+      // observable
+      currentUser: observable,
+      isUserInstanceAdmin: observable.ref,
+      // action
+      fetchCurrentUser: action,
+      fetchCurrentUserInstanceAdminStatus: action,
+      signOut: action,
+    });
+    this.userService = new UserService();
+    this.authService = new AuthService();
+  }
+
+  /**
+   * Fetches the current user
+   * @returns Promise<IUser>
+   */
+  fetchCurrentUser = async () => {
+    try {
+      this.currentUserLoader = true;
+      const response = await this.userService.currentUser();
+      runInAction(() => {
+        this.isUserLoggedIn = true;
+        this.currentUser = response;
+        this.currentUserError = null;
+        this.currentUserLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.currentUserLoader = false;
+        this.currentUserError = error;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Fetches the current user instance admin status
+   * @returns Promise<boolean>
+   */
+  fetchCurrentUserInstanceAdminStatus = async () =>
+    await this.userService.currentUserInstanceAdminStatus().then((response) => {
+      runInAction(() => {
+        this.isUserInstanceAdmin = response.is_instance_admin;
+      });
+      return response.is_instance_admin;
+    });
+
+  /**
+   * Signs out the current user
+   * @returns Promise<void>
+   */
+  signOut = async () =>
+    await this.authService.signOut().then(() => {
+      runInAction(() => {
+        this.currentUser = null;
+        this.isUserLoggedIn = false;
+      });
+    });
+}

god-mode/tailwind.config.js

@@ -0,0 +1,5 @@
+const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+
+module.exports = {
+  presets: [sharedConfig],
+};

god-mode/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "tsconfig/nextjs.json",
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  }
+}

package.json

@@ -6,6 +6,7 @@
   "workspaces": [
     "web",
     "space",
+    "god-mode",
     "packages/editor/*",
     "packages/eslint-config-custom",
     "packages/tailwind-config-custom",
@@ -31,7 +32,7 @@
     "turbo": "^1.11.3"
   },
   "resolutions": {
-    "@types/react": "18.2.42"
+    "@types/react": "18.2.48"
   },
   "packageManager": "yarn@1.22.19"
-}
+}

packages/tailwind-config-custom/tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
       "./constants/**/*.{js,ts,jsx,tsx}",
       "./layouts/**/*.tsx",
       "./pages/**/*.tsx",
+      "./app/**/*.tsx",
       "./ui/**/*.tsx",
       "../packages/ui/**/*.{js,ts,jsx,tsx}",
       "../packages/editor/**/src/**/*.{js,ts,jsx,tsx}",

web/layouts/admin-layout/index.ts

@@ -1,3 +0,0 @@
-export * from "./layout";
-export * from "./sidebar";
-export * from "./header";

web/layouts/admin-layout/layout.tsx

@@ -5,8 +5,8 @@ import { useApplication } from "hooks/store";
 // layouts
 import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
 // components
-import { InstanceAdminSidebar } from "./sidebar";
-import { InstanceAdminHeader } from "./header";
+import { InstanceAdminSidebar } from "../../../god-mode/app/sidebar";
+import { InstanceAdminHeader } from "../../../god-mode/app/header";
 import { InstanceSetupView } from "components/instance";
 
 export interface IInstanceAdminLayout {

web/layouts/admin-layout/sidebar.tsx

@@ -1,29 +0,0 @@
-import { FC } from "react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { useApplication } from "hooks/store";
-// components
-import { InstanceAdminSidebarMenu, InstanceHelpSection, InstanceSidebarDropdown } from "components/instance";
-
-export interface IInstanceAdminSidebar {}
-
-export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
-  // store
-  const {
-    theme: { sidebarCollapsed },
-  } = useApplication();
-
-  return (
-    <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
-        sidebarCollapsed ? "" : "md:w-[280px]"
-      } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
-    >
-      <div className="flex h-full w-full flex-1 flex-col">
-        <InstanceSidebarDropdown />
-        <InstanceAdminSidebarMenu />
-        <InstanceHelpSection />
-      </div>
-    </div>
-  );
-});

web/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../god-mode/app/sidebar.tsx", "../god-mode/app/header.tsx"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "baseUrl": ".",

yarn.lock

@@ -935,6 +935,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.20.13":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1318,7 +1325,7 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.1.4":
+"@eslint/eslintrc@^2.0.1", "@eslint/eslintrc@^2.0.2", "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
   integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
@@ -1338,6 +1345,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe"
   integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg==
 
+"@eslint/js@8.39.0":
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.39.0.tgz#58b536bcc843f4cd1e02a7e6171da5c040f4d44b"
+  integrity sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==
+
 "@eslint/js@8.56.0":
   version "8.56.0"
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
@@ -1591,6 +1603,11 @@
   resolved "https://registry.yarnpkg.com/@next/env/-/env-14.0.4.tgz#d5cda0c4a862d70ae760e58c0cd96a8899a2e49a"
   integrity sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ==
 
+"@next/env@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.1.0.tgz#43d92ebb53bc0ae43dcc64fb4d418f8f17d7a341"
+  integrity sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==
+
 "@next/eslint-plugin-next@12.2.2":
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-12.2.2.tgz#b4a22c06b6454068b54cc44502168d90fbb29a6d"
@@ -1619,51 +1636,103 @@
   dependencies:
     glob "7.1.7"
 
+"@next/eslint-plugin-next@13.3.1":
+  version "13.3.1"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-13.3.1.tgz#aa08601f1fec5e1ffbb5850761585734f110345a"
+  integrity sha512-Hpd74UrYGF+bq9bBSRDXRsRfaWkPpcwjhvachy3sr/R/5fY6feC0T0s047pUthyqcaeNsqKOY1nUGQQJNm4WyA==
+  dependencies:
+    glob "7.1.7"
+
 "@next/swc-darwin-arm64@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz#27b1854c2cd04eb1d5e75081a1a792ad91526618"
   integrity sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==
 
+"@next/swc-darwin-arm64@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz#70a57c87ab1ae5aa963a3ba0f4e59e18f4ecea39"
+  integrity sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==
+
 "@next/swc-darwin-x64@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz#9940c449e757d0ee50bb9e792d2600cc08a3eb3b"
   integrity sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==
 
+"@next/swc-darwin-x64@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz#0863a22feae1540e83c249384b539069fef054e9"
+  integrity sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==
+
 "@next/swc-linux-arm64-gnu@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz#0eafd27c8587f68ace7b4fa80695711a8434de21"
   integrity sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==
 
+"@next/swc-linux-arm64-gnu@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz#893da533d3fce4aec7116fe772d4f9b95232423c"
+  integrity sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==
+
 "@next/swc-linux-arm64-musl@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz#2b0072adb213f36dada5394ea67d6e82069ae7dd"
   integrity sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==
 
+"@next/swc-linux-arm64-musl@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz#d81ddcf95916310b8b0e4ad32b637406564244c0"
+  integrity sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==
+
 "@next/swc-linux-x64-gnu@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz#68c67d20ebc8e3f6ced6ff23a4ba2a679dbcec32"
   integrity sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==
 
+"@next/swc-linux-x64-gnu@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz#18967f100ec19938354332dcb0268393cbacf581"
+  integrity sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==
+
 "@next/swc-linux-x64-musl@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz#67cd81b42fb2caf313f7992fcf6d978af55a1247"
   integrity sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==
 
+"@next/swc-linux-x64-musl@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz#77077cd4ba8dda8f349dc7ceb6230e68ee3293cf"
+  integrity sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==
+
 "@next/swc-win32-arm64-msvc@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz#be06585906b195d755ceda28f33c633e1443f1a3"
   integrity sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==
 
+"@next/swc-win32-arm64-msvc@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz#5f0b8cf955644104621e6d7cc923cad3a4c5365a"
+  integrity sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==
+
 "@next/swc-win32-ia32-msvc@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz#e76cabefa9f2d891599c3d85928475bd8d3f6600"
   integrity sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==
 
+"@next/swc-win32-ia32-msvc@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz#21f4de1293ac5e5a168a412b139db5d3420a89d0"
+  integrity sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==
+
 "@next/swc-win32-x64-msvc@14.0.4":
   version "14.0.4"
   resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz#e74892f1a9ccf41d3bf5979ad6d3d77c07b9cba1"
   integrity sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==
 
+"@next/swc-win32-x64-msvc@14.1.0":
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz#e561fb330466d41807123d932b365cf3d33ceba2"
+  integrity sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==
+
 "@nivo/annotations@0.80.0":
   version "0.80.0"
   resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.80.0.tgz#127e4801fff7370dcfb9acfe1e335781dd65cfd5"
@@ -1860,6 +1929,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@panva/hkdf@^1.0.2":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.1.1.tgz#ab9cd8755d1976e72fc77a00f7655a64efe6cd5d"
+  integrity sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -2758,6 +2832,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
   integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==
 
+"@types/node@18.16.1":
+  version "18.16.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.1.tgz#5db121e9c5352925bb1f1b892c4ae620e3526799"
+  integrity sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==
+
 "@types/nprogress@^0.2.0":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
@@ -2801,7 +2880,7 @@
     date-fns "^2.0.1"
     react-popper "^2.2.5"
 
-"@types/react-dom@^18.2.17":
+"@types/react-dom@^18.2.17", "@types/react-dom@^18.2.18":
   version "18.2.18"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.18.tgz#16946e6cd43971256d874bc3d0a72074bb8571dd"
   integrity sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==
@@ -2815,10 +2894,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
-  version "18.2.42"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
-  integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==
+"@types/react@*", "@types/react@18.2.48", "@types/react@^18.2.42", "@types/react@^18.2.48":
+  version "18.2.48"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
+  integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -3300,6 +3379,18 @@ attr-accept@^2.2.2:
   resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
   integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
 
+autoprefixer@10.4.14:
+  version "10.4.14"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
+  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
+  dependencies:
+    browserslist "^4.21.5"
+    caniuse-lite "^1.0.30001464"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^10.4.14, autoprefixer@^10.4.15:
   version "10.4.16"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.16.tgz#fad1411024d8670880bdece3970aa72e3572feb8"
@@ -3331,6 +3422,15 @@ axios@^1.1.3, axios@^1.3.4:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axios@^1.6.7:
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.7.tgz#7b48c2e27c96f9c68a2f8f31e2ab19f59b06b0a7"
+  integrity sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==
+  dependencies:
+    follow-redirects "^1.15.4"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
@@ -3452,6 +3552,16 @@ browserslist@^4.21.10, browserslist@^4.22.2:
     node-releases "^2.0.14"
     update-browserslist-db "^1.0.13"
 
+browserslist@^4.21.5:
+  version "4.22.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.3.tgz#299d11b7e947a6b843981392721169e27d60c5a6"
+  integrity sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==
+  dependencies:
+    caniuse-lite "^1.0.30001580"
+    electron-to-chromium "^1.4.648"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3528,6 +3638,11 @@ caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.300015
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz#1ccf7dc92d2ee2f92ed3a54e11b7b4a3041acfa0"
   integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
 
+caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001580:
+  version "1.0.30001582"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001582.tgz#db3070547ce0b48d9f44a509b86c4a02ba5d9055"
+  integrity sha512-vsJG3V5vgfduaQGVxL53uSX/HUzxyr2eA8xCo36OLal7sRcSZbibJtLeh0qja4sFOr/QQGt4opB4tOy+eOgAxg==
+
 capital-case@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
@@ -3753,6 +3868,11 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cookie@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
 core-js-compat@^3.31.0, core-js-compat@^3.33.1:
   version "3.34.0"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.34.0.tgz#61a4931a13c52f8f08d924522bba65f8c94a5f17"
@@ -4127,6 +4247,11 @@ electron-to-chromium@^1.4.601:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz#4bddbc2c76e1e9dbf449ecd5da3d8119826ea4fb"
   integrity sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==
 
+electron-to-chromium@^1.4.648:
+  version "1.4.653"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.653.tgz#832ab25e80ad698ac09c1ca547bd9ee6cce7df10"
+  integrity sha512-wA2A2LQCqnEwQAvwADQq3KpMpNwgAUBnRmrFgRzHnPhbQUFArTR32Ab46f4p0MovDLcg4uqd4nCsN2hTltslpA==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4503,6 +4628,21 @@ eslint-config-next@13.2.4:
     eslint-plugin-react "^7.31.7"
     eslint-plugin-react-hooks "^4.5.0"
 
+eslint-config-next@13.3.1:
+  version "13.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-13.3.1.tgz#a4441b9b8a708383e9444492c21bab0099851d90"
+  integrity sha512-DieA5djybeE3Q0IqnDXihmhgRSp44x1ywWBBpVRA9pSx+m5Icj8hFclx7ffXlAvb9MMLN6cgj/hqJ4lka/QmvA==
+  dependencies:
+    "@next/eslint-plugin-next" "13.3.1"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
 eslint-config-prettier@^8.3.0:
   version "8.10.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
@@ -4662,7 +4802,7 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-scope@^7.1.1, eslint-scope@^7.2.2:
+eslint-scope@^7.1.1, eslint-scope@^7.2.0, eslint-scope@^7.2.2:
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
@@ -4694,7 +4834,7 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
@@ -4790,6 +4930,52 @@ eslint@8.36.0:
     strip-json-comments "^3.1.0"
     text-table "^0.2.0"
 
+eslint@8.39.0:
+  version "8.39.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.39.0.tgz#7fd20a295ef92d43809e914b70c39fd5a23cf3f1"
+  integrity sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.4.0"
+    "@eslint/eslintrc" "^2.0.2"
+    "@eslint/js" "8.39.0"
+    "@humanwhocodes/config-array" "^0.11.8"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.0"
+    eslint-visitor-keys "^3.4.0"
+    espree "^9.5.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
 eslint@^7.23.0, eslint@^7.32.0:
   version "7.32.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
@@ -4889,7 +5075,7 @@ espree@^7.3.0, espree@^7.3.1:
     acorn-jsx "^5.3.1"
     eslint-visitor-keys "^1.3.0"
 
-espree@^9.4.0, espree@^9.5.0, espree@^9.6.0, espree@^9.6.1:
+espree@^9.4.0, espree@^9.5.0, espree@^9.5.1, espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -4977,7 +5163,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1:
+fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -5094,6 +5280,11 @@ follow-redirects@^1.15.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
   integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
 
+follow-redirects@^1.15.4:
+  version "1.15.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -5123,7 +5314,7 @@ format@^0.2.0:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
-fraction.js@^4.3.6:
+fraction.js@^4.2.0, fraction.js@^4.3.6:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
@@ -5873,17 +6064,22 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.19.1:
+jiti@^1.18.2, jiti@^1.19.1:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+jose@^4.11.4, jose@^4.15.4:
+  version "4.15.4"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.15.4.tgz#02a9a763803e3872cf55f29ecef0dfdcc218cc03"
+  integrity sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==
+
 joycon@^3.0.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
   integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
-js-cookie@^3.0.1:
+js-cookie@^3.0.1, js-cookie@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
   integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
@@ -6624,7 +6820,7 @@ mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.6"
 
-mobx-react-lite@^4.0.3, mobx-react-lite@^4.0.4:
+mobx-react-lite@^4.0.3, mobx-react-lite@^4.0.4, mobx-react-lite@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz#e2cb98f813e118917bcc463638f5bf6ea053a67b"
   integrity sha512-StfB2wxE8imKj1f6T8WWPf4lVMx3cYH9Iy60bbKXEs21+HQ4tvvfIBZfSmMXgQAefi8xYEwQIz4GN9s0d2h7dg==
@@ -6643,7 +6839,7 @@ mobx-utils@^6.0.8:
   resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.0.8.tgz#843e222c7694050c2e42842682fd24a84fdb7024"
   integrity sha512-fPNt0vJnHwbQx9MojJFEnJLfM3EMGTtpy4/qOOW6xueh1mPofMajrbYAUvByMYAvCJnpy1A5L0t+ZVB5niKO4g==
 
-mobx@^6.10.0:
+mobx@^6.10.0, mobx@^6.12.0:
   version "6.12.0"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.12.0.tgz#72b2685ca5af031aaa49e77a4d76ed67fcbf9135"
   integrity sha512-Mn6CN6meXEnMa0a5u6a5+RKrqRedHBhZGd15AWLk9O6uFY4KYHzImdt8JI8WODo1bjTSRnwXhJox+FCUZhCKCQ==
@@ -6692,6 +6888,21 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-auth@^4.24.5:
+  version "4.24.5"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-4.24.5.tgz#1fd1bfc0603c61fd2ba6fd81b976af690edbf07e"
+  integrity sha512-3RafV3XbfIKk6rF6GlLE4/KxjTcuMCifqrmD+98ejFq73SRoj2rmzoca8u764977lH/Q7jo6Xu6yM+Re1Mz/Og==
+  dependencies:
+    "@babel/runtime" "^7.20.13"
+    "@panva/hkdf" "^1.0.2"
+    cookie "^0.5.0"
+    jose "^4.11.4"
+    oauth "^0.9.15"
+    openid-client "^5.4.0"
+    preact "^10.6.3"
+    preact-render-to-string "^5.1.19"
+    uuid "^8.3.2"
+
 next-pwa@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4"
@@ -6733,6 +6944,29 @@ next@^14.0.3:
     "@next/swc-win32-ia32-msvc" "14.0.4"
     "@next/swc-win32-x64-msvc" "14.0.4"
 
+next@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.1.0.tgz#b31c0261ff9caa6b4a17c5af019ed77387174b69"
+  integrity sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==
+  dependencies:
+    "@next/env" "14.1.0"
+    "@swc/helpers" "0.5.2"
+    busboy "1.6.0"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
+    postcss "8.4.31"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "14.1.0"
+    "@next/swc-darwin-x64" "14.1.0"
+    "@next/swc-linux-arm64-gnu" "14.1.0"
+    "@next/swc-linux-arm64-musl" "14.1.0"
+    "@next/swc-linux-x64-gnu" "14.1.0"
+    "@next/swc-linux-x64-musl" "14.1.0"
+    "@next/swc-win32-arm64-msvc" "14.1.0"
+    "@next/swc-win32-ia32-msvc" "14.1.0"
+    "@next/swc-win32-x64-msvc" "14.1.0"
+
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -6792,11 +7026,21 @@ nprogress@^0.2.0:
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
   integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
 
+oauth@^0.9.15:
+  version "0.9.15"
+  resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"
+  integrity sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==
+
 object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-hash@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
+  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
+
 object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
@@ -6889,6 +7133,11 @@ object.values@^1.1.5, object.values@^1.1.6, object.values@^1.1.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
+oidc-token-hash@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz#9a229f0a1ce9d4fc89bcaee5478c97a889e7b7b6"
+  integrity sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -6903,6 +7152,16 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+openid-client@^5.4.0:
+  version "5.6.4"
+  resolved "https://registry.yarnpkg.com/openid-client/-/openid-client-5.6.4.tgz#b2c25e6d5338ba3ce00e04341bb286798a196177"
+  integrity sha512-T1h3B10BRPKfcObdBklX639tVz+xh34O7GjofqrqiAQdm7eHsQ00ih18x6wuJ/E6FxdtS2u3FmUGPDeEcMwzNA==
+  dependencies:
+    jose "^4.15.4"
+    lru-cache "^6.0.0"
+    object-hash "^2.2.0"
+    oidc-token-hash "^5.0.3"
+
 optionator@^0.9.1, optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
@@ -7153,6 +7412,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@8.4.23:
+  version "8.4.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.23.tgz#df0aee9ac7c5e53e1075c24a3613496f9e6552ab"
+  integrity sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
@@ -7178,6 +7446,18 @@ posthog-js@^1.88.4:
   dependencies:
     fflate "^0.4.1"
 
+preact-render-to-string@^5.1.19:
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz#0ff0c86cd118d30affb825193f18e92bd59d0604"
+  integrity sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==
+  dependencies:
+    pretty-format "^3.8.0"
+
+preact@^10.6.3:
+  version "10.19.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899"
+  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -7226,6 +7506,11 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
+pretty-format@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+  integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
+
 progress@^2.0.0, progress@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -8354,7 +8639,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-swr@^2.1.3, swr@^2.2.2:
+swr@^2.1.3, swr@^2.2.2, swr@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
   integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
@@ -8395,6 +8680,35 @@ tailwindcss-animate@^1.0.6:
   resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
+tailwindcss@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
+  integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.18.2"
+    lilconfig "^2.1.0"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.23"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.1"
+    postcss-nested "^6.0.1"
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+    resolve "^1.22.2"
+    sucrase "^3.32.0"
+
 tailwindcss@^3.2.7, tailwindcss@^3.3.3:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.0.tgz#045a9c474e6885ebd0436354e611a76af1c76839"
@@ -8805,6 +9119,11 @@ typescript@4.9.5, typescript@^4.7.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+typescript@5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -8990,6 +9309,11 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 uuid@^9.0.0, uuid@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"