refactor: Admin App with better layouts and Meta Information

admin/app/ai/form.tsx → admin/app/(all)/(dashboard)/ai/form.tsx

@@ -5,7 +5,7 @@ import { Lightbulb } from "lucide-react";
 import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/ai/layout.tsx → admin/app/(all)/(dashboard)/ai/layout.tsx

@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "Artificial Intelligence Settings - Plane Web",
+  title: "Artificial Intelligence Settings - God Mode",
 };
 
 export default function AILayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }

admin/app/authentication/github/form.tsx → admin/app/(all)/(dashboard)/authentication/github/form.tsx

@@ -10,14 +10,10 @@ import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/(all)/(dashboard)/authentication/github/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitHub Authentication - God Mode",
+};
+
+export default function GitHubAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

admin/app/authentication/github/page.tsx → admin/app/(all)/(dashboard)/authentication/github/page.tsx

@@ -9,8 +9,7 @@ import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -61,9 +60,11 @@ const InstanceGithubAuthenticationPage = observer(() => {
         setIsSubmitting(false);
       });
   };
+
+  const isGithubEnabled = enableGithubConfig === "1";
+
   return (
     <>
-      <PageHeader title="GitHub Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
@@ -79,11 +80,9 @@ const InstanceGithubAuthenticationPage = observer(() => {
             }
             config={
               <ToggleSwitch
-                value={Boolean(parseInt(enableGithubConfig))}
+                value={isGithubEnabled}
                 onChange={() => {
-                  Boolean(parseInt(enableGithubConfig)) === true
-                    ? updateConfig("IS_GITHUB_ENABLED", "0")
-                    : updateConfig("IS_GITHUB_ENABLED", "1");
+                  updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
                 }}
                 size="sm"
                 disabled={isSubmitting || !formattedConfig}

admin/app/authentication/gitlab/form.tsx → admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx

@@ -8,14 +8,10 @@ import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/(all)/(dashboard)/authentication/gitlab/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GitLab Authentication - God Mode",
+};
+
+export default function GitlabAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

admin/app/authentication/gitlab/page.tsx → admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx

@@ -6,8 +6,7 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -57,7 +56,6 @@ const InstanceGitlabAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="GitLab Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard

admin/app/authentication/google/form.tsx → admin/app/(all)/(dashboard)/authentication/google/form.tsx

@@ -9,14 +9,10 @@ import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigura
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import {
-  CodeBlock,
-  ConfirmDiscardModal,
-  ControllerInput,
-  CopyField,
-  TControllerInputFormField,
-  TCopyField,
-} from "@/components/common";
+import { CodeBlock } from "@/components/common/code-block";
+import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/(all)/(dashboard)/authentication/google/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Google Authentication - God Mode",
+};
+
+export default function GoogleAuthenticationLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

admin/app/authentication/google/page.tsx → admin/app/(all)/(dashboard)/authentication/google/page.tsx

@@ -6,8 +6,7 @@ import Image from "next/image";
 import useSWR from "swr";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
-import { AuthenticationMethodCard } from "@/components/authentication";
-import { PageHeader } from "@/components/common";
+import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -57,7 +56,6 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   };
   return (
     <>
-      <PageHeader title="Google Authentication - Plane Web" />
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard

admin/app/authentication/layout.tsx → admin/app/(all)/(dashboard)/authentication/layout.tsx

@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
   title: "Authentication Settings - Plane Web",
 };
 
 export default function AuthenticationLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }

admin/app/email/email-config-form.tsx → admin/app/(all)/(dashboard)/email/email-config-form.tsx

@@ -7,7 +7,7 @@ import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from
 // ui
 import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput, TControllerInputFormField } from "@/components/common";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components

admin/app/email/layout.tsx → admin/app/(all)/(dashboard)/email/layout.tsx

@@ -1,15 +1,14 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
 
 interface EmailLayoutProps {
   children: ReactNode;
 }
 
 export const metadata: Metadata = {
-  title: "Email Settings - Plane Web",
+  title: "Email Settings - God Mode",
 };
 
 export default function EmailLayout({ children }: EmailLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }

admin/app/general/form.tsx → admin/app/(all)/(dashboard)/general/form.tsx

@@ -8,7 +8,7 @@ import { IInstance, IInstanceAdmin } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "@/components/common/controller-input";
 import { useInstance } from "@/hooks/store";
 import { IntercomConfig } from "./intercom";
 // hooks

admin/app/general/layout.tsx → admin/app/(all)/(dashboard)/general/layout.tsx

@@ -1,11 +1,10 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
 
 export const metadata: Metadata = {
-  title: "General Settings - Plane Web",
+  title: "General Settings - God Mode",
 };
 
 export default function GeneralLayout({ children }: { children: ReactNode }) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }

admin/core/components/auth-header.tsx → admin/app/(all)/(dashboard)/header.tsx

@@ -3,16 +3,27 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-// mobx
-// ui
-import { Settings } from "lucide-react";
+import { Menu, Settings } from "lucide-react";
 // icons
 import { Breadcrumbs } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "@/components/admin-sidebar";
-import { BreadcrumbLink } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useTheme } from "@/hooks/store";
 
-export const InstanceHeader: FC = observer(() => {
+export const HamburgerToggle: FC = observer(() => {
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  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(!isSidebarCollapsed)}
+    >
+      <Menu size={14} className="text-custom-text-200 group-hover:text-custom-text-100 transition-all" />
+    </div>
+  );
+});
+
+export const AdminHeader: FC = observer(() => {
   const pathName = usePathname();
 
   const getHeaderTitle = (pathName: string) => {
@@ -63,7 +74,7 @@ export const InstanceHeader: FC = observer(() => {
   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-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 />
+        <HamburgerToggle />
         {breadcrumbItems.length >= 0 && (
           <div>
             <Breadcrumbs>

admin/app/image/form.tsx → admin/app/(all)/(dashboard)/image/form.tsx

@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { ControllerInput } from "@/components/common";
+import { ControllerInput } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 

admin/app/image/layout.tsx → admin/app/(all)/(dashboard)/image/layout.tsx

@@ -1,15 +1,14 @@
 import { ReactNode } from "react";
 import { Metadata } from "next";
-import { AdminLayout } from "@/layouts/admin-layout";
 
 interface ImageLayoutProps {
   children: ReactNode;
 }
 
 export const metadata: Metadata = {
-  title: "Images Settings - Plane Web",
+  title: "Images Settings - God Mode",
 };
 
 export default function ImageLayout({ children }: ImageLayoutProps) {
-  return <AdminLayout>{children}</AdminLayout>;
+  return <>{children}</>;
 }

admin/core/layouts/admin-layout.tsx → admin/app/(all)/(dashboard)/layout.tsx

@@ -1,20 +1,22 @@
 "use client";
+
 import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 // components
-import { InstanceSidebar } from "@/components/admin-sidebar";
-import { InstanceHeader } from "@/components/auth-header";
-import { LogoSpinner } from "@/components/common";
+import { LogoSpinner } from "@/components/common/logo-spinner";
 import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
+// local components
+import { AdminHeader } from "./header";
+import { AdminSidebar } from "./sidebar";
 
 type TAdminLayout = {
   children: ReactNode;
 };
 
-export const AdminLayout: FC<TAdminLayout> = observer((props) => {
+const AdminLayout: FC<TAdminLayout> = (props) => {
   const { children } = props;
   // router
   const router = useRouter();
@@ -35,14 +37,20 @@ export const AdminLayout: FC<TAdminLayout> = observer((props) => {
     );
   }
 
-  return (
-    <div className="relative flex h-screen w-screen 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">{children}</div>
-      </main>
-      <NewUserPopup />
-    </div>
-  );
-});
+  if (isUserLoggedIn) {
+    return (
+      <div className="relative flex h-screen w-screen overflow-hidden">
+        <AdminSidebar />
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <AdminHeader />
+          <div className="h-full w-full overflow-hidden">{children}</div>
+        </main>
+        <NewUserPopup />
+      </div>
+    );
+  }
+
+  return <></>;
+};
+
+export default observer(AdminLayout);

admin/core/components/admin-sidebar/sidebar-dropdown.tsx → admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -16,7 +16,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();
 
-export const SidebarDropdown = observer(() => {
+export const AdminSidebarDropdown = observer(() => {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();

admin/core/components/admin-sidebar/help-section.tsx → admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -33,7 +33,7 @@ const helpOptions = [
   },
 ];
 
-export const HelpSection: FC = observer(() => {
+export const AdminSidebarHelpSection: FC = observer(() => {
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store