fix: sidebar toggle button

.claude/skills/pr-description.md

@@ -1,58 +0,0 @@
----
-name: pr-description
-description: Generate a PR description following the project's GitHub PR template. Analyzes the current branch's changes against the base branch to produce a complete, filled-out PR description.
-user_invocable: true
----
-
-# PR Description Generator
-
-Generate a pull request description based on the project's PR template at `.github/pull_request_template.md`.
-
-## Steps
-
-1. **Determine the base branch**: Prefer the PR's actual `baseRefName` (via `gh pr view <PR> --json baseRefName`) when a PR exists. Otherwise default by intent — feature PRs target `preview`, release PRs target `master`. If still ambiguous, ask the user.
-
-2. **Analyze changes**: Run the following to understand what changed:
-   - `git log <base>...HEAD --oneline` to see all commits on this branch
-   - `git diff <base>...HEAD --stat` to see which files changed
-   - `git diff <base>...HEAD` to read the actual diff (use `--no-color`)
-   - If the diff is very large, focus on the most important files first
-
-3. **Fill out the PR template** with the following sections:
-
-   ### Description
-
-   Write a clear, concise summary of what the PR does and why. Focus on the "what" and "why", not line-by-line changes. Mention any important implementation decisions.
-
-   ### Type of Change
-
-   Check the appropriate box(es) based on the changes:
-   - Bug fix (non-breaking change which fixes an issue)
-   - Feature (non-breaking change which adds functionality)
-   - Improvement (non-breaking change that improves existing functionality)
-   - Code refactoring
-   - Performance improvements
-   - Documentation update
-
-   ### Screenshots and Media
-
-   Leave this section for the user to fill in, preserving the existing placeholder comment from `.github/pull_request_template.md` verbatim rather than introducing different text.
-
-   ### Test Scenarios
-
-   Based on the code changes, suggest specific test scenarios that should be verified. Be concrete (e.g., "Navigate to project settings and verify the new toggle works") rather than generic.
-
-   ### References
-   - If commit messages or branch name reference a work item identifier (e.g., `WEB-1234`), include it
-   - If the user provides a linked issue, include it
-   - If Sentry issue links or IDs (e.g., `SENTRY-ABC123`, Sentry URLs) were mentioned earlier in the conversation, include them as references
-
-4. **Output format**: Print the filled-out markdown template so the user can copy it directly. Do NOT wrap it in a code fence — output the raw markdown.
-
-## Guidelines
-
-- Keep the description concise but informative
-- Use bullet points for multiple changes
-- Focus on user-facing impact, not implementation details
-- If the branch has a Plane work item ID in its name (e.g., `WEB-1234`), reference it
-- Don't fabricate test scenarios that aren't relevant to the actual changes

.claude/skills/release-notes.md

@@ -1,147 +0,0 @@
----
-name: release-notes
-description: "Generate release notes for a Plane release PR in `makeplane/plane` (semver, e.g. `release: vX.Y.Z`). Reads PR commits, filters out noise, categorizes by conventional-commit type, optionally enriches via Plane MCP, and writes the result as the PR description."
-user_invocable: true
----
-
-# Release Notes Generator
-
-Generate structured release notes from a Plane release PR by parsing its commit list, then update the PR description.
-
-## Versioning
-
-Plane community uses **semver** (`vX.Y.Z`, major.minor.patch) for releases.
-
-- PR title format: `release: vX.Y.Z`
-- Source branch: `canary`
-- Target branch: `master`
-
-## When to Use
-
-- User links/mentions a Plane release PR (e.g. `release: v1.3.0`) and asks for release notes
-- User asks to "create release notes" / "update PR description" for a release PR in `makeplane/plane`
-- The branch is named `canary` or `release/x.y.z` and the base is `master`
-
-## Steps
-
-### 1. Fetch commits
-
-```bash
-gh pr view <PR_NUM> --json title,body,baseRefName,headRefName,commits \
-  --jq '.commits[] | .messageHeadline + "\n---BODY---\n" + .messageBody + "\n===END==="'
-```
-
-For a quick scan first:
-
-```bash
-gh pr view <PR_NUM> --json commits \
-  --jq '.commits[] | {oid: .oid[0:10], message: .messageHeadline}'
-```
-
-### 2. Filter out noise
-
-**Always exclude** these commits — mechanical, not user-facing:
-
-| Pattern                                      | Reason         |
-| -------------------------------------------- | -------------- |
-| `fix: merge conflicts`                       | Merge artifact |
-| `Merge branch '...' of github.com:...`       | Merge artifact |
-| `Revert "..."` (when immediately re-applied) | Internal churn |
-
-### 3. Parse work item IDs
-
-Most meaningful commits begin with a Plane work item identifier in brackets:
-
-- `[WEB-XXXX]` — web/frontend product items
-- `[SILO-XXXX]` — Silo (integrations: Slack, GitHub, GitLab, Jira/Linear)
-- `[MOBILE-XXXX]`, `[API-XXXX]`, etc.
-
-Always preserve these IDs in the release notes — they let readers click through to the source ticket.
-
-### 4. (Optional) Enrich via Plane MCP
-
-For larger features where the commit headline is terse, fetch the work item:
-
-```text
-mcp__plane__retrieve_work_item_by_identifier(project_identifier="WEB", issue_identifier=6874)
-```
-
-Use the returned `name` and `description_stripped` to flesh out the bullet. Skip this for routine fixes — commit body is usually enough. Don't enrich every item (slow + work item descriptions are often empty).
-
-### 5. Categorize by conventional-commit type
-
-| Commit prefix                    | Section             |
-| -------------------------------- | ------------------- |
-| `feat:`, `feat(scope):`          | ✨ New Features     |
-| `fix:`, `fix(scope):`            | 🐛 Bug Fixes        |
-| `refactor:`                      | 🔧 Refactor & Chore |
-| `chore:`, `chore(scope):`        | 🔧 Refactor & Chore |
-| `chore(deps):`, dependabot bumps | 📦 Dependencies     |
-
-### 6. Format
-
-```markdown
-# Release vX.Y.Z
-
-## ✨ New Features
-
-- **<Short title>** — [WEB-XXXX] (#PR_NUM)
-  Optional 1–2 sentence elaboration drawn from commit body.
-
-## 🐛 Bug Fixes
-
-- **<Short title>** — [WEB-XXXX] (#PR_NUM)
-
-## 🔧 Refactor & Chore
-
-- **<Short title>** — [WEB-XXXX] (#PR_NUM)
-
-## 📦 Dependencies
-
-- Bump `<package>` X.Y.Z → A.B.C (#PR_NUM)
-```
-
-Rules:
-
-- Lead with a bold human-readable title (rewrite the commit subject if cryptic)
-- Always include the work item ID in brackets and the merge PR number in parens
-- Add a sub-line elaboration only when the commit body has substance worth surfacing (acceptance criteria, scope notes, gotchas like "behind feature flag", "requires migration", "requires Vercel setting")
-- Drop empty sections
-
-### 7. Update the PR description
-
-```bash
-gh pr edit <PR_NUM> --body "$(cat <<'EOF'
-<release notes markdown>
-EOF
-)"
-```
-
-Always use a HEREDOC with single-quoted `'EOF'` so backticks/dollars in the notes are preserved.
-
-## Quick Reference: end-to-end
-
-```bash
-PR=2498
-gh pr view $PR --json commits --jq '.commits[] | .messageHeadline + "\n---\n" + .messageBody + "\n==="' > /tmp/commits.txt
-# read /tmp/commits.txt, filter, categorize, draft notes
-gh pr edit $PR --body "$(cat <<'EOF'
-... release notes ...
-EOF
-)"
-```
-
-## Common Mistakes
-
-- **Including `fix: merge conflicts`** — merge artifact, no functional content
-- **Dropping the work item ID** — readers rely on `[WEB-XXXX]` to navigate to the ticket
-- **Over-enriching with MCP lookups** — work item descriptions are often empty; commit body is usually richer
-- **Missing the merge PR number** — always include `(#NNNN)` from the commit subject so reviewers can audit the source PR
-- **Using `--body` without HEREDOC** — backticks/dollar signs get shell-interpreted and corrupt the notes
-- **Editing the title** — release PR titles are version markers; only edit the body
-
-## Plane-Specific Conventions
-
-- Release PRs go from `canary` → `master`
-- PR title format: `release: vX.Y.Z` semver (major.minor.patch)
-- Commits coming from feature branches always carry a work item ID; commits without one are usually infra/chores

.dockerignore

@@ -16,54 +16,3 @@ out/
 **/out/
 dist/
 **/dist/
-# Logs
-npm-debug.log*
-pnpm-debug.log*
-.pnpm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# OS junk
-.DS_Store
-Thumbs.db
-
-# Editor settings
-.vscode
-.idea
-
-# Coverage and test output
-coverage/
-**/coverage/
-*.lcov
-.junit/
-test-results/
-
-# Caches and build artifacts
-.cache/
-**/.cache/
-storybook-static/
-*storybook.log
-*.tsbuildinfo
-
-# Local env and secrets
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.secrets
-tmp/
-temp/
-
-# Database/cache dumps
-*.rdb
-*.rdb.gz
-
-# Misc
-*.pem
-*.key
-
-# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
-.react-router/
-build/
-node_modules/
-README.md

.github/ISSUE_TEMPLATE/--bug-report.yaml

@@ -1,7 +1,7 @@
 name: Bug report
 description: Create a bug report to help us improve Plane
 title: "[bug]: "
-labels: [🐛bug, plane]
+labels: [🐛bug]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/ISSUE_TEMPLATE/--feature-request.yaml

@@ -1,7 +1,7 @@
 name: Feature request
 description: Suggest a feature to improve Plane
 title: "[feature]: "
-labels: [✨feature, plane]
+labels: [✨feature]
 assignees: [vihar, pushya22]
 body:
 - type: markdown

.github/ISSUE_TEMPLATE/config.yaml

@@ -1,6 +1,6 @@
 contact_links:
   - name: Help and support
-    about: Reach out to us on our Forum or GitHub discussions.
+    about: Reach out to us on our Discord server or GitHub discussions.
   - name: Dedicated support
     url: mailto:support@plane.so
     about: Write to us if you'd like dedicated support using Plane

.github/instructions/bash.instructions.md

@@ -1,48 +0,0 @@
----
-description: Guidelines for bash commands and tooling in the monorepo
-applyTo: "**/*.sh"
----
-
-# Bash & Tooling Instructions
-
-This document outlines the standard tools and commands used in this monorepo.
-
-## Package Manager
-
-We use **pnpm** for package management.
-- **Do not use `npm` or `yarn`.**
-- Lockfile: `pnpm-lock.yaml`
-- Workspace configuration: `pnpm-workspace.yaml`
-
-### Common Commands
-- Install dependencies: `pnpm install`
-- Run a script in a specific package: `pnpm --filter <package_name> run <script>`
-- Run a script in all packages: `pnpm -r run <script>`
-
-## Monorepo Tooling
-
-We use **Turbo** for build system orchestration.
-- Configuration: `turbo.json`
-
-## Project Structure
-
-- `apps/`: Contains application services (admin, api, live, proxy, space, web).
-- `packages/`: Contains shared packages and libraries.
-- `deployments/`: Deployment configurations.
-
-## Running Tests
-
-- To run tests in a specific package (e.g., codemods):
-  ```bash
-  cd packages/codemods
-  pnpm run test
-  ```
-- Or from root:
-  ```bash
-  pnpm --filter @plane/codemods run test
-  ```
-
-## Docker
-
-- Local development uses `docker-compose-local.yml`.
-- Production/Staging uses `docker-compose.yml`.

.github/instructions/typescript.instructions.md

@@ -1,129 +0,0 @@
----
-description: Guidelines for using modern TypeScript features (v5.0-v5.8)
-applyTo: "**/*.{ts,tsx,mts,cts}"
----
-
-# TypeScript Coding Guidelines & Modern Features (v5.0 - v5.8)
-
-When writing TypeScript code, prioritize using modern features and best practices introduced in recent versions (up to 5.8).
-
-## Global Themes Across 5.x
-
-1. **Standard decorators are here; legacy decorators are legacy.**
-   New TC39-compliant decorators landed in 5.0 and were extended in 5.2 (metadata). Old `experimentalDecorators`-style behavior is still supported but should be treated as legacy.
-
-2. **Type system is more precise and less noisy.**
-   Major work went into narrowing, control flow analysis, error messages, and new helpers like `NoInfer`, inferred predicates, and better `undefined`/`never`/uninitialized checks.
-
-3. **Module / runtime interop has been modernized.**
-   Options like `--moduleResolution bundler`, `--module nodenext`/`node18`, `--rewriteRelativeImportExtensions`, `--erasableSyntaxOnly`, and `--verbatimModuleSyntax` are about playing nicely with ESM, Node 18+/22+, direct TypeScript execution, and bundlers.
-
-4. **The standard library keeps tracking modern JS.**
-   Support for new ES features (iterator helpers, `Object.groupBy`/`Map.groupBy`, new Set/ES2024 APIs) shows up as type declarations and sometimes extra checks (regex syntax checking, etc.).
-
-When generating or refactoring code, prefer these newer idioms, and avoid patterns that conflict with updated checks.
-
-## Modern Features to Utilize
-
-### Type System & Inference
-- **`const` Type Parameters (5.0)**: Use `const` type parameters for more precise literal inference.
-  ```typescript
-  declare function names<const T extends string[]>(...names: T): void;
-  ```
-- **`@satisfies` Operator (5.0)**: Use `satisfies` to validate types without widening them.
-- **Inferred Type Predicates (5.5)**: Allow TypeScript to infer type predicates for functions that filter arrays or check types, reducing the need for explicit `is` return types.
-- **`NoInfer` Utility (5.4)**: Use `NoInfer<T>` to block inference for specific type arguments when you want them to be determined by other arguments.
-- **Narrowing**:
-  - **Switch(true) (5.3)**: Utilize narrowing in `switch(true)` blocks.
-  - **Boolean Comparisons (5.3)**: Rely on narrowing from direct boolean comparisons.
-  - **Closures (5.4)**: Trust preserved narrowing in closures when variables aren't modified after the check.
-  - **Constant Indexed Access (5.5)**: Use constant indices to narrow object/array properties.
-
-### Syntax & Control Flow
-- **Decorators (5.0)**: Use standard ECMAScript decorators (Stage 3).
-- **`using` Declarations (5.2)**: Use `using` for explicit resource management (Disposable pattern) instead of manual cleanup.
-  ```typescript
-  using resource = new Resource();
-  ```
-- **Import Attributes (5.3/5.8)**: Use `with { type: "json" }` for import attributes. Avoid the deprecated `assert` syntax.
-- **`switch` Exhaustiveness**: Rely on TypeScript's exhaustiveness checking in switch statements.
-
-### Modules & Imports
-- **`verbatimModuleSyntax` (5.0)**: Respect this flag by using `import type` explicitly when importing types to ensure they are erased during compilation.
-- **Type-Only Imports with Extensions (5.2)**: You can use `.ts`, `.mts`, `.cts` extensions in `import type` statements.
-- **`resolution-mode` (5.3)**: Use `import type { Type } from "mod" with { "resolution-mode": "import" }` if needed for specific module resolution contexts.
-- **JSDoc `@import` (5.5)**: Use `@import` tags in JSDoc for cleaner type imports in JS files if working in a mixed codebase.
-
-### Standard Library & Built-ins
-- **Iterator Helpers (5.6)**: Use new iterator methods (map, filter, etc.) if targeting modern environments.
-- **Set Methods (5.5)**: Utilize new `Set` methods like `union`, `intersection`, etc., when available.
-- **`Object.groupBy` / `Map.groupBy` (5.4)**: Use these standard methods for grouping instead of external libraries like Lodash when appropriate.
-- **`Promise.withResolvers` (5.7)**: Use `Promise.withResolvers()` for creating promises with exposed resolve/reject functions.
-
-### Configuration & Tooling
-- **`--moduleResolution bundler` (5.0)**: Assume this resolution strategy for modern web projects (Vite, Next.js, etc.).
-- **`--erasableSyntaxOnly` (5.8)**: Be aware of this flag; avoid TypeScript-specific syntax that cannot be simply erased (like `enum`s or `namespaces`) if the project aims for maximum compatibility with tools like Node.js's `--strip-types`. Prefer `const` objects or unions over `enum`s if requested.
-
-## Specific Coding Patterns
-
-### Arrays & Collections
-- Use **Copying Array Methods (5.2)** (`toSorted`, `toSpliced`, `with`) for immutable array operations.
-- **TypedArrays (5.7)**: Be aware that TypedArrays are now generic over `ArrayBufferLike`.
-
-### Classes
-- **Parameter Decorators (5.0/5.2)**: Use modern standard decorators.
-- **`super` Property Access (5.3)**: Avoid accessing instance fields via `super`.
-
-### Error Handling
-- **Checks for Never-Initialized Variables (5.7)**: Ensure variables are initialized before use to avoid new errors.
-
-## Deprecations to Avoid
-- Avoid `import ... assert` (use `with`).
-- Avoid implicit `any` returns in `undefined`-returning functions (though 5.1 makes this easier, explicit is better).
-- Avoid `enum`s if the project prefers erasable syntax (5.8).
-
-## Version-Specific Highlights
-
-### TypeScript 5.0
-- **Decorators**: Use standard decorators unless `experimentalDecorators` is explicitly enabled.
-- **`const` Type Parameters**: Use for literal inference.
-- **Enums**: All enums are union enums.
-- **Modules**: `--moduleResolution bundler` and `--verbatimModuleSyntax` are key for modern bundlers.
-
-### TypeScript 5.1
-- **Returns**: `undefined`-returning functions don't need explicit returns.
-- **Getters/Setters**: Can have unrelated types with explicit annotations.
-
-### TypeScript 5.2
-- **Resource Management**: `using` declarations for `Symbol.dispose`.
-- **Decorator Metadata**: Use `context.metadata` for design-time metadata.
-
-### TypeScript 5.3
-- **Import Attributes**: Use `with { type: "json" }`.
-- **Switch(true)**: Narrowing works in `switch(true)`.
-
-### TypeScript 5.4
-- **Closures**: Narrowing preserved in closures if last assignment is before creation.
-- **`NoInfer`**: Block inference for specific arguments.
-- **Grouping**: `Object.groupBy` / `Map.groupBy`.
-
-### TypeScript 5.5
-- **Inferred Predicates**: Functions checking types often don't need explicit `is` return types.
-- **Constant Index Access**: Better narrowing for constant keys.
-- **Regex**: Syntax checking for regex literals.
-
-### TypeScript 5.6
-- **Truthiness Checks**: Errors on always-truthy/falsy conditions (e.g., `if (/regex/)`).
-- **Iterator Helpers**: `.map`, `.filter` on iterators.
-
-### TypeScript 5.7
-- **Uninitialized Variables**: Stricter checks for never-initialized variables.
-- **Relative Imports**: `--rewriteRelativeImportExtensions` for `.ts` imports in output.
-- **ES2024**: Support for `Promise.withResolvers`, `Atomics.waitAsync`.
-
-### TypeScript 5.8
-- **Return Checks**: Granular checks for conditional returns.
-- **Node Modules**: `--module node18` stable; `require()` of ESM allowed in `nodenext`.
-- **Erasable Syntax**: `--erasableSyntaxOnly` forbids enums, namespaces, etc.
-
-When generating code, always prefer the most modern, standard, and type-safe approach available in TypeScript 5.8.

.github/workflows/build-branch.yml

@@ -35,10 +35,6 @@ on:
       - preview
       - canary
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 env:
   TARGET_BRANCH: ${{ github.ref_name }}
   ARM64_BUILD: ${{ github.event.inputs.arm64 }}
@@ -134,7 +130,7 @@ jobs:
 
       - id: checkout_files
         name: Checkout Files
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
   branch_build_push_admin:
     name: Build-Push Admin Docker Image
@@ -142,7 +138,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Admin Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -164,7 +160,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Web Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -186,7 +182,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Space Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -208,7 +204,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Live Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -230,7 +226,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Backend Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -252,7 +248,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Proxy Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -272,23 +268,24 @@ jobs:
     if: ${{ needs.branch_build_setup.outputs.aio_build == 'true' }}
     name: Build-Push AIO Docker Image
     runs-on: ubuntu-22.04
-    needs:
-      - branch_build_setup
-      - branch_build_push_admin
-      - branch_build_push_web
-      - branch_build_push_space
-      - branch_build_push_live
-      - branch_build_push_api
-      - branch_build_push_proxy
+    needs: [
+        branch_build_setup,
+        branch_build_push_admin,
+        branch_build_push_web,
+        branch_build_push_space,
+        branch_build_push_live,
+        branch_build_push_api,
+        branch_build_push_proxy
+      ]
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Prepare AIO Assets
         id: prepare_aio_assets
         run: |
           cd deployments/aio/community
-
+          
           if [ "${{ needs.branch_build_setup.outputs.build_type }}" == "Release" ]; then
             aio_version=${{ needs.branch_build_setup.outputs.release_version }}
           else
@@ -298,13 +295,13 @@ jobs:
           echo "AIO_BUILD_VERSION=${aio_version}" >> $GITHUB_OUTPUT
 
       - name: Upload AIO Assets
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4
         with:
           path: ./deployments/aio/community/dist
           name: aio-assets-dist
 
       - name: AIO Build and Push
-        uses: makeplane/actions/build-push@v1.4.0
+        uses: makeplane/actions/build-push@v1.1.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -327,17 +324,10 @@ jobs:
   upload_build_assets:
     name: Upload Build Assets
     runs-on: ubuntu-22.04
-    needs:
-      - branch_build_setup
-      - branch_build_push_admin
-      - branch_build_push_web
-      - branch_build_push_space
-      - branch_build_push_live
-      - branch_build_push_api
-      - branch_build_push_proxy
+    needs: [branch_build_setup, branch_build_push_admin, branch_build_push_web, branch_build_push_space, branch_build_push_live, branch_build_push_api, branch_build_push_proxy]
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Update Assets
         run: |
@@ -352,7 +342,7 @@ jobs:
           # sed -i 's/APP_RELEASE=stable/APP_RELEASE='${REL_VERSION}'/g' deployments/cli/community/variables.env
 
       - name: Upload Assets
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v4
         with:
           name: community-assets
           path: |
@@ -381,7 +371,7 @@ jobs:
       REL_VERSION: ${{ needs.branch_build_setup.outputs.release_version }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Update Assets
         run: |
@@ -391,13 +381,12 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
         with:
           tag_name: ${{ env.REL_VERSION }}
           name: ${{ env.REL_VERSION }}
-          target_commitish: ${{ github.sha }}
           draft: false
           prerelease: ${{ env.IS_PRERELEASE }}
           generate_release_notes: true
@@ -408,3 +397,4 @@ jobs:
             ${{ github.workspace }}/deployments/cli/community/docker-compose.yml
             ${{ github.workspace }}/deployments/cli/community/variables.env
             ${{ github.workspace }}/deployments/swarm/community/swarm.sh
+

.github/workflows/check-version.yml

@@ -10,13 +10,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.head_ref }}
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
 
       - name: Get PR Branch version
         run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV

.github/workflows/codeql.yml

@@ -3,9 +3,11 @@ name: "CodeQL"
 on:
   workflow_dispatch:
   push:
-    branches: ["preview", "canary", "master"]
+    branches: ["preview", "master"]
   pull_request:
-    branches: ["preview", "canary", "master"]
+    branches: ["develop", "preview", "master"]
+  schedule:
+    - cron: "53 19 * * 5"
 
 jobs:
   analyze:
@@ -16,27 +18,47 @@ jobs:
       contents: read
       security-events: write
 
-    env:
-      CODEQL_ACTION_FILE_COVERAGE_ON_PRS: "false"
-
     strategy:
       fail-fast: false
       matrix:
         language: ["python", "javascript"]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
+      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v4
+        uses: github/codeql-action/init@v3
         with:
           languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
 
+          # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+          # queries: security-extended,security-and-quality
+
+      # Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
+      # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v4
+        uses: github/codeql-action/autobuild@v3
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+      #   If the Autobuild fails above, remove it and uncomment the following three lines.
+      #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+      # - run: |
+      #     echo "Run, Build Application using script"
+      #     ./location_of_script_within_repo/buildscript.sh
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v4
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/copyright-check.yml

@@ -1,45 +0,0 @@
-name: Copy Right Check
-
-on:
-    workflow_dispatch:
-    pull_request:
-        branches:
-            - "preview"
-        types:
-            - "opened"
-            - "synchronize"
-            - "ready_for_review"
-            - "review_requested"
-            - "reopened"
-
-jobs:
-    license-check:
-        name: Copy Right Check
-        runs-on: ubuntu-latest
-        steps:
-            - name: Checkout repository
-              uses: actions/checkout@v6
-
-            - name: Set up Go
-              uses: actions/setup-go@v6
-              with:
-                  go-version: "1.22"
-
-            - name: Install addlicense
-              run: |
-                  go install github.com/google/addlicense@latest
-                  echo "$(go env GOPATH)/bin" >> $GITHUB_PATH
-
-            - name: Check Copyright For Python Files
-              run: |
-                  set -e
-                  echo "Running copyright check..."
-                  addlicense -check -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
-                  echo "Copyright check passed."
-
-            - name: Check Copyright For TypeScript Files
-              run: |
-                  set -e
-                  echo "Running copyright check..."
-                  addlicense -check -f COPYRIGHT.txt -ignore "**/*.config.ts" -ignore "**/*.d.ts" $(git ls-files '*.ts' '*.tsx')
-                  echo "Copyright check passed."

.github/workflows/feature-deployment.yml

@@ -48,7 +48,7 @@ jobs:
 
       - id: checkout_files
         name: Checkout Files
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
   full_build_push:
     runs-on: ubuntu-22.04
@@ -63,23 +63,23 @@ jobs:
       BUILDX_ENDPOINT: ${{ needs.branch_build_setup.outputs.gh_buildx_endpoint }}
     steps:
       - name: Login to Docker Hub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
         with:
           driver: ${{ env.BUILDX_DRIVER }}
           version: ${{ env.BUILDX_VERSION }}
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
 
       - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v7.0.0
+        uses: docker/build-push-action@v6.9.0
         with:
           context: .
           file: ./aio/Dockerfile-app
@@ -112,7 +112,7 @@ jobs:
           sudo apt-get install -y python3-pip
           pip3 install awscli
       - name: Tailscale
-        uses: tailscale/github-action@v4
+        uses: tailscale/github-action@v2
         with:
           oauth-client-id: ${{ secrets.TAILSCALE_OAUTH_CLIENT_ID }}
           oauth-secret: ${{ secrets.TAILSCALE_OAUTH_SECRET }}

.github/workflows/pull-request-build-lint-api.yml

@@ -3,21 +3,11 @@ name: Build and lint API
 on:
   workflow_dispatch:
   pull_request:
-    branches:
-      - "preview"
-    types:
-      - "opened"
-      - "synchronize"
-      - "ready_for_review"
-      - "review_requested"
-      - "reopened"
+    branches: ["preview"]
+    types: ["opened", "synchronize", "ready_for_review", "review_requested", "reopened"]
     paths:
       - "apps/api/**"
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
 jobs:
   lint-api:
     name: Lint API
@@ -27,13 +17,11 @@ jobs:
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v5
         with:
-          python-version: "3.12.x"
-          cache: 'pip'
-          cache-dependency-path: 'apps/api/requirements.txt'
+          python-version: "3.x"
       - name: Install Pylint
         run: python -m pip install ruff
       - name: Install API Dependencies

.github/workflows/pull-request-build-lint-web-apps.yml

@@ -3,203 +3,41 @@ name: Build and lint web apps
 on:
   workflow_dispatch:
   pull_request:
-    branches:
-      - "preview"
-    types:
-      - "opened"
-      - "synchronize"
-      - "reopened"
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
+    branches: ["preview"]
+    types: ["opened", "synchronize", "ready_for_review", "review_requested", "reopened"]
+    paths:
+      - "**.tsx?"
+      - "**.jsx?"
+      - "**.css"
+      - "**.json"
+      - "!apps/api/**"
 
 jobs:
-  # Format check has no build dependencies - run immediately in parallel
-  check-format:
-    name: check:format
+  build-and-lint:
+    name: Build and lint web apps
     runs-on: ubuntu-latest
-    timeout-minutes: 10
+    timeout-minutes: 25
     if: |
       github.event.pull_request.draft == false &&
       github.event.pull_request.requested_reviewers != null
-    env:
-      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
-      TURBO_SCM_HEAD: ${{ github.sha }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
         with:
-          fetch-depth: 50
-          filter: blob:none
+          fetch-depth: 2
 
       - name: Set up Node.js
-        uses: actions/setup-node@v6
-
-      - name: Enable Corepack and pnpm
-        run: corepack enable pnpm
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Cache pnpm store
-        uses: actions/cache@v5
+        uses: actions/setup-node@v4
         with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-${{ runner.os }}-
+          node-version-file: ".nvmrc"
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+        run: yarn install --frozen-lockfile
 
-      - name: Check formatting
-        run: pnpm turbo run check:format --affected
+      - name: Build web apps
+        run: yarn run build
 
-  # Build packages - required for lint and type checks
-  build:
-    name: Build packages
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    if: |
-      github.event.pull_request.draft == false &&
-      github.event.pull_request.requested_reviewers != null
-    env:
-      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
-      TURBO_SCM_HEAD: ${{ github.sha }}
-      NODE_OPTIONS: "--max-old-space-size=4096"
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 50
-          filter: blob:none
+      - name: Lint web apps
+        run: yarn run ci:lint
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
 
-      - name: Enable Corepack and pnpm
-        run: corepack enable pnpm
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Cache pnpm store
-        uses: actions/cache@v5
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-${{ runner.os }}-
-
-      - name: Restore Turbo cache
-        uses: actions/cache/restore@v5
-        with:
-          path: .turbo
-          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
-          restore-keys: |
-            turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-
-            turbo-${{ runner.os }}-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build packages
-        run: pnpm turbo run build --affected
-
-      - name: Save Turbo cache
-        uses: actions/cache/save@v5
-        with:
-          path: .turbo
-          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
-
-  # Lint check - no build dependency, OxLint is a standalone Rust binary
-  check-lint:
-    name: check:lint
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    if: |
-      github.event.pull_request.draft == false &&
-      github.event.pull_request.requested_reviewers != null
-    env:
-      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
-      TURBO_SCM_HEAD: ${{ github.sha }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 50
-          filter: blob:none
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
-
-      - name: Enable Corepack and pnpm
-        run: corepack enable pnpm
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Cache pnpm store
-        uses: actions/cache@v5
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-${{ runner.os }}-
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run check:lint
-        run: pnpm turbo run check:lint --affected
-
-  # Type check depends on build artifacts
-  check-types:
-    name: check:types
-    runs-on: ubuntu-latest
-    needs: build
-    timeout-minutes: 15
-    env:
-      TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
-      TURBO_SCM_HEAD: ${{ github.sha }}
-      NODE_OPTIONS: "--max-old-space-size=4096"
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 50
-          filter: blob:none
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
-
-      - name: Enable Corepack and pnpm
-        run: corepack enable pnpm
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Cache pnpm store
-        uses: actions/cache@v5
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            pnpm-store-${{ runner.os }}-
-
-      - name: Restore Turbo cache
-        uses: actions/cache/restore@v5
-        with:
-          path: .turbo
-          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run check:types
-        run: pnpm turbo run check:types --affected

.github/workflows/sync-repo-pr.yml

@@ -0,0 +1,52 @@
+name: Create PR on Sync
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "sync/**"
+
+env:
+  CURRENT_BRANCH: ${{ github.ref_name }}
+  TARGET_BRANCH: "preview" # The target branch that you would like to merge changes like develop
+  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
+  ACCOUNT_USER_NAME: ${{ vars.ACCOUNT_USER_NAME }}
+  ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }}
+
+jobs:
+  create_pull_request:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Fetch all history for all branches and tags
+
+      - name: Setup Git
+        run: |
+          git config user.name "$ACCOUNT_USER_NAME"
+          git config user.email "$ACCOUNT_USER_EMAIL"
+
+      - name: Setup GH CLI and Git Config
+        run: |
+          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
+          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
+          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+          sudo apt update
+          sudo apt install gh -y
+
+      - name: Create PR to Target Branch
+        run: |
+          # get all pull requests and check if there is already a PR
+          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $CURRENT_BRANCH --state open --json number | jq '.[] | .number')
+          if [ -n "$PR_EXISTS" ]; then
+            echo "Pull Request already exists: $PR_EXISTS"
+          else
+            echo "Creating new pull request"
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "${{ vars.SYNC_PR_TITLE }}" --body "")
+            echo "Pull Request created: $PR_URL"
+          fi

.github/workflows/sync-repo.yml

@@ -0,0 +1,44 @@
+name: Sync Repositories
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - preview
+
+env:
+  SOURCE_BRANCH_NAME: ${{ github.ref_name }}
+
+jobs:
+  sync_changes:
+    runs-on: ubuntu-22.04
+    permissions:
+      pull-requests: write
+      contents: read
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+          fetch-depth: 0
+
+      - name: Setup GH CLI
+        run: |
+          type -p curl >/dev/null || (sudo apt update && sudo apt install curl -y)
+          curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg
+          sudo chmod go+r /usr/share/keyrings/githubcli-archive-keyring.gpg
+          echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
+          sudo apt update
+          sudo apt install gh -y
+
+      - name: Push Changes to Target Repo
+        env:
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        run: |
+          TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
+          TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
+          SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
+
+          git checkout $SOURCE_BRANCH
+          git remote add target-origin-a "https://$GH_TOKEN@github.com/$TARGET_REPO.git"
+          git push target-origin-a $SOURCE_BRANCH:$TARGET_BRANCH

.gitignore

@@ -16,22 +16,19 @@ node_modules
 /out/
 
 # Production
+/build
 dist/
 out/
-build/
-.react-router/
 
 # Misc
 .DS_Store
 *.pem
 .history
-tsconfig.tsbuildinfo
 
 # Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 .pnpm-debug.log*
 
 # Local env files
@@ -63,7 +60,6 @@ node_modules/
 assets/dist/
 npm-debug.log
 yarn-error.log
-pnpm-debug.log
 
 # Editor directories and files
 .idea
@@ -79,9 +75,10 @@ package-lock.json
 
 # lock files
 package-lock.json
+pnpm-lock.yaml
+pnpm-workspace.yaml
 
-
-
+.npmrc
 .secrets
 tmp/
 
@@ -98,15 +95,3 @@ dev-editor
 # Redis
 *.rdb
 *.rdb.gz
-
-storybook-static
-
-CLAUDE.md
-
-build/
-.react-router/
-
-build/
-.react-router/
-temp/
-scripts/

.husky/pre-commit

@@ -1 +0,0 @@
-pnpm lint-staged

.mise.toml

@@ -1,2 +0,0 @@
-[tools]
-node = "22.18.0"

.npmrc

@@ -1,54 +0,0 @@
-# ------------------------------
-# Core Workspace Behavior
-# ------------------------------
-
-# Always prefer using local workspace packages when available
-prefer-workspace-packages = true
-
-# Symlink workspace packages instead of duplicating them
-link-workspace-packages = true
-
-# Use a single lockfile across the whole monorepo
-shared-workspace-lockfile = true
-
-# Ensure packages added from workspace save using workspace: protocol
-save-workspace-protocol = true
-
-
-# ------------------------------
-# Dependency Resolution
-# ------------------------------
-
-# Choose the highest compatible version across the workspace
-# → reduces fragmentation & node_modules bloat
-resolution-mode = highest
-
-# Automatically install peer dependencies instead of forcing every package to declare them
-auto-install-peers = true
-
-# Don't break the install if peers are missing
-strict-peer-dependencies = false
-
-
-# ------------------------------
-# Performance Optimizations
-# ------------------------------
-
-# Use cached artifacts for native modules (sharp, esbuild, etc.)
-side-effects-cache = true
-
-# Prefer local cached packages rather than hitting network
-prefer-offline = true
-
-# In CI, refuse to modify lockfile (prevents drift)
-prefer-frozen-lockfile = true
-
-# Use isolated linker (best compatibility with Node ecosystem tools)
-node-linker = isolated
-
-# Hoist commonly used tools to the root to prevent duplicates and speed up resolution
-public-hoist-pattern[] = typescript
-public-hoist-pattern[] = eslint
-public-hoist-pattern[] = *@plane/*
-public-hoist-pattern[] = vite
-public-hoist-pattern[] = turbo

.nvmrc

@@ -0,0 +1 @@
+lts/jod

.oxfmtrc.json

@@ -1,17 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "sortTailwindcss": {
-    "stylesheet": "packages/tailwind-config/index.css",
-    "functions": ["cn", "clsx", "cva"]
-  },
-  "overrides": [
-    {
-      "files": ["packages/codemods/**/*"],
-      "options": {
-        "printWidth": 80
-      }
-    }
-  ]
-}

.oxlintrc.json

@@ -1,53 +0,0 @@
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["react", "typescript", "jsx-a11y", "import", "promise", "unicorn", "oxc"],
-  "categories": {
-    "correctness": "warn",
-    "suspicious": "warn",
-    "perf": "warn"
-  },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es2024": true
-  },
-  "settings": {
-    "react": {
-      "version": "18.3"
-    },
-    "jsx-a11y": {
-      "polymorphicPropName": "as"
-    }
-  },
-  "ignorePatterns": [
-    ".cache/**",
-    ".next/**",
-    ".react-router/**",
-    ".storybook/**",
-    ".turbo/**",
-    ".vite/**",
-    "*.config.{js,mjs,cjs,ts}",
-    "build/**",
-    "coverage/**",
-    "dist/**",
-    "**/public/**",
-    "storybook-static/**"
-  ],
-  "rules": {
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
-    "unicorn/filename-case": "off",
-    "unicorn/no-null": "off",
-    "unicorn/prevent-abbreviations": "off",
-    "no-unused-vars": [
-      "warn",
-      {
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_",
-        "destructuredArrayIgnorePattern": "^_",
-        "ignoreRestSiblings": true
-      }
-    ]
-  }
-}

.prettierignore

@@ -1,10 +0,0 @@
-.next/
-.react-router/
-.turbo/
-.vite/
-build/
-dist/
-node_modules/
-out/
-pnpm-lock.yaml
-storybook-static/

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

AGENTS.md

@@ -1,24 +0,0 @@
-# Agent Development Guide
-
-## Commands
-
-- `pnpm dev` - Start all dev servers (web:3000, admin:3001)
-- `pnpm build` - Build all packages and apps
-- `pnpm check` - Run all checks (format, lint, types)
-- `pnpm check:lint` - OxLint across all packages
-- `pnpm check:types` - TypeScript type checking
-- `pnpm fix` - Auto-fix format and lint issues
-- `pnpm turbo run <command> --filter=<package>` - Target specific package/app
-- `pnpm --filter=@plane/ui storybook` - Start Storybook on port 6006
-
-## Code Style
-
-- **Imports**: Use `workspace:*` for internal packages, `catalog:` for external deps
-- **TypeScript**: Strict mode enabled, all files must be typed
-- **Formatting**: oxfmt, run `pnpm fix:format`
-- **Linting**: OxLint with shared `.oxlintrc.json` config
-- **Naming**: camelCase for variables/functions, PascalCase for components/types
-- **Error Handling**: Use try-catch with proper error types, log errors appropriately
-- **State Management**: MobX stores in `packages/shared-state`, reactive patterns
-- **Testing**: All features require unit tests, use existing test framework per package
-- **Components**: Build in `@plane/ui` with Storybook for isolated development

CODEOWNERS

@@ -1,8 +0,0 @@
-.oxlintrc.json   @sriramveeraghanta @lifeiscontent
-.oxfmtrc.json   @sriramveeraghanta @lifeiscontent
-apps/api/           @dheeru0198 @pablohashescobar
-apps/web/           @sriramveeraghanta
-apps/space/         @sriramveeraghanta
-apps/admin/         @sriramveeraghanta
-apps/live/          @Palanikannan1437
-deployments/        @mguptahub

CONTRIBUTING.md

@@ -73,7 +73,7 @@ docker compose -f docker-compose-local.yml up
 4. Start web apps:
 
 ```bash
-pnpm dev
+yarn dev
 ```
 
 5. Open your browser to http://localhost:3001/god-mode/ and register yourself as instance admin
@@ -91,7 +91,7 @@ If you would like to _implement_ it, an issue with your proposal must be submitt
 To ensure consistency throughout the source code, please keep these rules in mind as you are working:
 
 - All features or bug fixes must be tested by one or more specs (unit-tests).
-- We lint with [OxLint](https://oxc.rs/docs/guide/usage/linter) using the shared `.oxlintrc.json` and format with [oxfmt](https://oxc.rs/docs/guide/usage/formatter) using `.oxfmtrc.json`.
+- We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
 ## Ways to contribute
 
@@ -187,19 +187,18 @@ Adding a new language involves several steps to ensure it integrates seamlessly
     Add the new language to the TLanguage type in the language definitions file:
 
 ```ts
-// packages/i18n/src/types/language.ts
-export type TLanguage = "en" | "fr" | "your-lang";
+      // packages/i18n/src/types/language.ts
+      export type TLanguage = "en" | "fr" | "your-lang";
 ```
 
 1.  **Add language configuration**
     Include the new language in the list of supported languages:
-
 ```ts
-// packages/i18n/src/constants/language.ts
-export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
-  { label: "English", value: "en" },
-  { label: "Your Language", value: "your-lang" },
-];
+      // packages/i18n/src/constants/language.ts
+      export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+      { label: "English", value: "en" },
+      { label: "Your Language", value: "your-lang" }
+      ];
 ```
 
 2.  **Create translation files**
@@ -211,7 +210,6 @@ export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
 
 3.  **Update import logic**
     Modify the language import logic to include your new language:
-
 ```ts
       private importLanguageFile(language: TLanguage): Promise<any> {
       switch (language) {
@@ -244,4 +242,4 @@ Happy translating! 🌍✨
 
 ## Need help? Questions and suggestions
 
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Forum](https://forum.plane.so).
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).

COPYRIGHT.txt

@@ -1,3 +0,0 @@
-Copyright (c) 2023-present Plane Software, Inc. and contributors
-SPDX-License-Identifier: AGPL-3.0-only
-See the LICENSE file for details.

COPYRIGHT_CHECK.md

@@ -1,34 +0,0 @@
-## Copyright check
-
-To verify that all tracked Python files contain the correct copyright header for **Plane Software Inc.** for the year **2023**, run this command from the repository root:
-
-```bash
-addlicense --check -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
-```
-
-#### To Apply Changes
-
-python files
-
-```bash
-addlicense -v -f COPYRIGHT.txt -ignore "**/migrations/**" $(git ls-files '*.py')
-```
-
-ts and tsx files in a specific app
-
-```bash
-addlicense -v -f COPYRIGHT.txt \
-  -ignore "**/*.config.ts" \
-  -ignore "**/*.d.ts" \
-  $(git ls-files 'packages/*.ts')
-```
-
-Note: Please make sure ts command is running on specific folder, running it for the whole mono repo is crashing os processes.
-
-#### Other Options
-
-- **`addlicense -check`**: runs in check-only mode and fails if any file is missing or has an incorrect header.
-- **`-c "Plane Software Inc."`**: sets the copyright holder.
-- **`-f LICENSE.txt`**: uses the contents and format defined in `LICENSE.txt` as the header template.
-- **`-y 2023`**: sets the year in the header.
-- **`$(git ls-files '*.py')`**: restricts the check to Python files tracked in git.

README.md

@@ -2,22 +2,37 @@
 
 <p align="center">
 <a href="https://plane.so">
-  <img src="https://media.docs.plane.so/logo/plane_github_readme.png" alt="Plane Logo" width="400">
+  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
-<p align="center"><b>Modern project management for all teams</b></p>
+<h1 align="center"><b>Plane</b></h1>
+<p align="center"><b>Open-source project management that unlocks customer value</b></p>
+
+<p align="center">
+<a href="https://discord.com/invite/A92xrEGCge">
+<img alt="Discord online members" src="https://img.shields.io/discord/1031547764020084846?color=5865F2&label=Discord&style=for-the-badge" />
+</a>
+<img alt="Commit activity per month" src="https://img.shields.io/github/commit-activity/m/makeplane/plane?style=for-the-badge" />
+</p>
 
 <p align="center">
     <a href="https://plane.so/"><b>Website</b></a> •
-    <a href="https://forum.plane.so"><b>Forum</b></a> •
-    <a href="https://x.com/planepowers"><b>X</b></a> •
+    <a href="https://github.com/makeplane/plane/releases"><b>Releases</b></a> •
+    <a href="https://twitter.com/planepowers"><b>Twitter</b></a> •
     <a href="https://docs.plane.so/"><b>Documentation</b></a>
 </p>
 
 <p>
     <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-top.webp"
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screen.webp"
+        alt="Plane Screens"
+        width="100%"
+      />
+    </a>
+    <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
+      <img
+        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screens_dark_mode.webp"
         alt="Plane Screens"
         width="100%"
       />
@@ -26,20 +41,20 @@
 
 Meet [Plane](https://plane.so/), an open-source project management tool to track issues, run ~sprints~ cycles, and manage product roadmaps without the chaos of managing the tool itself. 🧘‍♀️
 
-> Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Forum](https://forum.plane.so) or raise a GitHub issue. We read everything and respond to most.
+> Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
 
 ## 🚀 Installation
 
 Getting started with Plane is simple. Choose the setup that works best for you:
 
 - **Plane Cloud**
-  Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
 
 - **Self-host Plane**
-  Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
+Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
 
-| Installation methods | Docs link                                                                                                                                                                               |
-| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Installation methods | Docs link                                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
 | Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |
 
@@ -47,49 +62,51 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 
 ## 🌟 Features
 
-- **Work Items**
-  Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
+- **Issues**
+Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
 - **Cycles**
-  Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
+Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
 
 - **Modules**
-  Simplify complex projects by dividing them into smaller, manageable modules.
+Simplify complex projects by dividing them into smaller, manageable modules.
 
 - **Views**
-  Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
+Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
 
 - **Pages**
-  Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
+Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
 
 - **Analytics**
-  Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
+Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
+
+- **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
+
 
 ## 🛠️ Local development
 
 See [CONTRIBUTING](./CONTRIBUTING.md)
 
 ## ⚙️ Built with
-
-[![React Router](https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router&style=for-the-badge&logoColor=white)](https://reactrouter.com/)
+[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
 [![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
 [![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
 ## 📸 Screenshots
 
-  <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-work-items.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Issues_rNZjrGgFl.png?updatedAt=1709298765880"
         alt="Plane Views"
         width="100%"
       />
     </a>
   </p>
-  <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-cycles.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Cycles_jCDhqmTl9.png?updatedAt=1709298780697"
         width="100%"
       />
     </a>
@@ -97,7 +114,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-modules.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Modules_PSCVsbSfI.png?updatedAt=1709298796783"
         alt="Plane Cycles and Modules"
         width="100%"
       />
@@ -106,7 +123,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-views.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Views_uxXsRatS4.png?updatedAt=1709298834522"
         alt="Plane Analytics"
         width="100%"
       />
@@ -115,21 +132,30 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://media.docs.plane.so/GitHub-readme/github-analytics.webp"
+        src="https://ik.imagekit.io/w2okwbtu2/Analytics_0o22gLRtp.png?updatedAt=1709298834389"
         alt="Plane Pages"
         width="100%"
       />
     </a>
   </p>
 </p>
+<p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
+        alt="Plane Command Menu"
+        width="100%"
+      />
+    </a>
+  </p>
+</p>
 
 ## 📝 Documentation
-
 Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
 
 ## ❤️ Community
 
-Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Forum](https://forum.plane.so). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
+Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Discord server](https://discord.com/invite/A92xrEGCge). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
 
 Feel free to ask questions, report bugs, participate in discussions, share ideas, request features, or showcase your projects. We’d love to hear from you!
 
@@ -145,7 +171,7 @@ There are many ways you can contribute to Plane:
 
 - Report [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) or submit [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+).
 - Review the [documentation](https://docs.plane.so/) and submit [pull requests](https://github.com/makeplane/docs) to improve it—whether it's fixing typos or adding new content.
-- Talk or write about Plane or any other ecosystem integration and [let us know](https://forum.plane.so)!
+- Talk or write about Plane or any other ecosystem integration and [let us know](https://discord.com/invite/A92xrEGCge)!
 - Show your support by upvoting [popular feature requests](https://github.com/makeplane/plane/issues).
 
 Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us.
@@ -160,6 +186,6 @@ Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CON
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>
 
-## License
 
+## License
 This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).

apps/admin/.dockerignore

@@ -1,5 +0,0 @@
-# React Router - https://github.com/remix-run/react-router-templates/blob/dc79b1a065f59f3bfd840d4ef75cc27689b611e6/default/.dockerignore
-.react-router/
-build/
-node_modules/
-README.md

apps/admin/.env.example

@@ -1,12 +1,12 @@
-VITE_API_BASE_URL="http://localhost:8000"
+NEXT_PUBLIC_API_BASE_URL="http://localhost:8000"
 
-VITE_WEB_BASE_URL="http://localhost:3000"
+NEXT_PUBLIC_WEB_BASE_URL="http://localhost:3000"
 
-VITE_ADMIN_BASE_URL="http://localhost:3001"
-VITE_ADMIN_BASE_PATH="/god-mode"
+NEXT_PUBLIC_ADMIN_BASE_URL="http://localhost:3001"
+NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 
-VITE_SPACE_BASE_URL="http://localhost:3002"
-VITE_SPACE_BASE_PATH="/spaces"
+NEXT_PUBLIC_SPACE_BASE_URL="http://localhost:3002"
+NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
 
-VITE_LIVE_BASE_URL="http://localhost:3100"
-VITE_LIVE_BASE_PATH="/live"
+NEXT_PUBLIC_LIVE_BASE_URL="http://localhost:3100"
+NEXT_PUBLIC_LIVE_BASE_PATH="/live"

apps/admin/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+};

apps/admin/.prettierignore

@@ -1,10 +1,6 @@
-.next/
-.react-router/
-.turbo/
-.vite/
-build/
-dist/
-node_modules/
+.next
+.vercel
+.tubro
 out/
-pnpm-lock.yaml
-storybook-static/
+dis/
+build/

apps/admin/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

apps/admin/Dockerfile.admin

@@ -1,88 +1,94 @@
 FROM node:22-alpine AS base
 
+# *****************************************************************************
+# STAGE 1: Build the project
+# *****************************************************************************
+FROM base AS builder
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
-ENV TURBO_TELEMETRY_DISABLED=1
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PNPM_HOME/bin:$PATH"
-ENV CI=1
-
-RUN corepack enable pnpm
-
-# =========================================================================== #
-
-FROM base AS builder
-
-RUN pnpm add -g turbo@2.9.4
-
+RUN yarn global add turbo
 COPY . .
 
-# Create a pruned workspace for just the admin app
 RUN turbo prune --scope=admin --docker
 
-# =========================================================================== #
-
+# *****************************************************************************
+# STAGE 2: Install dependencies & build the project
+# *****************************************************************************
 FROM base AS installer
 
-# Build in production mode; we still install dev deps explicitly below
-ENV NODE_ENV=production
-
-# Public envs required at build time (pick up via process.env)
-ARG VITE_API_BASE_URL=""
-ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
-ARG VITE_API_BASE_PATH="/api"
-ENV VITE_API_BASE_PATH=$VITE_API_BASE_PATH
-
-ARG VITE_ADMIN_BASE_URL=""
-ENV VITE_ADMIN_BASE_URL=$VITE_ADMIN_BASE_URL
-ARG VITE_ADMIN_BASE_PATH="/god-mode"
-ENV VITE_ADMIN_BASE_PATH=$VITE_ADMIN_BASE_PATH
-
-ARG VITE_SPACE_BASE_URL=""
-ENV VITE_SPACE_BASE_URL=$VITE_SPACE_BASE_URL
-ARG VITE_SPACE_BASE_PATH="/spaces"
-ENV VITE_SPACE_BASE_PATH=$VITE_SPACE_BASE_PATH
-
-ARG VITE_LIVE_BASE_URL=""
-ENV VITE_LIVE_BASE_URL=$VITE_LIVE_BASE_URL
-ARG VITE_LIVE_BASE_PATH="/live"
-ENV VITE_LIVE_BASE_PATH=$VITE_LIVE_BASE_PATH
-
-ARG VITE_WEB_BASE_URL=""
-ENV VITE_WEB_BASE_URL=$VITE_WEB_BASE_URL
-ARG VITE_WEB_BASE_PATH=""
-ENV VITE_WEB_BASE_PATH=$VITE_WEB_BASE_PATH
-
-ARG VITE_WEBSITE_URL="https://plane.so"
-ENV VITE_WEBSITE_URL=$VITE_WEBSITE_URL
-ARG VITE_SUPPORT_EMAIL="support@plane.so"
-ENV VITE_SUPPORT_EMAIL=$VITE_SUPPORT_EMAIL
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
 
 COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
-COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=builder /app/out/yarn.lock ./yarn.lock
+RUN yarn install --network-timeout 500000
 
-# Copy full directory structure before fetch to ensure all package.json files are available
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
 
-# Fetch dependencies to cache store, then install offline with dev deps
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 
-# Build only the admin package
-RUN pnpm turbo run build --filter=admin
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
 
-# =========================================================================== #
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
 
-FROM nginx:1.29-alpine AS production
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
 
-COPY apps/admin/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html/god-mode
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV TURBO_TELEMETRY_DISABLED=1
+
+RUN yarn turbo run build --filter=admin
+
+# *****************************************************************************
+# STAGE 3: Copy the project and start it
+# *****************************************************************************
+FROM base AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=installer /app/apps/admin/.next/standalone ./
+COPY --from=installer /app/apps/admin/.next/static ./apps/admin/.next/static
+COPY --from=installer /app/apps/admin/public ./apps/admin/public
+
+ARG NEXT_PUBLIC_API_BASE_URL=""
+ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_URL=""
+ENV NEXT_PUBLIC_ADMIN_BASE_URL=$NEXT_PUBLIC_ADMIN_BASE_URL
+
+ARG NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH=$NEXT_PUBLIC_ADMIN_BASE_PATH
+
+ARG NEXT_PUBLIC_SPACE_BASE_URL=""
+ENV NEXT_PUBLIC_SPACE_BASE_URL=$NEXT_PUBLIC_SPACE_BASE_URL
+
+ARG NEXT_PUBLIC_SPACE_BASE_PATH="/spaces"
+ENV NEXT_PUBLIC_SPACE_BASE_PATH=$NEXT_PUBLIC_SPACE_BASE_PATH
+
+ARG NEXT_PUBLIC_WEB_BASE_URL=""
+ENV NEXT_PUBLIC_WEB_BASE_URL=$NEXT_PUBLIC_WEB_BASE_URL
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV TURBO_TELEMETRY_DISABLED=1
 
 EXPOSE 3000
 
-HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
-  CMD curl -fsS http://127.0.0.1:3000/ >/dev/null || exit 1
-
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["node", "apps/admin/server.js"]

apps/admin/Dockerfile.dev

@@ -5,13 +5,13 @@ WORKDIR /app
 
 COPY . .
 
-RUN corepack enable pnpm && pnpm add -g turbo
-RUN pnpm install
+RUN yarn global add turbo
+RUN yarn install
 
-ENV VITE_ADMIN_BASE_PATH="/god-mode"
+ENV NEXT_PUBLIC_ADMIN_BASE_PATH="/god-mode"
 
 EXPOSE 3000
 
 VOLUME [ "/app/node_modules", "/app/admin/node_modules" ]
 
-CMD ["pnpm", "dev", "--filter=admin"]
+CMD ["yarn", "dev", "--filter=admin"]

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

@@ -1,17 +1,11 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
+"use client";
+import { FC } from "react";
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceAIConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -21,7 +15,7 @@ type IInstanceAIForm = {
 
 type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
 
-export function InstanceAIForm(props: IInstanceAIForm) {
+export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
   const { config } = props;
   // store
   const { updateInstanceConfigurations } = useInstance();
@@ -48,7 +42,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/docs/models/overview"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -69,7 +63,7 @@ export function InstanceAIForm(props: IInstanceAIForm) {
           <a
             href="https://platform.openai.com/api-keys"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             here.
@@ -100,8 +94,8 @@ export function InstanceAIForm(props: IInstanceAIForm) {
     <div className="space-y-8">
       <div className="space-y-3">
         <div>
-          <div className="pb-1 text-18 font-medium text-primary">OpenAI</div>
-          <div className="text-13 font-regular text-tertiary">If you use ChatGPT, this is for you.</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>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
           {aiFormFields.map((field) => (
@@ -120,16 +114,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="flex flex-col items-start gap-4">
-        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving" : "Save changes"}
+      <div className="space-y-4">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-1.5 rounded-sm border border-accent-subtle bg-accent-subtle px-4 py-2 text-caption-sm-regular text-accent-secondary">
-          <Lightbulb className="size-4" />
+        <div className="relative inline-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{" "}
-            <a className="font-medium underline" href="https://plane.so/contact">
+            <a className="underline font-medium" href="https://plane.so/contact">
               touch with us.
             </a>
           </div>
@@ -137,4 +131,4 @@ export function InstanceAIForm(props: IInstanceAIForm) {
       </div>
     </div>
   );
-}
+};

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

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

apps/admin/app/(all)/(dashboard)/ai/page.tsx

@@ -1,50 +1,45 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
+// components
 import { InstanceAIForm } from "./form";
 
-const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
+const InstanceAIPage = observer(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <PageWrapper
-      header={{
-        title: "AI features for all your workspaces",
-        description: "Configure your AI API credentials so Plane AI features are turned on for all your workspaces.",
-      }}
-    >
-      {formattedConfig ? (
-        <InstanceAIForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="40%" />
-          <div className="grid w-2/3 grid-cols-2 gap-x-8 gap-y-4">
-            <Loader.Item height="50px" />
-            <Loader.Item height="50px" />
+    <>
+      <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">
+          <div className="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>
-          <Loader.Item height="50px" width="20%" />
-        </Loader>
-      )}
-    </PageWrapper>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceAIForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="40%" />
+              <div className="w-2/3 grid grid-cols-2 gap-x-8 gap-y-4">
+                <Loader.Item height="50px" />
+                <Loader.Item height="50px" />
+              </div>
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Artificial Intelligence Settings - God Mode" }];
-
 export default InstanceAIPage;

apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx

@@ -1,225 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
-import Link from "next/link";
-import { useForm } from "react-hook-form";
-// plane internal packages
-import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGiteaAuthenticationConfigurationKeys } from "@plane/types";
-// components
-import { CodeBlock } from "@/components/common/code-block";
-import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
-import { ControllerSwitch } from "@/components/common/controller-switch";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type Props = {
-  config: IFormattedInstanceConfiguration;
-};
-
-type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
-
-export function InstanceGiteaConfigForm(props: Props) {
-  const { config } = props;
-  // states
-  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
-  // store hooks
-  const { updateInstanceConfigurations } = useInstance();
-  // form data
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors, isDirty, isSubmitting },
-  } = useForm<GiteaConfigFormValues>({
-    defaultValues: {
-      GITEA_HOST: config["GITEA_HOST"] || "https://gitea.com",
-      GITEA_CLIENT_ID: config["GITEA_CLIENT_ID"],
-      GITEA_CLIENT_SECRET: config["GITEA_CLIENT_SECRET"],
-      ENABLE_GITEA_SYNC: config["ENABLE_GITEA_SYNC"] || "0",
-    },
-  });
-
-  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
-
-  const GITEA_FORM_FIELDS: TControllerInputFormField[] = [
-    {
-      key: "GITEA_HOST",
-      type: "text",
-      label: "Gitea Host",
-      description: (
-        <>Use the URL of your Gitea instance. For the official Gitea instance, use &quot;https://gitea.com&quot;.</>
-      ),
-      placeholder: "https://gitea.com",
-      error: Boolean(errors.GITEA_HOST),
-      required: true,
-    },
-    {
-      key: "GITEA_CLIENT_ID",
-      type: "text",
-      label: "Client ID",
-      description: (
-        <>
-          You will get this from your{" "}
-          <a
-            tabIndex={-1}
-            href="https://gitea.com/user/settings/applications"
-            target="_blank"
-            className="text-accent-primary hover:underline"
-            rel="noreferrer"
-          >
-            Gitea OAuth application settings.
-          </a>
-        </>
-      ),
-      placeholder: "70a44354520df8bd9bcd",
-      error: Boolean(errors.GITEA_CLIENT_ID),
-      required: true,
-    },
-    {
-      key: "GITEA_CLIENT_SECRET",
-      type: "password",
-      label: "Client secret",
-      description: (
-        <>
-          Your client secret is also found in your{" "}
-          <a
-            tabIndex={-1}
-            href="https://gitea.com/user/settings/applications"
-            target="_blank"
-            className="text-accent-primary hover:underline"
-            rel="noreferrer"
-          >
-            Gitea OAuth application settings.
-          </a>
-        </>
-      ),
-      placeholder: "9b0050f94ec1b744e32ce79ea4ffacd40d4119cb",
-      error: Boolean(errors.GITEA_CLIENT_SECRET),
-      required: true,
-    },
-  ];
-
-  const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
-    name: "ENABLE_GITEA_SYNC",
-    label: "Gitea",
-  };
-
-  const GITEA_SERVICE_FIELD: TCopyField[] = [
-    {
-      key: "Callback_URI",
-      label: "Callback URI",
-      url: `${originURL}/auth/gitea/callback/`,
-      description: (
-        <>
-          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
-          field{" "}
-          <a
-            tabIndex={-1}
-            href={`${control._formValues.GITEA_HOST || "https://gitea.com"}/user/settings/applications`}
-            target="_blank"
-            className="text-accent-primary hover:underline"
-            rel="noreferrer"
-          >
-            here.
-          </a>
-        </>
-      ),
-    },
-  ];
-
-  const onSubmit = async (formData: GiteaConfigFormValues) => {
-    const payload: Partial<GiteaConfigFormValues> = { ...formData };
-
-    try {
-      const response = await updateInstanceConfigurations(payload);
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Done!",
-        message: "Your Gitea authentication is configured. You should test it now.",
-      });
-      reset({
-        GITEA_HOST: response.find((item) => item.key === "GITEA_HOST")?.value,
-        GITEA_CLIENT_ID: response.find((item) => item.key === "GITEA_CLIENT_ID")?.value,
-        GITEA_CLIENT_SECRET: response.find((item) => item.key === "GITEA_CLIENT_SECRET")?.value,
-        ENABLE_GITEA_SYNC: response.find((item) => item.key === "ENABLE_GITEA_SYNC")?.value,
-      });
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-    if (isDirty) {
-      e.preventDefault();
-      setIsDiscardChangesModalOpen(true);
-    }
-  };
-
-  return (
-    <>
-      <ConfirmDiscardModal
-        isOpen={isDiscardChangesModalOpen}
-        onDiscardHref="/authentication"
-        handleClose={() => setIsDiscardChangesModalOpen(false)}
-      />
-      <div className="flex flex-col gap-8">
-        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
-          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
-            <div className="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
-            {GITEA_FORM_FIELDS.map((field) => (
-              <ControllerInput
-                key={field.key}
-                control={control}
-                type={field.type}
-                name={field.key}
-                label={field.label}
-                description={field.description}
-                placeholder={field.placeholder}
-                error={field.error}
-                required={field.required}
-              />
-            ))}
-            <ControllerSwitch control={control} field={GITEA_FORM_SWITCH_FIELD} />
-            <div className="flex flex-col gap-1 pt-4">
-              <div className="flex items-center gap-4">
-                <Button
-                  variant="primary"
-                  size="lg"
-                  onClick={(e) => void handleSubmit(onSubmit)(e)}
-                  loading={isSubmitting}
-                  disabled={!isDirty}
-                >
-                  {isSubmitting ? "Saving" : "Save changes"}
-                </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
-                  Go back
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 pt-1.5 pb-4">
-              <div className="pt-2 text-18 font-medium">Plane-provided details for Gitea</div>
-              {GITEA_SERVICE_FIELD.map((field) => (
-                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx

@@ -1,105 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import useSWR from "swr";
-// plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
-// assets
-import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
-// components
-import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageWrapper } from "@/components/common/page-wrapper";
-// hooks
-import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
-import { InstanceGiteaConfigForm } from "./form";
-
-const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // config
-  const enableGiteaConfig = formattedConfig?.IS_GITEA_ENABLED ?? "";
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
-  const updateConfig = async (key: "IS_GITEA_ENABLED", value: string) => {
-    setIsSubmitting(true);
-
-    const payload = {
-      [key]: value,
-    };
-
-    const updateConfigPromise = updateInstanceConfigurations(payload);
-
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration",
-      success: {
-        title: "Configuration saved",
-        message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
-
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
-      });
-  };
-
-  const isGiteaEnabled = enableGiteaConfig === "1";
-
-  return (
-    <PageWrapper
-      customHeader={
-        <AuthenticationMethodCard
-          name="Gitea"
-          description="Allow members to login or sign up to plane with their Gitea accounts."
-          icon={<img src={giteaLogo} height={24} width={24} alt="Gitea Logo" />}
-          config={
-            <ToggleSwitch
-              value={isGiteaEnabled}
-              onChange={() => {
-                updateConfig("IS_GITEA_ENABLED", isGiteaEnabled ? "0" : "1");
-              }}
-              size="sm"
-              disabled={isSubmitting || !formattedConfig}
-            />
-          }
-          disabled={isSubmitting || !formattedConfig}
-          withBorder={false}
-        />
-      }
-    >
-      {formattedConfig ? (
-        <InstanceGiteaConfigForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="25%" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" width="50%" />
-        </Loader>
-      )}
-    </PageWrapper>
-  );
-});
-export const meta: Route.MetaFunction = () => [{ title: "Gitea Authentication - God Mode" }];
-
-export default InstanceGiteaAuthenticationPage;

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

@@ -1,28 +1,19 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
-import { ControllerSwitch } from "@/components/common/controller-switch";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -32,7 +23,7 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
-export function InstanceGithubConfigForm(props: Props) {
+export const InstanceGithubConfigForm: FC<Props> = (props) => {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -49,7 +40,6 @@ export function InstanceGithubConfigForm(props: Props) {
       GITHUB_CLIENT_ID: config["GITHUB_CLIENT_ID"],
       GITHUB_CLIENT_SECRET: config["GITHUB_CLIENT_SECRET"],
       GITHUB_ORGANIZATION_ID: config["GITHUB_ORGANIZATION_ID"],
-      ENABLE_GITHUB_SYNC: config["ENABLE_GITHUB_SYNC"] || "0",
     },
   });
 
@@ -67,7 +57,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -89,7 +79,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             GitHub OAuth application settings.
@@ -111,12 +101,7 @@ export function InstanceGithubConfigForm(props: Props) {
     },
   ];
 
-  const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
-    name: "ENABLE_GITHUB_SYNC",
-    label: "GitHub",
-  };
-
-  const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
+  const GITHUB_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -128,7 +113,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             here.
@@ -136,9 +121,6 @@ export function InstanceGithubConfigForm(props: Props) {
         </>
       ),
     },
-  ];
-
-  const GITHUB_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -151,7 +133,7 @@ export function InstanceGithubConfigForm(props: Props) {
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             here.
@@ -164,22 +146,20 @@ export function InstanceGithubConfigForm(props: Props) {
   const onSubmit = async (formData: GithubConfigFormValues) => {
     const payload: Partial<GithubConfigFormValues> = { ...formData };
 
-    try {
-      const response = await updateInstanceConfigurations(payload);
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Done!",
-        message: "Your GitHub authentication is configured. You should test it now.",
-      });
-      reset({
-        GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
-        GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
-        GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
-        ENABLE_GITHUB_SYNC: response.find((item) => item.key === "ENABLE_GITHUB_SYNC")?.value,
-      });
-    } catch (err) {
-      console.error(err);
-    }
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitHub authentication is configured. You should test it now.",
+        });
+        reset({
+          GITHUB_CLIENT_ID: response.find((item) => item.key === "GITHUB_CLIENT_ID")?.value,
+          GITHUB_CLIENT_SECRET: response.find((item) => item.key === "GITHUB_CLIENT_SECRET")?.value,
+          GITHUB_ORGANIZATION_ID: response.find((item) => item.key === "GITHUB_ORGANIZATION_ID")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -197,9 +177,9 @@ export function InstanceGithubConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
-          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
-            <div className="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitHub-provided details for Plane</div>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -213,51 +193,31 @@ export function InstanceGithubConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
-            <ControllerSwitch control={control} field={GITHUB_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button
-                  variant="primary"
-                  size="lg"
-                  onClick={(e) => void handleSubmit(onSubmit)(e)}
-                  loading={isSubmitting}
-                  disabled={!isDirty}
-                >
-                  {isSubmitting ? "Saving" : "Save changes"}
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
                   Go back
                 </Link>
               </div>
             </div>
           </div>
-          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
-            <div className="pt-2 text-18 font-medium">Plane-provided details for GitHub</div>
-
-            <div className="flex flex-col gap-y-4">
-              {/* common service details */}
-              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
-                {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
-                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                ))}
-              </div>
-
-              {/* web service details */}
-              <div className="flex flex-col overflow-hidden rounded-lg">
-                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
-                  <Monitor className="h-3 w-3" />
-                  Web
-                </div>
-                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
-                  {GITHUB_SERVICE_DETAILS.map((field) => (
-                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                  ))}
-                </div>
-              </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitHub</div>
+              {GITHUB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
             </div>
           </div>
         </div>
       </div>
     </>
   );
-}
+};

apps/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}</>;
+}

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

@@ -1,33 +1,24 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
-// assets
-import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
-import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
+// icons
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+// local components
 import { InstanceGithubConfigForm } from "./form";
 
-const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
-  _props: Route.ComponentProps
-) {
+const InstanceGithubAuthenticationPage = observer(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -49,10 +40,10 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration",
+      loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `GitHub authentication is now ${value === "1" ? "active" : "disabled"}.`,
+        message: () => `GitHub authentication is now ${value ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -73,49 +64,50 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
   const isGithubEnabled = enableGithubConfig === "1";
 
   return (
-    <PageWrapper
-      customHeader={
-        <AuthenticationMethodCard
-          name="GitHub"
-          description="Allow members to login or sign up to plane with their GitHub accounts."
-          icon={
-            <img
-              src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-              height={24}
-              width={24}
-              alt="GitHub Logo"
-            />
-          }
-          config={
-            <ToggleSwitch
-              value={isGithubEnabled}
-              onChange={() => {
-                updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
-              }}
-              size="sm"
-              disabled={isSubmitting || !formattedConfig}
-            />
-          }
-          disabled={isSubmitting || !formattedConfig}
-          withBorder={false}
-        />
-      }
-    >
-      {formattedConfig ? (
-        <InstanceGithubConfigForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="25%" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" width="50%" />
-        </Loader>
-      )}
-    </PageWrapper>
+    <>
+      <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
+            name="GitHub"
+            description="Allow members to login or sign up to plane with their GitHub accounts."
+            icon={
+              <Image
+                src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+                height={24}
+                width={24}
+                alt="GitHub Logo"
+              />
+            }
+            config={
+              <ToggleSwitch
+                value={isGithubEnabled}
+                onChange={() => {
+                  updateConfig("IS_GITHUB_ENABLED", isGithubEnabled ? "0" : "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGithubConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "GitHub Authentication - God Mode" }];
-
 export default InstanceGithubAuthenticationPage;

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

@@ -1,27 +1,17 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
-import { ControllerSwitch } from "@/components/common/controller-switch";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -31,7 +21,7 @@ type Props = {
 
 type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
 
-export function InstanceGitlabConfigForm(props: Props) {
+export const InstanceGitlabConfigForm: FC<Props> = (props) => {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -48,7 +38,6 @@ export function InstanceGitlabConfigForm(props: Props) {
       GITLAB_HOST: config["GITLAB_HOST"],
       GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
       GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
-      ENABLE_GITLAB_SYNC: config["ENABLE_GITLAB_SYNC"] || "0",
     },
   });
 
@@ -79,7 +68,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -102,7 +91,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application settings
@@ -116,11 +105,6 @@ export function InstanceGitlabConfigForm(props: Props) {
     },
   ];
 
-  const GITLAB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GitlabConfigFormValues> = {
-    name: "ENABLE_GITLAB_SYNC",
-    label: "GitLab",
-  };
-
   const GITLAB_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URL",
@@ -133,7 +117,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             GitLab OAuth application
@@ -147,22 +131,20 @@ export function InstanceGitlabConfigForm(props: Props) {
   const onSubmit = async (formData: GitlabConfigFormValues) => {
     const payload: Partial<GitlabConfigFormValues> = { ...formData };
 
-    try {
-      const response = await updateInstanceConfigurations(payload);
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Done!",
-        message: "Your GitLab authentication is configured. You should test it now.",
-      });
-      reset({
-        GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
-        GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
-        GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
-        ENABLE_GITLAB_SYNC: response.find((item) => item.key === "ENABLE_GITLAB_SYNC")?.value,
-      });
-    } catch (err) {
-      console.error(err);
-    }
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your GitLab authentication is configured. You should test it now.",
+        });
+        reset({
+          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
+          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
+          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -180,9 +162,9 @@ export function InstanceGitlabConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
-          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
-            <div className="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">GitLab-provided details for Plane</div>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -196,27 +178,24 @@ export function InstanceGitlabConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
-            <ControllerSwitch control={control} field={GITLAB_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button
-                  variant="primary"
-                  size="lg"
-                  onClick={(e) => void handleSubmit(onSubmit)(e)}
-                  loading={isSubmitting}
-                  disabled={!isDirty}
-                >
-                  {isSubmitting ? "Saving" : "Save changes"}
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
                   Go back
                 </Link>
               </div>
             </div>
           </div>
           <div className="col-span-2 md:col-span-1">
-            <div className="flex flex-col gap-y-4 rounded-lg bg-layer-3 px-6 pt-1.5 pb-4">
-              <div className="pt-2 text-18 font-medium">Plane-provided details for GitLab</div>
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for GitLab</div>
               {GITLAB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
               ))}
@@ -226,4 +205,4 @@ export function InstanceGitlabConfigForm(props: Props) {
       </div>
     </>
   );
-}
+};

apps/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}</>;
+}

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

@@ -1,29 +1,20 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import useSWR from "swr";
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
-// assets
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
+// icons
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+// local components
 import { InstanceGitlabConfigForm } from "./form";
 
-const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
-  _props: Route.ComponentProps
-) {
+const InstanceGitlabAuthenticationPage = observer(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -43,10 +34,10 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration",
+      loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `GitLab authentication is now ${value === "1" ? "active" : "disabled"}.`,
+        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -64,46 +55,47 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
       });
   };
   return (
-    <PageWrapper
-      customHeader={
-        <AuthenticationMethodCard
-          name="GitLab"
-          description="Allow members to login or sign up to plane with their GitLab accounts."
-          icon={<img src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
-          config={
-            <ToggleSwitch
-              value={Boolean(parseInt(enableGitlabConfig))}
-              onChange={() => {
-                if (Boolean(parseInt(enableGitlabConfig)) === true) {
-                  updateConfig("IS_GITLAB_ENABLED", "0");
-                } else {
-                  updateConfig("IS_GITLAB_ENABLED", "1");
-                }
-              }}
-              size="sm"
-              disabled={isSubmitting || !formattedConfig}
-            />
-          }
-          disabled={isSubmitting || !formattedConfig}
-          withBorder={false}
-        />
-      }
-    >
-      {formattedConfig ? (
-        <InstanceGitlabConfigForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="25%" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" width="50%" />
-        </Loader>
-      )}
-    </PageWrapper>
+    <>
+      <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
+            name="GitLab"
+            description="Allow members to login or sign up to plane with their GitLab accounts."
+            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGitlabConfig))}
+                onChange={() => {
+                  if (Boolean(parseInt(enableGitlabConfig)) === true) {
+                    updateConfig("IS_GITLAB_ENABLED", "0");
+                  } else {
+                    updateConfig("IS_GITLAB_ENABLED", "1");
+                  }
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGitlabConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "GitLab Authentication - God Mode" }];
-
 export default InstanceGitlabAuthenticationPage;

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

@@ -1,28 +1,18 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useState } from "react";
-import { isEmpty } from "lodash-es";
+"use client";
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-import { Monitor } from "lucide-react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { CodeBlock } from "@/components/common/code-block";
 import { ConfirmDiscardModal } from "@/components/common/confirm-discard-modal";
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import type { TControllerSwitchFormField } from "@/components/common/controller-switch";
-import { ControllerSwitch } from "@/components/common/controller-switch";
-import { ControllerInput } from "@/components/common/controller-input";
-import type { TCopyField } from "@/components/common/copy-field";
-import { CopyField } from "@/components/common/copy-field";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
+import { CopyField, TCopyField } from "@/components/common/copy-field";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -32,7 +22,7 @@ type Props = {
 
 type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
 
-export function InstanceGoogleConfigForm(props: Props) {
+export const InstanceGoogleConfigForm: FC<Props> = (props) => {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -48,7 +38,6 @@ export function InstanceGoogleConfigForm(props: Props) {
     defaultValues: {
       GOOGLE_CLIENT_ID: config["GOOGLE_CLIENT_ID"],
       GOOGLE_CLIENT_SECRET: config["GOOGLE_CLIENT_SECRET"],
-      ENABLE_GOOGLE_SYNC: config["ENABLE_GOOGLE_SYNC"] || "0",
     },
   });
 
@@ -66,7 +55,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#creatingcred"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -88,7 +77,7 @@ export function InstanceGoogleConfigForm(props: Props) {
             tabIndex={-1}
             href="https://developers.google.com/identity/oauth2/web/guides/get-google-api-clientid"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             Learn more
@@ -101,12 +90,7 @@ export function InstanceGoogleConfigForm(props: Props) {
     },
   ];
 
-  const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
-    name: "ENABLE_GOOGLE_SYNC",
-    label: "Google",
-  };
-
-  const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
+  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
       label: "Origin URL",
@@ -118,7 +102,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             here.
@@ -126,9 +110,6 @@ export function InstanceGoogleConfigForm(props: Props) {
         </p>
       ),
     },
-  ];
-
-  const GOOGLE_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Callback_URI",
       label: "Callback URI",
@@ -140,7 +121,7 @@ export function InstanceGoogleConfigForm(props: Props) {
           <a
             href="https://console.cloud.google.com/apis/credentials/oauthclient"
             target="_blank"
-            className="text-accent-primary hover:underline"
+            className="text-custom-primary-100 hover:underline"
             rel="noreferrer"
           >
             here.
@@ -153,21 +134,19 @@ export function InstanceGoogleConfigForm(props: Props) {
   const onSubmit = async (formData: GoogleConfigFormValues) => {
     const payload: Partial<GoogleConfigFormValues> = { ...formData };
 
-    try {
-      const response = await updateInstanceConfigurations(payload);
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Done!",
-        message: "Your Google authentication is configured. You should test it now.",
-      });
-      reset({
-        GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
-        GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
-        ENABLE_GOOGLE_SYNC: response.find((item) => item.key === "ENABLE_GOOGLE_SYNC")?.value,
-      });
-    } catch (err) {
-      console.error(err);
-    }
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Done!",
+          message: "Your Google authentication is configured. You should test it now.",
+        });
+        reset({
+          GOOGLE_CLIENT_ID: response.find((item) => item.key === "GOOGLE_CLIENT_ID")?.value,
+          GOOGLE_CLIENT_SECRET: response.find((item) => item.key === "GOOGLE_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -185,9 +164,9 @@ export function InstanceGoogleConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <div className="grid w-full grid-cols-2 gap-x-12 gap-y-8">
-          <div className="col-span-2 flex flex-col gap-y-4 pt-1 md:col-span-1">
-            <div className="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1 pt-1">
+            <div className="pt-2.5 text-xl font-medium">Google-provided details for Plane</div>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -201,51 +180,31 @@ export function InstanceGoogleConfigForm(props: Props) {
                 required={field.required}
               />
             ))}
-            <ControllerSwitch control={control} field={GOOGLE_FORM_SWITCH_FIELD} />
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button
-                  variant="primary"
-                  size="lg"
-                  onClick={(e) => void handleSubmit(onSubmit)(e)}
-                  loading={isSubmitting}
-                  disabled={!isDirty}
-                >
-                  {isSubmitting ? "Saving" : "Save changes"}
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("neutral-primary", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
                   Go back
                 </Link>
               </div>
             </div>
           </div>
-          <div className="col-span-2 flex flex-col gap-y-6 md:col-span-1">
-            <div className="pt-2 text-18 font-medium">Plane-provided details for Google</div>
-
-            <div className="flex flex-col gap-y-4">
-              {/* common service details */}
-              <div className="flex flex-col gap-y-4 rounded-lg bg-layer-1 px-6 py-4">
-                {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
-                  <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                ))}
-              </div>
-
-              {/* web service details */}
-              <div className="flex flex-col overflow-hidden rounded-lg">
-                <div className="flex items-center gap-x-3 bg-layer-3 px-6 py-3 text-11 font-medium text-secondary uppercase">
-                  <Monitor className="h-3 w-3" />
-                  Web
-                </div>
-                <div className="flex flex-col gap-y-4 bg-layer-1 px-6 py-4">
-                  {GOOGLE_SERVICE_DETAILS.map((field) => (
-                    <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
-                  ))}
-                </div>
-              </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 pt-1.5 pb-4 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Plane-provided details for Google</div>
+              {GOOGLE_SERVICE_DETAILS.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
             </div>
           </div>
         </div>
       </div>
     </>
   );
-}
+};

apps/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}</>;
+}

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

@@ -1,29 +1,20 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import useSWR from "swr";
-import { setPromiseToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
-// assets
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
+// icons
+import GoogleLogo from "@/public/logos/google-logo.svg";
+// local components
 import { InstanceGoogleConfigForm } from "./form";
 
-const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
-  _props: Route.ComponentProps
-) {
+const InstanceGoogleAuthenticationPage = observer(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -43,10 +34,10 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration",
+      loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `Google authentication is now ${value === "1" ? "active" : "disabled"}.`,
+        message: () => `Google authentication is now ${value ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -64,47 +55,48 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
       });
   };
   return (
-    <PageWrapper
-      customHeader={
-        <AuthenticationMethodCard
-          name="Google"
-          description="Allow members to login or sign up to plane with their Google
+    <>
+      <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
+            name="Google"
+            description="Allow members to login or sign up to plane with their Google
             accounts."
-          icon={<img src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
-          config={
-            <ToggleSwitch
-              value={Boolean(parseInt(enableGoogleConfig))}
-              onChange={() => {
-                if (Boolean(parseInt(enableGoogleConfig)) === true) {
-                  updateConfig("IS_GOOGLE_ENABLED", "0");
-                } else {
-                  updateConfig("IS_GOOGLE_ENABLED", "1");
-                }
-              }}
-              size="sm"
-              disabled={isSubmitting || !formattedConfig}
-            />
-          }
-          disabled={isSubmitting || !formattedConfig}
-          withBorder={false}
-        />
-      }
-    >
-      {formattedConfig ? (
-        <InstanceGoogleConfigForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="25%" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" width="50%" />
-        </Loader>
-      )}
-    </PageWrapper>
+            icon={<Image src={GoogleLogo} height={24} width={24} alt="Google Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGoogleConfig))}
+                onChange={() => {
+                  if (Boolean(parseInt(enableGoogleConfig)) === true) {
+                    updateConfig("IS_GOOGLE_ENABLED", "0");
+                  } else {
+                    updateConfig("IS_GOOGLE_ENABLED", "1");
+                  }
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceGoogleConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Google Authentication - God Mode" }];
-
 export default InstanceGoogleAuthenticationPage;

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

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

apps/admin/app/(all)/(dashboard)/authentication/page.tsx

@@ -1,174 +1,113 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useCallback, useRef, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys, TInstanceAuthenticationModes } from "@plane/types";
-import { Loader, ToggleSwitch } from "@plane/ui";
-import { cn, resolveGeneralTheme } from "@plane/utils";
-// components
-import { PageWrapper } from "@/components/common/page-wrapper";
-import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
-// helpers
-import { canDisableAuthMethod } from "@/helpers/authentication";
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // hooks
-import { useAuthenticationModes } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
+// plane admin components
+import { AuthenticationModes } from "@/plane-admin/components/authentication";
 
-const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
-  // theme
-  const { resolvedTheme: resolvedThemeAdmin } = useTheme();
-  const resolvedTheme = resolveGeneralTheme(resolvedThemeAdmin);
-  // Ref to store authentication modes for validation (avoids circular dependency)
-  const authenticationModesRef = useRef<TInstanceAuthenticationModes[]>([]);
-  // state
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  // store hooks
+const InstanceAuthenticationPage = observer(() => {
+  // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-  // derived values
-  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
-  // Create updateConfig with validation - uses authenticationModesRef for current modes
-  const updateConfig = useCallback(
-    (key: TInstanceConfigurationKeys, value: string): void => {
-      // Check if trying to disable (value === "0")
-      if (value === "0") {
-        // Check if this key is an authentication method key
-        const currentAuthModes = authenticationModesRef.current;
-        const isAuthMethodKey = currentAuthModes.some((method) => method.enabledConfigKey === key);
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // derived values
+  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
-        // Only validate if this is an authentication method key
-        if (isAuthMethodKey) {
-          const canDisable = canDisableAuthMethod(key, currentAuthModes, formattedConfig);
+  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
+    setIsSubmitting(true);
 
-          if (!canDisable) {
-            setToast({
-              type: TOAST_TYPE.ERROR,
-              title: "Cannot disable authentication",
-              message:
-                "At least one authentication method must remain enabled. Please enable another method before disabling this one.",
-            });
-            return;
-          }
-        }
-      }
+    const payload = {
+      [key]: value,
+    };
 
-      // Proceed with the update
-      setIsSubmitting(true);
+    const updateConfigPromise = updateInstanceConfigurations(payload);
 
-      const payload = {
-        [key]: value,
-      };
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving configuration",
+      success: {
+        title: "Success",
+        message: () => "Configuration saved successfully",
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
 
-      const updateConfigPromise = updateInstanceConfigurations(payload);
-
-      setPromiseToast(updateConfigPromise, {
-        loading: "Saving configuration",
-        success: {
-          title: "Success",
-          message: () => "Configuration saved successfully",
-        },
-        error: {
-          title: "Error",
-          message: () => "Failed to save configuration",
-        },
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
       });
-
-      void updateConfigPromise
-        .then(() => {
-          setIsSubmitting(false);
-          return undefined;
-        })
-        .catch((err) => {
-          console.error(err);
-          setIsSubmitting(false);
-        });
-    },
-    [formattedConfig, updateInstanceConfigurations]
-  );
-
-  // Get authentication modes - this will use updateConfig which includes validation
-  const authenticationModes = useAuthenticationModes({
-    disabled: isSubmitting,
-    updateConfig,
-    resolvedTheme,
-  });
-
-  // Update ref with latest authentication modes
-  authenticationModesRef.current = authenticationModes;
+  };
 
   return (
-    <PageWrapper
-      header={{
-        title: "Manage authentication modes for your instance",
-        description: "Configure authentication modes for your team and restrict sign-ups to be invite only.",
-      }}
-    >
-      {formattedConfig ? (
-        <div className="space-y-3">
-          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
-            <div className="flex grow items-center gap-4">
-              <div className="grow">
-                <div className="pb-1 text-16 font-medium">Allow anyone to sign up even without an invite</div>
-                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
-                  Toggling this off will only let users sign up when they are invited.
+    <>
+      <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">
+          <div className="text-xl font-medium text-custom-text-100">Manage authentication modes for your instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Configure authentication modes for your team and restrict sign-ups to be invite only.
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <div className="space-y-3">
+              <div className={cn("w-full flex items-center gap-14 rounded")}>
+                <div className="flex grow items-center gap-4">
+                  <div className="grow">
+                    <div className="text-lg font-medium pb-1">Allow anyone to sign up even without an invite</div>
+                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                      Toggling this off will only let users sign up when they are invited.
+                    </div>
+                  </div>
+                </div>
+                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                  <div className="flex items-center gap-4">
+                    <ToggleSwitch
+                      value={Boolean(parseInt(enableSignUpConfig))}
+                      onChange={() => {
+                        if (Boolean(parseInt(enableSignUpConfig)) === true) {
+                          updateConfig("ENABLE_SIGNUP", "0");
+                        } else {
+                          updateConfig("ENABLE_SIGNUP", "1");
+                        }
+                      }}
+                      size="sm"
+                      disabled={isSubmitting}
+                    />
+                  </div>
                 </div>
               </div>
+              <div className="text-lg font-medium pt-6">Available authentication modes</div>
+              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </div>
-            <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-              <div className="flex items-center gap-4">
-                <ToggleSwitch
-                  value={Boolean(parseInt(enableSignUpConfig))}
-                  onChange={() => {
-                    if (Boolean(parseInt(enableSignUpConfig)) === true) {
-                      updateConfig("ENABLE_SIGNUP", "0");
-                    } else {
-                      updateConfig("ENABLE_SIGNUP", "1");
-                    }
-                  }}
-                  size="sm"
-                  disabled={isSubmitting}
-                />
-              </div>
-            </div>
-          </div>
-          <div className="text-lg pt-6 font-medium">Available authentication modes</div>
-          {authenticationModes.map((method) => (
-            <AuthenticationMethodCard
-              key={method.key}
-              name={method.name}
-              description={method.description}
-              icon={method.icon}
-              config={method.config}
-              disabled={isSubmitting}
-              unavailable={method.unavailable}
-            />
-          ))}
+          ) : (
+            <Loader className="space-y-10">
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="75%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="40%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
         </div>
-      ) : (
-        <Loader className="space-y-10">
-          <Loader.Item height="50px" width="75%" />
-          <Loader.Item height="50px" width="75%" />
-          <Loader.Item height="50px" width="40%" />
-          <Loader.Item height="50px" width="40%" />
-          <Loader.Item height="50px" width="20%" />
-        </Loader>
-      )}
-    </PageWrapper>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Authentication Settings - Plane Web" }];
-
 export default InstanceAuthenticationPage;

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

@@ -1,20 +1,13 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useMemo, useState } from "react";
+import React, { FC, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceEmailConfigurationKeys } from "@plane/types";
 // ui
-import { CustomSelect } from "@plane/ui";
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import type { TControllerInputFormField } from "@/components/common/controller-input";
-import { ControllerInput } from "@/components/common/controller-input";
+import { ControllerInput, TControllerInputFormField } from "@/components/common/controller-input";
 // hooks
 import { useInstance } from "@/hooks/store";
 // local components
@@ -34,7 +27,7 @@ const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
   NONE: "No email security",
 };
 
-export function InstanceEmailForm(props: IInstanceEmailForm) {
+export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const { config } = props;
   // states
   const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
@@ -163,12 +156,13 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             />
           ))}
           <div className="flex flex-col gap-1">
-            <h4 className="text-13 text-tertiary">Email security</h4>
+            <h4 className="text-sm text-custom-text-300">Email security</h4>
             <CustomSelect
               value={emailSecurityKey}
               label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
               onChange={handleEmailSecurityChange}
-              buttonClassName="rounded-md border-subtle"
+              buttonClassName="rounded-md border-custom-border-200"
+              optionsClassName="w-full"
               input
             >
               {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
@@ -179,12 +173,12 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
           <div className="flex w-full max-w-xl flex-col gap-y-10 px-1">
             <div className="mr-8 flex items-center gap-10 pt-4">
               <div className="grow">
-                <div className="text-13 font-medium text-primary">Authentication</div>
-                <div className="text-11 font-regular text-tertiary">
+                <div className="text-sm font-medium text-custom-text-100">Authentication</div>
+                <div className="text-xs font-normal text-custom-text-300">
                   This is optional, but we recommend setting up a username and a password for your SMTP server.
                 </div>
               </div>
@@ -207,19 +201,17 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center gap-4 py-1">
+      <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
-          size="lg"
           onClick={handleSubmit(onSubmit)}
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
         >
-          {isSubmitting ? "Saving" : "Save changes"}
+          {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
         <Button
-          variant="secondary"
-          size="lg"
+          variant="outline-primary"
           onClick={() => setIsSendTestEmailModalOpen(true)}
           loading={isSubmitting}
           disabled={!isValid}
@@ -229,4 +221,4 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       </div>
     </div>
   );
-}
+};

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

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

apps/admin/app/(all)/(dashboard)/email/page.tsx

@@ -1,24 +1,15 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Loader, ToggleSwitch } from "@plane/ui";
-// components
-import { PageWrapper } from "@/components/common/page-wrapper";
+import { Loader, setToast, TOAST_TYPE, ToggleSwitch } from "@plane/ui";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
-// local
+// components
 import { InstanceEmailForm } from "./email-config-form";
 
-const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
+const InstanceEmailPage = observer(() => {
   // store
   const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
 
@@ -38,7 +29,7 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
           message: "Email feature has been disabled",
           type: TOAST_TYPE.SUCCESS,
         });
-      } catch (_error) {
+      } catch (error) {
         setToast({
           title: "Error disabling email",
           message: "Failed to disable email feature. Please try again.",
@@ -58,46 +49,45 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
   }, [formattedConfig]);
 
   return (
-    <PageWrapper
-      header={{
-        title: "Secure emails from your own instance",
-        description: (
-          <>
-            Plane can send useful emails to you and your users from your own instance without talking to the Internet.
-            <div className="text-13 font-regular text-tertiary">
-              Set it up below and please test your settings before you save them.&nbsp;
-              <span className="text-danger-primary">Misconfigs can lead to email bounces and errors.</span>
+    <>
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <div className="py-4 space-y-1 flex-shrink-0">
+            <div className="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 className="text-sm font-normal text-custom-text-300">
+                Set it up below and please test your settings before you save them.&nbsp;
+                <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+              </div>
             </div>
-          </>
-        ),
-        actions: isLoading ? (
-          <Loader>
-            <Loader.Item width="24px" height="16px" className="rounded-full" />
-          </Loader>
-        ) : (
-          <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
-        ),
-      }}
-    >
-      {isSMTPEnabled && !isLoading && (
-        <>
-          {formattedConfig ? (
-            <InstanceEmailForm config={formattedConfig} />
-          ) : (
-            <Loader className="space-y-10">
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="75%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="40%" />
-              <Loader.Item height="50px" width="20%" />
+          </div>
+          {isLoading ? (
+            <Loader>
+              <Loader.Item width="24px" height="16px" className="rounded-full" />
             </Loader>
+          ) : (
+            <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
           )}
-        </>
-      )}
-    </PageWrapper>
+        </div>
+        {isSMTPEnabled && !isLoading && (
+          <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+            {formattedConfig ? (
+              <InstanceEmailForm config={formattedConfig} />
+            ) : (
+              <Loader className="space-y-10">
+                <Loader.Item height="50px" width="75%" />
+                <Loader.Item height="50px" width="75%" />
+                <Loader.Item height="50px" width="40%" />
+                <Loader.Item height="50px" width="40%" />
+                <Loader.Item height="50px" width="20%" />
+              </Loader>
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Email Settings - God Mode" }];
-
 export default InstanceEmailPage;

apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx

@@ -1,16 +1,9 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useEffect, useState, Fragment } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
-import { Button } from "@plane/propel/button";
 import { InstanceService } from "@plane/services";
 // ui
-import { Input } from "@plane/ui";
+import { Button, Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -25,7 +18,7 @@ enum ESendEmailSteps {
 
 const instanceService = new InstanceService();
 
-export function SendTestEmailModal(props: Props) {
+export const SendTestEmailModal: FC<Props> = (props) => {
   const { isOpen, handleClose } = props;
 
   // state
@@ -67,10 +60,10 @@ export function SendTestEmailModal(props: Props) {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
+    <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={Fragment}
+          as={React.Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -78,12 +71,12 @@ export function SendTestEmailModal(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="my-10 flex justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
-              as={Fragment}
+              as={React.Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
               enterTo="opacity-100 translate-y-0 sm:scale-100"
@@ -91,8 +84,8 @@ export function SendTestEmailModal(props: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative w-full transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all sm:max-w-xl">
-                <h3 className="text-16 leading-6 font-medium text-primary">
+              <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 px-4 text-left shadow-custom-shadow-md transition-all w-full sm:max-w-xl">
+                <h3 className="text-lg font-medium leading-6 text-custom-text-100">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -107,12 +100,12 @@ export function SendTestEmailModal(props: Props) {
                       value={receiverEmail}
                       onChange={(e) => setReceiverEmail(e.target.value)}
                       placeholder="Receiver email"
-                      className="w-full resize-none text-16"
+                      className="w-full resize-none text-lg"
                       tabIndex={1}
                     />
                   )}
                   {sendEmailStep === ESendEmailSteps.SUCCESS && (
-                    <div className="flex flex-col gap-y-4 text-13">
+                    <div className="flex flex-col gap-y-4 text-sm">
                       <p>
                         We have sent the test email to {receiverEmail}. Please check your spam folder if you cannot find
                         it.
@@ -120,14 +113,14 @@ export function SendTestEmailModal(props: Props) {
                       <p>If you still cannot find it, recheck your SMTP configuration and trigger a new test email.</p>
                     </div>
                   )}
-                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
-                  <div className="mt-5 flex items-center justify-end gap-2">
-                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-sm">{error}</div>}
+                  <div className="flex items-center gap-2 justify-end mt-5">
+                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
-                        {isLoading ? "Sending email" : "Send email"}
+                      <Button variant="primary" size="sm" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                        {isLoading ? "Sending email..." : "Send email"}
                       </Button>
                     )}
                   </div>
@@ -139,4 +132,4 @@ export function SendTestEmailModal(props: Props) {
       </Dialog>
     </Transition.Root>
   );
-}
+};

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

@@ -1,36 +1,33 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
+"use client";
+import { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
-// plane imports
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IInstance, IInstanceAdmin } from "@plane/types";
-import { Input, ToggleSwitch } from "@plane/ui";
+// types
+import { IInstance, IInstanceAdmin } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
-// hooks
 import { useInstance } from "@/hooks/store";
+import { IntercomConfig } from "./intercom";
+// hooks
 
 export interface IGeneralConfigurationForm {
   instance: IInstance;
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
+export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer((props) => {
   const { instance, instanceAdmins } = props;
   // hooks
-  const { updateInstanceInfo } = useInstance();
+  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
 
   // form data
   const {
     handleSubmit,
     control,
+    watch,
     formState: { errors, isSubmitting },
   } = useForm<Partial<IInstance>>({
     defaultValues: {
@@ -42,6 +39,17 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
   const onSubmit = async (formData: Partial<IInstance>) => {
     const payload: Partial<IInstance> = { ...formData };
 
+    // update the intercom configuration
+    const isIntercomEnabled =
+      instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1";
+    if (!payload.is_telemetry_enabled && isIntercomEnabled) {
+      try {
+        await updateInstanceConfigurations({ IS_INTERCOM_ENABLED: "0" });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
     await updateInstanceInfo(payload)
       .then(() =>
         setToast({
@@ -55,8 +63,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
 
   return (
     <div className="space-y-8">
-      <div className="space-y-4">
-        <div className="text-16 font-medium text-primary">Instance details</div>
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Instance details</div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
           <ControllerInput
             key="instance_name"
@@ -70,51 +78,54 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
           />
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-13 text-tertiary">Email</h4>
+            <h4 className="text-sm text-custom-text-300">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-placeholder"
+              className="w-full cursor-not-allowed !text-custom-text-400"
               autoComplete="on"
               disabled
             />
           </div>
 
           <div className="flex flex-col gap-1">
-            <h4 className="text-13 text-tertiary">Instance ID</h4>
+            <h4 className="text-sm text-custom-text-300">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-placeholder"
+              className="w-full cursor-not-allowed rounded-md font-medium !text-custom-text-400"
               disabled
             />
           </div>
         </div>
       </div>
 
-      <div className="space-y-6">
-        <div className="border-b border-subtle pb-1.5 text-16 font-medium text-primary">Telemetry</div>
-        <div className="flex items-center gap-14">
-          <div className="flex grow items-center gap-4">
+      <div className="space-y-3">
+        <div className="text-lg font-medium">Chat + telemetry</div>
+        <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
+        <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+          <div className="grow flex items-center gap-4">
             <div className="shrink-0">
-              <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
-                <Telescope className="size-5 text-tertiary" />
+              <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+                <Telescope className="w-6 h-6 text-custom-text-300/80 p-0.5" />
               </div>
             </div>
             <div className="grow">
-              <div className="text-13 leading-5 font-medium text-primary">Let Plane collect anonymous usage data</div>
-              <div className="text-11 leading-5 font-regular text-tertiary">
+              <div className="text-sm font-medium text-custom-text-100 leading-5">
+                Let Plane collect anonymous usage data
+              </div>
+              <div className="text-xs font-normal text-custom-text-300 leading-5">
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
-                  className="text-accent-primary hover:underline"
+                  className="text-custom-primary-100 hover:underline"
                   rel="noreferrer"
                 >
                   our Telemetry Policy.
@@ -135,15 +146,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div>
-        <Button
-          variant="primary"
-          size="lg"
-          onClick={() => {
-            void handleSubmit(onSubmit)();
-          }}
-          loading={isSubmitting}
-        >
-          {isSubmitting ? "Saving" : "Save changes"}
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>
     </div>

apps/admin/app/(all)/(dashboard)/general/intercom.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { FC, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { MessageSquare } from "lucide-react";
+import { IFormattedInstanceConfiguration } from "@plane/types";
+import { ToggleSwitch } from "@plane/ui";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type TIntercomConfig = {
+  isTelemetryEnabled: boolean;
+};
+
+export const IntercomConfig: FC<TIntercomConfig> = observer((props) => {
+  const { isTelemetryEnabled } = props;
+  // hooks
+  const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+
+  // derived values
+  const isIntercomEnabled = isTelemetryEnabled
+    ? instanceConfigurations
+      ? instanceConfigurations?.find((config) => config.key === "IS_INTERCOM_ENABLED")?.value === "1"
+        ? true
+        : false
+      : undefined
+    : false;
+
+  const { isLoading } = useSWR(isTelemetryEnabled ? "INSTANCE_CONFIGURATIONS" : null, () =>
+    isTelemetryEnabled ? fetchInstanceConfigurations() : null
+  );
+
+  const initialLoader = isLoading && isIntercomEnabled === undefined;
+
+  const submitInstanceConfigurations = async (payload: Partial<IFormattedInstanceConfiguration>) => {
+    try {
+      await updateInstanceConfigurations(payload);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const enableIntercomConfig = () => {
+    submitInstanceConfigurations({ IS_INTERCOM_ENABLED: isIntercomEnabled ? "0" : "1" });
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-14 px-4 py-3 border border-custom-border-200 rounded">
+        <div className="grow flex items-center gap-4">
+          <div className="shrink-0">
+            <div className="flex items-center justify-center w-10 h-10 bg-custom-background-80 rounded-full">
+              <MessageSquare className="w-6 h-6 text-custom-text-300/80 p-0.5" />
+            </div>
+          </div>
+
+          <div className="grow">
+            <div className="text-sm font-medium text-custom-text-100 leading-5">Chat with us</div>
+            <div className="text-xs font-normal text-custom-text-300 leading-5">
+              Let your users chat with us via Intercom or another service. Toggling Telemetry off turns this off
+              automatically.
+            </div>
+          </div>
+
+          <div className="ml-auto">
+            <ToggleSwitch
+              value={isIntercomEnabled ? true : false}
+              onChange={enableIntercomConfig}
+              size="sm"
+              disabled={!isTelemetryEnabled || isSubmitting || initialLoader}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});

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

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

apps/admin/app/(all)/(dashboard)/general/page.tsx

@@ -1,35 +1,31 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
+"use client";
 import { observer } from "mobx-react";
-// components
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// local imports
+// components
 import { GeneralConfigurationForm } from "./form";
-// types
-import type { Route } from "./+types/page";
 
 function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
 
   return (
-    <PageWrapper
-      header={{
-        title: "General settings",
-        description:
-          "Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your instance.",
-      }}
-    >
-      {instance && instanceAdmins && <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />}
-    </PageWrapper>
+    <>
+      <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">
+          <div className="text-xl font-medium text-custom-text-100">General settings</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
+            instance.
+          </div>
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {instance && instanceAdmins && (
+            <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
+          )}
+        </div>
+      </div>
+    </>
   );
 }
 
-export const meta: Route.MetaFunction = () => [{ title: "General Settings - God Mode" }];
-
 export default observer(GeneralPage);

apps/admin/app/(all)/(dashboard)/header.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { Menu, Settings } from "lucide-react";
+// icons
+import { Breadcrumbs } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useTheme } from "@/hooks/store";
+
+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) => {
+    switch (pathName) {
+      case "general":
+        return "General";
+      case "ai":
+        return "Artificial Intelligence";
+      case "email":
+        return "Email";
+      case "authentication":
+        return "Authentication";
+      case "image":
+        return "Image";
+      case "google":
+        return "Google";
+      case "github":
+        return "GitHub";
+      case "gitlab":
+        return "GitLab";
+      case "workspace":
+        return "Workspace";
+      case "create":
+        return "Create";
+      default:
+        return pathName.toUpperCase();
+    }
+  };
+
+  // Function to dynamically generate breadcrumb items based on pathname
+  const generateBreadcrumbItems = (pathname: string) => {
+    const pathSegments = pathname.split("/").slice(1); // removing the first empty string.
+    pathSegments.pop();
+
+    let currentUrl = "";
+    const breadcrumbItems = pathSegments.map((segment) => {
+      currentUrl += "/" + segment;
+      return {
+        title: getHeaderTitle(segment),
+        href: currentUrl,
+      };
+    });
+    return breadcrumbItems;
+  };
+
+  const breadcrumbItems = generateBreadcrumbItems(pathName);
+
+  return (
+    <div className="relative z-10 flex h-header 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">
+        <HamburgerToggle />
+        {breadcrumbItems.length >= 0 && (
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    href="/general/"
+                    label="Settings"
+                    icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+                  />
+                }
+              />
+              {breadcrumbItems.map(
+                (item) =>
+                  item.title && (
+                    <Breadcrumbs.Item
+                      key={item.title}
+                      component={<BreadcrumbLink href={item.href} label={item.title} />}
+                    />
+                  )
+              )}
+            </Breadcrumbs>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

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

@@ -1,13 +1,8 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
+"use client";
+import { FC } from "react";
 import { useForm } from "react-hook-form";
-import { Button } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import type { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { IFormattedInstanceConfiguration, TInstanceImageConfigurationKeys } from "@plane/types";
+import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
 // hooks
@@ -19,7 +14,7 @@ type IInstanceImageConfigForm = {
 
 type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
 
-export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
+export const InstanceImageConfigForm: FC<IInstanceImageConfigForm> = (props) => {
   const { config } = props;
   // store hooks
   const { updateInstanceConfigurations } = useInstance();
@@ -62,7 +57,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
               <a
                 href="https://unsplash.com/documentation#creating-a-developer-account"
                 target="_blank"
-                className="text-accent-primary hover:underline"
+                className="text-custom-primary-100 hover:underline"
                 rel="noreferrer"
               >
                 Learn more.
@@ -76,10 +71,10 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
       </div>
 
       <div>
-        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving" : "Save changes"}
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>
     </div>
   );
-}
+};

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

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

apps/admin/app/(all)/(dashboard)/image/page.tsx

@@ -1,46 +1,41 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { Loader } from "@plane/ui";
-// components
-import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
 // local
 import { InstanceImageConfigForm } from "./form";
 
-const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
+const InstanceImagePage = observer(() => {
   // store
   const { formattedConfig, fetchInstanceConfigurations } = useInstance();
 
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <PageWrapper
-      header={{
-        title: "Third-party image libraries",
-        description: "Let your users search and choose images from third-party libraries",
-      }}
-    >
-      {formattedConfig ? (
-        <InstanceImageConfigForm config={formattedConfig} />
-      ) : (
-        <Loader className="space-y-8">
-          <Loader.Item height="50px" width="50%" />
-          <Loader.Item height="50px" width="20%" />
-        </Loader>
-      )}
-    </PageWrapper>
+    <>
+      <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">
+          <div className="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>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+          {formattedConfig ? (
+            <InstanceImageConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="50%" />
+              <Loader.Item height="50px" width="20%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Images Settings - God Mode" }];
-
 export default InstanceImagePage;

apps/admin/app/(all)/(dashboard)/layout.tsx

@@ -1,32 +1,33 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useEffect } from "react";
+import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
-import { Outlet } from "react-router";
 // components
-import { AdminHeader } from "@/components/common/header";
 import { LogoSpinner } from "@/components/common/logo-spinner";
-import { NewUserPopup } from "@/components/common/new-user-popup";
+import { NewUserPopup } from "@/components/new-user-popup";
 // hooks
 import { useUser } from "@/hooks/store";
 // local components
-import type { Route } from "./+types/layout";
+import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
-function AdminLayout(_props: Route.ComponentProps) {
+type TAdminLayout = {
+  children: ReactNode;
+};
+
+const AdminLayout: FC<TAdminLayout> = (props) => {
+  const { children } = props;
   // router
-  const { replace } = useRouter();
+  const router = useRouter();
   // store hooks
   const { isUserLoggedIn } = useUser();
 
   useEffect(() => {
-    if (isUserLoggedIn === false) replace("/");
-  }, [replace, isUserLoggedIn]);
+    if (isUserLoggedIn === false) {
+      router.push("/");
+    }
+  }, [router, isUserLoggedIn]);
 
   if (isUserLoggedIn === undefined) {
     return (
@@ -40,11 +41,9 @@ function AdminLayout(_props: Route.ComponentProps) {
     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-surface-1">
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
           <AdminHeader />
-          <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
-            <Outlet />
-          </div>
+          <div className="h-full w-full overflow-hidden">{children}</div>
         </main>
         <NewUserPopup />
       </div>
@@ -52,6 +51,6 @@ function AdminLayout(_props: Route.ComponentProps) {
   }
 
   return <></>;
-}
+};
 
 export default observer(AdminLayout);

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -1,8 +1,4 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -20,7 +16,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();
 
-export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
+export const AdminSidebarDropdown = observer(() => {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();
@@ -39,20 +35,20 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "shadow-lg absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-subtle rounded-md border border-subtle bg-surface-1 px-1 py-2 text-11 outline-none",
+        "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",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="truncate px-2 text-secondary">{currentUser?.email}</span>
+        <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-sm px-2 py-1 hover:bg-layer-1-hover"
+          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]" />
@@ -65,7 +61,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
             Sign out
@@ -77,14 +73,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
   useEffect(() => {
     if (csrfToken === undefined)
-      void authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-subtle px-4 py-2.5">
+    <div className="flex max-h-header 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-sm ${
+          className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -94,8 +90,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-                <UserCog2 className="size-5 text-primary" />
+              <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>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -115,7 +111,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
+              <h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
             </div>
           )}
         </div>
@@ -129,7 +125,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               src={getFileURL(currentUser.avatar_url)}
               size={24}
               shape="square"
-              className="!text-body-sm-medium"
+              className="!text-base"
             />
           </Menu.Button>
 

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -1,33 +1,30 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useState, useRef } from "react";
+import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { HelpCircle, MessageSquare, MoveLeft } from "lucide-react";
+import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
-import { WEB_BASE_URL } from "@plane/constants";
 // plane internal packages
-import { GithubIcon, NewTabIcon, PageIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
+import { WEB_BASE_URL } from "@plane/constants";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { useInstance, useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks/store";
 // assets
+// eslint-disable-next-line import/order
+import packageJson from "package.json";
 
 const helpOptions = [
   {
     name: "Documentation",
     href: "https://docs.plane.so/",
-    Icon: PageIcon,
+    Icon: FileText,
   },
   {
-    name: "Join our Forum",
-    href: "https://forum.plane.so",
-    Icon: MessageSquare,
+    name: "Join our Discord",
+    href: "https://discord.com/invite/A92xrEGCge",
+    Icon: DiscordIcon,
   },
   {
     name: "Report a bug",
@@ -36,11 +33,10 @@ const helpOptions = [
   },
 ];
 
-export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection() {
+export const AdminSidebarHelpSection: FC = observer(() => {
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // store
-  const { instance } = useInstance();
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
@@ -50,9 +46,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
   return (
     <div
       className={cn(
-        "flex h-14 w-full flex-shrink-0 items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4",
+        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
         {
-          "h-auto flex-col py-1.5": isSidebarCollapsed,
+          "flex-col h-auto py-1.5": isSidebarCollapsed,
         }
       )}
     >
@@ -60,32 +56,32 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Redirect to Plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
           <a
             href={redirectionLink}
-            className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
           >
-            <NewTabIcon width={14} height={14} />
+            <ExternalLink size={14} />
             {!isSidebarCollapsed && "Redirect to Plane"}
           </a>
         </Tooltip>
         <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
+            className={`ml-auto 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 ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
-            <HelpCircle className="size-4" />
+            <HelpCircle className="h-3.5 w-3.5" />
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
+            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 ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => toggleSidebar(!isSidebarCollapsed)}
           >
-            <MoveLeft className={`size-4 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
           </button>
         </Tooltip>
       </div>
@@ -101,9 +97,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 z-[15] min-w-[10rem] ${
+            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
-            } divide-y divide-subtle-1 rounded-sm bg-surface-1 p-1 whitespace-nowrap shadow-raised-100`}
+            } 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">
@@ -111,11 +107,11 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
-                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1-hover">
+                      <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-secondary" />
+                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
                         </div>
-                        <span className="text-11">{name}</span>
+                        <span className="text-xs">{name}</span>
                       </div>
                     </Link>
                   );
@@ -124,17 +120,17 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                     <button
                       key={name}
                       type="button"
-                      className="flex w-full items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1"
+                      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-secondary" />
+                        <Icon className="h-3.5 w-3.5 text-custom-text-200" />
                       </div>
-                      <span className="text-11">{name}</span>
+                      <span className="text-xs">{name}</span>
                     </button>
                   );
               })}
             </div>
-            <div className="px-2 pt-2 pb-1 text-10">Version: v{instance?.current_version}</div>
+            <div className="px-2 pb-1 pt-2 text-[10px]">Version: v{packageJson.version}</div>
           </div>
         </Transition>
       </div>

apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx

@@ -1,26 +1,59 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
 // plane internal packages
-import { Tooltip } from "@plane/propel/tooltip";
+import { Tooltip, WorkspaceIcon } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
-import { useSidebarMenu } from "@/hooks/use-sidebar-menu";
 
-export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
-  // router
-  const pathName = usePathname();
+const INSTANCE_ADMIN_LINKS = [
+  {
+    Icon: Cog,
+    name: "General",
+    description: "Identify your instances and get key details.",
+    href: `/general/`,
+  },
+  {
+    Icon: WorkspaceIcon,
+    name: "Workspaces",
+    description: "Manage all workspaces on this instance.",
+    href: `/workspace/`,
+  },
+  {
+    Icon: Mail,
+    name: "Email",
+    description: "Configure your SMTP controls.",
+    href: `/email/`,
+  },
+  {
+    Icon: Lock,
+    name: "Authentication",
+    description: "Configure authentication modes.",
+    href: `/authentication/`,
+  },
+  {
+    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 AdminSidebarMenu = observer(() => {
   // store hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
-  // derived values
-  const sidebarMenu = useSidebarMenu();
+  // router
+  const pathName = usePathname();
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
@@ -29,28 +62,41 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   };
 
   return (
-    <div className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-2.5 overflow-y-scroll px-4 py-4">
-      {sidebarMenu.map((item, index) => {
-        const isActive = item.href === pathName || pathName?.includes(item.href);
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
+      {INSTANCE_ADMIN_LINKS.map((item, index) => {
+        const isActive = item.href === pathName || pathName.includes(item.href);
         return (
           <Link key={index} href={item.href} onClick={handleItemClick}>
             <div>
               <Tooltip tooltipContent={item.name} position="right" className="ml-2" disabled={!isSidebarCollapsed}>
                 <div
                   className={cn(
-                    "group flex w-full items-center gap-3 rounded-md px-3 py-2 transition-colors outline-none",
-                    {
-                      "!bg-layer-transparent-active text-primary": isActive,
-                      "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
-                    },
+                    `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
+                    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",
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
                 >
                   {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                   {!isSidebarCollapsed && (
-                    <div className="w-full">
-                      <div className={cn(`text-body-xs-medium transition-colors`)}>{item.name}</div>
-                      <div className={cn(`text-caption-sm-regular transition-colors`)}>{item.description}</div>
+                    <div className="w-full ">
+                      <div
+                        className={cn(
+                          `text-sm font-medium transition-colors`,
+                          isActive ? "text-custom-primary-100" : "text-custom-sidebar-text-200"
+                        )}
+                      >
+                        {item.name}
+                      </div>
+                      <div
+                        className={cn(
+                          `text-[10px] transition-colors`,
+                          isActive ? "text-custom-primary-90" : "text-custom-sidebar-text-400"
+                        )}
+                      >
+                        {item.description}
+                      </div>
                     </div>
                   )}
                 </div>

apps/admin/app/(all)/(dashboard)/sidebar.tsx

@@ -1,10 +1,6 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useEffect, useRef } from "react";
+import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -15,7 +11,7 @@ import { AdminSidebarDropdown } from "./sidebar-dropdown";
 import { AdminSidebarHelpSection } from "./sidebar-help-section";
 import { AdminSidebarMenu } from "./sidebar-menu";
 
-export const AdminSidebar = observer(function AdminSidebar() {
+export const AdminSidebar: FC = observer(() => {
   // store
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
 
@@ -44,7 +40,13 @@ export const AdminSidebar = observer(function AdminSidebar() {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-subtle bg-surface-1 duration-300 md:relative ${isSidebarCollapsed ? "-ml-[290px]" : ""} sm:${isSidebarCollapsed ? "-ml-[290px]" : ""} md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"} `}
+      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
+        ${isSidebarCollapsed ? "-ml-[290px]" : ""}
+        sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
+        md:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
+        lg:ml-0 ${isSidebarCollapsed ? "w-[70px]" : "w-[290px]"}
+      `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <AdminSidebarDropdown />

apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx

@@ -1,28 +1,19 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
 import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { InstanceWorkspaceService } from "@plane/services";
-import type { IWorkspace } from "@plane/types";
-import { validateSlug, validateWorkspaceName } from "@plane/utils";
+import { IWorkspace } from "@plane/types";
 // components
-import { CustomSelect, Input } from "@plane/ui";
+import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
 const instanceWorkspaceService = new InstanceWorkspaceService();
 
-export function WorkspaceCreateForm() {
+export const WorkspaceCreateForm = () => {
   // router
   const router = useRouter();
   // states
@@ -91,13 +82,20 @@ export function WorkspaceCreateForm() {
     <div className="space-y-8">
       <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-x-10 gap-y-6 lg:grid-cols-2">
         <div className="flex flex-col gap-1">
-          <h4 className="text-13 text-tertiary">Name your workspace</h4>
+          <h4 className="text-sm text-custom-text-300">Name your workspace</h4>
           <div className="flex flex-col gap-1">
             <Controller
               control={control}
               name="name"
               rules={{
-                validate: (value) => validateWorkspaceName(value, true),
+                required: "This is a required field.",
+                validate: (value) =>
+                  /^[\w\s-]*$/.test(value) ||
+                  `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`,
+                maxLength: {
+                  value: 80,
+                  message: "Limit your name to 80 characters.",
+                },
               }}
               render={({ field: { value, ref, onChange } }) => (
                 <Input
@@ -118,18 +116,22 @@ export function WorkspaceCreateForm() {
                 />
               )}
             />
-            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+            <span className="text-xs text-red-500">{errors?.name?.message}</span>
           </div>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-13 text-tertiary">Set your workspace&apos;s URL</h4>
-          <div className="flex w-full items-center gap-0.5 rounded-md border-[0.5px] border-subtle px-3">
-            <span className="text-13 whitespace-nowrap text-secondary">{workspaceBaseURL}</span>
+          <h4 className="text-sm text-custom-text-300">Set your workspace&apos;s URL</h4>
+          <div className="flex gap-0.5 w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{workspaceBaseURL}</span>
             <Controller
               control={control}
               name="slug"
               rules={{
-                validate: (value) => validateSlug(value),
+                required: "The URL is a required field.",
+                maxLength: {
+                  value: 48,
+                  message: "Limit your URL to 48 characters.",
+                },
               }}
               render={({ field: { onChange, value, ref } }) => (
                 <Input
@@ -144,19 +146,19 @@ export function WorkspaceCreateForm() {
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder="workspace-name"
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-13"
+                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
                 />
               )}
             />
           </div>
-          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
+          {slugError && <p className="text-sm text-red-500">This URL is taken. Try something else.</p>}
           {invalidSlug && (
-            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
           )}
-          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-13 text-tertiary">How many people will use this workspace?</h4>
+          <h4 className="text-sm text-custom-text-300">How many people will use this workspace?</h4>
           <div className="w-full">
             <Controller
               name="organization_size"
@@ -168,11 +170,12 @@ export function WorkspaceCreateForm() {
                   onChange={onChange}
                   label={
                     ORGANIZATION_SIZE.find((c) => c === value) ?? (
-                      <span className="text-placeholder">Select a range</span>
+                      <span className="text-custom-text-400">Select a range</span>
                     )
                   }
-                  buttonClassName="!border-[0.5px] !border-subtle !shadow-none"
+                  buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                   input
+                  optionsClassName="w-full"
                 >
                   {ORGANIZATION_SIZE.map((item) => (
                     <CustomSelect.Option key={item} value={item}>
@@ -183,25 +186,25 @@ export function WorkspaceCreateForm() {
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center gap-4 py-1">
+      <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
-          size="lg"
+          size="sm"
           onClick={handleSubmit(handleCreateWorkspace)}
           disabled={!isValid}
           loading={isSubmitting}
         >
           {isSubmitting ? "Creating workspace" : "Create workspace"}
         </Button>
-        <Link className={getButtonStyling("secondary", "lg")} href="/workspace">
+        <Link className={getButtonStyling("neutral-primary", "sm")} href="/workspace">
           Go back
         </Link>
       </div>
     </div>
   );
-}
+};

apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx

@@ -1,30 +1,21 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { observer } from "mobx-react";
 // components
-import { PageWrapper } from "@/components/common/page-wrapper";
-// types
-import type { Route } from "./+types/page";
-// local
 import { WorkspaceCreateForm } from "./form";
 
-const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
-  return (
-    <PageWrapper
-      header={{
-        title: "Create a new workspace on this instance.",
-        description: "You will need to invite users from Workspace Settings after you create this workspace.",
-      }}
-    >
+const WorkspaceCreatePage = observer(() => (
+  <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">
+      <div className="text-xl font-medium text-custom-text-100">Create a new workspace on this instance.</div>
+      <div className="text-sm font-normal text-custom-text-300">
+        You will need to invite users from Workspace Settings after you create this workspace.
+      </div>
+    </div>
+    <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
       <WorkspaceCreateForm />
-    </PageWrapper>
-  );
-});
-
-export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
+    </div>
+  </div>
+));
 
 export default WorkspaceCreatePage;

apps/admin/app/(all)/(dashboard)/workspace/layout.tsx

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

apps/admin/app/(all)/(dashboard)/workspace/page.tsx

@@ -1,8 +1,4 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -10,20 +6,15 @@ import Link from "next/link";
 import useSWR from "swr";
 import { Loader as LoaderIcon } from "lucide-react";
 // types
-import { Button, getButtonStyling } from "@plane/propel/button";
-import { setPromiseToast } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, ToggleSwitch } from "@plane/ui";
+import { TInstanceConfigurationKeys } from "@plane/types";
+import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
-import { PageWrapper } from "@/components/common/page-wrapper";
 import { WorkspaceListItem } from "@/components/workspace/list-item";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";
-// types
-import type { Route } from "./+types/page";
 
-const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props: Route.ComponentProps) {
+const WorkspaceManagementPage = observer(() => {
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // store
@@ -75,98 +66,102 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
   };
 
   return (
-    <PageWrapper
-      header={{
-        title: "Workspaces on this instance",
-        description: "See all workspaces and control who can create them.",
-      }}
-    >
-      <div className="space-y-3">
-        {formattedConfig ? (
-          <div className={cn("flex w-full items-center gap-14 rounded-sm")}>
-            <div className="flex grow items-center gap-4">
-              <div className="grow">
-                <div className="pb-1 text-16 font-medium">Prevent anyone else from creating a workspace.</div>
-                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
-                  Toggling this on will let only you create workspaces. You will have to invite users to new workspaces.
-                </div>
-              </div>
-            </div>
-            <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
-              <div className="flex items-center gap-4">
-                <ToggleSwitch
-                  value={Boolean(parseInt(disableWorkspaceCreation))}
-                  onChange={() => {
-                    if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
-                      updateConfig("DISABLE_WORKSPACE_CREATION", "0");
-                    } else {
-                      updateConfig("DISABLE_WORKSPACE_CREATION", "1");
-                    }
-                  }}
-                  size="sm"
-                  disabled={isSubmitting}
-                />
-              </div>
-            </div>
+    <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+      <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+        <div className="flex flex-col gap-1">
+          <div className="text-xl font-medium text-custom-text-100">Workspaces on this instance</div>
+          <div className="text-sm font-normal text-custom-text-300">
+            See all workspaces and control who can create them.
           </div>
-        ) : (
-          <Loader>
-            <Loader.Item height="50px" width="100%" />
-          </Loader>
-        )}
-        {workspaceLoader !== "init-loader" ? (
-          <>
-            <div className="flex items-center justify-between gap-2 pt-6">
-              <div className="flex flex-col items-start gap-x-2">
-                <div className="flex items-center gap-2 text-16 font-medium">
-                  All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
-                  {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
-                    <LoaderIcon className="h-4 w-4 animate-spin" />
-                  )}
-                </div>
-                <div className={cn("text-11 leading-5 font-regular text-tertiary")}>
-                  You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
-                  Member.
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Link href="/workspace/create" className={getButtonStyling("primary", "base")}>
-                  Create workspace
-                </Link>
-              </div>
-            </div>
-            <div className="flex flex-col gap-4 py-2">
-              {workspaceIds.map((workspaceId) => (
-                <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
-              ))}
-            </div>
-            {hasNextPage && (
-              <div className="flex justify-center">
-                <Button
-                  variant="link"
-                  size="lg"
-                  onClick={() => fetchNextWorkspaces()}
-                  disabled={workspaceLoader === "pagination"}
-                >
-                  Load more
-                  {workspaceLoader === "pagination" && <LoaderIcon className="h-3 w-3 animate-spin" />}
-                </Button>
-              </div>
-            )}
-          </>
-        ) : (
-          <Loader className="space-y-10 py-8">
-            <Loader.Item height="24px" width="20%" />
-            <Loader.Item height="92px" width="100%" />
-            <Loader.Item height="92px" width="100%" />
-            <Loader.Item height="92px" width="100%" />
-          </Loader>
-        )}
+        </div>
       </div>
-    </PageWrapper>
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
+        <div className="space-y-3">
+          {formattedConfig ? (
+            <div className={cn("w-full flex items-center gap-14 rounded")}>
+              <div className="flex grow items-center gap-4">
+                <div className="grow">
+                  <div className="text-lg font-medium pb-1">Prevent anyone else from creating a workspace.</div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    Toggling this on will let only you create workspaces. You will have to invite users to new
+                    workspaces.
+                  </div>
+                </div>
+              </div>
+              <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                <div className="flex items-center gap-4">
+                  <ToggleSwitch
+                    value={Boolean(parseInt(disableWorkspaceCreation))}
+                    onChange={() => {
+                      if (Boolean(parseInt(disableWorkspaceCreation)) === true) {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "0");
+                      } else {
+                        updateConfig("DISABLE_WORKSPACE_CREATION", "1");
+                      }
+                    }}
+                    size="sm"
+                    disabled={isSubmitting}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <Loader>
+              <Loader.Item height="50px" width="100%" />
+            </Loader>
+          )}
+          {workspaceLoader !== "init-loader" ? (
+            <>
+              <div className="pt-6 flex items-center justify-between gap-2">
+                <div className="flex flex-col items-start gap-x-2">
+                  <div className="flex items-center gap-2 text-lg font-medium">
+                    All workspaces on this instance{" "}
+                    <span className="text-custom-text-300">• {workspaceIds.length}</span>
+                    {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                      <LoaderIcon className="w-4 h-4 animate-spin" />
+                    )}
+                  </div>
+                  <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                    You can&apos;t yet delete workspaces and you can only go to the workspace if you are an Admin or a
+                    Member.
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Link href="/workspace/create" className={getButtonStyling("primary", "sm")}>
+                    Create workspace
+                  </Link>
+                </div>
+              </div>
+              <div className="flex flex-col gap-4 py-2">
+                {workspaceIds.map((workspaceId) => (
+                  <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
+                ))}
+              </div>
+              {hasNextPage && (
+                <div className="flex justify-center">
+                  <Button
+                    variant="link-primary"
+                    onClick={() => fetchNextWorkspaces()}
+                    disabled={workspaceLoader === "pagination"}
+                  >
+                    Load more
+                    {workspaceLoader === "pagination" && <LoaderIcon className="w-3 h-3 animate-spin" />}
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <Loader className="space-y-10 py-8">
+              <Loader.Item height="24px" width="20%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+              <Loader.Item height="92px" width="100%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
   );
 });
 
-export const meta: Route.MetaFunction = () => [{ title: "Workspace Management - God Mode" }];
-
 export default WorkspaceManagementPage;

apps/admin/app/(all)/(home)/auth-banner.tsx

@@ -1,36 +1,29 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { Info } from "lucide-react";
+import { FC } from "react";
+import { Info, X } from "lucide-react";
 // plane constants
-import type { TAdminAuthErrorInfo } from "@plane/constants";
-// icons
-import { CloseIcon } from "@plane/propel/icons";
+import { TAdminAuthErrorInfo } from "@plane/constants";
 
 type TAuthBanner = {
   bannerData: TAdminAuthErrorInfo | undefined;
   handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
 };
 
-export function AuthBanner(props: TAuthBanner) {
+export const AuthBanner: FC<TAuthBanner> = (props) => {
   const { bannerData, handleBannerData } = props;
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
-      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
-        <Info size={16} className="text-accent-primary" />
+    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
+      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+        <Info size={16} className="text-custom-primary-100" />
       </div>
-      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
+      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
       <div
-        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary transition-all hover:bg-accent-primary/20"
+        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="h-4 w-4 flex-shrink-0" />
+        <X className="w-4 h-4 flex-shrink-0" />
       </div>
     </div>
   );
-}
+};

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import Link from "next/link";
-import { PlaneLockup } from "@plane/propel/icons";
-
-export function AuthHeader() {
-  return (
-    <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
-      <Link href="/">
-        <PlaneLockup height={20} width={95} className="text-primary" />
-      </Link>
-    </div>
-  );
-}

apps/admin/app/(all)/(home)/auth-helpers.tsx

@@ -1,13 +1,22 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
+import { ReactNode } from "react";
+import Image from "next/image";
 import Link from "next/link";
+import { KeyRound, Mails } from "lucide-react";
 // plane packages
-import type { TAdminAuthErrorInfo } from "@plane/constants";
-import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
+import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import { EmailCodesConfiguration } from "@/components/authentication/email-config-switch";
+import { GithubConfiguration } from "@/components/authentication/github-config";
+import { GitlabConfiguration } from "@/components/authentication/gitlab-config";
+import { GoogleConfiguration } from "@/components/authentication/google-config";
+import { PasswordLoginConfiguration } from "@/components/authentication/password-config-switch";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
 
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
@@ -18,7 +27,7 @@ export enum EErrorAlertType {
 }
 
 const errorCodeMessages: {
-  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string) => React.ReactNode };
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
 } = {
   // admin
   [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
@@ -50,7 +59,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -62,7 +71,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -71,11 +80,14 @@ const errorCodeMessages: {
   },
   [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
     title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
   },
 };
 
-export const authErrorHandler = (errorCode: EAdminAuthErrorCodes, email?: string): TAdminAuthErrorInfo | undefined => {
+export const authErrorHandler = (
+  errorCode: EAdminAuthErrorCodes,
+  email?: string | undefined
+): TAdminAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
     EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
     EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
@@ -98,3 +110,53 @@ export const authErrorHandler = (errorCode: EAdminAuthErrorCodes, email?: string
 
   return undefined;
 };
+
+export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+];

apps/admin/app/(all)/(home)/layout.tsx

@@ -1,31 +1,35 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useEffect } from "react";
-import { observer } from "mobx-react";
-import { useRouter } from "next/navigation";
-import { Outlet } from "react-router";
-// hooks
-import { useUser } from "@/hooks/store/use-user";
+import Image from "next/image";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// logo assets
+import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
+import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
+import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
+import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
 
-function RootLayout() {
-  // router
-  const { replace } = useRouter();
-  // store hooks
-  const { isUserLoggedIn } = useUser();
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const { resolvedTheme } = useTheme();
 
-  useEffect(() => {
-    if (isUserLoggedIn === true) replace("/general");
-  }, [replace, isUserLoggedIn]);
+  const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
+  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
 
   return (
-    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto bg-surface-1 px-8 pt-6 pb-10">
-      <Outlet />
+    <div className="relative">
+      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
+        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
+          <div className="flex items-center gap-x-2 py-10">
+            <Link href={`/`} className="h-[30px] w-[133px]">
+              <Image src={logo} alt="Plane logo" />
+            </Link>
+          </div>
+        </div>
+        <div className="absolute inset-0 z-0">
+          <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
+        </div>
+        <div className="relative z-10 flex-grow">{children}</div>
+      </div>
     </div>
   );
 }
-
-export default observer(RootLayout);

apps/admin/app/(all)/(home)/page.tsx

@@ -1,50 +1,62 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
 import { observer } from "mobx-react";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { InstanceFailureView } from "@/components/instance/failure";
+import { InstanceLoading } from "@/components/instance/loading";
 import { InstanceSetupForm } from "@/components/instance/setup-form";
 // hooks
 import { useInstance } from "@/hooks/store";
 // components
-import type { Route } from "./+types/page";
 import { InstanceSignInForm } from "./sign-in-form";
 
-function HomePage() {
+const HomePage = () => {
   // store hooks
   const { instance, error } = useInstance();
 
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="flex h-screen w-full items-center justify-center">
-        <LogoSpinner />
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceLoading />
       </div>
     );
   }
 
   // if instance fetch fails, show failure view
   if (error) {
-    return <InstanceFailureView />;
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceFailureView />
+      </div>
+    );
   }
 
   // if instance is fetched and setup is not done, show setup form
   if (instance && !instance?.is_setup_done) {
-    return <InstanceSetupForm />;
+    return (
+      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
+        <InstanceSetupForm />
+      </div>
+    );
   }
 
   // if instance is fetched and setup is done, show sign in form
-  return <InstanceSignInForm />;
-}
+  return (
+    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
+      <div className="relative flex flex-col space-y-6">
+        <div className="text-center space-y-1">
+          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
+            Manage your Plane instance
+          </h3>
+          <p className="font-medium text-onboarding-text-400">
+            Configure instance-wide settings to secure your instance
+          </p>
+        </div>
+        <InstanceSignInForm />
+      </div>
+    </div>
+  );
+};
 
 export default observer(HomePage);
-
-export const meta: Route.MetaFunction = () => [
-  { title: "Admin – Instance Setup & Sign-In" },
-  { name: "description", content: "Configure your Plane instance or sign in to the admin portal." },
-];

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -1,24 +1,16 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
+"use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
 // plane internal packages
-import type { EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
-import { API_BASE_URL } from "@plane/constants";
-import { Button } from "@plane/propel/button";
+import { API_BASE_URL, EAdminAuthErrorCodes, TAdminAuthErrorInfo } from "@plane/constants";
 import { AuthService } from "@plane/services";
-import { Input, Spinner } from "@plane/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
-import { FormHeader } from "@/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
-import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";
 
 // service initialization
@@ -49,7 +41,7 @@ const defaultFromData: TFormData = {
   password: "",
 };
 
-export function InstanceSignInForm() {
+export const InstanceSignInForm: FC = () => {
   // search params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
@@ -109,91 +101,78 @@ export function InstanceSignInForm() {
   }, [errorCode]);
 
   return (
-    <>
-      <AuthHeader />
-      <div className="mt-10 flex w-full flex-grow flex-col items-center justify-center py-6">
-        <div className="relative flex w-full max-w-[22.5rem] flex-col gap-6">
-          <FormHeader
-            heading="Manage your Plane instance"
-            subHeading="Configure instance-wide settings to secure your instance"
+    <form
+      className="space-y-4"
+      method="POST"
+      action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+      onSubmit={() => setIsSubmitting(true)}
+      onError={() => setIsSubmitting(false)}
+    >
+      {errorData.type && errorData?.message ? (
+        <Banner type="error" message={errorData?.message} />
+      ) : (
+        <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
+      )}
+      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+      <div className="w-full space-y-1">
+        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+          Email <span className="text-red-500">*</span>
+        </label>
+        <Input
+          className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+          id="email"
+          name="email"
+          type="email"
+          inputSize="md"
+          placeholder="name@company.com"
+          value={formData.email}
+          onChange={(e) => handleFormChange("email", e.target.value)}
+          autoComplete="on"
+          autoFocus
+        />
+      </div>
+
+      <div className="w-full space-y-1">
+        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+          Password <span className="text-red-500">*</span>
+        </label>
+        <div className="relative">
+          <Input
+            className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
+            id="password"
+            name="password"
+            type={showPassword ? "text" : "password"}
+            inputSize="md"
+            placeholder="Enter your password"
+            value={formData.password}
+            onChange={(e) => handleFormChange("password", e.target.value)}
+            autoComplete="on"
           />
-          <form
-            className="space-y-4"
-            method="POST"
-            action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-            onSubmit={() => setIsSubmitting(true)}
-            onError={() => setIsSubmitting(false)}
-          >
-            {errorData.type && errorData?.message ? (
-              <Banner type="error" message={errorData?.message} />
-            ) : (
-              <>
-                {errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
-              </>
-            )}
-            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-            <div className="w-full space-y-1">
-              <label className="text-13 font-medium text-tertiary" htmlFor="email">
-                Email <span className="text-danger-primary">*</span>
-              </label>
-              <Input
-                className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
-                id="email"
-                name="email"
-                type="email"
-                inputSize="md"
-                placeholder="name@company.com"
-                value={formData.email}
-                onChange={(e) => handleFormChange("email", e.target.value)}
-                autoComplete="off"
-                autoFocus
-              />
-            </div>
-
-            <div className="w-full space-y-1">
-              <label className="text-13 font-medium text-tertiary" htmlFor="password">
-                Password <span className="text-danger-primary">*</span>
-              </label>
-              <div className="relative">
-                <Input
-                  className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
-                  id="password"
-                  name="password"
-                  type={showPassword ? "text" : "password"}
-                  inputSize="md"
-                  placeholder="Enter your password"
-                  value={formData.password}
-                  onChange={(e) => handleFormChange("password", e.target.value)}
-                  autoComplete="off"
-                />
-                {showPassword ? (
-                  <button
-                    type="button"
-                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
-                    onClick={() => setShowPassword(false)}
-                  >
-                    <EyeOff className="h-4 w-4" />
-                  </button>
-                ) : (
-                  <button
-                    type="button"
-                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
-                    onClick={() => setShowPassword(true)}
-                  >
-                    <Eye className="h-4 w-4" />
-                  </button>
-                )}
-              </div>
-            </div>
-            <div className="py-2">
-              <Button type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
-                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
-              </Button>
-            </div>
-          </form>
+          {showPassword ? (
+            <button
+              type="button"
+              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+              onClick={() => setShowPassword(false)}
+            >
+              <EyeOff className="h-4 w-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+              onClick={() => setShowPassword(true)}
+            >
+              <Eye className="h-4 w-4" />
+            </button>
+          )}
         </div>
       </div>
-    </>
+      <div className="py-2">
+        <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+        </Button>
+      </div>
+    </form>
   );
-}
+};

apps/admin/app/(all)/instance.provider.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type InstanceProviderProps = {
+  children: ReactNode;
+};
+
+export const InstanceProvider: FC<InstanceProviderProps> = observer((props) => {
+  const { children } = props;
+  // store hooks
+  const { fetchInstanceInfo } = useInstance();
+  // fetching instance details
+  useSWR("INSTANCE_DETAILS", () => fetchInstanceInfo(), {
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+  });
+
+  return <>{children}</>;
+});

apps/admin/app/(all)/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { SWRConfig } from "swr";
+// providers
+import { InstanceProvider } from "./instance.provider";
+import { StoreProvider } from "./store.provider";
+import { ToastWithTheme } from "./toast";
+import { UserProvider } from "./user.provider";
+
+const DEFAULT_SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnMount: true,
+  refreshInterval: 600000,
+  errorRetryCount: 3,
+};
+
+export default function InstanceLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
+      <ToastWithTheme />
+      <SWRConfig value={DEFAULT_SWR_CONFIG}>
+        <StoreProvider>
+          <InstanceProvider>
+            <UserProvider>{children}</UserProvider>
+          </InstanceProvider>
+        </StoreProvider>
+      </SWRConfig>
+    </ThemeProvider>
+  );
+}

apps/admin/app/(all)/store.provider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ReactNode, createContext } from "react";
+// plane admin store
+import { RootStore } from "@/plane-admin/store/root.store";
+
+let rootStore = new RootStore();
+
+export const StoreContext = createContext(rootStore);
+
+function initializeStore(initialData = {}) {
+  const singletonRootStore = rootStore ?? new RootStore();
+  // If your page has Next.js data fetching methods that use a Mobx store, it will
+  // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
+  if (initialData) {
+    singletonRootStore.hydrate(initialData);
+  }
+  // For SSG and SSR always create a new store
+  if (typeof window === "undefined") return singletonRootStore;
+  // Create the store once in the client
+  if (!rootStore) rootStore = singletonRootStore;
+  return singletonRootStore;
+}
+
+export type StoreProviderProps = {
+  children: ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialState?: any;
+};
+
+export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+  const store = initializeStore(initialState);
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+};

apps/admin/app/(all)/toast.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
+
+export const ToastWithTheme = () => {
+  const { resolvedTheme } = useTheme();
+  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
+};

apps/admin/app/(all)/user.provider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { FC, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// hooks
+import { useInstance, useTheme, useUser } from "@/hooks/store";
+
+interface IUserProvider {
+  children: ReactNode;
+}
+
+export const UserProvider: FC<IUserProvider> = observer(({ children }) => {
+  // hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  const { currentUser, fetchCurrentUser } = useUser();
+  const { fetchInstanceAdmins } = useInstance();
+
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), {
+    shouldRetryOnError: false,
+  });
+
+  useSWR("INSTANCE_ADMINS", () => fetchInstanceAdmins());
+
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("god_mode_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (isSidebarCollapsed === undefined && localBoolValue != isSidebarCollapsed) toggleSidebar(localBoolValue);
+  }, [isSidebarCollapsed, currentUser, toggleSidebar]);
+
+  return <>{children}</>;
+});

apps/admin/app/assets/logos/gitea-logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640" width="32" height="32"><path d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12" style="fill:#fff"/><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#609926"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#609926"/></svg>

apps/admin/app/compat/next/helper.ts

@@ -1,41 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-/**
- * Ensures that a URL has a trailing slash while preserving query parameters and fragments
- * @param url - The URL to process
- * @returns The URL with a trailing slash added to the pathname (if not already present)
- */
-export function ensureTrailingSlash(url: string): string {
-  try {
-    const fallbackBaseUrl =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "http://dummy.com";
-    // Handle relative URLs by creating a URL object with a fallback base URL
-    const urlObj = new URL(url, fallbackBaseUrl);
-
-    // Don't modify root path
-    if (urlObj.pathname === "/") {
-      return url;
-    }
-
-    // Add trailing slash if it doesn't exist
-    if (!urlObj.pathname.endsWith("/")) {
-      urlObj.pathname += "/";
-    }
-
-    // For relative URLs, return just the path + search + hash
-    if (url.startsWith("/")) {
-      return urlObj.pathname + urlObj.search + urlObj.hash;
-    }
-
-    // For absolute URLs, return the full URL
-    return urlObj.toString();
-  } catch (error) {
-    // If URL parsing fails, return the original URL
-    console.warn("Failed to parse URL for trailing slash enforcement:", url, error);
-    return url;
-  }
-}

apps/admin/app/compat/next/image.tsx

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-
-// Minimal shim so code using next/image compiles under React Router + Vite
-// without changing call sites. It just renders a native img.
-
-type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
-  src: string;
-};
-
-function Image({ src, alt = "", ...rest }: NextImageProps) {
-  return <img src={src} alt={alt} {...rest} />;
-}
-
-export default Image;

apps/admin/app/compat/next/link.tsx

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import { Link as RRLink } from "react-router";
-import { ensureTrailingSlash } from "./helper";
-
-type NextLinkProps = React.ComponentProps<"a"> & {
-  href: string;
-  replace?: boolean;
-  prefetch?: boolean; // next.js prop, ignored
-  scroll?: boolean; // next.js prop, ignored
-  shallow?: boolean; // next.js prop, ignored
-};
-
-function Link({ href, replace, prefetch: _prefetch, scroll: _scroll, shallow: _shallow, ...rest }: NextLinkProps) {
-  return <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
-}
-
-export default Link;

apps/admin/app/compat/next/navigation.ts

@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useMemo } from "react";
-import { useLocation, useNavigate, useSearchParams as useSearchParamsRR } from "react-router";
-import { ensureTrailingSlash } from "./helper";
-
-export function useRouter() {
-  const navigate = useNavigate();
-  return useMemo(
-    () => ({
-      push: (to: string) => navigate(ensureTrailingSlash(to)),
-      replace: (to: string) => navigate(ensureTrailingSlash(to), { replace: true }),
-      back: () => navigate(-1),
-      forward: () => navigate(1),
-      refresh: () => {
-        location.reload();
-      },
-      prefetch: async (_to: string) => {
-        // no-op in this shim
-      },
-    }),
-    [navigate]
-  );
-}
-
-export function usePathname(): string {
-  const { pathname } = useLocation();
-  return pathname;
-}
-
-export function useSearchParams(): URLSearchParams {
-  const [searchParams] = useSearchParamsRR();
-  return searchParams;
-}

apps/admin/app/components/404.tsx

@@ -1,42 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import React from "react";
-import { Link } from "react-router";
-// ui
-import { Button } from "@plane/propel/button";
-// images
-import Image404 from "@/app/assets/images/404.svg?url";
-
-function PageNotFound() {
-  return (
-    <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
-      <div className="grid h-full place-items-center p-4">
-        <div className="space-y-8 text-center">
-          <div className="relative mx-auto h-60 w-60 lg:h-80 lg:w-80">
-            <img src={Image404} alt="404 - Page not found" className="h-full w-full object-contain" />
-          </div>
-          <div className="space-y-2">
-            <h3 className="text-16 font-semibold">Oops! Something went wrong.</h3>
-            <p className="text-13 text-secondary">
-              Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
-              temporarily unavailable.
-            </p>
-          </div>
-          <Link to="/general/">
-            <span className="flex justify-center py-4">
-              <Button variant="secondary" size="lg">
-                Go to general settings
-              </Button>
-            </span>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default PageNotFound;

apps/admin/app/entry.client.tsx

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { startTransition, StrictMode } from "react";
-import { hydrateRoot } from "react-dom/client";
-import { HydratedRouter } from "react-router/dom";
-
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <HydratedRouter />
-    </StrictMode>
-  );
-});