release: v1.3.1 #8917

Add $PNPM_HOME/bin to PATH so corepack-installed pnpm binaries are
resolvable during Docker builds.

.claude/skills/pr-description.md

@@ -0,0 +1,58 @@
+---
+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

@@ -0,0 +1,147 @@
+---
+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

.codespellrc

@@ -1,7 +0,0 @@
-[codespell]
-# Ref: https://github.com/codespell-project/codespell#using-a-config-file
-skip = .git*,*.svg,i18n,*-lock.yaml,*.css,.codespellrc,migrations,*.js,*.map,*.mjs
-check-hidden = true
-# ignore all CamelCase and camelCase
-ignore-regex = \b[A-Za-z][a-z]+[A-Z][a-zA-Z]+\b
-ignore-words-list = tread

.github/ISSUE_TEMPLATE/config.yaml

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

.github/workflows/build-branch.yml

@@ -134,7 +134,7 @@ jobs:
 
       - id: checkout_files
         name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
   branch_build_push_admin:
     name: Build-Push Admin Docker Image
@@ -142,7 +142,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Admin Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -164,7 +164,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Web Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -186,7 +186,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Space Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -208,7 +208,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Live Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -230,7 +230,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Backend Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -252,7 +252,7 @@ jobs:
     needs: [branch_build_setup]
     steps:
       - name: Proxy Build and Push
-        uses: makeplane/actions/build-push@v1.0.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -282,7 +282,7 @@ jobs:
       - branch_build_push_proxy
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Prepare AIO Assets
         id: prepare_aio_assets
@@ -298,13 +298,13 @@ jobs:
           echo "AIO_BUILD_VERSION=${aio_version}" >> $GITHUB_OUTPUT
 
       - name: Upload AIO Assets
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           path: ./deployments/aio/community/dist
           name: aio-assets-dist
 
       - name: AIO Build and Push
-        uses: makeplane/actions/build-push@v1.1.0
+        uses: makeplane/actions/build-push@v1.4.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
@@ -337,7 +337,7 @@ jobs:
       - branch_build_push_proxy
     steps:
       - name: Checkout Files
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Update Assets
         run: |
@@ -352,7 +352,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@v4
+        uses: actions/upload-artifact@v7
         with:
           name: community-assets
           path: |
@@ -381,7 +381,7 @@ jobs:
       REL_VERSION: ${{ needs.branch_build_setup.outputs.release_version }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Update Assets
         run: |
@@ -391,12 +391,13 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: softprops/action-gh-release@v2.1.0
+        uses: softprops/action-gh-release@v2.6.1
         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

.github/workflows/check-version.yml

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

.github/workflows/codeql.yml

@@ -16,47 +16,27 @@ 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@v4
+        uses: actions/checkout@v6
 
-      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v4
         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@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
+        uses: github/codeql-action/autobuild@v4
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v4
         with:
           category: "/language:${{matrix.language}}"

.github/workflows/codespell.yml

@@ -1,25 +0,0 @@
-# Codespell configuration is within .codespellrc
----
-name: Codespell
-
-on:
-  push:
-    branches: [preview]
-  pull_request:
-    branches: [preview]
-
-permissions:
-  contents: read
-
-jobs:
-  codespell:
-    name: Check for spelling errors
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Annotate locations with typos
-        uses: codespell-project/codespell-problem-matcher@v1
-      - name: Codespell
-        uses: codespell-project/actions-codespell@v2

.github/workflows/copyright-check.yml

@@ -0,0 +1,45 @@
+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@v4
+        uses: actions/checkout@v6
 
   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@v3
+        uses: docker/login-action@v4
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
         with:
           driver: ${{ env.BUILDX_DRIVER }}
           version: ${{ env.BUILDX_VERSION }}
           endpoint: ${{ env.BUILDX_ENDPOINT }}
 
       - name: Check out the repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Build and Push to Docker Hub
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v7.0.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@v2
+        uses: tailscale/github-action@v4
         with:
           oauth-client-id: ${{ secrets.TAILSCALE_OAUTH_CLIENT_ID }}
           oauth-secret: ${{ secrets.TAILSCALE_OAUTH_SECRET }}

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

@@ -8,8 +8,6 @@ on:
     types:
       - "opened"
       - "synchronize"
-      - "ready_for_review"
-      - "review_requested"
       - "reopened"
 
 concurrency:
@@ -46,7 +44,7 @@ jobs:
         run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
       - name: Cache pnpm store
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ${{ env.STORE_PATH }}
           key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -89,7 +87,7 @@ jobs:
         run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
       - name: Cache pnpm store
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ${{ env.STORE_PATH }}
           key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -97,7 +95,7 @@ jobs:
             pnpm-store-${{ runner.os }}-
 
       - name: Restore Turbo cache
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@v5
         with:
           path: .turbo
           key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
@@ -112,21 +110,59 @@ jobs:
         run: pnpm turbo run build --affected
 
       - name: Save Turbo cache
-        uses: actions/cache/save@v4
+        uses: actions/cache/save@v5
         with:
           path: .turbo
           key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
 
-  # Lint and type checks depend on build artifacts
-  check:
-    name: ${{ matrix.task }}
+  # 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
-    strategy:
-      fail-fast: false
-      matrix:
-        task: [check:lint, check:types]
     env:
       TURBO_SCM_BASE: ${{ github.event.pull_request.base.sha }}
       TURBO_SCM_HEAD: ${{ github.sha }}
@@ -149,7 +185,7 @@ jobs:
         run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
       - name: Cache pnpm store
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with:
           path: ${{ env.STORE_PATH }}
           key: pnpm-store-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
@@ -157,7 +193,7 @@ jobs:
             pnpm-store-${{ runner.os }}-
 
       - name: Restore Turbo cache
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@v5
         with:
           path: .turbo
           key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
@@ -165,5 +201,5 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Run ${{ matrix.task }}
-        run: pnpm turbo run ${{ matrix.task }} --affected
+      - name: Run check:types
+        run: pnpm turbo run check:types --affected

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

@@ -1,52 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

.oxfmtrc.json

@@ -1,5 +1,11 @@
 {
-  "$schema": "https://json.schemastore.org/prettierrc",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "sortTailwindcss": {
+    "stylesheet": "packages/tailwind-config/index.css",
+    "functions": ["cn", "clsx", "cva"]
+  },
   "overrides": [
     {
       "files": ["packages/codemods/**/*"],
@@ -7,9 +13,5 @@
         "printWidth": 80
       }
     }
-  ],
-  "plugins": ["@prettier/plugin-oxc"],
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
+  ]
 }

.oxlintrc.json

@@ -0,0 +1,53 @@
+{
+  "$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
+      }
+    ]
+  }
+}

AGENTS.md

@@ -5,7 +5,7 @@
 - `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` - ESLint across all packages
+- `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
@@ -15,8 +15,8 @@
 
 - **Imports**: Use `workspace:*` for internal packages, `catalog:` for external deps
 - **TypeScript**: Strict mode enabled, all files must be typed
-- **Formatting**: Prettier with Tailwind plugin, run `pnpm fix:format`
-- **Linting**: ESLint with shared config, max warnings vary by package
+- **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

CODEOWNERS

@@ -1 +1,8 @@
-eslint.config.mjs   @lifeiscontent
+.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

@@ -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 [ESLint 9](https://eslint.org/docs/latest/) using the shared `eslint.config.mjs` (type-aware via `typescript-eslint`) and format with [Prettier](https://prettier.io/) using `prettier.config.cjs`.
+- 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`.
 
 ## Ways to contribute
 
@@ -244,4 +244,4 @@ Happy translating! 🌍✨
 
 ## Need help? Questions and suggestions
 
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Forum](https://forum.plane.so).

COPYRIGHT.txt

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,34 @@
+## 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

@@ -7,17 +7,10 @@
 </p>
 <p align="center"><b>Modern project management for all teams</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://github.com/makeplane/plane/releases"><b>Releases</b></a> •
-    <a href="https://twitter.com/planepowers"><b>Twitter</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://docs.plane.so/"><b>Documentation</b></a>
 </p>
 
@@ -33,7 +26,7 @@
 
 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 [Discord](https://discord.com/invite/A92xrEGCge) 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 [Forum](https://forum.plane.so) or raise a GitHub issue. We read everything and respond to most.
 
 ## 🚀 Installation
 
@@ -54,7 +47,7 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 
 ## 🌟 Features
 
-- **Issues**
+- **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.
 
 - **Cycles**
@@ -72,15 +65,13 @@ Getting started with Plane is simple. Choose the setup that works best for you:
 - **Analytics**
   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
 
-[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+[![React Router](https://img.shields.io/badge/-React%20Router-CA4245?logo=react-router&style=for-the-badge&logoColor=white)](https://reactrouter.com/)
 [![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)
 
@@ -138,7 +129,7 @@ Explore Plane's [product documentation](https://docs.plane.so/) and [developer d
 
 ## ❤️ Community
 
-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.
+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.
 
 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!
 
@@ -154,7 +145,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://discord.com/invite/A92xrEGCge)!
+- Talk or write about Plane or any other ecosystem integration and [let us know](https://forum.plane.so)!
 - 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.

apps/admin/Dockerfile.admin

@@ -4,7 +4,7 @@ WORKDIR /app
 
 ENV TURBO_TELEMETRY_DISABLED=1
 ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
+ENV PATH="$PNPM_HOME:$PNPM_HOME/bin:$PATH"
 ENV CI=1
 
 RUN corepack enable pnpm
@@ -13,7 +13,7 @@ RUN corepack enable pnpm
 
 FROM base AS builder
 
-RUN pnpm add -g turbo@2.6.3
+RUN pnpm add -g turbo@2.9.4
 
 COPY . .
 

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

@@ -1,3 +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 { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
 import { Button } from "@plane/propel/button";
@@ -114,16 +120,16 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="flex flex-col gap-2 items-start">
+      <div className="flex flex-col items-start gap-4">
         <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
 
-        <div className="relative inline-flex items-center gap-2 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-4 py-2 text-11 text-accent-secondary">
-          <Lightbulb height="14" width="14" />
+        <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>
             If you have a preferred AI models vendor, please get in{" "}
-            <a className="underline font-medium" href="https://plane.so/contact">
+            <a className="font-medium underline" href="https://plane.so/contact">
               touch with us.
             </a>
           </div>

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

@@ -1,10 +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 { 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";
-// components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceAIForm } from "./form";
 
 const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
@@ -14,30 +23,25 @@ const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentP
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-18 font-medium text-primary">AI features for all your workspaces</div>
-          <div className="text-13 font-regular text-tertiary">
-            Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
+    <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>
-        </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>
-    </>
+          <Loader.Item height="50px" width="20%" />
+        </Loader>
+      )}
+    </PageWrapper>
   );
 });
 

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

@@ -1,3 +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 { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -12,6 +18,8 @@ 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
@@ -40,6 +48,7 @@ export function InstanceGiteaConfigForm(props: Props) {
       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",
     },
   });
 
@@ -103,6 +112,11 @@ export function InstanceGiteaConfigForm(props: Props) {
     },
   ];
 
+  const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+    name: "ENABLE_GITEA_SYNC",
+    label: "Gitea",
+  };
+
   const GITEA_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URI",
@@ -129,20 +143,22 @@ export function InstanceGiteaConfigForm(props: Props) {
   const onSubmit = async (formData: GiteaConfigFormValues) => {
     const payload: Partial<GiteaConfigFormValues> = { ...formData };
 
-    await updateInstanceConfigurations(payload)
-      .then((response = []) => {
-        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,
-        });
-      })
-      .catch((err) => console.error(err));
+    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>) => {
@@ -160,8 +176,8 @@ export function InstanceGiteaConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <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="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
@@ -176,16 +192,17 @@ export function InstanceGiteaConfigForm(props: Props) {
                 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={handleSubmit(onSubmit)}
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
                   loading={isSubmitting}
                   disabled={!isDirty}
                 >
-                  {isSubmitting ? "Saving..." : "Save changes"}
+                  {isSubmitting ? "Saving" : "Save changes"}
                 </Button>
                 <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
@@ -194,7 +211,7 @@ export function InstanceGiteaConfigForm(props: Props) {
             </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-layer-1/60 rounded-lg">
+            <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} />

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

@@ -1,16 +1,25 @@
+/**
+ * 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";
-// components
+// 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";
-//local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGiteaConfigForm } from "./form";
 
 const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
@@ -32,7 +41,7 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
     const updateConfigPromise = updateInstanceConfigurations(payload);
 
     setPromiseToast(updateConfigPromise, {
-      loading: "Saving Configuration...",
+      loading: "Saving Configuration",
       success: {
         title: "Configuration saved",
         message: () => `Gitea authentication is now ${value === "1" ? "active" : "disabled"}.`,
@@ -56,42 +65,39 @@ const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthentic
   const isGiteaEnabled = enableGiteaConfig === "1";
 
   return (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <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}
-          />
-        </div>
-        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
-          {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>
-          )}
-        </div>
-      </div>
-    </>
+    <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" }];

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

@@ -1,3 +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 { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -8,12 +14,12 @@ 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 { 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";
@@ -43,6 +49,7 @@ 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",
     },
   });
 
@@ -104,6 +111,11 @@ export function InstanceGithubConfigForm(props: Props) {
     },
   ];
 
+  const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
+    name: "ENABLE_GITHUB_SYNC",
+    label: "GitHub",
+  };
+
   const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -152,20 +164,22 @@ export function InstanceGithubConfigForm(props: Props) {
   const onSubmit = async (formData: GithubConfigFormValues) => {
     const payload: Partial<GithubConfigFormValues> = { ...formData };
 
-    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));
+    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);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -183,8 +197,8 @@ export function InstanceGithubConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <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="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>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -199,16 +213,17 @@ 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={handleSubmit(onSubmit)}
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
                   loading={isSubmitting}
                   disabled={!isDirty}
                 >
-                  {isSubmitting ? "Saving..." : "Save changes"}
+                  {isSubmitting ? "Saving" : "Save changes"}
                 </Button>
                 <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
@@ -216,24 +231,24 @@ export function InstanceGithubConfigForm(props: Props) {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+          <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 px-6 py-4 bg-layer-1 rounded-lg">
+              <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 rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-layer-1/60 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
-                  <Monitor className="w-3 h-3" />
+              <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="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
+                <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} />
                   ))}

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

@@ -1,3 +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 { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -6,15 +12,17 @@ import useSWR from "swr";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { resolveGeneralTheme } from "@plane/utils";
-// components
+// 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";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGithubConfigForm } from "./form";
 
 const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
@@ -41,7 +49,7 @@ 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"}.`,
@@ -65,49 +73,46 @@ const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthent
   const isGithubEnabled = enableGithubConfig === "1";
 
   return (
-    <>
-      <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-subtle 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={
-              <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}
-          />
-        </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>
-    </>
+    <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>
   );
 });
 

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

@@ -1,3 +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 { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -7,11 +13,12 @@ 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 { 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";
@@ -41,6 +48,7 @@ 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",
     },
   });
 
@@ -108,6 +116,11 @@ 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",
@@ -134,20 +147,22 @@ export function InstanceGitlabConfigForm(props: Props) {
   const onSubmit = async (formData: GitlabConfigFormValues) => {
     const payload: Partial<GitlabConfigFormValues> = { ...formData };
 
-    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));
+    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);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -165,8 +180,8 @@ export function InstanceGitlabConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <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="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>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -181,16 +196,17 @@ 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={handleSubmit(onSubmit)}
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
                   loading={isSubmitting}
                   disabled={!isDirty}
                 >
-                  {isSubmitting ? "Saving..." : "Save changes"}
+                  {isSubmitting ? "Saving" : "Save changes"}
                 </Button>
                 <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
@@ -199,7 +215,7 @@ export function InstanceGitlabConfigForm(props: Props) {
             </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-layer-1/60 rounded-lg">
+            <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>
               {GITLAB_SERVICE_FIELD.map((field) => (
                 <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />

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

@@ -1,16 +1,24 @@
+/**
+ * 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";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
-// components
+// assets
 import GitlabLogo from "@/app/assets/logos/gitlab-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";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGitlabConfigForm } from "./form";
 
 const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
@@ -35,7 +43,7 @@ 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"}.`,
@@ -56,46 +64,43 @@ const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthent
       });
   };
   return (
-    <>
-      <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-subtle 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={<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}
-          />
-        </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>
-    </>
+    <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>
   );
 });
 

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

@@ -1,3 +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 { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -8,11 +14,12 @@ 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 { 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";
@@ -41,6 +48,7 @@ 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",
     },
   });
 
@@ -93,6 +101,11 @@ export function InstanceGoogleConfigForm(props: Props) {
     },
   ];
 
+  const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
+    name: "ENABLE_GOOGLE_SYNC",
+    label: "Google",
+  };
+
   const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -140,19 +153,21 @@ export function InstanceGoogleConfigForm(props: Props) {
   const onSubmit = async (formData: GoogleConfigFormValues) => {
     const payload: Partial<GoogleConfigFormValues> = { ...formData };
 
-    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));
+    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);
+    }
   };
 
   const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -170,8 +185,8 @@ export function InstanceGoogleConfigForm(props: Props) {
         handleClose={() => setIsDiscardChangesModalOpen(false)}
       />
       <div className="flex flex-col gap-8">
-        <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="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>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
@@ -186,16 +201,17 @@ 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={handleSubmit(onSubmit)}
+                  onClick={(e) => void handleSubmit(onSubmit)(e)}
                   loading={isSubmitting}
                   disabled={!isDirty}
                 >
-                  {isSubmitting ? "Saving..." : "Save changes"}
+                  {isSubmitting ? "Saving" : "Save changes"}
                 </Button>
                 <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
@@ -203,24 +219,24 @@ export function InstanceGoogleConfigForm(props: Props) {
               </div>
             </div>
           </div>
-          <div className="col-span-2 md:col-span-1 flex flex-col gap-y-6">
+          <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 px-6 py-4 bg-layer-1 rounded-lg">
+              <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 rounded-lg overflow-hidden">
-                <div className="px-6 py-3 bg-layer-1/60 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
-                  <Monitor className="w-3 h-3" />
+              <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="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
+                <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} />
                   ))}

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

@@ -1,16 +1,24 @@
+/**
+ * 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";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Loader, ToggleSwitch } from "@plane/ui";
-// components
+// assets
 import GoogleLogo from "@/app/assets/logos/google-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";
-// icons
-// local components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceGoogleConfigForm } from "./form";
 
 const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
@@ -35,7 +43,7 @@ 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"}.`,
@@ -56,47 +64,44 @@ const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthent
       });
   };
   return (
-    <>
-      <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-subtle 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
+    <PageWrapper
+      customHeader={
+        <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}
-          />
-        </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>
-    </>
+          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>
   );
 });
 

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

@@ -1,112 +1,171 @@
-import { useState } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
 import useSWR from "swr";
 // plane internal packages
-import { setPromiseToast } from "@plane/propel/toast";
-import type { TInstanceConfigurationKeys } from "@plane/types";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { TInstanceConfigurationKeys, TInstanceAuthenticationModes } from "@plane/types";
 import { Loader, ToggleSwitch } from "@plane/ui";
-import { cn } from "@plane/utils";
+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";
 // hooks
+import { useAuthenticationModes } from "@/hooks/oauth";
 import { useInstance } from "@/hooks/store";
-// plane admin components
-import { AuthenticationModes } from "@/plane-admin/components/authentication";
+// types
 import type { Route } from "./+types/page";
 
 const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
-  // store
-  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
-
-  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
-
+  // 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 { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // derived values
   const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
-  const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
-    setIsSubmitting(true);
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
-    const payload = {
-      [key]: value,
-    };
+  // 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);
 
-    const updateConfigPromise = updateInstanceConfigurations(payload);
+        // Only validate if this is an authentication method key
+        if (isAuthMethodKey) {
+          const canDisable = canDisableAuthMethod(key, currentAuthModes, formattedConfig);
 
-    setPromiseToast(updateConfigPromise, {
-      loading: "Saving configuration",
-      success: {
-        title: "Success",
-        message: () => "Configuration saved successfully",
-      },
-      error: {
-        title: "Error",
-        message: () => "Failed to save configuration",
-      },
-    });
+          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;
+          }
+        }
+      }
 
-    await updateConfigPromise
-      .then(() => {
-        setIsSubmitting(false);
-      })
-      .catch((err) => {
-        console.error(err);
-        setIsSubmitting(false);
+      // Proceed with the update
+      setIsSubmitting(true);
+
+      const payload = {
+        [key]: value,
+      };
+
+      const updateConfigPromise = updateInstanceConfigurations(payload);
+
+      setPromiseToast(updateConfigPromise, {
+        loading: "Saving configuration",
+        success: {
+          title: "Success",
+          message: () => "Configuration saved successfully",
+        },
+        error: {
+          title: "Error",
+          message: () => "Failed to save configuration",
+        },
       });
-  };
+
+      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 (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-18 font-medium text-primary">Manage authentication modes for your instance</div>
-          <div className="text-13 font-regular text-tertiary">
-            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-sm")}>
-                <div className="flex grow items-center gap-4">
-                  <div className="grow">
-                    <div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div>
-                    <div className={cn("font-regular leading-5 text-tertiary text-11")}>
-                      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>
+    <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>
               </div>
-              <div className="text-16 font-medium pt-6">Available authentication modes</div>
-              <AuthenticationModes disabled={isSubmitting} updateConfig={updateConfig} />
             </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>
-          )}
+            <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}
+            />
+          ))}
         </div>
-      </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>
   );
 });
 

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

@@ -1,3 +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 { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
@@ -173,7 +179,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
+        <div className="my-6 flex flex-col gap-6 border-t border-subtle pt-4">
           <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">
@@ -201,7 +207,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
           size="lg"
@@ -209,7 +215,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
         >
-          {isSubmitting ? "Saving..." : "Save changes"}
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
         <Button
           variant="secondary"

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

@@ -1,12 +1,21 @@
+/**
+ * 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 } 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";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceEmailForm } from "./email-config-form";
 
 const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
@@ -49,44 +58,43 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
   }, [formattedConfig]);
 
   return (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="py-4 space-y-1 flex-shrink-0">
-            <div className="text-18 font-medium text-primary">Secure emails from your own instance</div>
+    <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">
-              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">Misconfigs can lead to email bounces and errors.</span>
-              </div>
+              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>
-          </div>
-          {isLoading ? (
-            <Loader>
-              <Loader.Item width="24px" height="16px" className="rounded-full" />
-            </Loader>
+          </>
+        ),
+        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} />
           ) : (
-            <ToggleSwitch value={isSMTPEnabled} onChange={handleToggle} size="sm" disabled={isSubmitting} />
+            <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>
-        {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>
-    </>
+        </>
+      )}
+    </PageWrapper>
   );
 });
 

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

@@ -1,3 +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 { Dialog, Transition } from "@headlessui/react";
 // plane imports
@@ -85,8 +91,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 transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
-                <h3 className="text-16 font-medium leading-6 text-primary">
+              <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">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -115,13 +121,13 @@ export function SendTestEmailModal(props: Props) {
                     </div>
                   )}
                   {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
-                  <div className="flex items-center gap-2 justify-end mt-5">
+                  <div className="mt-5 flex items-center justify-end gap-2">
                     <Button variant="secondary" size="lg" 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"}
+                        {isLoading ? "Sending email" : "Send email"}
                       </Button>
                     )}
                   </div>

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

@@ -1,17 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Telescope } from "lucide-react";
-// types
+// plane imports
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IInstance, IInstanceAdmin } from "@plane/types";
-// ui
 import { Input, ToggleSwitch } from "@plane/ui";
 // components
 import { ControllerInput } from "@/components/common/controller-input";
-import { useInstance } from "@/hooks/store";
-import { IntercomConfig } from "./intercom";
 // hooks
+import { useInstance } from "@/hooks/store";
 
 export interface IGeneralConfigurationForm {
   instance: IInstance;
@@ -21,13 +25,12 @@ export interface IGeneralConfigurationForm {
 export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
   const { instance, instanceAdmins } = props;
   // hooks
-  const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
+  const { updateInstanceInfo } = useInstance();
 
   // form data
   const {
     handleSubmit,
     control,
-    watch,
     formState: { errors, isSubmitting },
   } = useForm<Partial<IInstance>>({
     defaultValues: {
@@ -39,17 +42,6 @@ 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({
@@ -105,19 +97,18 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
         </div>
       </div>
 
-      <div className="space-y-4">
-        <div className="text-16 font-medium text-primary">Chat + telemetry</div>
-        <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
-        <div className="flex items-center gap-14 px-4 py-3 border border-subtle rounded-sm">
-          <div className="grow flex items-center gap-4">
+      <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="shrink-0">
-              <div className="flex items-center justify-center w-10 h-10 bg-layer-1 rounded-full">
-                <Telescope className="w-6 h-6 text-tertiary/80 p-0.5" />
+              <div className="flex size-11 items-center justify-center rounded-lg bg-layer-1">
+                <Telescope className="size-5 text-tertiary" />
               </div>
             </div>
             <div className="grow">
-              <div className="text-13 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div>
-              <div className="text-11 font-regular text-tertiary leading-5">
+              <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">
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
@@ -144,8 +135,15 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div>
-        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+        <Button
+          variant="primary"
+          size="lg"
+          onClick={() => {
+            void handleSubmit(onSubmit)();
+          }}
+          loading={isSubmitting}
+        >
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
       </div>
     </div>

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

@@ -1,80 +0,0 @@
-import { useState } from "react";
-import { observer } from "mobx-react";
-import useSWR from "swr";
-import { MessageSquare } from "lucide-react";
-import type { IFormattedInstanceConfiguration } from "@plane/types";
-import { ToggleSwitch } from "@plane/ui";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-type TIntercomConfig = {
-  isTelemetryEnabled: boolean;
-};
-
-export const IntercomConfig = observer(function IntercomConfig(props: TIntercomConfig) {
-  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-subtle rounded-sm">
-        <div className="grow flex items-center gap-4">
-          <div className="shrink-0">
-            <div className="flex items-center justify-center w-10 h-10 bg-layer-1 rounded-full">
-              <MessageSquare className="w-6 h-6 text-tertiary/80 p-0.5" />
-            </div>
-          </div>
-
-          <div className="grow">
-            <div className="text-13 font-medium text-primary leading-5">Chat with us</div>
-            <div className="text-11 font-regular text-tertiary 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/page.tsx

@@ -1,30 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// components
-import type { Route } from "./+types/page";
+// local imports
 import { GeneralConfigurationForm } from "./form";
+// types
+import type { Route } from "./+types/page";
 
 function GeneralPage() {
   const { instance, instanceAdmins } = useInstance();
 
   return (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-18 font-medium text-primary">General settings</div>
-          <div className="text-13 font-regular text-tertiary">
-            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>
-    </>
+    <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>
   );
 }
 

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

@@ -1,3 +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 { useForm } from "react-hook-form";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -71,7 +77,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
 
       <div>
         <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+          {isSubmitting ? "Saving" : "Save changes"}
         </Button>
       </div>
     </div>

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

@@ -1,10 +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 { 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";
-// local
+// types
 import type { Route } from "./+types/page";
+// local
 import { InstanceImageConfigForm } from "./form";
 
 const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
@@ -14,26 +23,21 @@ const InstanceImagePage = observer(function InstanceImagePage(_props: Route.Comp
   useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
 
   return (
-    <>
-      <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-          <div className="text-18 font-medium text-primary">Third-party image libraries</div>
-          <div className="text-13 font-regular text-tertiary">
-            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>
-    </>
+    <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>
   );
 });
 

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

@@ -1,15 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { 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/new-user-popup";
+import { NewUserPopup } from "@/components/common/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) {
@@ -36,7 +42,7 @@ function AdminLayout(_props: Route.ComponentProps) {
         <AdminSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+          <div className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-scroll">
             <Outlet />
           </div>
         </main>

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

@@ -1,3 +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 { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
@@ -33,14 +39,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   const getSidebarMenuItems = () => (
     <Menu.Items
       className={cn(
-        "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 shadow-lg outline-none",
+        "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",
         {
           "left-4": isSidebarCollapsed,
         }
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
+        <span className="truncate px-2 text-secondary">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item
@@ -71,14 +77,14 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
   useEffect(() => {
     if (csrfToken === undefined)
-      authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
+      void 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-3.5">
+    <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="h-full w-full truncate">
         <div
-          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm py-1 ${
+          className={`flex flex-grow items-center gap-x-2 truncate rounded-sm ${
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
@@ -88,8 +94,8 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
                 "cursor-default": !isSidebarCollapsed,
               })}
             >
-              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
-                <UserCog2 className="h-5 w-5 text-secondary" />
+              <div className="flex size-8 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
+                <UserCog2 className="size-5 text-primary" />
               </div>
             </Menu.Button>
             {isSidebarCollapsed && (
@@ -109,7 +115,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
-              <h4 className="grow truncate text-14 font-medium text-secondary">Instance admin</h4>
+              <h4 className="grow truncate text-body-md-medium text-primary">Instance admin</h4>
             </div>
           )}
         </div>
@@ -123,7 +129,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
               src={getFileURL(currentUser.avatar_url)}
               size={24}
               shape="square"
-              className="!text-14"
+              className="!text-body-sm-medium"
             />
           </Menu.Button>
 

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

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

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

@@ -1,58 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 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 { WorkspaceIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
-
-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/`,
-  },
-];
+import { useSidebarMenu } from "@/hooks/use-sidebar-menu";
 
 export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
-  // store hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
   // router
   const pathName = usePathname();
+  // store hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // derived values
+  const sidebarMenu = useSidebarMenu();
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
@@ -61,41 +29,28 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   };
 
   return (
-    <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);
+    <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);
         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 outline-none transition-colors`,
-                    isActive
-                      ? "bg-accent-primary/10 text-accent-primary"
-                      : "text-secondary hover:bg-layer-1-hover focus:bg-layer-1-hover",
+                    "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,
+                    },
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
                 >
                   {<item.Icon className="h-4 w-4 flex-shrink-0" />}
                   {!isSidebarCollapsed && (
-                    <div className="w-full ">
-                      <div
-                        className={cn(
-                          `text-13 font-medium transition-colors`,
-                          isActive ? "text-accent-primary" : "text-secondary"
-                        )}
-                      >
-                        {item.name}
-                      </div>
-                      <div
-                        className={cn(
-                          `text-10 transition-colors`,
-                          isActive ? "text-accent-secondary" : "text-placeholder"
-                        )}
-                      >
-                        {item.description}
-                      </div>
+                    <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>
                   )}
                 </div>

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

@@ -1,3 +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, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
@@ -38,13 +44,7 @@ export const AdminSidebar = observer(function AdminSidebar() {
 
   return (
     <div
-      className={`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
-        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]"}
-      `}
+      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]"} `}
     >
       <div ref={ref} className="flex h-full w-full flex-1 flex-col">
         <AdminSidebarDropdown />

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

@@ -1,3 +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 { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -8,6 +14,7 @@ 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";
 // components
 import { CustomSelect, Input } from "@plane/ui";
 // hooks
@@ -90,14 +97,7 @@ export function WorkspaceCreateForm() {
               control={control}
               name="name"
               rules={{
-                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.",
-                },
+                validate: (value) => validateWorkspaceName(value, true),
               }}
               render={({ field: { value, ref, onChange } }) => (
                 <Input
@@ -118,22 +118,18 @@ export function WorkspaceCreateForm() {
                 />
               )}
             />
-            <span className="text-11 text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-danger-primary">{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 gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle px-3">
-            <span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span>
+          <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>
             <Controller
               control={control}
               name="slug"
               rules={{
-                required: "The URL is a required field.",
-                maxLength: {
-                  value: 48,
-                  message: "Limit your URL to 48 characters.",
-                },
+                validate: (value) => validateSlug(value),
               }}
               render={({ field: { onChange, value, ref } }) => (
                 <Input
@@ -153,11 +149,11 @@ export function WorkspaceCreateForm() {
               )}
             />
           </div>
-          {slugError && <p className="text-13 text-red-500">This URL is taken. Try something else.</p>}
+          {slugError && <p className="text-13 text-danger-primary">This URL is taken. Try something else.</p>}
           {invalidSlug && (
-            <p className="text-13 text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-13 text-danger-primary">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
           )}
-          {errors.slug && <span className="text-11 text-red-500">{errors.slug.message}</span>}
+          {errors.slug && <span className="text-11 text-danger-primary">{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>
@@ -187,12 +183,12 @@ export function WorkspaceCreateForm() {
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
-      <div className="flex max-w-4xl items-center py-1 gap-4">
+      <div className="flex max-w-4xl items-center gap-4 py-1">
         <Button
           variant="primary"
           size="lg"

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

@@ -1,21 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 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 (
-    <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-        <div className="text-18 font-medium text-primary">Create a new workspace on this instance.</div>
-        <div className="text-13 font-regular text-tertiary">
-          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 />
-      </div>
-    </div>
+    <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.",
+      }}
+    >
+      <WorkspaceCreateForm />
+    </PageWrapper>
   );
 });
 

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

@@ -1,3 +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 { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -8,12 +14,13 @@ 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 { 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) {
@@ -68,99 +75,95 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
   };
 
   return (
-    <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-subtle mx-4 py-4 space-y-1 flex-shrink-0">
-        <div className="flex flex-col gap-1">
-          <div className="text-18 font-medium text-primary">Workspaces on this instance</div>
-          <div className="text-13 font-regular text-tertiary">See all workspaces and control who can create them.</div>
-        </div>
-      </div>
-      <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-sm")}>
-              <div className="flex grow items-center gap-4">
-                <div className="grow">
-                  <div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div>
-                  <div className={cn("font-regular leading-5 text-tertiary text-11")}>
-                    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}
-                  />
+    <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>
-          ) : (
-            <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-16 font-medium">
-                    All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
-                    {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
-                      <LoaderIcon className="w-4 h-4 animate-spin" />
-                    )}
-                  </div>
-                  <div className={cn("font-regular leading-5 text-tertiary text-11")}>
-                    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 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="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="flex items-center gap-2">
-                  <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
-                    Create workspace
-                  </Link>
+                <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 flex-col gap-4 py-2">
-                {workspaceIds.map((workspaceId) => (
-                  <WorkspaceListItem key={workspaceId} workspaceId={workspaceId} />
-                ))}
+              <div className="flex items-center gap-2">
+                <Link href="/workspace/create" className={getButtonStyling("primary", "base")}>
+                  Create workspace
+                </Link>
               </div>
-              {hasNextPage && (
-                <div className="flex justify-center">
-                  <Button
-                    variant="link"
-                    size="lg"
-                    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 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>
   );
 });
 

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

@@ -1,3 +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 { Info } from "lucide-react";
 // plane constants
 import type { TAdminAuthErrorInfo } from "@plane/constants";
@@ -14,16 +20,16 @@ export function AuthBanner(props: TAuthBanner) {
 
   if (!bannerData) return <></>;
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+    <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>
       <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
       <div
-        className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/80"
+        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"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <CloseIcon className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="h-4 w-4 flex-shrink-0" />
       </div>
     </div>
   );

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

@@ -1,9 +1,15 @@
+/**
+ * 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="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <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>

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

@@ -1,21 +1,13 @@
+/**
+ * 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 { KeyRound, Mails } from "lucide-react";
 // plane packages
 import type { TAdminAuthErrorInfo } from "@plane/constants";
 import { SUPPORT_EMAIL, EAdminAuthErrorCodes } from "@plane/constants";
-import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
-import { resolveGeneralTheme } from "@plane/utils";
-// components
-import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
-import githubDarkModeImage from "@/app/assets/logos/github-white.png?url";
-import GitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
-import GoogleLogo from "@/app/assets/logos/google-logo.svg?url";
-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
 
 export enum EErrorAlertType {
   BANNER_ALERT = "BANNER_ALERT",
@@ -58,7 +50,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user already exists.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -70,7 +62,7 @@ const errorCodeMessages: {
     message: () => (
       <div>
         Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
           Sign In
         </Link>
         &nbsp;now.
@@ -106,53 +98,3 @@ 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-tertiary/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-tertiary/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: <img 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: (
-      <img
-        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: <img src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
-  },
-];

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

@@ -1,3 +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 } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -16,7 +22,7 @@ function RootLayout() {
   }, [replace, isUserLoggedIn]);
 
   return (
-    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8 bg-surface-1">
+    <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>
   );

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

@@ -1,3 +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 { observer } from "mobx-react";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
@@ -16,7 +22,7 @@ function HomePage() {
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="flex h-screen w-full items-center justify-center">
         <LogoSpinner />
       </div>
     );

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

@@ -1,3 +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, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
@@ -10,7 +16,7 @@ import { Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
-import { FormHeader } from "../../../core/components/instance/form-header";
+import { FormHeader } from "@/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
 import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";
@@ -105,8 +111,8 @@ export function InstanceSignInForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <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"
@@ -128,8 +134,8 @@ export function InstanceSignInForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+              <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"
@@ -140,14 +146,14 @@ export function InstanceSignInForm() {
                 placeholder="name@company.com"
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
-                autoComplete="on"
+                autoComplete="off"
                 autoFocus
               />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="password">
-                Password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -159,12 +165,12 @@ export function InstanceSignInForm() {
                   placeholder="Enter your password"
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
-                  autoComplete="on"
+                  autoComplete="off"
                 />
                 {showPassword ? (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -172,7 +178,7 @@ export function InstanceSignInForm() {
                 ) : (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
                     <Eye className="h-4 w-4" />

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

@@ -1,11 +0,0 @@
-<svg width="92" height="84" viewBox="0 0 92 84" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3695_11896)">
-<path d="M83.0398 32.6876C74.2901 27.2397 62.0735 23.8553 48.7013 23.8553C21.7918 23.8553 0 37.3101 0 53.9016C0 69.0898 18.1598 81.554 41.685 83.7001V74.9504C25.8364 72.9693 13.95 64.3022 13.95 53.9016C13.95 42.0977 29.4684 32.44 48.7013 32.44C58.2765 32.44 66.9436 34.8338 73.217 38.7134L64.3022 44.2439H92.1197V27.0746L83.0398 32.6876Z" fill="#CCCCCC"/>
-<path d="M41.6846 8.99736V74.9504V83.7002L55.6346 74.9504V0L41.6846 8.99736Z" fill="#FF6200"/>
-</g>
-<defs>
-<clipPath id="clip0_3695_11896">
-<rect width="92" height="84" fill="white"/>
-</clipPath>
-</defs>
-</svg>

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

@@ -1,17 +0,0 @@
-<svg width="700" height="650" viewBox="0 0 700 650" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3262_5767)">
-<mask id="mask0_3262_5767" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="650">
-<path d="M700 0H0V650H700V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_3262_5767)">
-<path d="M337.682 0L360.832 20.5C377.982 35.7 395.182 50.85 412.132 66.25C521.982 166 614.982 278.25 684.982 407.45C688.582 414.05 691.832 420.85 695.082 427.6L699.982 437.75L694.582 440.6L690.532 434.85L680.032 419.9L672.682 409.2C621.732 335.25 570.682 261.2 500.582 201.95C479.373 183.995 455.969 168.807 430.932 156.75C380.232 132.5 335.132 142.2 296.432 182C259.632 219.85 240.532 266.85 223.282 314.65C221.032 320.8 218.682 326.9 216.332 333L212.232 343.75L203.632 341C208.632 323.6 213.232 306.1 217.832 288.55C228.332 248.8 238.832 209.05 253.432 170.75C268.932 129.95 288.532 90.6 308.082 51.25C316.532 34.2 324.982 17.15 333.082 0H337.682Z" fill="#C22E33"/>
-<path d="M372.382 491.1C291.082 529.6 94.3829 569.3 1.08287 559.1C-14.1671 478.8 135.482 102.5 208.982 45.5L204.232 56.4C202.115 61.531 199.813 66.5842 197.332 71.55L194.032 78C156.032 151.1 118.082 224.3 98.6329 304.5C91.6287 332.124 87.8038 360.458 87.2328 388.95C86.7328 455.95 128.432 501.55 198.082 504.4C231.582 505.75 265.432 502.25 299.232 498.7C313.932 497.2 328.582 495.65 343.232 494.5C348.632 494.1 353.932 493.45 360.832 492.55L372.382 491.15V491.1Z" fill="#C22E33"/>
-<path d="M141.233 639.05C118.983 640.75 96.733 642.45 74.583 644.45C279.433 663.95 476.083 630.6 670.083 562.25C606.833 450.75 521.583 362.7 422.483 286.15C423.783 291.05 426.683 294.6 429.533 298.1L431.933 301.1C440.433 312.4 449.333 323.5 458.283 334.6C478.733 360.05 499.183 385.5 514.583 413.5C553.483 484.5 532.383 545.9 456.183 578.3C406.083 599.65 351.333 614.2 297.183 622.9C245.683 631.1 193.433 635.05 141.233 639.05Z" fill="#C22E33"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_3262_5767">
-<rect width="700" height="650" fill="white"/>
-</clipPath>
-</defs>
-</svg>

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

@@ -1,3 +1,9 @@
+/**
+ * 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

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

@@ -1,3 +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 React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite

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

@@ -1,3 +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 React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";

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

@@ -1,3 +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 { useMemo } from "react";
 import { useLocation, useNavigate, useSearchParams as useSearchParamsRR } from "react-router";
 import { ensureTrailingSlash } from "./helper";

apps/admin/app/components/404.tsx

@@ -1,3 +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 React from "react";
 import { Link } from "react-router";
 // ui

apps/admin/app/entry.client.tsx

@@ -1,28 +1,13 @@
-import * as Sentry from "@sentry/react-router";
+/**
+ * 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";
 
-Sentry.init({
-  dsn: process.env.VITE_SENTRY_DSN,
-  environment: process.env.VITE_SENTRY_ENVIRONMENT,
-  sendDefaultPii: process.env.VITE_SENTRY_SEND_DEFAULT_PII ? process.env.VITE_SENTRY_SEND_DEFAULT_PII === "1" : false,
-  release: process.env.VITE_APP_VERSION,
-  tracesSampleRate: process.env.VITE_SENTRY_TRACES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_TRACES_SAMPLE_RATE)
-    : 0.1,
-  profilesSampleRate: process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_PROFILES_SAMPLE_RATE)
-    : 0.1,
-  replaysSessionSampleRate: process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE)
-    : 0.1,
-  replaysOnErrorSampleRate: process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
-    ? parseFloat(process.env.VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE)
-    : 1.0,
-  integrations: [],
-});
-
 startTransition(() => {
   hydrateRoot(
     document,

apps/admin/app/root.tsx

@@ -1,5 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import type { ReactNode } from "react";
-import * as Sentry from "@sentry/react-router";
 import { Links, Meta, Outlet, Scripts } from "react-router";
 import type { LinksFunction } from "react-router";
 import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
@@ -8,8 +13,13 @@ import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url";
 import faviconIco from "@/app/assets/favicon/favicon.ico?url";
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import globalStyles from "@/styles/globals.css?url";
+import { AppProviders } from "@/providers";
 import type { Route } from "./+types/root";
-import { AppProviders } from "./providers";
+// fonts
+import "@fontsource-variable/inter";
+import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url";
+import "@fontsource/material-symbols-rounded";
+import "@fontsource/ibm-plex-mono";
 
 const APP_TITLE = "Plane | Simple, extensible, open-source project management tool.";
 const APP_DESCRIPTION =
@@ -22,6 +32,13 @@ export const links: LinksFunction = () => [
   { rel: "shortcut icon", href: faviconIco },
   { rel: "manifest", href: `/site.webmanifest.json` },
   { rel: "stylesheet", href: globalStyles },
+  {
+    rel: "preload",
+    href: interVariableWoff2,
+    as: "font",
+    type: "font/woff2",
+    crossOrigin: "anonymous",
+  },
 ];
 
 export function Layout({ children }: { children: ReactNode }) {
@@ -57,7 +74,7 @@ export const meta: Route.MetaFunction = () => [
 
 export default function Root() {
   return (
-    <div className="bg-canvas min-h-screen">
+    <div className="min-h-screen bg-canvas">
       <Outlet />
     </div>
   );
@@ -71,11 +88,7 @@ export function HydrateFallback() {
   );
 }
 
-export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
-  if (error) {
-    Sentry.captureException(error);
-  }
-
+export function ErrorBoundary({ error: _error }: Route.ErrorBoundaryProps) {
   return (
     <div>
       <p>Something went wrong.</p>

apps/admin/app/routes.ts

@@ -1,3 +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 { index, layout, route } from "@react-router/dev/routes";
 import type { RouteConfig } from "@react-router/dev/routes";
 

apps/admin/ce/components/authentication/index.ts

@@ -1 +0,0 @@
-export * from "./authentication-modes";

apps/admin/ce/components/common/index.ts

@@ -1 +0,0 @@
-export * from "./upgrade-button";

apps/admin/ce/components/common/upgrade-button.tsx

@@ -1,20 +0,0 @@
-import React from "react";
-// icons
-import { SquareArrowOutUpRight } from "lucide-react";
-// plane internal packages
-import { getButtonStyling } from "@plane/propel/button";
-import { cn } from "@plane/utils";
-
-export function UpgradeButton() {
-  return (
-    <a
-      href="https://plane.so/pricing?mode=self-hosted"
-      target="_blank"
-      className={cn(getButtonStyling("primary", "base"))}
-      rel="noreferrer"
-    >
-      Upgrade
-      <SquareArrowOutUpRight className="h-3.5 w-3.5 p-0.5" />
-    </a>
-  );
-}

apps/admin/ce/store/root.store.ts

@@ -1,19 +0,0 @@
-import { enableStaticRendering } from "mobx-react";
-// stores
-import { CoreRootStore } from "@/store/root.store";
-
-enableStaticRendering(typeof window === "undefined");
-
-export class RootStore extends CoreRootStore {
-  constructor() {
-    super();
-  }
-
-  hydrate(initialData: any) {
-    super.hydrate(initialData);
-  }
-
-  resetOnSignOut() {
-    super.resetOnSignOut();
-  }
-}

apps/admin/components/authentication/authentication-method-card.tsx

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 // helpers
 import { cn } from "@plane/utils";
 
@@ -16,8 +22,8 @@ export function AuthenticationMethodCard(props: Props) {
 
   return (
     <div
-      className={cn("w-full flex items-center gap-14 rounded-sm", {
-        "px-4 py-3 border border-subtle": withBorder,
+      className={cn("flex w-full items-center gap-14 rounded-lg bg-layer-2", {
+        "border border-subtle px-4 py-3": withBorder,
       })}
     >
       <div
@@ -30,7 +36,7 @@ export function AuthenticationMethodCard(props: Props) {
         </div>
         <div className="grow">
           <div
-            className={cn("font-medium leading-5 text-primary", {
+            className={cn("leading-5 font-medium text-primary", {
               "text-13": withBorder,
               "text-18": !withBorder,
             })}
@@ -38,7 +44,7 @@ export function AuthenticationMethodCard(props: Props) {
             {name}
           </div>
           <div
-            className={cn("font-regular leading-5 text-tertiary", {
+            className={cn("leading-5 font-regular text-tertiary", {
               "text-11": withBorder,
               "text-13": !withBorder,
             })}

apps/admin/components/authentication/email-config-switch.tsx

@@ -1,3 +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 React from "react";
 import { observer } from "mobx-react";
 // hooks

apps/admin/components/authentication/gitea-config.tsx

@@ -1,3 +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 { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -44,7 +50,7 @@ export const GiteaConfiguration = observer(function GiteaConfiguration(props: Pr
         </div>
       ) : (
         <Link href="/authentication/gitea" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
-          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}

apps/admin/components/authentication/github-config.tsx

@@ -1,4 +1,9 @@
-import React from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -43,7 +48,7 @@ export const GithubConfiguration = observer(function GithubConfiguration(props:
         </div>
       ) : (
         <Link href="/authentication/github" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
-          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}

apps/admin/components/authentication/gitlab-config.tsx

@@ -1,3 +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 { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -42,7 +48,7 @@ export const GitlabConfiguration = observer(function GitlabConfiguration(props:
         </div>
       ) : (
         <Link href="/authentication/gitlab" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
-          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}

apps/admin/components/authentication/google-config.tsx

@@ -1,3 +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 { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -42,7 +48,7 @@ export const GoogleConfiguration = observer(function GoogleConfiguration(props:
         </div>
       ) : (
         <Link href="/authentication/google" className={cn(getButtonStyling("secondary", "base"), "text-tertiary")}>
-          <Settings2 className="h-4 w-4 p-0.5 text-tertiary/80" />
+          <Settings2 className="h-4 w-4 p-0.5 text-tertiary" />
           Configure
         </Link>
       )}

apps/admin/components/authentication/password-config-switch.tsx

@@ -1,3 +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 React from "react";
 import { observer } from "mobx-react";
 // hooks

apps/admin/components/common/banner.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+
+type TBanner = {
+  type: "success" | "error";
+  message: string;
+};
+
+export function Banner(props: TBanner) {
+  const { type, message } = props;
+
+  return (
+    <div
+      className={`w-full rounded-md border p-2 ${type === "error" ? "border-danger-strong bg-danger-subtle" : "border-success-strong bg-success-subtle"}`}
+    >
+      <div className="flex items-center justify-center">
+        <div className="flex-shrink-0">
+          {type === "error" ? (
+            <span className="flex h-6 w-6 items-center justify-center rounded-full">
+              <AlertCircle className="h-5 w-5 text-danger-primary" aria-hidden="true" />
+            </span>
+          ) : (
+            <CheckCircle2 className="h-5 w-5 text-success-primary" aria-hidden="true" />
+          )}
+        </div>
+        <div className="ml-1">
+          <p className={`text-13 font-medium ${type === "error" ? "text-danger-primary" : "text-success-primary"}`}>
+            {message}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/admin/components/common/breadcrumb-link.tsx

@@ -1,3 +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 Link from "next/link";
 import { Tooltip } from "@plane/propel/tooltip";
 
@@ -16,12 +22,12 @@ export function BreadcrumbLink(props: Props) {
           {href ? (
             <Link className="flex items-center gap-1 text-13 font-medium text-tertiary hover:text-primary" href={href}>
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-16">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </Link>
           ) : (
             <div className="flex cursor-default items-center gap-1 text-13 font-medium text-primary">
               {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
-              <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
+              <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>
             </div>
           )}
         </div>

apps/admin/components/common/code-block.tsx

@@ -1,3 +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 { cn } from "@plane/utils";
 
 type TProps = {
@@ -10,9 +16,9 @@ export function CodeBlock({ children, className, darkerShade }: TProps) {
   return (
     <span
       className={cn(
-        "px-0.5 text-11 text-tertiary bg-surface-2 font-semibold rounded-md border border-subtle",
+        "rounded-md border border-subtle bg-surface-2 px-0.5 text-11 font-semibold text-tertiary",
         {
-          "text-secondary bg-layer-1 border-subtle": darkerShade,
+          "border-subtle bg-layer-1 text-secondary": darkerShade,
         },
         className
       )}

apps/admin/components/common/confirm-discard-modal.tsx

@@ -1,3 +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 React from "react";
 import Link from "next/link";
 // headless ui
@@ -40,10 +46,10 @@ export function ConfirmDiscardModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[30rem]">
-                <div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 text-tertiary">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-tertiary">
                         You have unsaved changes
                       </Dialog.Title>
                       <div className="mt-2">
@@ -54,7 +60,7 @@ export function ConfirmDiscardModal(props: Props) {
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
+                <div className="flex items-center justify-end gap-2 p-4 sm:px-6">
                   <Button variant="secondary" size="lg" onClick={handleClose}>
                     Keep editing
                   </Button>

apps/admin/components/common/controller-input.tsx

@@ -1,3 +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 React, { useState } from "react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -61,7 +67,7 @@ export function ControllerInput(props: Props) {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -69,7 +75,7 @@ export function ControllerInput(props: Props) {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
+              className="absolute top-2.5 right-3 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(true)}
             >
               <Eye className="h-4 w-4" />

apps/admin/components/common/controller-switch.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane internal packages
+import { ToggleSwitch } from "@plane/ui";
+
+type Props<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  field: TControllerSwitchFormField<T>;
+};
+
+export type TControllerSwitchFormField<T extends FieldValues = FieldValues> = {
+  name: FieldPath<T>;
+  label: string;
+};
+
+export function ControllerSwitch<T extends FieldValues>(props: Props<T>) {
+  const {
+    control,
+    field: { name, label },
+  } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-1">
+      <h4 className="text-sm text-custom-text-300">Refresh user attributes from {label} during sign in</h4>
+      <div className="relative">
+        <Controller
+          control={control}
+          name={name as FieldPath<T>}
+          render={({ field: { value, onChange } }) => {
+            const parsedValue = Number.parseInt(typeof value === "string" ? value : String(value ?? "0"), 10);
+            const isOn = !Number.isNaN(parsedValue) && parsedValue !== 0;
+            return <ToggleSwitch value={isOn} onChange={() => onChange(isOn ? "0" : "1")} size="sm" />;
+          }}
+        />
+      </div>
+    </div>
+  );
+}

apps/admin/components/common/copy-field.tsx

@@ -1,7 +1,13 @@
+/**
+ * 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";
 // ui
-import { Copy } from "lucide-react";
 import { Button } from "@plane/propel/button";
+import { CopyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 
 type Props = {
@@ -37,7 +43,7 @@ export function CopyField(props: Props) {
         }}
       >
         <p className="text-13 font-medium">{url}</p>
-        <Copy size={18} color="#B9B9B9" />
+        <CopyIcon width={18} height={18} color="#B9B9B9" />
       </Button>
       <div className="text-11 text-tertiary">{description}</div>
     </div>

apps/admin/components/common/empty-state.tsx

@@ -1,3 +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 React from "react";
 import { Button } from "@plane/propel/button";
 
@@ -19,7 +25,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
     <div className={`flex h-full w-full items-center justify-center`}>
       <div className="flex w-full flex-col items-center text-center">
         {image && <img src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />}
-        <h6 className="mb-3 mt-6 text-18 font-semibold sm:mt-8">{title}</h6>
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
         {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
         <div className="flex items-center gap-4">
           {primaryButton && (

apps/admin/components/common/header/core.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_HEADER_SEGMENT_LABELS: Record<string, string> = {
+  general: "General",
+  ai: "Artificial Intelligence",
+  email: "Email",
+  authentication: "Authentication",
+  image: "Image",
+  google: "Google",
+  github: "GitHub",
+  gitlab: "GitLab",
+  gitea: "Gitea",
+  workspace: "Workspace",
+  create: "Create",
+};

apps/admin/components/common/header/extended.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};

apps/admin/components/common/header/index.tsx

@@ -1,57 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 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";
+import { BreadcrumbLink } from "../breadcrumb-link";
 // hooks
 import { useTheme } from "@/hooks/store";
+// local imports
+import { CORE_HEADER_SEGMENT_LABELS } from "./core";
+import { EXTENDED_HEADER_SEGMENT_LABELS } from "./extended";
 
 export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
-    <div
-      className="w-7 h-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group md:hidden"
+    <button
+      className="group flex size-7 cursor-pointer items-center justify-center rounded-sm bg-layer-1 transition-all hover:bg-layer-1-hover md:hidden"
       onClick={() => toggleSidebar(!isSidebarCollapsed)}
     >
-      <Menu size={14} className="text-secondary group-hover:text-primary transition-all" />
-    </div>
+      <Menu size={14} className="text-secondary transition-all group-hover:text-primary" />
+    </button>
   );
 });
 
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
+
 export const AdminHeader = observer(function AdminHeader() {
   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 "gitea":
-        return "Gitea";
-      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.
@@ -61,14 +46,14 @@ export const AdminHeader = observer(function AdminHeader() {
     const breadcrumbItems = pathSegments.map((segment) => {
       currentUrl += "/" + segment;
       return {
-        title: getHeaderTitle(segment),
+        title: HEADER_SEGMENT_LABELS[segment] ?? segment.toUpperCase(),
         href: currentUrl,
       };
     });
     return breadcrumbItems;
   };
 
-  const breadcrumbItems = generateBreadcrumbItems(pathName);
+  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-subtle bg-surface-1 p-4">

apps/admin/components/common/logo-spinner.tsx

@@ -1,3 +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 { useTheme } from "next-themes";
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
 import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";

apps/admin/components/common/new-user-popup.tsx

@@ -1,3 +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 { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme as useNextTheme } from "next-themes";
@@ -18,7 +24,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
 
   if (!isNewUserPopup) return <></>;
   return (
-    <div className="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-surface-1">
+    <div className="shadow-md absolute right-8 bottom-8 w-96 rounded-lg border border-subtle bg-surface-1 p-6">
       <div className="flex gap-4">
         <div className="grow">
           <div className="text-14 font-semibold">Create workspace</div>
@@ -35,7 +41,7 @@ export const NewUserPopup = observer(function NewUserPopup() {
             </Button>
           </div>
         </div>
-        <div className="shrink-0 flex items-center justify-center">
+        <div className="flex shrink-0 items-center justify-center">
           <img
             src={resolveGeneralTheme(resolvedTheme) === "dark" ? TakeoffIconDark : TakeoffIconLight}
             height={80}

apps/admin/components/common/page-header.tsx

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 type TPageHeader = {
   title?: string;
   description?: string;

apps/admin/components/common/page-wrapper.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+
+type TPageWrapperProps = {
+  children: ReactNode;
+  header?: {
+    title: string;
+    description: string | ReactNode;
+    actions?: ReactNode;
+  };
+  customHeader?: ReactNode;
+  size?: "lg" | "md";
+};
+
+export const PageWrapper = (props: TPageWrapperProps) => {
+  const { children, header, customHeader, size = "md" } = props;
+
+  return (
+    <div
+      className={cn("mx-auto h-full w-full space-y-6 py-4", {
+        "max-w-[1000px] md:px-4 2xl:max-w-[1200px]": size === "md",
+        "px-4 lg:px-12": size === "lg",
+      })}
+    >
+      {customHeader ? (
+        <div className="mx-4 shrink-0 space-y-1 border-b border-subtle py-4">{customHeader}</div>
+      ) : (
+        header && (
+          <div className="mx-4 flex shrink-0 items-center justify-between gap-4 space-y-1 border-b border-subtle py-4">
+            <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
+              <div className="text-h5-semibold text-primary">{header.title}</div>
+              <div className="text-body-sm-regular text-secondary">{header.description}</div>
+            </div>
+            {header.actions && <div className="shrink-0">{header.actions}</div>}
+          </div>
+        )
+      )}
+      <div className="vertical-scrollbar scrollbar-sm flex-grow overflow-hidden overflow-y-scroll px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+};

apps/admin/components/instance/failure.tsx

@@ -1,3 +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 { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
@@ -18,12 +24,12 @@ export const InstanceFailureView = observer(function InstanceFailureView() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
-          <div className="relative flex flex-col justify-center items-center space-y-4">
+      <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">
+          <div className="relative flex flex-col items-center justify-center space-y-4">
             <img src={instanceImage} alt="Instance failure illustration" />
-            <h3 className="font-medium text-20 text-on-color text-center">Unable to fetch instance details.</h3>
-            <p className="font-medium text-14 text-center">
+            <h3 className="text-center text-20 font-medium text-on-color">Unable to fetch instance details.</h3>
+            <p className="text-center text-14 font-medium">
               We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
             </p>
           </div>

apps/admin/components/instance/form-header.tsx

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-20 leading-7 font-semibold text-primary">{heading}</span>
+      <span className="text-16 leading-7 font-semibold text-placeholder">{subHeading}</span>
+    </div>
+  );
+}

apps/admin/components/instance/instance-not-ready.tsx

@@ -1,3 +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 Link from "next/link";
 import { Button } from "@plane/propel/button";
 // assets
@@ -5,12 +11,12 @@ import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
 
 export function InstanceNotReady() {
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
+    <div className="relative container mx-auto flex h-full w-full items-center justify-center px-5">
+      <div className="relative w-auto max-w-2xl space-y-8 py-10">
+        <div className="relative flex flex-col items-center justify-center space-y-4">
+          <h1 className="pb-3 text-24 font-bold">Welcome aboard Plane!</h1>
           <img src={PlaneTakeOffImage} alt="Plane Logo" />
-          <p className="font-medium text-14 text-placeholder">Get started by setting up your instance and workspace</p>
+          <p className="text-14 font-medium text-placeholder">Get started by setting up your instance and workspace</p>
         </div>
 
         <div>

apps/admin/components/instance/loading.tsx

@@ -1,3 +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 { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";

apps/admin/components/instance/setup-form.tsx

@@ -1,3 +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, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
@@ -7,11 +13,11 @@ import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button } from "@plane/propel/button";
 import { AuthService } from "@plane/services";
 import { Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
-import { getPasswordStrength } from "@plane/utils";
+import { getPasswordStrength, validatePersonName, validateCompanyName } from "@plane/utils";
 // components
 import { AuthHeader } from "@/app/(all)/(home)/auth-header";
-import { Banner } from "@/components/common/banner";
-import { FormHeader } from "@/components/instance/form-header";
+import { Banner } from "../common/banner";
+import { FormHeader } from "./form-header";
 
 // service initialization
 const authService = new AuthService();
@@ -54,13 +60,13 @@ const defaultFromData: TFormData = {
 export function InstanceSetupForm() {
   // search params
   const searchParams = useSearchParams();
-  const firstNameParam = searchParams.get("first_name") || undefined;
-  const lastNameParam = searchParams.get("last_name") || undefined;
-  const companyParam = searchParams.get("company") || undefined;
-  const emailParam = searchParams.get("email") || undefined;
-  const isTelemetryEnabledParam = (searchParams.get("is_telemetry_enabled") === "True" ? true : false) || true;
-  const errorCode = searchParams.get("error_code") || undefined;
-  const errorMessage = searchParams.get("error_message") || undefined;
+  const firstNameParam = searchParams?.get("first_name") || undefined;
+  const lastNameParam = searchParams?.get("last_name") || undefined;
+  const companyParam = searchParams?.get("company") || undefined;
+  const emailParam = searchParams?.get("email") || undefined;
+  const isTelemetryEnabledParam = (searchParams?.get("is_telemetry_enabled") === "True" ? true : false) || true;
+  const errorCode = searchParams?.get("error_code") || undefined;
+  const errorMessage = searchParams?.get("error_message") || undefined;
   // state
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -133,8 +139,8 @@ export function InstanceSetupForm() {
   return (
     <>
       <AuthHeader />
-      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
-        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+      <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="Setup your Plane Instance"
             subHeading="Post setup you will be able to manage this Plane instance."
@@ -154,10 +160,10 @@ export function InstanceSetupForm() {
             <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
             <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
 
-            <div className="flex flex-col sm:flex-row items-center gap-4">
+            <div className="flex flex-col items-center gap-4 sm:flex-row">
               <div className="w-full space-y-1">
-                <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
-                  First name <span className="text-red-500">*</span>
+                <label className="text-13 font-medium text-tertiary" htmlFor="first_name">
+                  First name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
                   className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -167,14 +173,20 @@ export function InstanceSetupForm() {
                   inputSize="md"
                   placeholder="Wilber"
                   value={formData.first_name}
-                  onChange={(e) => handleFormChange("first_name", e.target.value)}
-                  autoComplete="on"
+                  onChange={(e) => {
+                    const validation = validatePersonName(e.target.value);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("first_name", e.target.value);
+                    }
+                  }}
+                  autoComplete="off"
                   autoFocus
+                  maxLength={50}
                 />
               </div>
               <div className="w-full space-y-1">
-                <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
-                  Last name <span className="text-red-500">*</span>
+                <label className="text-13 font-medium text-tertiary" htmlFor="last_name">
+                  Last name <span className="text-danger-primary">*</span>
                 </label>
                 <Input
                   className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -184,15 +196,21 @@ export function InstanceSetupForm() {
                   inputSize="md"
                   placeholder="Wright"
                   value={formData.last_name}
-                  onChange={(e) => handleFormChange("last_name", e.target.value)}
-                  autoComplete="on"
+                  onChange={(e) => {
+                    const validation = validatePersonName(e.target.value);
+                    if (validation === true || e.target.value === "") {
+                      handleFormChange("last_name", e.target.value);
+                    }
+                  }}
+                  autoComplete="off"
+                  maxLength={50}
                 />
               </div>
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="email">
-                Email <span className="text-red-500">*</span>
+              <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"
@@ -204,16 +222,16 @@ export function InstanceSetupForm() {
                 value={formData.email}
                 onChange={(e) => handleFormChange("email", e.target.value)}
                 hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-                autoComplete="on"
+                autoComplete="off"
               />
               {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
-                Company name <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="company_name">
+                Company name <span className="text-danger-primary">*</span>
               </label>
               <Input
                 className="w-full border border-subtle !bg-surface-1 placeholder:text-placeholder"
@@ -223,13 +241,19 @@ export function InstanceSetupForm() {
                 inputSize="md"
                 placeholder="Company name"
                 value={formData.company_name}
-                onChange={(e) => handleFormChange("company_name", e.target.value)}
+                onChange={(e) => {
+                  const validation = validateCompanyName(e.target.value, false);
+                  if (validation === true || e.target.value === "") {
+                    handleFormChange("company_name", e.target.value);
+                  }
+                }}
+                maxLength={80}
               />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="password">
-                Set a password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                Set a password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -238,19 +262,19 @@ export function InstanceSetupForm() {
                   name="password"
                   type={showPassword.password ? "text" : "password"}
                   inputSize="md"
-                  placeholder="New password..."
+                  placeholder="New password"
                   value={formData.password}
                   onChange={(e) => handleFormChange("password", e.target.value)}
                   hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
                   onFocus={() => setIsPasswordInputFocused(true)}
                   onBlur={() => setIsPasswordInputFocused(false)}
-                  autoComplete="on"
+                  autoComplete="new-password"
                 />
                 {showPassword.password ? (
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -259,7 +283,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <Eye className="h-4 w-4" />
@@ -267,14 +291,14 @@ export function InstanceSetupForm() {
                 )}
               </div>
               {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-                <p className="px-1 text-11 text-red-500">{errorData.message}</p>
+                <p className="px-1 text-11 text-danger-primary">{errorData.message}</p>
               )}
               <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
-                Confirm password <span className="text-red-500">*</span>
+              <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+                Confirm password <span className="text-danger-primary">*</span>
               </label>
               <div className="relative">
                 <Input
@@ -288,12 +312,13 @@ export function InstanceSetupForm() {
                   className="w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
                   onFocus={() => setIsRetryPasswordInputFocused(true)}
                   onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  autoComplete="new-password"
                 />
                 {showPassword.retypePassword ? (
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -302,7 +327,7 @@ export function InstanceSetupForm() {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
+                    className="absolute top-3.5 right-3 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <Eye className="h-4 w-4" />
@@ -311,27 +336,29 @@ export function InstanceSetupForm() {
               </div>
               {!!formData.confirm_password &&
                 formData.password !== formData.confirm_password &&
-                renderPasswordMatchError && <span className="text-13 text-red-500">Passwords don{"'"}t match</span>}
+                renderPasswordMatchError && (
+                  <span className="text-13 text-danger-primary">Passwords don{"'"}t match</span>
+                )}
             </div>
 
             <div className="relative flex gap-2">
               <div>
                 <Checkbox
-                  className="w-4 h-4"
+                  className="h-4 w-4"
                   iconClassName="w-3 h-3"
                   id="is_telemetry_enabled"
                   onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
                   checked={formData.is_telemetry_enabled}
                 />
               </div>
-              <label className="text-13 text-tertiary font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+              <label className="cursor-pointer text-13 font-medium text-tertiary" htmlFor="is_telemetry_enabled">
                 Allow Plane to anonymously collect usage events.{" "}
                 <a
                   tabIndex={-1}
                   href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-13 font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                  className="text-blue-500 hover:text-blue-600 flex-shrink-0 text-13 font-medium"
                 >
                   See More
                 </a>

apps/admin/components/workspace/list-item.tsx

@@ -1,7 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
 import { observer } from "mobx-react";
-import { ExternalLink } from "lucide-react";
+
 // plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
+import { NewTabIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { getFileURL } from "@plane/utils";
 // hooks
@@ -23,19 +30,19 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-subtle/70 hover:border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-md"
+      className="group flex items-center justify-between gap-2.5 truncate rounded-lg border border-subtle bg-layer-1 p-3 hover:border-subtle-1 hover:bg-layer-1-hover hover:shadow-raised-100"
       rel="noreferrer"
     >
       <div className="flex items-start gap-4">
         <span
-          className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 text-11 uppercase ${
-            !workspace?.logo_url && "rounded-sm bg-accent-primary text-on-color"
+          className={`relative mt-1 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 text-11 uppercase ${
+            !workspace?.logo_url && "rounded-lg bg-accent-primary text-on-color"
           }`}
         >
           {workspace?.logo_url && workspace.logo_url !== "" ? (
             <img
               src={getFileURL(workspace.logo_url)}
-              className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
+              className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
               alt="Workspace Logo"
             />
           ) : (
@@ -43,7 +50,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
           )}
         </span>
         <div className="flex flex-col items-start gap-1">
-          <div className="flex flex-wrap w-full items-center gap-2.5">
+          <div className="flex w-full flex-wrap items-center gap-2.5">
             <h3 className={`text-14 font-medium capitalize`}>{workspace.name}</h3>/
             <Tooltip tooltipContent="The unique URL of your workspace">
               <h4 className="text-13 text-tertiary">[{workspace.slug}]</h4>
@@ -51,14 +58,14 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
           </div>
           {workspace.owner.email && (
             <div className="flex items-center gap-1 text-11">
-              <h3 className="text-secondary font-medium">Owned by:</h3>
+              <h3 className="font-medium text-secondary">Owned by:</h3>
               <h4 className="text-tertiary">{workspace.owner.email}</h4>
             </div>
           )}
           <div className="flex items-center gap-2.5 text-11">
             {workspace.total_projects !== null && (
               <span className="flex items-center gap-1">
-                <h3 className="text-secondary font-medium">Total projects:</h3>
+                <h3 className="font-medium text-secondary">Total projects:</h3>
                 <h4 className="text-tertiary">{workspace.total_projects}</h4>
               </span>
             )}
@@ -66,7 +73,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
               <>
                 •
                 <span className="flex items-center gap-1">
-                  <h3 className="text-secondary font-medium">Total members:</h3>
+                  <h3 className="font-medium text-secondary">Total members:</h3>
                   <h4 className="text-tertiary">{workspace.total_members}</h4>
                 </span>
               </>
@@ -75,7 +82,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
         </div>
       </div>
       <div className="flex-shrink-0">
-        <ExternalLink size={14} className="text-placeholder group-hover:text-secondary" />
+        <NewTabIcon width={14} height={16} className="text-placeholder group-hover:text-secondary" />
       </div>
     </a>
   );

apps/admin/core/components/common/banner.tsx

@@ -1,31 +0,0 @@
-import { AlertCircle, CheckCircle2 } from "lucide-react";
-
-type TBanner = {
-  type: "success" | "error";
-  message: string;
-};
-
-export function Banner(props: TBanner) {
-  const { type, message } = props;
-
-  return (
-    <div
-      className={`rounded-md p-2 w-full border ${type === "error" ? "bg-red-500/5 border-red-400" : "bg-green-500/5 border-green-400"}`}
-    >
-      <div className="flex items-center justify-center">
-        <div className="flex-shrink-0">
-          {type === "error" ? (
-            <span className="flex items-center justify-center h-6 w-6 rounded-full">
-              <AlertCircle className="h-5 w-5 text-red-600" aria-hidden="true" />
-            </span>
-          ) : (
-            <CheckCircle2 className="h-5 w-5 text-green-600" aria-hidden="true" />
-          )}
-        </div>
-        <div className="ml-1">
-          <p className={`text-13 font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/admin/core/components/instance/form-header.tsx

@@ -1,8 +0,0 @@
-export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
-  return (
-    <div className="flex flex-col gap-1">
-      <span className="text-20 font-semibold text-primary leading-7">{heading}</span>
-      <span className="text-16 font-semibold text-placeholder leading-7">{subHeading}</span>
-    </div>
-  );
-}

apps/admin/core/hooks/store/index.ts

@@ -1,4 +0,0 @@
-export * from "./use-theme";
-export * from "./use-instance";
-export * from "./use-user";
-export * from "./use-workspace";