docs: add survey-ui CSS class reference table

Co-authored-by: Johannes <jobenjada@users.noreply.github.com>

.codex/environments/environment.toml

@@ -0,0 +1,9 @@
+# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
+version = 1
+name = "formbricks"
+
+[setup]
+script = '''
+pnpm install
+pnpm dev:setup
+'''

.env.example

@@ -32,6 +32,24 @@ CRON_SECRET=
 # Set the minimum log level(debug, info, warn, error, fatal)
 LOG_LEVEL=info
 
+# BullMQ workers require REDIS_URL (for example `redis://localhost:6379`) to be set.
+# BullMQ worker startup is enabled by default outside tests. Set to 0 to disable.
+# BULLMQ_WORKER_ENABLED=1
+# Set to 1 on web/API pods that only enqueue jobs while a separate BullMQ worker deployment consumes them.
+# BULLMQ_EXTERNAL_WORKER_ENABLED=0
+
+# Number of BullMQ worker instances started per Formbricks server process.
+# BULLMQ_WORKER_COUNT=1
+
+# Number of concurrent jobs each BullMQ worker can process.
+# BULLMQ_WORKER_CONCURRENCY=1
+
+# Survey publish/close scheduling is configured with public build-time env vars because the editor UI
+# also needs to render the selected execution time and timezone.
+# NEXT_PUBLIC_SURVEY_SCHEDULING_TIME_ZONE=Europe/Berlin
+# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_HOUR=0
+# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_MINUTE=0
+
 ##############
 #  DATABASE  #
 ##############
@@ -45,7 +63,30 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 # Set explicitly to avoid confusion; override as needed when using docker-compose.dev.yml.
 HUB_API_KEY=dev-api-key
 HUB_API_URL=http://localhost:8080
-HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres?sslmode=disable
+HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/hub?sslmode=disable
+# Hub image tag used by docker-compose.dev.yml (hub + hub-migrate). Leave unset to use the
+# pinned default in the compose file; override here when testing a specific Hub release.
+# HUB_IMAGE_TAG=0.3.0
+
+# Hub embeddings are optional. Set a provider and model to enable semantic search embeddings in
+# the Hub API and hub-worker. For provider-specific settings, see:
+# https://hub.formbricks.com/reference/environment-variables/#embeddings
+# Example with Google AI Studio:
+# EMBEDDING_PROVIDER=google
+# EMBEDDING_MODEL=gemini-embedding-001
+# EMBEDDING_PROVIDER_API_KEY=
+
+###########################
+#  CUBE ANALYTICS (XM V5) #
+###########################
+# XM Suite v5 analysis features require Cube.js. The optional xm dev profile exposes Cube on port 4000.
+# Uncomment COMPOSE_PROFILES=xm to run the optional Cube analytics service.
+# COMPOSE_PROFILES=xm
+CUBEJS_API_URL=http://localhost:4000
+# Generate with: openssl rand -hex 32. `pnpm dev:setup` will create/preserve this automatically.
+CUBEJS_API_SECRET=
+CUBEJS_JWT_ISSUER=formbricks-web
+CUBEJS_JWT_AUDIENCE=formbricks-cube
 
 ################
 #  MAIL SETUP  #
@@ -79,7 +120,7 @@ SMTP_PASSWORD=smtpPassword
 # S3 STORAGE #
 ##############
 
-# S3 Storage is required for the file upload in serverless environments like Vercel
+# S3 Storage is required for the file upload in serverless environments
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=
@@ -103,12 +144,25 @@ EMAIL_VERIFICATION_DISABLED=1
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
 PASSWORD_RESET_DISABLED=1
 
+# Password reset token lifetime in minutes. Must be between 5 and 120 if set.
+# PASSWORD_RESET_TOKEN_LIFETIME_MINUTES=30
+
+# Development-only helper: log the password reset link to the server console instead of sending reset emails.
+# DEBUG_SHOW_RESET_LINK=1
+
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
 # Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
+###########################################
+# Account deletion reauthentication       #
+###########################################
+
+# Danger: disables fresh SSO reauthentication for passwordless account deletion. Keep unset unless you accept the risk.
+# DISABLE_ACCOUNT_DELETION_SSO_REAUTH=1
+
 
 ##########
 # Other  #
@@ -135,12 +189,41 @@ GITHUB_SECRET=
 # Configure Google Login
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
+# Google only returns the auth_time proof after Auth Platform Security Bundle "Session age claims" is enabled.
+# Keep this unset until that setting is active for the OAuth app.
+# GOOGLE_ACCOUNT_DELETION_REAUTH_ENABLED=1
 
 # Configure Azure Active Directory Login
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 AZUREAD_TENANT_ID=
 
+# Configure Formbricks AI at the instance level
+# Set the provider used for AI features on this instance.
+# Accepted values for AI_PROVIDER: aws, google, azure
+# Set AI_MODEL to the provider-specific model or deployment name and configure the matching provider settings below.
+# AI_PROVIDER=google
+# AI_MODEL=gemini-2.5-flash
+
+# Google Cloud settings for Gemini models
+# Credentials are optional when Application Default Credentials are available.
+# AI_GOOGLE_CLOUD_PROJECT=
+# AI_GOOGLE_CLOUD_LOCATION=
+# AI_GOOGLE_CLOUD_CREDENTIALS_JSON=
+# AI_GOOGLE_CLOUD_APPLICATION_CREDENTIALS=
+
+# Amazon Bedrock credentials
+# AI_AWS_REGION=
+# AI_AWS_ACCESS_KEY_ID=
+# AI_AWS_SECRET_ACCESS_KEY=
+# AI_AWS_SESSION_TOKEN=
+
+# Azure AI / Microsoft Foundry credentials
+# AI_AZURE_BASE_URL=
+# AI_AZURE_RESOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_API_VERSION=v1
+
 # OpenID Connect (OIDC) configuration
 # OIDC_CLIENT_ID=
 # OIDC_CLIENT_SECRET=
@@ -194,6 +277,14 @@ ENTERPRISE_LICENSE_KEY=
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
 
+# Disable telemetry reporting (usage stats sent to Formbricks). Ignored when an EE license is active.
+# TELEMETRY_DISABLED=1
+
+# Allow webhook URLs to point to internal/private network addresses (e.g. localhost, 192.168.x.x)
+# WARNING: Only enable this if you understand the SSRF risks. Useful for self-hosted instances
+# that need to send webhooks to internal services.
+# DANGEROUSLY_ALLOW_WEBHOOK_INTERNAL_URLS=1
+
 # OpenTelemetry OTLP endpoint (base URL, exporters append /v1/traces and /v1/metrics)
 # OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
 # OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
@@ -238,6 +329,13 @@ REDIS_URL=redis://localhost:6379
 # If the ip should be added in the log or not. Default 0
 # AUDIT_LOG_GET_USER_IP=0
 
+# Optional Cube.js database overrides. The official local docker-compose.dev.yml stack points Cube at the
+# local `postgres` service automatically; set these only when running Cube yourself or changing bundled defaults.
+# CUBEJS_DB_HOST=postgres
+# CUBEJS_DB_PORT=5432
+# CUBEJS_DB_NAME=postgres
+# CUBEJS_DB_USER=postgres
+# CUBEJS_DB_PASS=postgres
 
 # Lingo.dev API key for translation generation
 LINGO_API_KEY=your_api_key_here

.github/ISSUE_TEMPLATE/accessibility.yml

@@ -0,0 +1,78 @@
+name: Accessibility issue
+description: "Report an accessibility barrier in Formbricks (WCAG, screen reader, keyboard, contrast, etc.)"
+type: bug
+labels: ["accessibility", "bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for helping make Formbricks accessible to everyone. Please fill in as much as you can — see [ACCESSIBILITY.md](https://github.com/formbricks/formbricks/blob/main/ACCESSIBILITY.md) for context.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: What part of Formbricks is affected and what's wrong?
+      placeholder: "e.g. The language switcher in survey runtime can't be reached with Tab."
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual behavior
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      placeholder: |
+        1. Open a survey with multiple languages
+        2. Press Tab repeatedly
+        3. Focus never lands on the language switcher
+    validations:
+      required: true
+  - type: input
+    id: wcag
+    attributes:
+      label: Related WCAG criterion (if known)
+      placeholder: "e.g. 2.1.1 Keyboard"
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Severity
+      options:
+        - "Critical — blocks a user from completing a core task"
+        - "High — significant barrier with no easy workaround"
+        - "Medium — barrier with a workaround"
+        - "Low — minor friction"
+    validations:
+      required: true
+  - type: input
+    id: at
+    attributes:
+      label: Assistive technology
+      placeholder: "e.g. NVDA 2026.1, VoiceOver on macOS 15, keyboard only"
+  - type: input
+    id: browser
+    attributes:
+      label: Browser and OS
+      placeholder: "e.g. Firefox 138 on Windows 11"
+  - type: dropdown
+    id: environment
+    attributes:
+      label: Your Environment
+      options:
+        - Formbricks Cloud (app.formbricks.com)
+        - Self-hosted Formbricks
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Other information (screenshots, recordings, axe output)

.github/actions/build-and-push-docker/action.yml

@@ -284,6 +284,10 @@ runs:
           database_url=${{ env.DUMMY_DATABASE_URL }}
           encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
           redis_url=${{ env.DUMMY_REDIS_URL }}
+          hub_api_url=${{ env.DUMMY_HUB_API_URL }}
+          hub_api_key=${{ env.DUMMY_HUB_API_KEY }}
+          cubejs_api_url=${{ env.DUMMY_CUBEJS_API_URL }}
+          cubejs_api_secret=${{ env.DUMMY_CUBEJS_API_SECRET }}
           sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
           posthog_key=${{ env.POSTHOG_KEY }}
       env:
@@ -291,6 +295,10 @@ runs:
         DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
         DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
         DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
+        DUMMY_HUB_API_URL: ${{ env.DUMMY_HUB_API_URL }}
+        DUMMY_HUB_API_KEY: ${{ env.DUMMY_HUB_API_KEY }}
+        DUMMY_CUBEJS_API_URL: ${{ env.DUMMY_CUBEJS_API_URL }}
+        DUMMY_CUBEJS_API_SECRET: ${{ env.DUMMY_CUBEJS_API_SECRET }}
         SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
         POSTHOG_KEY: ${{ env.POSTHOG_KEY }}
 

.github/actions/cache-build-web/action.yml

@@ -20,12 +20,12 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
     - uses: ./.github/actions/dangerous-git-checkout
 
     - name: Cache Build
-      uses: actions/cache@v3
+      uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       id: cache-build
       env:
         cache-name: prod-build
@@ -43,7 +43,7 @@ runs:
       shell: bash
 
     - name: Setup Node.js 20.x
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
         node-version: 20.x
       if: steps.cache-build.outputs.cache-hit != 'true'
@@ -53,20 +53,18 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies
-      run: pnpm install --config.platform=linux --config.architecture=x64
+      run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
 
-    - name: create .env
-      run: cp .env.example .env
+    - name: Create .env
+      run: pnpm dev:setup
       shell: bash
 
-    - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+    - name: Fill E2E_TESTING in .env
       env:
         E2E_TESTING_MODE: ${{ inputs.e2e_testing_mode }}
       run: |
-        RANDOM_KEY=$(openssl rand -hex 32)
-        sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
         echo "E2E_TESTING=$E2E_TESTING_MODE" >> .env
       shell: bash
 

.github/actions/dangerous-git-checkout/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       with:
         ref: ${{ github.event.pull_request.head.sha }}
         fetch-depth: 2

.github/workflows/build-and-push-ecr.yml

@@ -91,5 +91,9 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}

.github/workflows/chromatic.yml

@@ -49,7 +49,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Run Chromatic
         uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4

.github/workflows/docker-build-validation.yml

@@ -73,6 +73,10 @@ jobs:
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
             redis_url=redis://localhost:6379
+            hub_api_url=http://localhost:4000
+            hub_api_key=build-time-placeholder
+            cubejs_api_url=http://localhost:4000
+            cubejs_api_secret=build-time-placeholder
 
       - name: Verify and Initialize PostgreSQL
         run: |
@@ -143,6 +147,10 @@ jobs:
             -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
             -e ENCRYPTION_KEY="$DUMMY_ENCRYPTION_KEY" \
             -e REDIS_URL="redis://host.docker.internal:6379" \
+            -e HUB_API_URL="http://localhost:4000" \
+            -e HUB_API_KEY="build-time-placeholder" \
+            -e CUBEJS_API_URL="http://localhost:4000" \
+            -e CUBEJS_API_SECRET="build-time-placeholder" \
             -d "formbricks-test:$GITHUB_SHA"
 
           # Start health check polling immediately (every 5 seconds for up to 5 minutes)

.github/workflows/e2e.yml

@@ -57,7 +57,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -65,19 +65,15 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
         shell: bash
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
         shell: bash
 
-      - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+      - name: Fill ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${{ secrets.ENTERPRISE_LICENSE_KEY }}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=redis://localhost:6379|" .env
           echo "" >> .env
@@ -85,65 +81,48 @@ jobs:
           echo "S3_REGION=us-east-1" >> .env
           echo "S3_BUCKET_NAME=formbricks-e2e" >> .env
           echo "S3_ENDPOINT_URL=http://localhost:9000" >> .env
-          echo "S3_ACCESS_KEY=devminio" >> .env
-          echo "S3_SECRET_KEY=devminio123" >> .env
+          echo "S3_ACCESS_KEY=devrustfs-service" >> .env
+          echo "S3_SECRET_KEY=devrustfs-service123" >> .env
           echo "S3_FORCE_PATH_STYLE=1" >> .env
         shell: bash
 
-      - name: Install MinIO client (mc)
-        run: |
-          set -euo pipefail
-          MC_VERSION="RELEASE.2025-08-13T08-35-41Z"
-          MC_BASE="https://dl.min.io/client/mc/release/linux-amd64/archive"
-          MC_BIN="mc.${MC_VERSION}"
-          MC_SUM="${MC_BIN}.sha256sum"
-
-          curl -fsSL "${MC_BASE}/${MC_BIN}" -o "${MC_BIN}"
-          curl -fsSL "${MC_BASE}/${MC_SUM}" -o "${MC_SUM}"
-
-          sha256sum -c "${MC_SUM}"
-
-          chmod +x "${MC_BIN}"
-          sudo mv "${MC_BIN}" /usr/local/bin/mc
-
-      - name: Start MinIO Server
+      - name: Start RustFS Server
         run: |
           set -euo pipefail
 
-          # Start MinIO server in background
+          # Start RustFS server in background
           docker run -d \
-            --name minio-server \
+            --name rustfs-server \
             -p 9000:9000 \
             -p 9001:9001 \
-            -e MINIO_ROOT_USER=devminio \
-            -e MINIO_ROOT_PASSWORD=devminio123 \
-            minio/minio:RELEASE.2025-09-07T16-13-09Z \
-            server /data --console-address :9001
+            -e RUSTFS_ACCESS_KEY=devrustfs \
+            -e RUSTFS_SECRET_KEY=devrustfs123 \
+            -e RUSTFS_ADDRESS=:9000 \
+            -e RUSTFS_CONSOLE_ENABLE=true \
+            -e RUSTFS_CONSOLE_ADDRESS=:9001 \
+            rustfs/rustfs:1.0.0-alpha.93 \
+            /data
 
-          echo "MinIO server started"
+          echo "RustFS server started"
 
-      - name: Wait for MinIO and create S3 bucket
+      - name: Bootstrap RustFS bucket and browser upload CORS
         run: |
           set -euo pipefail
 
-          echo "Waiting for MinIO to be ready..."
-          ready=0
-          for i in {1..60}; do
-            if curl -fsS http://localhost:9000/minio/health/live >/dev/null; then
-              echo "MinIO is up after ${i} seconds"
-              ready=1
-              break
-            fi
-            sleep 1
-          done
-
-          if [ "$ready" -ne 1 ]; then
-            echo "::error::MinIO did not become ready within 60 seconds"
-            exit 1
-          fi
-
-          mc alias set local http://localhost:9000 devminio devminio123
-          mc mb --ignore-existing local/formbricks-e2e
+          docker run --rm \
+            --network host \
+            --entrypoint /bin/sh \
+            -e RUSTFS_ENDPOINT_URL=http://127.0.0.1:9000 \
+            -e RUSTFS_ADMIN_USER=devrustfs \
+            -e RUSTFS_ADMIN_PASSWORD=devrustfs123 \
+            -e RUSTFS_SERVICE_USER=devrustfs-service \
+            -e RUSTFS_SERVICE_PASSWORD=devrustfs-service123 \
+            -e RUSTFS_BUCKET_NAME=formbricks-e2e \
+            -e RUSTFS_POLICY_NAME=formbricks-e2e-policy \
+            -e RUSTFS_CORS_ALLOWED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000 \
+            -v "$PWD/docker/rustfs-init.sh:/tmp/rustfs-init.sh:ro" \
+            minio/mc@sha256:95b5f3f7969a5c5a9f3a700ba72d5c84172819e13385aaf916e237cf111ab868 \
+            /tmp/rustfs-init.sh
 
       - name: Build App
         run: |
@@ -242,8 +221,14 @@ jobs:
         if: failure()
         with:
           name: app-logs
+          if-no-files-found: ignore
           path: app.log
 
       - name: Output App Logs
         if: failure()
-        run: cat app.log
+        run: |
+          if [ -f app.log ]; then
+            cat app.log
+          else
+            echo "app.log not found because the Run App step did not execute or failed before log creation."
+          fi

.github/workflows/formbricks-release.yml

@@ -155,3 +155,31 @@ jobs:
       commit_sha: ${{ github.sha }}
       is_prerelease: ${{ github.event.release.prerelease }}
       make_latest: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+
+  linear-release-complete:
+    name: Mark Linear release as complete
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    needs:
+      - docker-build-community
+      - docker-build-cloud
+      - helm-chart-release
+      - move-stable-tag
+    if: ${{ !github.event.release.prerelease }}
+    steps:
+      - name: Harden the runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Complete Linear release
+        uses: linear/linear-release-action@0353b5fa8c00326913966f00557d68f8f30b8b6b # v0.7.0
+        with:
+          access_key: ${{ secrets.LINEAR_ACCESS_KEY }}
+          command: complete
+          version: ${{ github.event.release.tag_name }}

.github/workflows/linear-release.yml

@@ -0,0 +1,30 @@
+name: Linear Release Sync
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  linear-release:
+    name: Sync release to Linear
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Harden the runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Sync Linear release
+        uses: linear/linear-release-action@0353b5fa8c00326913966f00557d68f8f30b8b6b # v0.7.0
+        with:
+          access_key: ${{ secrets.LINEAR_ACCESS_KEY }}

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -29,17 +29,10 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
-
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
-        run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+      - name: Create .env
+        run: pnpm dev:setup
 
       - name: Lint
         run: pnpm lint

.github/workflows/release-docker-github-experimental.yml

@@ -47,4 +47,8 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/release-docker-github.yml

@@ -105,4 +105,8 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/sonarqube.yml

@@ -25,7 +25,7 @@ jobs:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -33,17 +33,13 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Adjust CI-specific env values
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Run tests with coverage

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -30,17 +30,13 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Adjust CI-specific env values
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Test

.github/workflows/translation-check.yml

@@ -2,6 +2,7 @@ name: Translation Validation
 
 permissions:
   contents: read
+  pull-requests: read
 
 on:
   pull_request:
@@ -39,7 +40,7 @@ jobs:
 
       - name: Setup Node.js 22.x
         if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -49,7 +50,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Validate translation keys
         if: steps.changes.outputs.translations == 'true'

.gitignore

@@ -45,7 +45,7 @@ yarn-error.log*
 .direnv
 
 # Playwright
-/test-results/
+**/test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/

.husky/pre-commit

@@ -1 +1,13 @@
-pnpm lint-staged
+#!/usr/bin/env sh
+
+if command -v pnpm >/dev/null 2>&1; then
+  pnpm lint-staged
+elif command -v npm >/dev/null 2>&1; then
+  npm exec --yes pnpm@10.32.1 lint-staged
+elif command -v corepack >/dev/null 2>&1; then
+  corepack pnpm lint-staged
+else
+  echo "Error: pnpm, npm, and corepack are unavailable in this Git hook PATH."
+  echo "Install Node.js tooling or update your PATH, then retry the commit."
+  exit 127
+fi

.vercelignore

@@ -1 +0,0 @@
-apps/web/.env

ACCESSIBILITY.md

@@ -0,0 +1,48 @@
+# Accessibility
+
+Formbricks is committed to making our platform usable by everyone, including people who rely on assistive technologies.
+
+## Standards
+
+We aim to conform to:
+
+- **[WCAG 2.1 Level AA](https://www.w3.org/TR/WCAG21/)** — the web content baseline.
+- **[EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/)** — the European harmonised standard referenced by the **European Accessibility Act (EAA)**, applicable to us as a Germany-based company.
+- **Section 508** — for users in US public-sector contexts.
+
+## Priorities
+
+1. **End-user surveys** (`packages/surveys`) — everything respondents see and interact with. This is our highest priority because survey takers don't choose Formbricks; the organisations running surveys choose for them.
+2. **Admin app** (`apps/web`) — survey creation, response analysis, and team management used by Formbricks customers.
+
+In both areas we focus on:
+
+- Keyboard navigation with a clearly visible focus indicator
+- Screen reader support through semantic HTML and correctly scoped ARIA
+- Sufficient color and contrast
+- Programmatically associated labels and announced status messages
+
+## Supported Environments
+
+- Latest two versions of Chrome, Firefox, Safari, and Edge
+- VoiceOver (macOS/iOS), NVDA (Windows), and TalkBack (Android)
+
+## Contributing
+
+When contributing UI changes:
+
+- Prefer semantic HTML over ARIA.
+- Tab through your change end-to-end and confirm focus is visible at every stop.
+- Label every control. Don't convey meaning by color alone.
+- Run [axe DevTools](https://www.deque.com/axe/devtools/) or Lighthouse on the page you changed.
+
+## Reporting Accessibility Issues
+
+If you encounter an accessibility barrier, please [open an issue](https://github.com/formbricks/formbricks/issues/new?labels=accessibility&template=accessibility.yml) using the accessibility template. For blocking issues in a procurement or compliance context, email **[hola@formbricks.com](mailto:hola@formbricks.com)**.
+
+## Resources
+
+- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
+- [EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/)
+- [European Accessibility Act overview](https://ec.europa.eu/social/main.jsp?catId=1202)
+- [MDN Accessibility Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility)

AGENTS.md

@@ -32,6 +32,7 @@ The `@formbricks/surveys` package is pre-compiled (Vite → UMD + ESM) and the b
 
 TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.
 We are using SonarQube to identify code smells and security hotspots.
+Always mark React component props as `Readonly<>` (e.g., `({ children }: Readonly<MyProps>)`).
 
 ## Architecture & Patterns
 

README.md

@@ -127,34 +127,10 @@ Formbricks has a hosted cloud offering with a generous free plan to get you up a
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-If you opt for self-hosting Formbricks, here are a few options to consider:
-
 #### Docker
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community-managed One Click Hosting
-
-##### Railway
-
-You can deploy Formbricks on [Railway](https://railway.app) using the button below.
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
-
-##### RepoCloud
-
-Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
-
-[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
-
-##### Zeabur
-
-Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
-
-[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
-
-<a id="development"></a>
-
 ## 👨‍💻 Development
 
 ### Prerequisites
@@ -247,4 +223,4 @@ We currently do not offer Formbricks white-labeled. That means that we don't sel
 
 The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
 
-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<a id="readme-de"></a>

apps/storybook/package.json

@@ -11,19 +11,19 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "10.2.17",
-    "@storybook/addon-links": "10.2.17",
-    "@storybook/addon-onboarding": "10.2.17",
-    "@storybook/react-vite": "10.2.17",
-    "@typescript-eslint/eslint-plugin": "8.57.0",
-    "@tailwindcss/vite": "4.2.1",
-    "@typescript-eslint/parser": "8.57.0",
+    "@chromatic-com/storybook": "5.0.2",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-links": "10.3.6",
+    "@storybook/addon-onboarding": "10.3.6",
+    "@storybook/react-vite": "10.3.6",
+    "@tailwindcss/vite": "4.2.4",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
+    "@typescript-eslint/parser": "8.57.2",
     "@vitejs/plugin-react": "5.1.4",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.2.17",
-    "storybook": "10.2.17",
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.2.17"
+    "eslint-plugin-storybook": "10.3.6",
+    "storybook": "10.3.6",
+    "vite": "7.3.3"
   }
 }

apps/web/Dockerfile

@@ -66,6 +66,10 @@ RUN pnpm build --filter=@formbricks/database
 RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
     --mount=type=secret,id=redis_url \
+    --mount=type=secret,id=hub_api_url \
+    --mount=type=secret,id=hub_api_key \
+    --mount=type=secret,id=cubejs_api_url \
+    --mount=type=secret,id=cubejs_api_secret \
     --mount=type=secret,id=sentry_auth_token \
     --mount=type=secret,id=posthog_key \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...

apps/web/app/(app)/(onboarding)/lib/onboarding.test.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
@@ -32,7 +32,7 @@ describe("getTeamsByOrganizationId", () => {
 
   test("throws DatabaseError on Prisma error", async () => {
     vi.mocked(prisma.team.findMany).mockRejectedValueOnce(
-      new Prisma.PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
+      new PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
     );
     await expect(getTeamsByOrganizationId("org1")).rejects.toThrow(DatabaseError);
   });

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
 import { ZId } from "@formbricks/types/common";
@@ -27,7 +27,7 @@ export const getTeamsByOrganizationId = reactCache(
         name: team.name,
       }));
     } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error instanceof PrismaClientKnownRequestError) {
         throw new DatabaseError(error.message);
       }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -1,20 +1,32 @@
 "use client";
 
-import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon } from "lucide-react";
+import {
+  ArrowUpRightIcon,
+  Building2Icon,
+  ChevronRightIcon,
+  Loader2,
+  LogOutIcon,
+  PlusIcon,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
+import { getOrganizationsForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
@@ -22,14 +34,65 @@ import {
 interface LandingSidebarProps {
   user: TUser;
   organization: TOrganization;
+  isMultiOrgEnabled: boolean;
 }
 
-export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
-  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState<boolean>(false);
+export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: LandingSidebarProps) => {
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [isOrgDropdownOpen, setIsOrgDropdownOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
 
   const { t } = useTranslation();
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
+  const loadOrganizations = useCallback(async () => {
+    setIsLoadingOrganizations(true);
+    setOrganizationLoadError(null);
+    try {
+      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setOrganizations(sorted);
+      } else {
+        setOrganizationLoadError(
+          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
+        );
+      }
+    } catch {
+      setOrganizationLoadError(t("common.failed_to_load_organizations"));
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      isOrgDropdownOpen &&
+      organizations.length === 0 &&
+      !isLoadingOrganizations &&
+      !organizationLoadError
+    ) {
+      loadOrganizations();
+    }
+  }, [
+    isOrgDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
+  const handleOrganizationChange = (orgId: string) => {
+    startTransition(() => {
+      setIsOrgDropdownOpen(false);
+      router.push(`/organizations/${orgId}/`);
+    });
+  };
+
   const dropdownNavigation = [
     {
       label: t("common.documentation"),
@@ -39,52 +102,109 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
     },
   ];
 
+  const switcherTriggerClasses =
+    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset";
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+
   return (
     <aside
       className={cn(
         "z-40 flex w-sidebar-collapsed flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
       )}>
-      <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
+      <Image src={FBLogo} width={160} height={30} alt={t("workspace.formbricks_logo")} />
 
-      <div className="flex items-center">
+      <div className="flex flex-col">
+        {/* Organization Switcher */}
+        <DropdownMenu onOpenChange={setIsOrgDropdownOpen}>
+          <DropdownMenuTrigger asChild className={switcherTriggerClasses}>
+            <button type="button" className="flex w-full items-center gap-3">
+              <span className={switcherIconClasses}>
+                <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+              </span>
+              <div className="grow overflow-hidden">
+                <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
+                <p className="text-sm text-slate-500">{t("common.organization")}</p>
+              </div>
+              {isPending && <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />}
+              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+              <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+              {t("common.change_organization")}
+            </div>
+            {isLoadingOrganizations && (
+              <div className="flex items-center justify-center py-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+              </div>
+            )}
+            {!isLoadingOrganizations && organizationLoadError && (
+              <div className="px-2 py-4">
+                <p className="mb-2 text-sm text-red-600">{organizationLoadError}</p>
+                <button
+                  onClick={() => {
+                    setOrganizationLoadError(null);
+                    setOrganizations([]);
+                  }}
+                  className="text-xs text-slate-600 underline hover:text-slate-800">
+                  {t("common.try_again")}
+                </button>
+              </div>
+            )}
+            {!isLoadingOrganizations && !organizationLoadError && (
+              <>
+                <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                  {organizations.map((org) => (
+                    <DropdownMenuCheckboxItem
+                      key={org.id}
+                      checked={org.id === organization.id}
+                      onClick={() => handleOrganizationChange(org.id)}
+                      className="cursor-pointer">
+                      {org.name}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+                </DropdownMenuGroup>
+                {isMultiOrgEnabled && (
+                  <DropdownMenuCheckboxItem
+                    onClick={() => setOpenCreateOrganizationModal(true)}
+                    className="w-full cursor-pointer justify-between">
+                    <span>{t("common.create_new_organization")}</span>
+                    <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                  </DropdownMenuCheckboxItem>
+                )}
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* User Dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-            <button
-              type="button"
-              className={cn("flex w-full cursor-pointer flex-row items-center gap-3 text-left")}
-              aria-haspopup="menu">
-              <ProfileAvatar userId={user.id} />
+            className={cn(switcherTriggerClasses, "rounded-br-xl")}>
+            <button type="button" className="flex w-full items-center gap-3">
+              <span className={switcherIconClasses}>
+                <ProfileAvatar userId={user.id} />
+              </span>
               <div className="grow overflow-hidden">
                 <p
                   title={user?.email}
-                  className={cn(
-                    "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
-                  )}>
+                  className="ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
                   {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                 </p>
-                <p title={organization?.name} className="truncate text-sm text-slate-500">
-                  {organization?.name}
-                </p>
+                <p className="text-sm text-slate-500">{t("common.account")}</p>
               </div>
-              <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
+              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
             </button>
           </DropdownMenuTrigger>
 
-          <DropdownMenuContent
-            id="userDropdownInnerContentWrapper"
-            side="right"
-            sideOffset={10}
-            alignOffset={5}
-            align="end">
-            {/* Dropdown Items */}
-
+          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
             {dropdownNavigation.map((link) => (
               <Link
                 key={link.href}
-                id={link.href}
                 href={link.href}
                 target={link.target}
                 rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -95,8 +215,6 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
                 </DropdownMenuItem>
               </Link>
             ))}
-
-            {/* Logout */}
             <DropdownMenuItem
               onClick={async () => {
                 await signOutWithAudit({
@@ -105,7 +223,6 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
                   organizationId: organization.id,
                   redirect: true,
                   callbackUrl: "/auth/login",
-                  clearEnvironmentId: true,
                 });
               }}
               icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
@@ -114,6 +231,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+
       <CreateOrganizationModal open={openCreateOrganizationModal} setOpen={setOpenCreateOrganizationModal} />
     </aside>
   );

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/layout.tsx

@@ -1,6 +1,5 @@
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
-import { getEnvironments } from "@/lib/environment/service";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getUserWorkspaces } from "@/lib/workspace/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
@@ -28,12 +27,7 @@ const LandingLayout = async (props: {
 
   if (workspaces.length !== 0) {
     const firstWorkspace = workspaces[0];
-    const environments = await getEnvironments(firstWorkspace.id);
-    const prodEnvironment = environments.find((e) => e.type === "production");
-
-    if (prodEnvironment) {
-      return redirect(`/environments/${prodEnvironment.id}/`);
-    }
+    return redirect(`/workspaces/${firstWorkspace.id}/`);
   }
 
   return <>{children}</>;

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -1,9 +1,8 @@
 import { notFound, redirect } from "next/navigation";
 import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar";
-import { WorkspaceAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/workspace-and-org-switch";
+import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -26,11 +25,11 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember } = getAccessFlags(membership?.role);
+  const isMembershipPending = membership?.role === undefined;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
-      <LandingSidebar user={user} organization={organization} />
+      <LandingSidebar user={user} organization={organization} isMultiOrgEnabled={isMultiOrgEnabled} />
       <div className="flex-1">
         <div className="flex h-full flex-col">
           <div className="p-6">
@@ -44,8 +43,7 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
               isLicenseActive={false}
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
-              isMember={isMember}
-              environments={[]}
+              isMembershipPending={isMembershipPending}
             />
           </div>
           <div className="flex h-full flex-col items-center justify-center space-y-12">

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/channel/page.tsx

@@ -2,6 +2,7 @@ import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { capturePostHogEvent } from "@/lib/posthog";
 import { getUserWorkspaces } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
@@ -41,6 +42,16 @@ const Page = async (props: ChannelPageProps) => {
 
   const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
 
+  capturePostHogEvent(
+    session.user.id,
+    "organization_mode_selected",
+    {
+      organization_id: params.organizationId,
+      mode: "surveys",
+    },
+    { organizationId: params.organizationId }
+  );
+
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/plan/components/select-plan-onboarding.tsx

@@ -13,8 +13,8 @@ export const SelectPlanOnboarding = async ({ organizationId }: SelectPlanOnboard
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-8">
       <Header
-        title={t("environments.settings.billing.select_plan_header_title")}
-        subtitle={t("environments.settings.billing.select_plan_header_subtitle")}
+        title={t("workspace.settings.billing.select_plan_header_title")}
+        subtitle={t("workspace.settings.billing.select_plan_header_subtitle")}
       />
       <SelectPlanCard nextUrl={nextUrl} organizationId={organizationId} />
     </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/WorkspaceSettings.tsx

@@ -14,10 +14,11 @@ import {
   TWorkspaceUpdateInput,
   ZWorkspaceUpdateInput,
 } from "@formbricks/types/workspace";
-import { createWorkspaceAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { createWorkspaceAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { buildStylingFromBrandColor } from "@/lib/styling/constants";
+import { toJsWorkspaceStateSurvey } from "@/lib/survey/client-utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
 import { TOrganizationTeam } from "@/modules/ee/teams/workspace-teams/types/team";
@@ -82,22 +83,17 @@ export const WorkspaceSettings = ({
       });
 
       if (createWorkspaceResponse?.data) {
-        // get production environment
-        const productionEnvironment = createWorkspaceResponse.data.environments.find(
-          (environment: { type: string }) => environment.type === "production"
-        );
-        if (productionEnvironment) {
-          if (globalThis.window !== undefined) {
-            // Remove filters when creating a new workspace
-            localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
-          }
+        if (globalThis.window !== undefined) {
+          // Remove filters when creating a new workspace
+          localStorage.removeItem(FORMBRICKS_SURVEYS_FILTERS_KEY_LS);
         }
+        const workspaceId = createWorkspaceResponse.data.id;
         if (channel === "app" || channel === "website") {
-          router.push(`/environments/${productionEnvironment?.id}/connect`);
+          router.push(`/workspaces/${workspaceId}/connect`);
         } else if (channel === "link") {
-          router.push(`/environments/${productionEnvironment?.id}/surveys`);
+          router.push(`/workspaces/${workspaceId}/surveys`);
         } else if (workspaceMode === "cx") {
-          router.push(`/environments/${productionEnvironment?.id}/xm-templates`);
+          router.push(`/workspaces/${workspaceId}/xm-templates`);
         }
       } else {
         const errorMessage = getFormattedErrorMessage(createWorkspaceResponse);
@@ -242,7 +238,7 @@ export const WorkspaceSettings = ({
         <SurveyInline
           appUrl={publicDomain}
           isPreviewMode={true}
-          survey={previewSurvey(workspaceName || t("common.my_product"), t)}
+          survey={toJsWorkspaceStateSurvey(previewSurvey(workspaceName || t("common.my_product"), t))}
           styling={previewStyling}
           isBrandingEnabled={false}
           languageCode="default"

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/page.tsx

@@ -11,6 +11,7 @@ import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboardin
 import { WorkspaceSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/WorkspaceSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
+import { capturePostHogEvent } from "@/lib/posthog";
 import { getUserWorkspaces } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
@@ -55,6 +56,18 @@ const Page = async (props: WorkspaceSettingsPageProps) => {
 
   const publicDomain = getPublicDomain();
 
+  if (searchParams.mode === "cx") {
+    capturePostHogEvent(
+      session.user.id,
+      "organization_mode_selected",
+      {
+        organization_id: params.organizationId,
+        mode: "cx",
+      },
+      { organizationId: params.organizationId }
+    );
+  }
+
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/connect/components/ConnectWithFormbricks.tsx

@@ -4,21 +4,20 @@ import { ArrowRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { TEnvironment } from "@formbricks/types/environment";
 import { TWorkspaceConfigChannel } from "@formbricks/types/workspace";
 import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 import { OnboardingSetupInstructions } from "./OnboardingSetupInstructions";
 
 interface ConnectWithFormbricksProps {
-  environment: TEnvironment;
+  workspaceId: string;
   publicDomain: string;
   appSetupCompleted: boolean;
   channel: TWorkspaceConfigChannel;
 }
 
 export const ConnectWithFormbricks = ({
-  environment,
+  workspaceId,
   publicDomain,
   appSetupCompleted,
   channel,
@@ -26,7 +25,7 @@ export const ConnectWithFormbricks = ({
   const { t } = useTranslation();
   const router = useRouter();
   const handleFinishOnboarding = async () => {
-    router.push(`/environments/${environment.id}/surveys`);
+    router.push(`/workspaces/${workspaceId}/surveys`);
   };
 
   useEffect(() => {
@@ -48,7 +47,7 @@ export const ConnectWithFormbricks = ({
       <div className="flex w-full space-x-10">
         <div className="flex w-1/2 flex-col space-y-4">
           <OnboardingSetupInstructions
-            environmentId={environment.id}
+            workspaceId={workspaceId}
             publicDomain={publicDomain}
             channel={channel}
             appSetupCompleted={appSetupCompleted}
@@ -61,9 +60,9 @@ export const ConnectWithFormbricks = ({
           )}>
           {appSetupCompleted ? (
             <div>
-              <p className="text-3xl">{t("environments.connect.congrats")}</p>
+              <p className="text-3xl">{t("workspace.connect.congrats")}</p>
               <p className="pt-4 text-sm font-medium text-slate-600">
-                {t("environments.connect.connection_successful_message")}
+                {t("workspace.connect.connection_successful_message")}
               </p>
             </div>
           ) : (
@@ -73,7 +72,7 @@ export const ConnectWithFormbricks = ({
                 <span className="relative inline-flex h-10 w-10 rounded-full bg-slate-500"></span>
               </span>
               <p className="pt-4 text-sm font-medium text-slate-600">
-                {t("environments.connect.waiting_for_your_signal")}
+                {t("workspace.connect.waiting_for_your_signal")}
               </p>
             </div>
           )}
@@ -83,9 +82,7 @@ export const ConnectWithFormbricks = ({
         id="finishOnboarding"
         variant={appSetupCompleted ? "default" : "ghost"}
         onClick={handleFinishOnboarding}>
-        {appSetupCompleted
-          ? t("environments.connect.finish_onboarding")
-          : t("environments.connect.do_it_later")}
+        {appSetupCompleted ? t("workspace.connect.finish_onboarding") : t("workspace.connect.do_it_later")}
         <ArrowRight />
       </Button>
     </div>

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/connect/components/OnboardingSetupInstructions.tsx

@@ -17,14 +17,14 @@ const tabs = [
 ];
 
 interface OnboardingSetupInstructionsProps {
-  environmentId: string;
+  workspaceId: string;
   publicDomain: string;
   channel: TWorkspaceConfigChannel;
   appSetupCompleted: boolean;
 }
 
 export const OnboardingSetupInstructions = ({
-  environmentId,
+  workspaceId,
   publicDomain,
   channel,
   appSetupCompleted,
@@ -35,8 +35,8 @@ export const OnboardingSetupInstructions = ({
   <script type="text/javascript">
   !function(){
       var appUrl = "${publicDomain}";
-      var environmentId = "${environmentId}";
-      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
+      var workspaceId = "${workspaceId}";
+      var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({workspaceId:workspaceId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
@@ -45,46 +45,46 @@ export const OnboardingSetupInstructions = ({
   <script type="text/javascript">
   !function(){
     var appUrl = "${publicDomain}";
-    var environmentId = "${environmentId}";
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({environmentId:environmentId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
+    var workspaceId = "${workspaceId}";
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=appUrl+"/js/formbricks.umd.cjs",t.onload=function(){window.formbricks?window.formbricks.setup({workspaceId:workspaceId,appUrl:appUrl}):console.error("Formbricks library failed to load properly. The formbricks object is not available.");};var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}();
   </script>
   <!-- END Formbricks Surveys -->
   `;
 
   const npmSnippetForAppSurveys = `
   import formbricks from "@formbricks/js";
-  
+
   if (typeof window !== "undefined") {
     formbricks.setup({
-      environmentId: "${environmentId}",
+      workspaceId: "${workspaceId}",
       appUrl: "${publicDomain}",
     });
   }
-  
+
   function App() {
     // your own app
   }
-  
+
   export default App;
   `;
 
   const npmSnippetForWebsiteSurveys = `
   // other imports
   import formbricks from "@formbricks/js";
-  
+
   if (typeof window !== "undefined") {
     formbricks.setup({
-      environmentId: "${environmentId}",
+      workspaceId: "${workspaceId}",
       appUrl: "${publicDomain}",
     });
   }
-  
+
   function App() {
     // your own app
   }
-  
+
   export default App;
-  
+
   `;
 
   return (
@@ -109,7 +109,7 @@ export const OnboardingSetupInstructions = ({
               yarn add @formbricks/js
             </CodeBlock>
             <p className="text-sm text-slate-700">
-              {t("environments.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
+              {t("workspace.connect.import_formbricks_and_initialize_the_widget_in_your_component")}
             </p>
             <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">
               {channel === "app" ? npmSnippetForAppSurveys : npmSnippetForWebsiteSurveys}
@@ -126,7 +126,7 @@ export const OnboardingSetupInstructions = ({
         ) : activeTab === "html" ? (
           <div className="prose prose-slate">
             <p className="-mb-1 mt-6 text-sm text-slate-700">
-              {t("environments.connect.insert_this_code_into_the_head_tag_of_your_website")}
+              {t("workspace.connect.insert_this_code_into_the_head_tag_of_your_website")}
             </p>
             <div>
               <CodeBlock customEditorClass="!bg-white border border-slate-200" language="js">

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/connect/page.tsx

@@ -1,32 +1,26 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
-import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
-import { getEnvironment } from "@/lib/environment/service";
+import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/connect/components/ConnectWithFormbricks";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { getWorkspaceByEnvironmentId } from "@/lib/workspace/service";
+import { getWorkspace } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { Button } from "@/modules/ui/components/button";
 import { Header } from "@/modules/ui/components/header";
 
 interface ConnectPageProps {
   params: Promise<{
-    environmentId: string;
+    workspaceId: string;
   }>;
 }
 
 const Page = async (props: ConnectPageProps) => {
   const params = await props.params;
   const t = await getTranslate();
-  const environment = await getEnvironment(params.environmentId);
 
-  if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
-  }
-
-  const workspace = await getWorkspaceByEnvironmentId(environment.id);
+  const workspace = await getWorkspace(params.workspaceId);
   if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
   }
 
   const channel = workspace.config.channel || null;
@@ -35,22 +29,22 @@ const Page = async (props: ConnectPageProps) => {
 
   return (
     <div className="flex min-h-full flex-col items-center justify-center py-10">
-      <Header title={t("environments.connect.headline")} subtitle={t("environments.connect.subtitle")} />
+      <Header title={t("workspace.connect.headline")} subtitle={t("workspace.connect.subtitle")} />
       <div className="space-y-4 text-center">
         <p className="text-4xl font-medium text-slate-800"></p>
         <p className="text-sm text-slate-500"></p>
       </div>
       <ConnectWithFormbricks
-        environment={environment}
+        workspaceId={params.workspaceId}
         publicDomain={publicDomain}
-        appSetupCompleted={environment.appSetupCompleted}
+        appSetupCompleted={workspace.appSetupCompleted}
         channel={channel}
       />
       <Button
         className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
-        <Link href={`/environments/${environment.id}`}>
+        <Link href={`/workspaces/${params.workspaceId}`}>
           <XIcon className="h-7 w-7" strokeWidth={1.5} />
         </Link>
       </Button>

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/layout.tsx

@@ -1,11 +1,11 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
-import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
+import { hasUserWorkspaceAccess } from "@/lib/workspace/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
 const OnboardingLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
+  params: Promise<{ workspaceId: string }>;
   children: React.ReactNode;
 }) => {
   const params = await props.params;
@@ -17,9 +17,9 @@ const OnboardingLayout = async (props: {
     return redirect(`/auth/login`);
   }
 
-  const isAuthorized = await hasUserEnvironmentAccess(session.user.id, params.environmentId);
+  const isAuthorized = await hasUserWorkspaceAccess(session.user.id, params.workspaceId);
   if (!isAuthorized) {
-    throw new AuthorizationError("User is not authorized to access this environment");
+    throw new AuthorizationError("User is not authorized to access this workspace");
   }
 
   return <div className="flex-1 bg-slate-50">{children}</div>;

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/components/XMTemplateList.tsx

@@ -9,19 +9,19 @@ import { TSurveyCreateInput } from "@formbricks/types/surveys/types";
 import { TXMTemplate } from "@formbricks/types/templates";
 import { TUser } from "@formbricks/types/user";
 import { TWorkspace } from "@formbricks/types/workspace";
-import { replacePresetPlaceholders } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/utils";
-import { getXMTemplates } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { replacePresetPlaceholders } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/utils";
+import { getXMTemplates } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/xm-templates";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { createSurveyAction } from "@/modules/survey/components/template-list/actions";
 
 interface XMTemplateListProps {
   workspace: TWorkspace;
   user: TUser;
-  environmentId: string;
+  workspaceId: string;
 }
 
-export const XMTemplateList = ({ workspace, user, environmentId }: XMTemplateListProps) => {
+export const XMTemplateList = ({ workspace, user, workspaceId }: XMTemplateListProps) => {
   const [activeTemplateId, setActiveTemplateId] = useState<number | null>(null);
   const { t } = useTranslation();
   const router = useRouter();
@@ -33,12 +33,12 @@ export const XMTemplateList = ({ workspace, user, environmentId }: XMTemplateLis
       createdBy: user.id,
     };
     const createSurveyResponse = await createSurveyAction({
-      environmentId: environmentId,
+      workspaceId: workspaceId,
       surveyBody: augmentedTemplate,
     });
 
     if (createSurveyResponse?.data) {
-      router.push(`/environments/${environmentId}/surveys/${createSurveyResponse.data.id}/edit?mode=cx`);
+      router.push(`/workspaces/${workspaceId}/surveys/${createSurveyResponse.data.id}/edit?mode=cx`);
     } else {
       const errorMessage = getFormattedErrorMessage(createSurveyResponse);
       toast.error(errorMessage);
@@ -54,43 +54,43 @@ export const XMTemplateList = ({ workspace, user, environmentId }: XMTemplateLis
 
   const XMTemplateOptions = [
     {
-      title: t("environments.xm-templates.nps"),
-      description: t("environments.xm-templates.nps_description"),
+      title: t("workspace.xm-templates.nps"),
+      description: t("workspace.xm-templates.nps_description"),
       icon: ShoppingCartIcon,
       onClick: () => handleTemplateClick(0),
       isLoading: activeTemplateId === 0,
     },
     {
-      title: t("environments.xm-templates.five_star_rating"),
-      description: t("environments.xm-templates.five_star_rating_description"),
+      title: t("workspace.xm-templates.five_star_rating"),
+      description: t("workspace.xm-templates.five_star_rating_description"),
       icon: StarIcon,
       onClick: () => handleTemplateClick(1),
       isLoading: activeTemplateId === 1,
     },
     {
-      title: t("environments.xm-templates.csat"),
-      description: t("environments.xm-templates.csat_description"),
+      title: t("workspace.xm-templates.csat"),
+      description: t("workspace.xm-templates.csat_description"),
       icon: ThumbsUpIcon,
       onClick: () => handleTemplateClick(2),
       isLoading: activeTemplateId === 2,
     },
     {
-      title: t("environments.xm-templates.ces"),
-      description: t("environments.xm-templates.ces_description"),
+      title: t("workspace.xm-templates.ces"),
+      description: t("workspace.xm-templates.ces_description"),
       icon: ActivityIcon,
       onClick: () => handleTemplateClick(3),
       isLoading: activeTemplateId === 3,
     },
     {
-      title: t("environments.xm-templates.smileys"),
-      description: t("environments.xm-templates.smileys_description"),
+      title: t("workspace.xm-templates.smileys"),
+      description: t("workspace.xm-templates.smileys_description"),
       icon: SmileIcon,
       onClick: () => handleTemplateClick(4),
       isLoading: activeTemplateId === 4,
     },
     {
-      title: t("environments.xm-templates.enps"),
-      description: t("environments.xm-templates.enps_description"),
+      title: t("workspace.xm-templates.enps"),
+      description: t("workspace.xm-templates.enps_description"),
       icon: UsersIcon,
       onClick: () => handleTemplateClick(5),
       isLoading: activeTemplateId === 5,

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/utils.test.ts

@@ -27,7 +27,7 @@ const mockWorkspace: TWorkspace = {
   placement: "bottomRight",
   clickOutsideClose: true,
   overlay: "none",
-  environments: [],
+  appSetupCompleted: false,
   languages: [],
   logo: null,
 };
@@ -60,8 +60,8 @@ const mockTemplate: TXMTemplate = {
   ],
   styling: {
     brandColor: { light: "#0000FF" },
-    questionColor: { light: "#00FF00" },
-    inputColor: { light: "#FF0000" },
+    elementHeadlineColor: { light: "#00FF00" },
+    inputBgColor: { light: "#FF0000" },
   },
 };
 

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/page.tsx

@@ -2,11 +2,9 @@ import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
 import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
-import { getEnvironment } from "@/lib/environment/service";
+import { XMTemplateList } from "@/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/components/XMTemplateList";
 import { getUser } from "@/lib/user/service";
-import { getOrganizationIdFromEnvironmentId } from "@/lib/utils/helper";
-import { getUserWorkspaces, getWorkspaceByEnvironmentId } from "@/lib/workspace/service";
+import { getUserWorkspaces, getWorkspace } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { Button } from "@/modules/ui/components/button";
@@ -14,15 +12,15 @@ import { Header } from "@/modules/ui/components/header";
 
 interface XMTemplatePageProps {
   params: Promise<{
-    environmentId: string;
+    workspaceId: string;
   }>;
 }
 
 const Page = async (props: XMTemplatePageProps) => {
   const params = await props.params;
   const session = await getServerSession(authOptions);
-  const environment = await getEnvironment(params.environmentId);
   const t = await getTranslate();
+
   if (!session) {
     throw new AuthenticationError(t("common.not_authenticated"));
   }
@@ -31,29 +29,24 @@ const Page = async (props: XMTemplatePageProps) => {
   if (!user) {
     throw new AuthenticationError(t("common.not_authenticated"));
   }
-  if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
-  }
 
-  const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
-
-  const workspace = await getWorkspaceByEnvironmentId(environment.id);
+  const workspace = await getWorkspace(params.workspaceId);
   if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
   }
 
-  const workspaces = await getUserWorkspaces(session.user.id, organizationId);
+  const workspaces = await getUserWorkspaces(session.user.id, workspace.organizationId);
 
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
-      <Header title={t("environments.xm-templates.headline")} />
-      <XMTemplateList workspace={workspace} user={user} environmentId={environment.id} />
+      <Header title={t("workspace.xm-templates.headline")} />
+      <XMTemplateList workspace={workspace} user={user} workspaceId={params.workspaceId} />
       {workspaces.length >= 2 && (
         <Button
           className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
-          <Link href={`/environments/${environment.id}/surveys`}>
+          <Link href={`/workspaces/${params.workspaceId}/surveys`}>
             <XIcon className="h-7 w-7" strokeWidth={1.5} />
           </Link>
         </Button>

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -1,37 +0,0 @@
-import { redirect } from "next/navigation";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getEnvironment } from "@/lib/environment/service";
-import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
-
-const SurveyEditorEnvironmentLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const { t, session, user } = await environmentIdLayoutChecks(params.environmentId);
-
-  if (!session) {
-    return redirect(`/auth/login`);
-  }
-
-  if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  const environment = await getEnvironment(params.environmentId);
-
-  if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
-  }
-
-  return (
-    <div className="flex h-screen flex-col">
-      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
-    </div>
-  );
-};
-
-export default SurveyEditorEnvironmentLayout;

apps/web/app/(app)/(survey-editor)/workspaces/[workspaceId]/layout.tsx

@@ -0,0 +1,37 @@
+import { redirect } from "next/navigation";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { getWorkspace } from "@/lib/workspace/service";
+import { workspaceIdLayoutChecks } from "@/modules/workspaces/lib/utils";
+
+const SurveyEditorWorkspaceLayout = async (props: {
+  params: Promise<{ workspaceId: string }>;
+  children: React.ReactNode;
+}) => {
+  const params = await props.params;
+
+  const { children } = props;
+
+  const { t, session, user } = await workspaceIdLayoutChecks(params.workspaceId);
+
+  if (!session) {
+    return redirect(`/auth/login`);
+  }
+
+  if (!user) {
+    throw new AuthenticationError(t("common.not_authenticated"));
+  }
+
+  const workspace = await getWorkspace(params.workspaceId);
+
+  if (!workspace) {
+    throw new ResourceNotFoundError(t("common.workspace"), params.workspaceId);
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+    </div>
+  );
+};
+
+export default SurveyEditorWorkspaceLayout;

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -6,12 +6,12 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 import { Confetti } from "@/modules/ui/components/confetti";
 
-const BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY = "billingConfirmationEnvironmentId";
+const BILLING_CONFIRMATION_WORKSPACE_ID_KEY = "billingConfirmationWorkspaceId";
 
 export const ConfirmationPage = () => {
   const { t } = useTranslation();
   const [showConfetti, setShowConfetti] = useState(false);
-  const [resolvedEnvironmentId, setResolvedEnvironmentId] = useState<string | null>(null);
+  const [resolvedWorkspaceId, setResolvedWorkspaceId] = useState<string | null>(null);
 
   useEffect(() => {
     setShowConfetti(true);
@@ -20,11 +20,9 @@ export const ConfirmationPage = () => {
       return;
     }
 
-    const storedEnvironmentId = globalThis.window.sessionStorage.getItem(
-      BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY
-    );
-    if (storedEnvironmentId) {
-      setResolvedEnvironmentId(storedEnvironmentId);
+    const storedWorkspaceId = globalThis.window.sessionStorage.getItem(BILLING_CONFIRMATION_WORKSPACE_ID_KEY);
+    if (storedWorkspaceId) {
+      setResolvedWorkspaceId(storedWorkspaceId);
     }
   }, []);
 
@@ -43,9 +41,7 @@ export const ConfirmationPage = () => {
         <Button asChild className="w-full justify-center">
           <Link
             href={
-              resolvedEnvironmentId
-                ? `/environments/${resolvedEnvironmentId}/settings/billing`
-                : "/environments"
+              resolvedWorkspaceId ? `/workspaces/${resolvedWorkspaceId}/settings/organization/billing` : "/"
             }>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>

apps/web/app/(app)/components/LoadingCard.tsx

@@ -1,4 +1,4 @@
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
+import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
 import { cn } from "@/lib/cn";
 
 export const LoadingCard = ({

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentStorageHandler.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
-
-interface EnvironmentStorageHandlerProps {
-  environmentId: string;
-}
-
-const EnvironmentStorageHandler = ({ environmentId }: EnvironmentStorageHandlerProps) => {
-  useEffect(() => {
-    localStorage.setItem(FORMBRICKS_ENVIRONMENT_ID_LS, environmentId);
-  }, [environmentId]);
-
-  return null;
-};
-
-export default EnvironmentStorageHandler;

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentSwitch.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TEnvironment } from "@formbricks/types/environment";
-import { cn } from "@/lib/cn";
-import { Label } from "@/modules/ui/components/label";
-import { Switch } from "@/modules/ui/components/switch";
-
-interface EnvironmentSwitchProps {
-  environment: TEnvironment;
-  environments: TEnvironment[];
-}
-
-export const EnvironmentSwitch = ({ environment, environments }: EnvironmentSwitchProps) => {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const [isEnvSwitchChecked, setIsEnvSwitchChecked] = useState(environment?.type === "development");
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleEnvironmentChange = (environmentType: "production" | "development") => {
-    const newEnvironmentId = environments.find((e) => e.type === environmentType)?.id;
-    if (newEnvironmentId) {
-      router.push(`/environments/${newEnvironmentId}/`);
-    }
-  };
-
-  const toggleEnvSwitch = () => {
-    const newEnvironmentType = isEnvSwitchChecked ? "production" : "development";
-    setIsLoading(true);
-    setIsEnvSwitchChecked(!isEnvSwitchChecked);
-    handleEnvironmentChange(newEnvironmentType);
-  };
-
-  return (
-    <div
-      className={cn(
-        "flex items-center space-x-2 rounded-lg p-2",
-        isEnvSwitchChecked ? "bg-slate-100 text-orange-800" : "hover:bg-slate-100"
-      )}>
-      <Label
-        htmlFor="development-mode"
-        className={cn("hover:cursor-pointer", isEnvSwitchChecked && "text-orange-800")}>
-        {t("common.dev_env")}
-      </Label>
-      <Switch
-        className="focus:ring-orange-800 data-[state=checked]:bg-orange-800"
-        id="development-mode"
-        disabled={isLoading}
-        checked={isEnvSwitchChecked}
-        onCheckedChange={toggleEnvSwitch}
-      />
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -1,346 +0,0 @@
-"use client";
-
-import {
-  ArrowUpRightIcon,
-  ChevronRightIcon,
-  Cog,
-  LogOutIcon,
-  MessageCircle,
-  PanelLeftCloseIcon,
-  PanelLeftOpenIcon,
-  RocketIcon,
-  UserCircleIcon,
-  UserIcon,
-  WorkflowIcon,
-} from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TEnvironment } from "@formbricks/types/environment";
-import { TOrganizationRole } from "@formbricks/types/memberships";
-import { TOrganization } from "@formbricks/types/organizations";
-import { TUser } from "@formbricks/types/user";
-import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
-import { isNewerVersion } from "@/app/(app)/environments/[environmentId]/lib/utils";
-import FBLogo from "@/images/formbricks-wordmark.svg";
-import { cn } from "@/lib/cn";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
-import { TrialAlert } from "@/modules/ee/billing/components/trial-alert";
-import { ProfileAvatar } from "@/modules/ui/components/avatars";
-import { Button } from "@/modules/ui/components/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { getLatestStableFbReleaseAction } from "@/modules/workspaces/settings/(setup)/app-connection/actions";
-import packageJson from "../../../../../package.json";
-
-interface NavigationProps {
-  environment: TEnvironment;
-  user: TUser;
-  organization: TOrganization;
-  workspace: { id: string; name: string };
-  isFormbricksCloud: boolean;
-  isDevelopment: boolean;
-  membershipRole?: TOrganizationRole;
-  publicDomain: string;
-}
-
-export const MainNavigation = ({
-  environment,
-  organization,
-  user,
-  workspace,
-  membershipRole,
-  isFormbricksCloud,
-  isDevelopment,
-  publicDomain,
-}: NavigationProps) => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const { t } = useTranslation();
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isTextVisible, setIsTextVisible] = useState(true);
-  const [latestVersion, setLatestVersion] = useState("");
-  const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
-
-  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
-
-  const isOwnerOrManager = isManager || isOwner;
-
-  const toggleSidebar = () => {
-    setIsCollapsed(!isCollapsed);
-    localStorage.setItem("isMainNavCollapsed", isCollapsed ? "false" : "true");
-  };
-
-  useEffect(() => {
-    const isCollapsedValueFromLocalStorage = localStorage.getItem("isMainNavCollapsed") === "true";
-    setIsCollapsed(isCollapsedValueFromLocalStorage);
-  }, []);
-
-  useEffect(() => {
-    const toggleTextOpacity = () => {
-      setIsTextVisible(isCollapsed);
-    };
-    const timeoutId = setTimeout(toggleTextOpacity, 150);
-    return () => clearTimeout(timeoutId);
-  }, [isCollapsed]);
-
-  useEffect(() => {
-    // Auto collapse workspace navbar on org and account settings
-    if (pathname?.includes("/settings")) {
-      setIsCollapsed(true);
-    }
-  }, [pathname]);
-
-  const mainNavigation = useMemo(
-    () => [
-      {
-        name: t("common.surveys"),
-        href: `/environments/${environment.id}/surveys`,
-        icon: MessageCircle,
-        isActive: pathname?.includes("/surveys"),
-        isHidden: false,
-      },
-      {
-        href: `/environments/${environment.id}/contacts`,
-        name: t("common.contacts"),
-        icon: UserIcon,
-        isActive:
-          pathname?.includes("/contacts") ||
-          pathname?.includes("/segments") ||
-          pathname?.includes("/attributes"),
-      },
-      {
-        name: t("common.workflows"),
-        href: `/environments/${environment.id}/workflows`,
-        icon: WorkflowIcon,
-        isActive: pathname?.includes("/workflows"),
-        isHidden: !isFormbricksCloud,
-      },
-      {
-        name: t("common.configuration"),
-        href: `/environments/${environment.id}/workspace/general`,
-        icon: Cog,
-        isActive: pathname?.includes("/workspace"),
-      },
-    ],
-    [t, environment.id, pathname, isFormbricksCloud]
-  );
-
-  const dropdownNavigation = [
-    {
-      label: t("common.account"),
-      href: `/environments/${environment.id}/settings/profile`,
-      icon: UserCircleIcon,
-    },
-    {
-      label: t("common.documentation"),
-      href: "https://formbricks.com/docs",
-      target: "_blank",
-      icon: ArrowUpRightIcon,
-    },
-    {
-      label: t("common.share_feedback"),
-      href: "https://github.com/formbricks/formbricks/issues",
-      target: "_blank",
-      icon: ArrowUpRightIcon,
-    },
-  ];
-
-  useEffect(() => {
-    async function loadReleases() {
-      const res = await getLatestStableFbReleaseAction();
-      if (res?.data) {
-        const latestVersionTag = res.data;
-        const currentVersionTag = `v${packageJson.version}`;
-
-        if (isNewerVersion(currentVersionTag, latestVersionTag)) {
-          setLatestVersion(latestVersionTag);
-        }
-      }
-    }
-    if (isOwnerOrManager) loadReleases();
-  }, [isOwnerOrManager]);
-
-  const trialDaysRemaining = useMemo(() => {
-    if (!isFormbricksCloud || organization.billing?.stripe?.subscriptionStatus !== "trialing") return null;
-    const trialEnd = organization.billing.stripe.trialEnd;
-    if (!trialEnd) return null;
-    const ts = new Date(trialEnd).getTime();
-    if (!Number.isFinite(ts)) return null;
-    const msPerDay = 86_400_000;
-    return Math.ceil((ts - Date.now()) / msPerDay);
-  }, [
-    isFormbricksCloud,
-    organization.billing?.stripe?.subscriptionStatus,
-    organization.billing?.stripe?.trialEnd,
-  ]);
-
-  const mainNavigationLink = `/environments/${environment.id}/${isBilling ? "settings/billing/" : "surveys/"}`;
-
-  return (
-    <>
-      {workspace && (
-        <aside
-          className={cn(
-            "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
-            isCollapsed ? "w-sidebar-expanded" : "w-sidebar-collapsed"
-          )}>
-          <div>
-            {/* Logo and Toggle */}
-
-            <div className="flex items-center justify-between px-3 pb-4">
-              {!isCollapsed && (
-                <Link
-                  href={mainNavigationLink}
-                  className={cn(
-                    "flex items-center justify-center transition-opacity duration-100",
-                    isTextVisible ? "opacity-0" : "opacity-100"
-                  )}>
-                  <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
-                </Link>
-              )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={toggleSidebar}
-                className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
-                )}>
-                {isCollapsed ? (
-                  <PanelLeftOpenIcon strokeWidth={1.5} />
-                ) : (
-                  <PanelLeftCloseIcon strokeWidth={1.5} />
-                )}
-              </Button>
-            </div>
-
-            {/* Main Nav Switch */}
-            {!isBilling && (
-              <ul>
-                {mainNavigation.map(
-                  (item) =>
-                    !item.isHidden && (
-                      <NavigationLink
-                        key={item.name}
-                        href={item.href}
-                        isActive={item.isActive}
-                        isCollapsed={isCollapsed}
-                        isTextVisible={isTextVisible}
-                        linkText={item.name}>
-                        <item.icon strokeWidth={1.5} />
-                      </NavigationLink>
-                    )
-                )}
-              </ul>
-            )}
-          </div>
-
-          <div>
-            {/* New Version Available */}
-            {!isCollapsed && isOwnerOrManager && latestVersion && !isFormbricksCloud && !isDevelopment && (
-              <Link
-                href="https://github.com/formbricks/formbricks/releases"
-                target="_blank"
-                className="m-2 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-2 text-sm text-slate-800 hover:border-slate-300 hover:bg-slate-200">
-                <p className="flex items-center justify-center gap-x-2 text-xs">
-                  <RocketIcon strokeWidth={1.5} className="mx-1 h-6 w-6 text-slate-900" />
-                  {t("common.new_version_available", { version: latestVersion })}
-                </p>
-              </Link>
-            )}
-
-            {/* Trial Days Remaining */}
-            {!isCollapsed && isFormbricksCloud && trialDaysRemaining !== null && (
-              <Link href={`/environments/${environment.id}/settings/billing`} className="m-2 block">
-                <TrialAlert trialDaysRemaining={trialDaysRemaining} size="small" />
-              </Link>
-            )}
-
-            {/* User Switch */}
-            <div className="flex items-center">
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  asChild
-                  id="userDropdownTrigger"
-                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-                  <div
-                    className={cn(
-                      "flex cursor-pointer flex-row items-center gap-3",
-                      isCollapsed ? "justify-center px-2" : "px-4"
-                    )}>
-                    <ProfileAvatar userId={user.id} />
-                    {!isCollapsed && !isTextVisible && (
-                      <>
-                        <div
-                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
-                          <p
-                            title={user?.email}
-                            className={cn(
-                              "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
-                            )}>
-                            {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
-                          </p>
-                          <p className="text-sm text-slate-700">{t("common.account")}</p>
-                        </div>
-                        <ChevronRightIcon
-                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
-                        />
-                      </>
-                    )}
-                  </div>
-                </DropdownMenuTrigger>
-
-                <DropdownMenuContent
-                  id="userDropdownInnerContentWrapper"
-                  side="right"
-                  sideOffset={10}
-                  alignOffset={5}
-                  align="end">
-                  {/* Dropdown Items */}
-
-                  {dropdownNavigation.map((link) => (
-                    <Link
-                      href={link.href}
-                      target={link.target}
-                      className="flex w-full items-center"
-                      key={link.label}
-                      rel={link.target === "_blank" ? "noopener noreferrer" : undefined}>
-                      <DropdownMenuItem>
-                        <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
-                        {link.label}
-                      </DropdownMenuItem>
-                    </Link>
-                  ))}
-                  {/* Logout */}
-                  <DropdownMenuItem
-                    onClick={async () => {
-                      const loginUrl = `${publicDomain}/auth/login`;
-                      const route = await signOutWithAudit({
-                        reason: "user_initiated",
-                        redirectUrl: loginUrl,
-                        organizationId: organization.id,
-                        redirect: false,
-                        callbackUrl: loginUrl,
-                        clearEnvironmentId: true,
-                      });
-                      router.push(route?.url || loginUrl); // NOSONAR // We want to check for empty strings
-                    }}
-                    icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
-                    {t("common.logout")}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
-        </aside>
-      )}
-    </>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/NavigationLink.tsx

@@ -1,66 +0,0 @@
-import Link from "next/link";
-import React from "react";
-import { cn } from "@/lib/cn";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
-
-interface NavigationLinkProps {
-  href: string;
-  isActive: boolean;
-  isCollapsed: boolean;
-  children: React.ReactNode;
-  linkText: string;
-  isTextVisible: boolean;
-}
-
-export const NavigationLink = ({
-  href,
-  isActive,
-  isCollapsed = false,
-  children,
-  linkText,
-  isTextVisible = true,
-}: NavigationLinkProps) => {
-  const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
-  const inactiveClass =
-    "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
-
-  return (
-    <>
-      {isCollapsed ? (
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <li
-                className={cn(
-                  "mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm text-slate-700 hover:text-slate-900",
-                  isActive ? activeClass : inactiveClass
-                )}>
-                <Link href={href} className="flex items-center">
-                  {children}
-                </Link>
-              </li>
-            </TooltipTrigger>
-            <TooltipContent side="right">{linkText}</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ) : (
-        <li
-          className={cn(
-            "mb-1 rounded-l-md py-2 pl-5 text-sm text-slate-600 hover:text-slate-900",
-            isActive ? activeClass : inactiveClass
-          )}>
-          <Link href={href} className="flex items-center">
-            {children}
-            <span
-              className={cn(
-                "ml-2 flex transition-opacity duration-100",
-                isTextVisible ? "opacity-0" : "opacity-100"
-              )}>
-              {linkText}
-            </span>
-          </Link>
-        </li>
-      )}
-    </>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/components/environment-breadcrumb.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-import { ChevronDownIcon, CircleHelpIcon, Code2Icon, Loader2 } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuTrigger,
-} from "@/modules/ui/components/dropdown-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
-
-export const EnvironmentBreadcrumb = ({
-  environments,
-  currentEnvironment,
-}: {
-  environments: { id: string; type: string }[];
-  currentEnvironment: { id: string; type: string };
-}) => {
-  const { t } = useTranslation();
-  const [isEnvironmentDropdownOpen, setIsEnvironmentDropdownOpen] = useState(false);
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleEnvironmentChange = (environmentId: string) => {
-    if (environmentId === currentEnvironment.id) return;
-    setIsLoading(true);
-    router.push(`/environments/${environmentId}/`);
-  };
-
-  const developmentTooltip = () => {
-    return (
-      <TooltipProvider>
-        <Tooltip delayDuration={0}>
-          <TooltipTrigger asChild>
-            <CircleHelpIcon className="h-3 w-3" />
-          </TooltipTrigger>
-          <TooltipContent className="mt-2 border-none bg-red-800 text-white">
-            {t("common.development_environment_banner")}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  };
-
-  return (
-    <BreadcrumbItem
-      isActive={isEnvironmentDropdownOpen}
-      isHighlighted={currentEnvironment.type === "development"}>
-      <DropdownMenu onOpenChange={setIsEnvironmentDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="environmentDropdownTrigger"
-          asChild>
-          <div className="flex items-center gap-1">
-            <Code2Icon className="h-3 w-3" strokeWidth={1.5} />
-            <span className="capitalize">{currentEnvironment.type}</span>
-            {isLoading && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
-            {currentEnvironment.type === "development" && developmentTooltip()}
-            {isEnvironmentDropdownOpen && <ChevronDownIcon className="h-3 w-3" strokeWidth={1.5} />}
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="mt-2" align="start">
-          <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <Code2Icon className="mr-2 inline h-4 w-4" />
-            {t("common.choose_environment")}
-          </div>
-          <DropdownMenuGroup>
-            {environments.map((env) => (
-              <DropdownMenuCheckboxItem
-                key={env.id}
-                checked={env.type === currentEnvironment.type}
-                onClick={() => handleEnvironmentChange(env.id)}
-                className="cursor-pointer">
-                <div className="flex items-center gap-2 capitalize">
-                  <span>{env.type}</span>
-                </div>
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </BreadcrumbItem>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/layout.tsx

@@ -1,38 +0,0 @@
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
-import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
-import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
-
-const EnvLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-  const { children } = props;
-
-  // Check session first (required for userId)
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return redirect(`/auth/login`);
-  }
-
-  // Single consolidated data fetch (replaces ~12 individual fetches)
-  const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
-
-  return (
-    <>
-      <EnvironmentStorageHandler environmentId={params.environmentId} />
-      <EnvironmentContextWrapper
-        environment={layoutData.environment}
-        workspace={layoutData.workspace}
-        organization={layoutData.organization}>
-        <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
-      </EnvironmentContextWrapper>
-    </>
-  );
-};
-
-export default EnvLayout;

apps/web/app/(app)/environments/[environmentId]/page.tsx

@@ -1,25 +0,0 @@
-import { redirect } from "next/navigation";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-
-const EnvironmentPage = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const { session, organization } = await getEnvironmentAuth(params.environmentId);
-
-  const currentUserMembership = await getMembershipByUserIdOrganizationId(session?.user.id, organization.id);
-  const { isBilling } = getAccessFlags(currentUserMembership?.role);
-
-  if (isBilling) {
-    if (IS_FORMBRICKS_CLOUD) {
-      return redirect(`/environments/${params.environmentId}/settings/billing`);
-    } else {
-      return redirect(`/environments/${params.environmentId}/settings/enterprise`);
-    }
-  }
-
-  return redirect(`/environments/${params.environmentId}/surveys`);
-};
-
-export default EnvironmentPage;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/layout.tsx

@@ -1,38 +0,0 @@
-import { getServerSession } from "next-auth";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
-import { getWorkspaceByEnvironmentId } from "@/lib/workspace/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-
-const AccountSettingsLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const t = await getTranslate();
-  const [organization, workspace, session] = await Promise.all([
-    getOrganizationByEnvironmentId(params.environmentId),
-    getWorkspaceByEnvironmentId(params.environmentId),
-    getServerSession(authOptions),
-  ]);
-
-  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), null);
-  }
-
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
-  }
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  return <>{children}</>;
-};
-
-export default AccountSettingsLayout;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/DeleteAccount.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import type { Session } from "next-auth";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { TOrganization } from "@formbricks/types/organizations";
-import { TUser } from "@formbricks/types/user";
-import { DeleteAccountModal } from "@/modules/account/components/DeleteAccountModal";
-import { Button } from "@/modules/ui/components/button";
-import { TooltipRenderer } from "@/modules/ui/components/tooltip";
-
-export const DeleteAccount = ({
-  session,
-  IS_FORMBRICKS_CLOUD,
-  user,
-  organizationsWithSingleOwner,
-  isMultiOrgEnabled,
-}: {
-  session: Session | null;
-  IS_FORMBRICKS_CLOUD: boolean;
-  user: TUser;
-  organizationsWithSingleOwner: TOrganization[];
-  isMultiOrgEnabled: boolean;
-}) => {
-  const [isModalOpen, setModalOpen] = useState(false);
-  const isDeleteDisabled = !isMultiOrgEnabled && organizationsWithSingleOwner.length > 0;
-  const { t } = useTranslation();
-  if (!session) {
-    return null;
-  }
-
-  return (
-    <div>
-      <DeleteAccountModal
-        open={isModalOpen}
-        setOpen={setModalOpen}
-        user={user}
-        isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-        organizationsWithSingleOwner={organizationsWithSingleOwner}
-      />
-      <p className="text-sm text-slate-700">
-        <strong>{t("environments.settings.profile.warning_cannot_undo")}</strong>
-      </p>
-      <TooltipRenderer
-        shouldRender={isDeleteDisabled}
-        tooltipContent={t("environments.settings.profile.warning_cannot_delete_account")}>
-        <Button
-          className="mt-4"
-          variant="destructive"
-          size="sm"
-          onClick={() => setModalOpen(!isModalOpen)}
-          disabled={isDeleteDisabled}>
-          {t("environments.settings.profile.confirm_delete_my_account")}
-        </Button>
-      </TooltipRenderer>
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user.test.ts

@@ -1,133 +0,0 @@
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import { prisma } from "@formbricks/database";
-import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { verifyPassword as mockVerifyPasswordImported } from "@/modules/auth/lib/utils";
-import { getIsEmailUnique, verifyUserPassword } from "./user";
-
-vi.mock("@/modules/auth/lib/utils", () => ({
-  verifyPassword: vi.fn(),
-}));
-
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    user: {
-      findUnique: vi.fn(),
-    },
-  },
-}));
-
-const mockPrismaUserFindUnique = vi.mocked(prisma.user.findUnique);
-const mockVerifyPasswordUtil = vi.mocked(mockVerifyPasswordImported);
-
-describe("User Library Tests", () => {
-  beforeEach(() => {
-    vi.resetAllMocks();
-  });
-
-  describe("verifyUserPassword", () => {
-    const userId = "test-user-id";
-    const password = "test-password";
-
-    test("should return true for correct password", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "email",
-      } as any);
-      mockVerifyPasswordUtil.mockResolvedValue(true);
-
-      const result = await verifyUserPassword(userId, password);
-      expect(result).toBe(true);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
-    });
-
-    test("should return false for incorrect password", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "email",
-      } as any);
-      mockVerifyPasswordUtil.mockResolvedValue(false);
-
-      const result = await verifyUserPassword(userId, password);
-      expect(result).toBe(false);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
-    });
-
-    test("should throw ResourceNotFoundError if user not found", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue(null);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(ResourceNotFoundError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(`user with ID ${userId} not found`);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-
-    test("should throw InvalidInputError if identityProvider is not email", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "google", // Not 'email'
-      } as any);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-
-    test("should throw InvalidInputError if password is not set for email provider", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: null, // Password not set
-        identityProvider: "email",
-      } as any);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("getIsEmailUnique", () => {
-    const email = "test@example.com";
-
-    test("should return false if user exists", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        id: "some-user-id",
-      } as any);
-
-      const result = await getIsEmailUnique(email);
-      expect(result).toBe(false);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { email },
-        select: { id: true },
-      });
-    });
-
-    test("should return true if user does not exist", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue(null);
-
-      const result = await getIsEmailUnique(email);
-      expect(result).toBe(true);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { email },
-        select: { id: true },
-      });
-    });
-  });
-});

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/loading.tsx

@@ -1,6 +0,0 @@
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import Loading from "@/modules/organization/settings/api-keys/loading";
-
-export default function LoadingPage() {
-  return <Loading isFormbricksCloud={IS_FORMBRICKS_CLOUD} />;
-}

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -1,81 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { useTranslation } from "react-i18next";
-import { TOrganizationRole } from "@formbricks/types/memberships";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
-
-interface OrganizationSettingsNavbarProps {
-  environmentId?: string;
-  isFormbricksCloud: boolean;
-  membershipRole?: TOrganizationRole;
-  activeId: string;
-  loading?: boolean;
-}
-
-export const OrganizationSettingsNavbar = ({
-  environmentId,
-  isFormbricksCloud,
-  membershipRole,
-  activeId,
-  loading,
-}: OrganizationSettingsNavbarProps) => {
-  const pathname = usePathname();
-  const { isMember, isOwner } = getAccessFlags(membershipRole);
-  const isPricingDisabled = isMember;
-  const { t } = useTranslation();
-
-  const navigation = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${environmentId}/settings/general`,
-      current: pathname?.includes("/general"),
-      hidden: false,
-    },
-    {
-      id: "teams",
-      label: t("common.members_and_teams"),
-      href: `/environments/${environmentId}/settings/teams`,
-      current: pathname?.includes("/teams"),
-    },
-    {
-      id: "feedback-record-directories",
-      label: t("environments.settings.feedback_record_directories.nav_label"),
-      href: `/environments/${environmentId}/settings/feedback-record-directories`,
-      current: pathname?.includes("/feedback-record-directories"),
-      hidden: isMember,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `/environments/${environmentId}/settings/api-keys`,
-      current: pathname?.includes("/api-keys"),
-      hidden: !isOwner,
-    },
-    {
-      id: "domain",
-      label: t("common.domain"),
-      href: `/environments/${environmentId}/settings/domain`,
-      current: pathname?.includes("/domain"),
-      hidden: isFormbricksCloud,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `/environments/${environmentId}/settings/billing`,
-      hidden: !isFormbricksCloud || loading,
-      current: pathname?.includes("/billing"),
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `/environments/${environmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isPricingDisabled,
-      current: pathname?.includes("/enterprise"),
-    },
-  ];
-
-  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
-};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/feedback-record-directories/page.tsx

@@ -1 +0,0 @@
-export { FeedbackRecordDirectoriesPage as default } from "@/modules/ee/feedback-record-directory/page";

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.ts

@@ -1,69 +0,0 @@
-"use server";
-
-import { z } from "zod";
-import { ZId } from "@formbricks/types/common";
-import { OperationNotAllowedError } from "@formbricks/types/errors";
-import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";
-import { deleteOrganization, getOrganization, updateOrganization } from "@/lib/organization/service";
-import { authenticatedActionClient } from "@/lib/utils/action-client";
-import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
-import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
-
-const ZUpdateOrganizationNameAction = z.object({
-  organizationId: ZId,
-  data: ZOrganizationUpdateInput.pick({ name: true }),
-});
-
-export const updateOrganizationNameAction = authenticatedActionClient
-  .inputSchema(ZUpdateOrganizationNameAction)
-  .action(
-    withAuditLogging("updated", "organization", async ({ ctx, parsedInput }) => {
-      await checkAuthorizationUpdated({
-        userId: ctx.user.id,
-        organizationId: parsedInput.organizationId,
-        access: [
-          {
-            type: "organization",
-            schema: ZOrganizationUpdateInput.pick({ name: true }),
-            data: parsedInput.data,
-            roles: ["owner"],
-          },
-        ],
-      });
-      ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
-      const oldObject = await getOrganization(parsedInput.organizationId);
-      const result = await updateOrganization(parsedInput.organizationId, parsedInput.data);
-      ctx.auditLoggingCtx.oldObject = oldObject;
-      ctx.auditLoggingCtx.newObject = result;
-      return result;
-    })
-  );
-
-const ZDeleteOrganizationAction = z.object({
-  organizationId: ZId,
-});
-
-export const deleteOrganizationAction = authenticatedActionClient
-  .inputSchema(ZDeleteOrganizationAction)
-  .action(
-    withAuditLogging("deleted", "organization", async ({ ctx, parsedInput }) => {
-      const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-      if (!isMultiOrgEnabled) throw new OperationNotAllowedError("Organization deletion disabled");
-
-      await checkAuthorizationUpdated({
-        userId: ctx.user.id,
-        organizationId: parsedInput.organizationId,
-        access: [
-          {
-            type: "organization",
-            roles: ["owner"],
-          },
-        ],
-      });
-      ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
-      const oldObject = await getOrganization(parsedInput.organizationId);
-      ctx.auditLoggingCtx.oldObject = oldObject;
-      return await deleteOrganization(parsedInput.organizationId);
-    })
-  );

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/loading.tsx

@@ -1,36 +0,0 @@
-import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getTranslate } from "@/lingodotdev/server";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Loading = async () => {
-  const t = await getTranslate();
-
-  const cards = [
-    {
-      title: t("environments.settings.general.organization_name"),
-      description: t("environments.settings.general.organization_name_description"),
-      skeletonLines: [{ classes: "h-6 w-28" }, { classes: "h-8 w-80" }],
-    },
-    {
-      title: t("environments.settings.general.delete_organization"),
-      description: t("environments.settings.general.delete_organization_description"),
-      skeletonLines: [{ classes: "h-6 w-28" }, { classes: "h-8 w-80" }],
-    },
-  ];
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="general" loading />
-      </PageHeader>
-      {cards.map((card, index) => (
-        <LoadingCard key={index} {...card} />
-      ))}
-    </PageContentWrapper>
-  );
-};
-
-export default Loading;

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/layout.tsx

@@ -1,35 +0,0 @@
-import { getServerSession } from "next-auth";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
-import { getWorkspaceByEnvironmentId } from "@/lib/workspace/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-
-const Layout = async (props: { params: Promise<{ environmentId: string }>; children: React.ReactNode }) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const t = await getTranslate();
-  const [organization, workspace, session] = await Promise.all([
-    getOrganizationByEnvironmentId(params.environmentId),
-    getWorkspaceByEnvironmentId(params.environmentId),
-    getServerSession(authOptions),
-  ]);
-
-  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), null);
-  }
-
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
-  }
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  return <>{children}</>;
-};
-
-export default Layout;

apps/web/app/(app)/environments/[environmentId]/settings/page.tsx

@@ -1,8 +0,0 @@
-import { redirect } from "next/navigation";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/profile`);
-};
-
-export default Page;

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SuccessMessage.tsx

@@ -1,53 +0,0 @@
-"use client";
-
-import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-import { TEnvironment } from "@formbricks/types/environment";
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { Confetti } from "@/modules/ui/components/confetti";
-
-interface SummaryMetadataProps {
-  environment: TEnvironment;
-  survey: TSurvey;
-}
-
-export const SuccessMessage = ({ environment, survey }: SummaryMetadataProps) => {
-  const { t } = useTranslation();
-  const searchParams = useSearchParams();
-  const [confetti, setConfetti] = useState(false);
-
-  const isAppSurvey = survey.type === "app";
-  const appSetupCompleted = environment.appSetupCompleted;
-
-  useEffect(() => {
-    const newSurveyParam = searchParams?.get("success");
-    if (newSurveyParam && survey && environment) {
-      setConfetti(true);
-      toast.success(
-        isAppSurvey && !appSetupCompleted
-          ? t("environments.surveys.summary.almost_there")
-          : t("environments.surveys.summary.congrats"),
-        {
-          id: "survey-publish-success-toast",
-          icon: isAppSurvey && !appSetupCompleted ? "🤏" : "🎉",
-          duration: 5000,
-          position: "bottom-right",
-        }
-      );
-
-      // Remove success param from url
-      const url = new URL(window.location.href);
-      url.searchParams.delete("success");
-      if (survey.type === "link") {
-        // Add share param to url to open share embed modal
-        url.searchParams.set("share", "true");
-      }
-
-      window.history.replaceState({}, "", url.toString());
-    }
-  }, [environment, isAppSurvey, searchParams, survey, appSetupCompleted, t]);
-
-  return <>{confetti && <Confetti />}</>;
-};

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/page.tsx

@@ -1,8 +0,0 @@
-import { redirect } from "next/navigation";
-
-const Page = async (props: { params: Promise<{ environmentId: string; surveyId: string }> }) => {
-  const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/surveys/${params.surveyId}/summary`);
-};
-
-export default Page;

apps/web/app/(app)/environments/[environmentId]/workflows/components/workflows-page.tsx

@@ -1,208 +0,0 @@
-"use client";
-
-import { CheckCircle2, Sparkles } from "lucide-react";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "@/modules/ui/components/button";
-
-const FORMBRICKS_HOST = "https://app.formbricks.com";
-const SURVEY_ID = "cr9r4b2r73x6hlmn5aa2ha44";
-const ENVIRONMENT_ID = "cmk41i8bi92bdad01svi74dec";
-
-interface WorkflowsPageProps {
-  userEmail: string;
-  organizationName: string;
-  billingPlan: string;
-}
-
-type Step = "prompt" | "followup" | "thankyou";
-
-export const WorkflowsPage = ({ userEmail, organizationName, billingPlan }: WorkflowsPageProps) => {
-  const { t } = useTranslation();
-  const [step, setStep] = useState<Step>("prompt");
-  const [promptValue, setPromptValue] = useState("");
-  const [detailsValue, setDetailsValue] = useState("");
-  const [responseId, setResponseId] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleGenerateWorkflow = async () => {
-    if (promptValue.trim().length < 100 || isSubmitting) return;
-    setIsSubmitting(true);
-
-    try {
-      const res = await fetch(`${FORMBRICKS_HOST}/api/v2/client/${ENVIRONMENT_ID}/responses`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          surveyId: SURVEY_ID,
-          finished: false,
-          data: {
-            workflow: promptValue.trim(),
-            useremail: userEmail,
-            orgname: organizationName,
-            billingplan: billingPlan,
-          },
-        }),
-      });
-
-      if (res.ok) {
-        const json = await res.json();
-        setResponseId(json.data?.id ?? null);
-      }
-
-      setStep("followup");
-    } catch {
-      setStep("followup");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleSubmitFeedback = async () => {
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-
-    if (responseId) {
-      try {
-        await fetch(`${FORMBRICKS_HOST}/api/v1/client/${ENVIRONMENT_ID}/responses/${responseId}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            finished: true,
-            data: {
-              details: detailsValue.trim(),
-            },
-          }),
-        });
-      } catch {
-        // silently fail
-      }
-    }
-
-    setIsSubmitting(false);
-    setStep("thankyou");
-  };
-
-  const handleSkipFeedback = async () => {
-    if (!responseId) {
-      setStep("thankyou");
-      return;
-    }
-
-    try {
-      await fetch(`${FORMBRICKS_HOST}/api/v1/client/${ENVIRONMENT_ID}/responses/${responseId}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          finished: true,
-          data: {},
-        }),
-      });
-    } catch {
-      // silently fail
-    }
-
-    setStep("thankyou");
-  };
-
-  if (step === "prompt") {
-    return (
-      <div className="flex h-full flex-col items-center px-4 pt-[15vh]">
-        <div className="w-full max-w-2xl space-y-8">
-          <div className="space-y-3 text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-brand-light to-brand-dark shadow-md">
-              <Sparkles className="h-6 w-6 text-white" />
-            </div>
-            <h1 className="text-4xl font-bold tracking-tight text-slate-800">{t("workflows.heading")}</h1>
-            <p className="text-lg text-slate-500">{t("workflows.subheading")}</p>
-          </div>
-
-          <div className="relative">
-            <textarea
-              value={promptValue}
-              onChange={(e) => setPromptValue(e.target.value)}
-              placeholder={t("workflows.placeholder")}
-              rows={5}
-              className="w-full resize-none rounded-xl border border-slate-200 bg-white px-5 py-4 text-base text-slate-800 shadow-sm transition-all placeholder:text-slate-400 focus:border-brand-dark focus:outline-none focus:ring-2 focus:ring-brand-light/20"
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                  handleGenerateWorkflow();
-                }
-              }}
-            />
-            <div className="mt-3 flex items-center justify-between">
-              <span
-                className={`text-xs ${promptValue.trim().length >= 100 ? "text-slate-400" : "text-amber-500"}`}>
-                {promptValue.trim().length} / 100
-              </span>
-              <Button
-                onClick={handleGenerateWorkflow}
-                disabled={promptValue.trim().length < 100 || isSubmitting}
-                loading={isSubmitting}
-                size="lg">
-                <Sparkles className="h-4 w-4" />
-                {t("workflows.generate_button")}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (step === "followup") {
-    return (
-      <div className="flex h-full flex-col items-center px-4 pt-[15vh]">
-        <div className="w-full max-w-2xl space-y-8">
-          <div className="space-y-3 text-center">
-            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100">
-              <Sparkles className="h-6 w-6 text-brand-dark" />
-            </div>
-            <h1 className="text-3xl font-bold tracking-tight text-slate-800">
-              {t("workflows.coming_soon_title")}
-            </h1>
-            <p className="mx-auto max-w-md text-base text-slate-500">
-              {t("workflows.coming_soon_description")}
-            </p>
-          </div>
-
-          <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-            <label className="text-md mb-2 block font-medium text-slate-700">
-              {t("workflows.follow_up_label")}
-            </label>
-            <textarea
-              value={detailsValue}
-              onChange={(e) => setDetailsValue(e.target.value)}
-              placeholder={t("workflows.follow_up_placeholder")}
-              rows={4}
-              className="w-full resize-none rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-800 transition-all placeholder:text-slate-400 focus:border-brand-dark focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-light/20"
-            />
-            <div className="mt-4 flex items-center justify-end gap-3">
-              <Button variant="ghost" onClick={handleSkipFeedback} className="text-slate-500">
-                {t("common.skip")}
-              </Button>
-              <Button
-                onClick={handleSubmitFeedback}
-                disabled={!detailsValue.trim() || isSubmitting}
-                loading={isSubmitting}>
-                {t("workflows.submit_button")}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col items-center px-4 pt-[15vh]">
-      <div className="w-full max-w-md space-y-6 text-center">
-        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-50">
-          <CheckCircle2 className="h-8 w-8 text-green-500" />
-        </div>
-        <h1 className="text-2xl font-bold text-slate-800">{t("workflows.thank_you_title")}</h1>
-        <p className="text-base text-slate-500">{t("workflows.thank_you_description")}</p>
-      </div>
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/workflows/page.tsx

@@ -1,42 +0,0 @@
-import { Metadata } from "next";
-import { notFound, redirect } from "next/navigation";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getUser } from "@/lib/user/service";
-import { getCloudBillingDisplayContext } from "@/modules/ee/billing/lib/cloud-billing-display";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { WorkflowsPage } from "./components/workflows-page";
-
-export const metadata: Metadata = {
-  title: "Workflows",
-};
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-
-  if (!IS_FORMBRICKS_CLOUD) {
-    return notFound();
-  }
-
-  const { session, organization, isBilling } = await getEnvironmentAuth(params.environmentId);
-
-  if (isBilling) {
-    return redirect(`/environments/${params.environmentId}/settings/billing`);
-  }
-
-  const user = await getUser(session.user.id);
-  if (!user) {
-    return redirect("/auth/login");
-  }
-
-  const cloudBillingDisplayContext = await getCloudBillingDisplayContext(organization.id);
-
-  return (
-    <WorkflowsPage
-      userEmail={user.email}
-      organizationName={organization.name}
-      billingPlan={cloudBillingDisplayContext.currentCloudPlan}
-    />
-  );
-};
-
-export default Page;

apps/web/app/(app)/workspaces/[workspaceId]/(analysis)/charts/page.tsx

@@ -0,0 +1,8 @@
+import { ChartsListPage } from "@/modules/ee/analysis/charts/components/charts-list-page";
+
+const ChartsPage = async (props: Readonly<{ params: Promise<{ workspaceId: string }> }>) => {
+  const { workspaceId } = await props.params;
+  return <ChartsListPage workspaceId={workspaceId} />;
+};
+
+export default ChartsPage;

apps/web/app/(app)/workspaces/[workspaceId]/(analysis)/dashboards/[dashboardId]/page.tsx

@@ -0,0 +1,7 @@
+import { DashboardDetailPage } from "@/modules/ee/analysis/dashboards/pages/dashboard-detail-page";
+
+const Page = (props: { params: Promise<{ workspaceId: string; dashboardId: string }> }) => {
+  return <DashboardDetailPage params={props.params} />;
+};
+
+export default Page;

apps/web/app/(app)/workspaces/[workspaceId]/(analysis)/dashboards/page.tsx

@@ -0,0 +1,8 @@
+import { DashboardsListPage } from "@/modules/ee/analysis/dashboards/pages/dashboards-list-page";
+
+const DashboardsPage = async (props: Readonly<{ params: Promise<{ workspaceId: string }> }>) => {
+  const { workspaceId } = await props.params;
+  return <DashboardsListPage workspaceId={workspaceId} />;
+};
+
+export default DashboardsPage;

apps/web/app/(app)/workspaces/[workspaceId]/(analysis)/loading.tsx

@@ -0,0 +1,3 @@
+import { AnalysisListLoading } from "@/modules/ee/analysis/loading";
+
+export default AnalysisListLoading;

apps/web/app/(app)/workspaces/[workspaceId]/(workspace)/feedback-sources/page.tsx

@@ -0,0 +1,8 @@
+import { redirect } from "next/navigation";
+
+export default async function FeedbackSourcesRedirect(
+  props: Readonly<{ params: Promise<{ workspaceId: string }> }>
+) {
+  const { workspaceId } = await props.params;
+  redirect(`/workspaces/${workspaceId}/settings/workspace/feedback-sources`);
+}

apps/web/app/(app)/workspaces/[workspaceId]/actions.ts

@@ -10,6 +10,7 @@ import {
 import { ZWorkspaceUpdateInput } from "@formbricks/types/workspace";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
+import { capturePostHogEvent, groupIdentifyPostHog } from "@/lib/posthog";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
@@ -80,6 +81,19 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       notificationSettings: updatedNotificationSettings,
     });
 
+    groupIdentifyPostHog("workspace", workspace.id, { name: workspace.name });
+
+    capturePostHogEvent(
+      user.id,
+      "workspace_created",
+      {
+        organization_id: organizationId,
+        workspace_id: workspace.id,
+        name: workspace.name,
+      },
+      { organizationId, workspaceId: workspace.id }
+    );
+
     ctx.auditLoggingCtx.organizationId = organizationId;
     ctx.auditLoggingCtx.workspaceId = workspace.id;
     ctx.auditLoggingCtx.newObject = workspace;
@@ -88,7 +102,7 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
 );
 
 const ZGetOrganizationsForSwitcherAction = z.object({
-  organizationId: ZId, // Changed from environmentId to avoid extra query
+  organizationId: ZId, // Changed from workspaceId to avoid extra query
 });
 
 /**
@@ -113,11 +127,11 @@ export const getOrganizationsForSwitcherAction = authenticatedActionClient
   });
 
 const ZGetWorkspacesForSwitcherAction = z.object({
-  organizationId: ZId, // Changed from environmentId to avoid extra query
+  organizationId: ZId, // Changed from workspaceId to avoid extra query
 });
 
 /**
- * Fetches projects list for switcher dropdown.
+ * Fetches workspaces list for switcher dropdown.
  * Called on-demand when user opens the workspace switcher.
  */
 export const getWorkspacesForSwitcherAction = authenticatedActionClient

apps/web/app/(app)/workspaces/[workspaceId]/components/MainNavigation.tsx

@@ -0,0 +1,851 @@
+"use client";
+
+import {
+  ArrowUpRightIcon,
+  BarChart3Icon,
+  Building2Icon,
+  ChevronRightIcon,
+  Cog,
+  FoldersIcon,
+  Loader2,
+  LogOutIcon,
+  MessageCircle,
+  MessageSquareTextIcon,
+  PanelLeftCloseIcon,
+  PanelLeftOpenIcon,
+  PlusIcon,
+  RocketIcon,
+  SettingsIcon,
+  UserCircleIcon,
+  UserIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { TOrganization } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+import {
+  getOrganizationsForSwitcherAction,
+  getWorkspacesForSwitcherAction,
+} from "@/app/(app)/workspaces/[workspaceId]/actions";
+import { NavigationLink } from "@/app/(app)/workspaces/[workspaceId]/components/NavigationLink";
+import { SettingsSidebarContent } from "@/app/(app)/workspaces/[workspaceId]/components/SettingsSidebarContent";
+import { isNewerVersion } from "@/app/(app)/workspaces/[workspaceId]/lib/utils";
+import FBLogo from "@/images/formbricks-wordmark.svg";
+import { cn } from "@/lib/cn";
+import { getBillingFallbackPath } from "@/lib/membership/navigation";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { TrialAlert } from "@/modules/ee/billing/components/trial-alert";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { ProfileAvatar } from "@/modules/ui/components/avatars";
+import { Badge } from "@/modules/ui/components/badge";
+import { Button } from "@/modules/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { GoBackButton } from "@/modules/ui/components/go-back-button";
+import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
+import { CreateWorkspaceModal } from "@/modules/workspaces/components/create-workspace-modal";
+import { WorkspaceLimitModal } from "@/modules/workspaces/components/workspace-limit-modal";
+import { getLatestStableFbReleaseAction } from "@/modules/workspaces/settings/(setup)/app-connection/actions";
+import packageJson from "../../../../../package.json";
+
+interface NavigationProps {
+  user: TUser;
+  organization: TOrganization;
+  workspace: { id: string; name: string };
+  isFormbricksCloud: boolean;
+  isDevelopment: boolean;
+  membershipRole?: TOrganizationRole;
+  publicDomain: string;
+  isMultiOrgEnabled: boolean;
+  organizationWorkspacesLimit: number;
+  isLicenseActive: boolean;
+  isAccessControlAllowed: boolean;
+}
+
+export const MainNavigation = ({
+  organization,
+  user,
+  workspace,
+  membershipRole,
+  isFormbricksCloud,
+  isDevelopment,
+  publicDomain,
+  isMultiOrgEnabled,
+  organizationWorkspacesLimit,
+  isLicenseActive,
+  isAccessControlAllowed,
+}: NavigationProps) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isTextVisible, setIsTextVisible] = useState(true);
+  const [latestVersion, setLatestVersion] = useState("");
+  const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
+
+  const [isPending, startTransition] = useTransition();
+  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
+  const disabledNavigationMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
+
+  const isOwnerOrManager = isManager || isOwner;
+  const isSettingsMode = pathname?.includes("/settings");
+
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+    localStorage.setItem("isMainNavCollapsed", isCollapsed ? "false" : "true");
+  };
+
+  useEffect(() => {
+    const isCollapsedValueFromLocalStorage = localStorage.getItem("isMainNavCollapsed") === "true";
+    setIsCollapsed(isCollapsedValueFromLocalStorage);
+  }, []);
+
+  useEffect(() => {
+    const toggleTextOpacity = () => {
+      setIsTextVisible(isCollapsed);
+    };
+    const timeoutId = setTimeout(toggleTextOpacity, 150);
+    return () => clearTimeout(timeoutId);
+  }, [isCollapsed]);
+
+  const mainNavigationSections = useMemo(
+    () => [
+      {
+        id: "ask",
+        name: t("common.ask"),
+        items: [
+          {
+            name: t("common.surveys"),
+            href: `/workspaces/${workspace.id}/surveys`,
+            icon: MessageCircle,
+            isActive: pathname?.includes("/surveys"),
+            isHidden: false,
+            disabled: isMembershipPending || isBilling,
+          },
+          {
+            href: `/workspaces/${workspace.id}/contacts`,
+            name: t("common.contacts"),
+            icon: UserIcon,
+            isActive:
+              pathname?.includes("/contacts") ||
+              pathname?.includes("/segments") ||
+              pathname?.includes("/attributes"),
+            disabled: isMembershipPending || isBilling,
+          },
+        ],
+      },
+      {
+        id: "unify-feedback",
+        name: (
+          <span className="inline-flex items-center gap-2">
+            <span>{t("workspace.unify.unify_feedback")}</span>
+            <Badge
+              text="Beta"
+              type="gray"
+              size="tiny"
+              className="normal-case text-[10px] font-semibold tracking-normal"
+            />
+          </span>
+        ),
+        items: [
+          {
+            name: t("workspace.unify.feedback_records"),
+            href: `/workspaces/${workspace.id}/unify/feedback-records`,
+            icon: MessageSquareTextIcon,
+            isActive: pathname?.includes("/unify/feedback-records"),
+            isHidden: false,
+            disabled: isMembershipPending || isBilling,
+          },
+          {
+            name: t("common.dashboards"),
+            href: `/workspaces/${workspace.id}/dashboards`,
+            icon: BarChart3Icon,
+            isActive: pathname?.includes("/dashboards") || pathname?.includes("/charts"),
+            isHidden: false,
+            disabled: isMembershipPending || isBilling,
+          },
+        ],
+      },
+    ],
+    [t, workspace.id, pathname, isMembershipPending, isBilling]
+  );
+
+  const settingsNavigationItem = useMemo(
+    () => ({
+      name: t("common.settings"),
+      href: `/workspaces/${workspace.id}/settings`,
+      icon: SettingsIcon,
+      isActive: isSettingsMode,
+      disabled: isMembershipPending || isBilling,
+    }),
+    [t, workspace.id, isSettingsMode, isMembershipPending, isBilling]
+  );
+
+  const dropdownNavigation = [
+    {
+      label: t("common.account"),
+      href: `/workspaces/${workspace.id}/settings/account/profile`,
+      icon: UserCircleIcon,
+    },
+    {
+      label: t("common.documentation"),
+      href: "https://formbricks.com/docs",
+      target: "_blank",
+      icon: ArrowUpRightIcon,
+    },
+    {
+      label: t("common.share_feedback"),
+      href: "https://github.com/formbricks/formbricks/issues",
+      target: "_blank",
+      icon: ArrowUpRightIcon,
+    },
+  ];
+
+  const [isWorkspaceDropdownOpen, setIsWorkspaceDropdownOpen] = useState(false);
+  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
+  const [workspaces, setWorkspaces] = useState<{ id: string; name: string }[]>([]);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingWorkspaces, setIsLoadingWorkspaces] = useState(false);
+  const [hasInitializedWorkspaces, setHasInitializedWorkspaces] = useState(false);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [workspaceLoadError, setWorkspaceLoadError] = useState<string | null>(null);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [openCreateWorkspaceModal, setOpenCreateWorkspaceModal] = useState(false);
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [openWorkspaceLimitModal, setOpenWorkspaceLimitModal] = useState(false);
+
+  const renderSwitcherError = (error: string, onRetry: () => void, retryLabel: string) => (
+    <div className="px-2 py-4">
+      <p className="mb-2 text-sm text-red-600">{error}</p>
+      <button onClick={onRetry} className="text-xs text-slate-600 underline hover:text-slate-800">
+        {retryLabel}
+      </button>
+    </div>
+  );
+
+  const loadWorkspaces = useCallback(async () => {
+    setIsLoadingWorkspaces(true);
+    setWorkspaceLoadError(null);
+
+    try {
+      const result = await getWorkspacesForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setWorkspaces(sorted);
+      } else {
+        setWorkspaceLoadError(getFormattedErrorMessage(result) || t("common.failed_to_load_workspaces"));
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setWorkspaceLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_workspaces"))
+      );
+    } finally {
+      setIsLoadingWorkspaces(false);
+      setHasInitializedWorkspaces(true);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (!isWorkspaceDropdownOpen || workspaces.length > 0 || isLoadingWorkspaces || workspaceLoadError) {
+      return;
+    }
+
+    loadWorkspaces();
+  }, [isWorkspaceDropdownOpen, workspaces.length, isLoadingWorkspaces, workspaceLoadError, loadWorkspaces]);
+
+  const loadOrganizations = useCallback(async () => {
+    setIsLoadingOrganizations(true);
+    setOrganizationLoadError(null);
+
+    try {
+      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setOrganizations(sorted);
+      } else {
+        setOrganizationLoadError(
+          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
+        );
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setOrganizationLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_organizations"))
+      );
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      !isOrganizationDropdownOpen ||
+      organizations.length > 0 ||
+      isLoadingOrganizations ||
+      organizationLoadError
+    ) {
+      return;
+    }
+
+    loadOrganizations();
+  }, [
+    isOrganizationDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
+  useEffect(() => {
+    async function loadReleases() {
+      const res = await getLatestStableFbReleaseAction();
+      if (res?.data) {
+        const latestVersionTag = res.data;
+        const currentVersionTag = `v${packageJson.version}`;
+
+        if (isNewerVersion(currentVersionTag, latestVersionTag)) {
+          setLatestVersion(latestVersionTag);
+        }
+      }
+    }
+    if (isOwnerOrManager) loadReleases();
+  }, [isOwnerOrManager]);
+
+  const trialDaysRemaining = useMemo(() => {
+    if (!isFormbricksCloud || organization.billing?.stripe?.subscriptionStatus !== "trialing") return null;
+    const trialEnd = organization.billing.stripe.trialEnd;
+    if (!trialEnd) return null;
+    const ts = new Date(trialEnd).getTime();
+    if (!Number.isFinite(ts)) return null;
+    const msPerDay = 86_400_000;
+    return Math.ceil((ts - Date.now()) / msPerDay);
+  }, [
+    isFormbricksCloud,
+    organization.billing?.stripe?.subscriptionStatus,
+    organization.billing?.stripe?.trialEnd,
+  ]);
+
+  const mainNavigationLink = isBilling
+    ? getBillingFallbackPath(workspace.id, isFormbricksCloud)
+    : `/workspaces/${workspace.id}/surveys/`;
+
+  const handleWorkspaceChange = (workspaceId: string) => {
+    const targetPath =
+      workspaceId === workspace.id ? `/workspaces/${workspace.id}/surveys` : `/workspaces/${workspaceId}/`;
+    startTransition(() => {
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleOrganizationChange = (organizationId: string) => {
+    const targetPath =
+      organizationId === organization.id
+        ? `/workspaces/${workspace.id}/settings/organization/general`
+        : `/organizations/${organizationId}/`;
+    startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleSettingNavigation = (href: string) => {
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  const handleWorkspaceCreate = () => {
+    if (!hasInitializedWorkspaces || isLoadingWorkspaces) {
+      return;
+    }
+
+    if (workspaces.length >= organizationWorkspacesLimit) {
+      setOpenWorkspaceLimitModal(true);
+      return;
+    }
+
+    setOpenCreateWorkspaceModal(true);
+  };
+
+  const workspaceLimitModalButtons = (): [ModalButton, ModalButton] => {
+    if (isFormbricksCloud) {
+      return [
+        {
+          text: t("workspace.settings.billing.upgrade"),
+          href: `/workspaces/${workspace.id}/settings/organization/billing`,
+        },
+        {
+          text: t("common.cancel"),
+          onClick: () => setOpenWorkspaceLimitModal(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        text: t("workspace.settings.billing.upgrade"),
+        href: isLicenseActive
+          ? `/workspaces/${workspace.id}/settings/organization/enterprise`
+          : "https://formbricks.com/upgrade-self-hosted-license",
+      },
+      {
+        text: t("common.cancel"),
+        onClick: () => setOpenWorkspaceLimitModal(false),
+      },
+    ];
+  };
+
+  const handleSettingsWorkspaceChange = useCallback(
+    (id: string) => {
+      startTransition(() => {
+        router.push(`/workspaces/${id}/settings/workspace/general`);
+      });
+    },
+    [router]
+  );
+
+  const handleSettingsOrganizationChange = useCallback(
+    (id: string) => {
+      startTransition(() => {
+        if (id === organization.id) {
+          router.push(`/workspaces/${workspace.id}/settings/organization/general`);
+        } else {
+          router.push(`/organizations/${id}/`);
+        }
+      });
+    },
+    [router, organization.id, workspace.id]
+  );
+
+  const switcherTriggerClasses = cn(
+    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset",
+    isCollapsed ? "flex items-center justify-center" : ""
+  );
+
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+  const isInitialWorkspacesLoading =
+    isWorkspaceDropdownOpen && !hasInitializedWorkspaces && !workspaceLoadError;
+
+  return (
+    <>
+      {workspace && (
+        <aside
+          className={cn(
+            "z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100",
+            isSettingsMode || !isCollapsed ? "w-sidebar-collapsed" : "w-sidebar-expanded"
+          )}>
+          {isSettingsMode ? (
+            <div className="flex flex-col overflow-hidden">
+              <div className="mb-2 px-3">
+                <GoBackButton url={`/workspaces/${workspace.id}/surveys`} />
+              </div>
+
+              {/* Settings sidebar content */}
+              <SettingsSidebarContent
+                workspaceId={workspace.id}
+                workspaceName={workspace.name}
+                organizationId={organization.id}
+                organizationName={organization.name}
+                membershipRole={membershipRole}
+                isFormbricksCloud={isFormbricksCloud}
+                isCollapsed={false}
+                isTextVisible={false}
+                workspaces={workspaces}
+                isLoadingWorkspaces={isLoadingWorkspaces}
+                onWorkspaceChange={handleSettingsWorkspaceChange}
+                onWorkspaceDropdownOpen={loadWorkspaces}
+                organizations={organizations}
+                isLoadingOrganizations={isLoadingOrganizations}
+                onOrganizationChange={handleSettingsOrganizationChange}
+                onOrganizationDropdownOpen={loadOrganizations}
+              />
+            </div>
+          ) : (
+            <div>
+              {/* Logo and Toggle */}
+
+              <div className="flex items-center justify-between px-3 pb-4">
+                {!isCollapsed && (
+                  <Link
+                    href={mainNavigationLink}
+                    className={cn(
+                      "flex items-center justify-center transition-opacity duration-100",
+                      isTextVisible ? "opacity-0" : "opacity-100"
+                    )}>
+                    <Image src={FBLogo} width={160} height={30} alt={t("workspace.formbricks_logo")} />
+                  </Link>
+                )}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={toggleSidebar}
+                  className={cn(
+                    "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
+                  )}>
+                  {isCollapsed ? (
+                    <PanelLeftOpenIcon strokeWidth={1.5} />
+                  ) : (
+                    <PanelLeftCloseIcon strokeWidth={1.5} />
+                  )}
+                </Button>
+              </div>
+
+              {/* Main Nav */}
+              <ul className="space-y-2">
+                {mainNavigationSections.map((section) => (
+                  <li key={section.id}>
+                    {!isCollapsed && !isTextVisible && (
+                      <p className="px-4 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+                        {section.name}
+                      </p>
+                    )}
+
+                    <ul>
+                      {section.items.map(
+                        (item) =>
+                          !item.isHidden && (
+                            <NavigationLink
+                              key={item.name}
+                              href={item.href}
+                              isActive={item.isActive}
+                              isCollapsed={isCollapsed}
+                              isTextVisible={isTextVisible}
+                              disabled={item.disabled}
+                              disabledMessage={item.disabled ? disabledNavigationMessage : undefined}
+                              linkText={item.name}>
+                              <item.icon strokeWidth={1.5} />
+                            </NavigationLink>
+                          )
+                      )}
+                    </ul>
+                  </li>
+                ))}
+
+                <li className={cn("mt-2 border-t border-slate-100 pt-2", isCollapsed && "border-t-0 pt-0")}>
+                  <ul>
+                    <NavigationLink
+                      href={settingsNavigationItem.href}
+                      isActive={settingsNavigationItem.isActive}
+                      isCollapsed={isCollapsed}
+                      isTextVisible={isTextVisible}
+                      disabled={settingsNavigationItem.disabled}
+                      disabledMessage={
+                        settingsNavigationItem.disabled ? disabledNavigationMessage : undefined
+                      }
+                      linkText={settingsNavigationItem.name}>
+                      <settingsNavigationItem.icon strokeWidth={1.5} />
+                    </NavigationLink>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          )}
+
+          {!isSettingsMode && (
+            <div>
+              {/* New Version Available */}
+              {!isCollapsed && isOwnerOrManager && latestVersion && !isFormbricksCloud && !isDevelopment && (
+                <Link
+                  href="https://github.com/formbricks/formbricks/releases"
+                  target="_blank"
+                  className="m-2 flex items-center space-x-4 rounded-lg border border-slate-200 bg-slate-100 p-2 text-sm text-slate-800 hover:border-slate-300 hover:bg-slate-200">
+                  <p className="flex items-center justify-center gap-x-2 text-xs">
+                    <RocketIcon strokeWidth={1.5} className="mx-1 h-6 w-6 text-slate-900" />
+                    {t("common.new_version_available", { version: latestVersion })}
+                  </p>
+                </Link>
+              )}
+
+              {/* Trial Days Remaining */}
+              {!isCollapsed && isFormbricksCloud && trialDaysRemaining !== null && (
+                <Link
+                  href={`/workspaces/${workspace.id}/settings/organization/billing`}
+                  className="m-2 block">
+                  <TrialAlert trialDaysRemaining={trialDaysRemaining} size="small" />
+                </Link>
+              )}
+
+              <div className="flex flex-col">
+                <DropdownMenu onOpenChange={setIsWorkspaceDropdownOpen}>
+                  <DropdownMenuTrigger
+                    asChild
+                    id="workspaceDropdownTrigger"
+                    className={switcherTriggerClasses}>
+                    <button
+                      type="button"
+                      aria-label={isCollapsed ? t("common.change_workspace") : undefined}
+                      className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                      <span className={switcherIconClasses}>
+                        <FoldersIcon className="h-4 w-4" strokeWidth={1.5} />
+                      </span>
+                      {!isCollapsed && !isTextVisible && (
+                        <>
+                          <div className="grow overflow-hidden">
+                            <p className="truncate text-sm font-bold text-slate-700">{workspace.name}</p>
+                            <p className="text-sm text-slate-500">{t("common.workspace")}</p>
+                          </div>
+                          {isPending && (
+                            <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                          )}
+                          <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                        </>
+                      )}
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.change_workspace")}
+                    </div>
+                    {(isLoadingWorkspaces || isInitialWorkspacesLoading) && (
+                      <div className="flex items-center justify-center py-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      </div>
+                    )}
+                    {!isLoadingWorkspaces &&
+                      !isInitialWorkspacesLoading &&
+                      workspaceLoadError &&
+                      renderSwitcherError(
+                        workspaceLoadError,
+                        () => {
+                          setWorkspaceLoadError(null);
+                          setWorkspaces([]);
+                        },
+                        t("common.try_again")
+                      )}
+                    {!isLoadingWorkspaces && !isInitialWorkspacesLoading && !workspaceLoadError && (
+                      <>
+                        <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                          {workspaces.map((proj) => (
+                            <DropdownMenuCheckboxItem
+                              key={proj.id}
+                              checked={proj.id === workspace.id}
+                              onClick={() => handleWorkspaceChange(proj.id)}
+                              className="cursor-pointer">
+                              {proj.name}
+                            </DropdownMenuCheckboxItem>
+                          ))}
+                        </DropdownMenuGroup>
+                        {isOwnerOrManager && (
+                          <DropdownMenuCheckboxItem
+                            onClick={handleWorkspaceCreate}
+                            className="w-full cursor-pointer justify-between">
+                            <span>{t("common.add_new_workspace")}</span>
+                            <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                          </DropdownMenuCheckboxItem>
+                        )}
+                      </>
+                    )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuCheckboxItem
+                      onClick={() =>
+                        handleSettingNavigation(`/workspaces/${workspace.id}/settings/workspace/general`)
+                      }
+                      className="cursor-pointer">
+                      <Cog className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                      {t("common.settings")}
+                    </DropdownMenuCheckboxItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
+                  <DropdownMenuTrigger
+                    asChild
+                    id="organizationDropdownTriggerSidebar"
+                    className={switcherTriggerClasses}>
+                    <button
+                      type="button"
+                      aria-label={isCollapsed ? t("common.change_organization") : undefined}
+                      className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                      <span className={switcherIconClasses}>
+                        <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+                      </span>
+                      {!isCollapsed && !isTextVisible && (
+                        <>
+                          <div className="grow overflow-hidden">
+                            <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
+                            <p className="text-sm text-slate-500">{t("common.organization")}</p>
+                          </div>
+                          {isPending && (
+                            <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />
+                          )}
+                          <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                        </>
+                      )}
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.change_organization")}
+                    </div>
+                    {isLoadingOrganizations && (
+                      <div className="flex items-center justify-center py-2">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      </div>
+                    )}
+                    {!isLoadingOrganizations &&
+                      organizationLoadError &&
+                      renderSwitcherError(
+                        organizationLoadError,
+                        () => {
+                          setOrganizationLoadError(null);
+                          setOrganizations([]);
+                        },
+                        t("common.try_again")
+                      )}
+                    {!isLoadingOrganizations && !organizationLoadError && (
+                      <>
+                        <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                          {organizations.map((org) => (
+                            <DropdownMenuCheckboxItem
+                              key={org.id}
+                              checked={org.id === organization.id}
+                              onClick={() => handleOrganizationChange(org.id)}
+                              className="cursor-pointer">
+                              {org.name}
+                            </DropdownMenuCheckboxItem>
+                          ))}
+                        </DropdownMenuGroup>
+                        {isMultiOrgEnabled && (
+                          <DropdownMenuCheckboxItem
+                            onClick={() => setOpenCreateOrganizationModal(true)}
+                            className="w-full cursor-pointer justify-between">
+                            <span>{t("common.create_new_organization")}</span>
+                            <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                          </DropdownMenuCheckboxItem>
+                        )}
+                      </>
+                    )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuCheckboxItem
+                      onClick={() =>
+                        handleSettingNavigation(`/workspaces/${workspace.id}/settings/organization/general`)
+                      }
+                      className="cursor-pointer">
+                      <SettingsIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                      {t("common.settings")}
+                    </DropdownMenuCheckboxItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    asChild
+                    id="userDropdownTrigger"
+                    className={cn(switcherTriggerClasses, "rounded-br-xl")}>
+                    <button
+                      type="button"
+                      aria-label={isCollapsed ? t("common.account_settings") : undefined}
+                      className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                      <span className={switcherIconClasses}>
+                        <ProfileAvatar userId={user.id} />
+                      </span>
+                      {!isCollapsed && !isTextVisible && (
+                        <>
+                          <div className="grow overflow-hidden">
+                            <p
+                              title={user?.email}
+                              className="ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
+                              {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
+                            </p>
+                            <p className="text-sm text-slate-500">{t("common.account")}</p>
+                          </div>
+                          <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                        </>
+                      )}
+                    </button>
+                  </DropdownMenuTrigger>
+
+                  <DropdownMenuContent
+                    id="userDropdownInnerContentWrapper"
+                    side="right"
+                    sideOffset={10}
+                    alignOffset={5}
+                    align="end">
+                    {dropdownNavigation.map((link) => (
+                      <Link
+                        href={link.href}
+                        target={link.target}
+                        className="flex w-full items-center"
+                        key={link.label}
+                        rel={link.target === "_blank" ? "noopener noreferrer" : undefined}>
+                        <DropdownMenuItem>
+                          <link.icon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+                          {link.label}
+                        </DropdownMenuItem>
+                      </Link>
+                    ))}
+                    <DropdownMenuItem
+                      onClick={async () => {
+                        const loginUrl = `${publicDomain}/auth/login`;
+                        const route = await signOutWithAudit({
+                          reason: "user_initiated",
+                          redirectUrl: loginUrl,
+                          organizationId: organization.id,
+                          redirect: false,
+                          callbackUrl: loginUrl,
+                          clearWorkspaceId: true,
+                        });
+                        router.push(route?.url || loginUrl);
+                      }}
+                      icon={<LogOutIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />}>
+                      {t("common.logout")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          )}
+        </aside>
+      )}
+      {openWorkspaceLimitModal && (
+        <WorkspaceLimitModal
+          open={openWorkspaceLimitModal}
+          setOpen={setOpenWorkspaceLimitModal}
+          buttons={workspaceLimitModalButtons()}
+          workspaceLimit={organizationWorkspacesLimit}
+        />
+      )}
+      {openCreateWorkspaceModal && (
+        <CreateWorkspaceModal
+          open={openCreateWorkspaceModal}
+          setOpen={setOpenCreateWorkspaceModal}
+          organizationId={organization.id}
+          isAccessControlAllowed={isAccessControlAllowed}
+        />
+      )}
+      {openCreateOrganizationModal && (
+        <CreateOrganizationModal
+          open={openCreateOrganizationModal}
+          setOpen={setOpenCreateOrganizationModal}
+        />
+      )}
+    </>
+  );
+};

apps/web/app/(app)/workspaces/[workspaceId]/components/NavigationLink.tsx

@@ -0,0 +1,95 @@
+import Link from "next/link";
+import React from "react";
+import { cn } from "@/lib/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+
+interface NavigationLinkProps {
+  href: string;
+  isActive: boolean;
+  isCollapsed: boolean;
+  children: React.ReactNode;
+  linkText: string;
+  isTextVisible: boolean;
+  disabled?: boolean;
+  disabledMessage?: string;
+}
+
+export const NavigationLink = ({
+  href,
+  isActive,
+  isCollapsed = false,
+  children,
+  linkText,
+  isTextVisible = true,
+  disabled = false,
+  disabledMessage,
+}: NavigationLinkProps) => {
+  const tooltipText = disabled ? disabledMessage || linkText : linkText;
+  const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
+  const inactiveClass =
+    "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
+  const disabledClass = "cursor-not-allowed border-r-4 border-transparent text-slate-400";
+  const getColorClass = (baseClass: string) => {
+    if (disabled) {
+      return disabledClass;
+    }
+
+    return cn(baseClass, isActive ? activeClass : inactiveClass);
+  };
+
+  const collapsedColorClass = getColorClass("text-slate-700 hover:text-slate-900");
+  const expandedColorClass = getColorClass("text-slate-600 hover:text-slate-900");
+
+  const label = (
+    <span
+      className={cn(
+        "ml-2 flex transition-opacity duration-100",
+        isTextVisible ? "opacity-0" : "opacity-100"
+      )}>
+      {linkText}
+    </span>
+  );
+
+  return (
+    <>
+      {isCollapsed ? (
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <li className={cn("mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm", collapsedColorClass)}>
+                {disabled ? (
+                  <div className="flex items-center">{children}</div>
+                ) : (
+                  <Link href={href}>{children}</Link>
+                )}
+              </li>
+            </TooltipTrigger>
+            <TooltipContent side="right">{tooltipText}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        <li className={cn("mb-1 rounded-l-md py-2 pl-5 text-sm", expandedColorClass)}>
+          {disabled ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <div className="flex items-center">
+                  {children}
+                  {label}
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                {disabledMessage || linkText}
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <Link href={href} className="flex items-center">
+              {children}
+              {label}
+            </Link>
+          )}
+        </li>
+      )}
+    </>
+  );
+};

apps/web/app/(app)/workspaces/[workspaceId]/components/SettingsSidebarContent.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+import {
+  BellIcon,
+  BlocksIcon,
+  BrushIcon,
+  Building2Icon,
+  ChevronDownIcon,
+  CreditCardIcon,
+  FoldersIcon,
+  GlobeIcon,
+  KeyIcon,
+  LanguagesIcon,
+  ListChecksIcon,
+  Loader2,
+  ShapesIcon,
+  ShieldIcon,
+  TagIcon,
+  UnplugIcon,
+  UserCircleIcon,
+  UsersIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { cn } from "@/lib/cn";
+import { getAccessFlags } from "@/lib/membership/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+
+interface SettingsSidebarContentProps {
+  workspaceId: string;
+  workspaceName: string;
+  organizationId: string;
+  organizationName: string;
+  membershipRole?: TOrganizationRole;
+  isFormbricksCloud: boolean;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  // Workspace switcher
+  workspaces: { id: string; name: string }[];
+  isLoadingWorkspaces: boolean;
+  onWorkspaceChange: (id: string) => void;
+  onWorkspaceDropdownOpen: () => void;
+  // Organization switcher
+  organizations: { id: string; name: string }[];
+  isLoadingOrganizations: boolean;
+  onOrganizationChange: (id: string) => void;
+  onOrganizationDropdownOpen: () => void;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+const SettingsNavLink = ({
+  item,
+  isActive,
+  isCollapsed,
+  isTextVisible,
+  disabledMessage,
+}: {
+  item: NavItem;
+  isActive: boolean;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  disabledMessage?: string;
+}) => {
+  const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
+  const inactiveClass =
+    "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
+  const disabledClass = "cursor-not-allowed border-r-4 border-transparent text-slate-400";
+
+  const isDisabled = item.disabled;
+
+  const getStateClass = () => {
+    if (isDisabled) return disabledClass;
+    return isActive ? activeClass : inactiveClass;
+  };
+
+  if (isCollapsed) {
+    return (
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <li className={cn("rounded-l-md py-1.5 pl-2 text-sm", getStateClass())}>
+              {isDisabled ? (
+                <div className="flex items-center">{item.icon}</div>
+              ) : (
+                <Link href={item.href} className="flex items-center text-slate-600 hover:text-slate-900">
+                  {item.icon}
+                </Link>
+              )}
+            </li>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            {isDisabled ? disabledMessage || item.label : item.label}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  if (isDisabled) {
+    return (
+      <li className={cn("rounded-l-md py-1.5 pl-8 text-sm", disabledClass)}>
+        <Popover>
+          <PopoverTrigger asChild>
+            <div className="flex items-center">
+              {item.icon}
+              <span
+                className={cn(
+                  "ml-2 transition-opacity duration-100",
+                  isTextVisible ? "opacity-0" : "opacity-100"
+                )}>
+                {item.label}
+              </span>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+            {disabledMessage || item.label}
+          </PopoverContent>
+        </Popover>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      className={cn(
+        "rounded-l-md py-1.5 pl-8 text-sm",
+        isActive ? activeClass : inactiveClass,
+        "text-slate-600 hover:text-slate-900"
+      )}>
+      <Link href={item.href} className="flex items-center">
+        {item.icon}
+        <span
+          className={cn("ml-2 transition-opacity duration-100", isTextVisible ? "opacity-0" : "opacity-100")}>
+          {item.label}
+        </span>
+      </Link>
+    </li>
+  );
+};
+
+const SectionHeader = ({
+  icon,
+  label,
+  isCollapsed,
+  isTextVisible,
+  switcherName,
+  switcherItems,
+  isLoadingSwitcher,
+  currentId,
+  onSwitcherChange,
+  onSwitcherOpen,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  switcherName?: string;
+  switcherItems?: { id: string; name: string }[];
+  isLoadingSwitcher?: boolean;
+  currentId?: string;
+  onSwitcherChange?: (id: string) => void;
+  onSwitcherOpen?: () => void;
+}) => {
+  if (isCollapsed) {
+    return <div className="mb-1 mt-3 flex justify-center px-2 text-slate-400">{icon}</div>;
+  }
+
+  return (
+    <div
+      className={cn(
+        "mb-1 mt-4 flex min-w-0 items-center gap-2 px-3",
+        isTextVisible ? "opacity-0" : "opacity-100"
+      )}>
+      <span className="text-slate-500">{icon}</span>
+      <span className="shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-500">{label}</span>
+      {switcherName && switcherItems && onSwitcherChange && (
+        <DropdownMenu onOpenChange={(open) => open && onSwitcherOpen?.()}>
+          <DropdownMenuTrigger className="ml-auto flex min-w-0 max-w-[50%] items-center gap-1 rounded-md border border-slate-200 px-2 py-0.5 text-xs text-slate-600 hover:bg-slate-50">
+            <span className="truncate">{switcherName}</span>
+            <ChevronDownIcon className="h-3 w-3" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="max-h-[300px]">
+            {isLoadingSwitcher ? (
+              <div className="flex items-center justify-center py-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+              </div>
+            ) : (
+              <DropdownMenuGroup className="overflow-y-auto">
+                {switcherItems.map((item) => (
+                  <DropdownMenuCheckboxItem
+                    key={item.id}
+                    checked={item.id === currentId}
+                    onClick={() => onSwitcherChange(item.id)}
+                    className="cursor-pointer text-sm">
+                    {item.name}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuGroup>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+};
+
+export const SettingsSidebarContent = ({
+  workspaceId,
+  workspaceName,
+  organizationId,
+  organizationName,
+  membershipRole,
+  isFormbricksCloud,
+  isCollapsed,
+  isTextVisible,
+  workspaces,
+  isLoadingWorkspaces,
+  onWorkspaceChange,
+  onWorkspaceDropdownOpen,
+  organizations,
+  isLoadingOrganizations,
+  onOrganizationChange,
+  onOrganizationDropdownOpen,
+}: SettingsSidebarContentProps) => {
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  const { isMember, isBilling, isOwner, isManager } = getAccessFlags(membershipRole);
+  const isOwnerOrManager = isOwner || isManager;
+  const iconClassName = "h-4 w-4 shrink-0";
+
+  const basePath = `/workspaces/${workspaceId}/settings`;
+
+  const workspaceItems: NavItem[] = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `${basePath}/workspace/general`,
+      icon: <FoldersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `${basePath}/workspace/teams`,
+      icon: <UsersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `${basePath}/workspace/languages`,
+      icon: <LanguagesIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "app-connection",
+      label: t("common.connect_your_app"),
+      href: `${basePath}/workspace/app-connection`,
+      icon: <UnplugIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "feedback-sources",
+      label: t("workspace.unify.feedback_sources"),
+      href: `${basePath}/workspace/feedback-sources`,
+      icon: <ShapesIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `${basePath}/workspace/integrations`,
+      icon: <BlocksIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "look",
+      label: t("common.appearance"),
+      href: `${basePath}/workspace/look`,
+      icon: <BrushIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "user-actions",
+      label: t("common.user_actions"),
+      href: `${basePath}/workspace/user-actions`,
+      icon: <ListChecksIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `${basePath}/workspace/tags`,
+      icon: <TagIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+  ];
+
+  const organizationItems: NavItem[] = [
+    {
+      id: "org-general",
+      label: t("common.general"),
+      href: `${basePath}/organization/general`,
+      icon: <Building2Icon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "org-teams",
+      label: t("common.teams"),
+      href: `${basePath}/organization/teams`,
+      icon: <UsersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "org-feedback-directories",
+      label: t("workspace.settings.feedback_directories.nav_label"),
+      href: `${basePath}/organization/feedback-directories`,
+      icon: <FoldersIcon className={iconClassName} />,
+      hidden: isMember,
+    },
+    {
+      id: "org-api-keys",
+      label: t("common.api_keys"),
+      href: `${basePath}/organization/api-keys`,
+      icon: <KeyIcon className={iconClassName} />,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "org-domain",
+      label: t("common.domain"),
+      href: `${basePath}/organization/domain`,
+      icon: <GlobeIcon className={iconClassName} />,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "org-billing",
+      label: t("common.billing"),
+      href: `${basePath}/organization/billing`,
+      icon: <CreditCardIcon className={iconClassName} />,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "org-enterprise",
+      label: t("common.enterprise_license"),
+      href: `${basePath}/organization/enterprise`,
+      icon: <ShieldIcon className={iconClassName} />,
+      hidden: isFormbricksCloud,
+      disabled: isMember || isBilling,
+    },
+  ];
+
+  const accountItems: NavItem[] = [
+    {
+      id: "profile",
+      label: t("common.your_profile"),
+      href: `${basePath}/account/profile`,
+      icon: <UserCircleIcon className={iconClassName} />,
+    },
+    {
+      id: "notifications",
+      label: t("common.notifications"),
+      href: `${basePath}/account/notifications`,
+      icon: <BellIcon className={iconClassName} />,
+    },
+  ];
+
+  const disabledMessage = t("common.you_are_not_authorized_to_perform_this_action");
+
+  const renderSection = (items: NavItem[]) => {
+    const visibleItems = items.filter((item) => !item.hidden);
+    return (
+      <ul className="space-y-0.5">
+        {visibleItems.map((item) => (
+          <SettingsNavLink
+            key={item.id}
+            item={item}
+            isActive={pathname.includes(item.href)}
+            isCollapsed={isCollapsed}
+            isTextVisible={isTextVisible}
+            disabledMessage={item.disabled ? disabledMessage : undefined}
+          />
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <div className="flex flex-col overflow-y-auto">
+      <div>
+        <SectionHeader
+          icon={<FoldersIcon className="h-4 w-4" />}
+          label={t("common.workspace")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+          switcherName={workspaceName}
+          switcherItems={workspaces}
+          isLoadingSwitcher={isLoadingWorkspaces}
+          currentId={workspaceId}
+          onSwitcherChange={onWorkspaceChange}
+          onSwitcherOpen={onWorkspaceDropdownOpen}
+        />
+        {renderSection(workspaceItems)}
+      </div>
+
+      <div>
+        <SectionHeader
+          icon={<Building2Icon className="h-4 w-4" />}
+          label={t("common.organization")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+          switcherName={organizationName}
+          switcherItems={organizations}
+          isLoadingSwitcher={isLoadingOrganizations}
+          currentId={organizationId}
+          onSwitcherChange={onOrganizationChange}
+          onSwitcherOpen={onOrganizationDropdownOpen}
+        />
+        {renderSection(organizationItems)}
+      </div>
+
+      <div>
+        <SectionHeader
+          icon={<UserCircleIcon className="h-4 w-4" />}
+          label={t("common.account")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+        />
+        {renderSection(accountItems)}
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/workspaces/[workspaceId]/components/TopControlBar.tsx

@@ -1,15 +1,11 @@
 "use client";
 
-import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
-import { WorkspaceAndOrgSwitch } from "@/app/(app)/environments/[environmentId]/components/workspace-and-org-switch";
-import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
-import { getAccessFlags } from "@/lib/membership/utils";
+import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
+import { useWorkspaceContext } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
 
 interface TopControlBarProps {
-  environments: TEnvironment[];
   currentOrganizationId: string;
-  currentWorkspaceId: string;
   isMultiOrgEnabled: boolean;
   organizationWorkspacesLimit: number;
   isFormbricksCloud: boolean;
@@ -20,9 +16,7 @@ interface TopControlBarProps {
 }
 
 export const TopControlBar = ({
-  environments,
   currentOrganizationId,
-  currentWorkspaceId,
   isMultiOrgEnabled,
   organizationWorkspacesLimit,
   isFormbricksCloud,
@@ -31,24 +25,22 @@ export const TopControlBar = ({
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { isMember } = getAccessFlags(membershipRole);
-  const { environment } = useEnvironment();
+  const { workspace } = useWorkspaceContext();
+  const isMembershipPending = membershipRole === undefined;
 
   return (
     <div
       className="flex h-14 w-full items-center justify-between bg-slate-50 px-6"
       data-testid="fb__global-top-control-bar">
       <WorkspaceAndOrgSwitch
-        currentEnvironmentId={environment.id}
-        environments={environments}
+        currentWorkspaceId={workspace.id}
         currentOrganizationId={currentOrganizationId}
-        currentWorkspaceId={currentWorkspaceId}
         isMultiOrgEnabled={isMultiOrgEnabled}
         organizationWorkspacesLimit={organizationWorkspacesLimit}
         isFormbricksCloud={isFormbricksCloud}
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
-        isMember={isMember}
+        isMembershipPending={isMembershipPending}
         isAccessControlAllowed={isAccessControlAllowed}
       />
     </div>

apps/web/app/(app)/workspaces/[workspaceId]/components/WidgetStatusIndicator.tsx

@@ -3,33 +3,32 @@
 import { AlertTriangleIcon, CheckIcon, RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { TEnvironment } from "@formbricks/types/environment";
 import { cn } from "@/lib/cn";
 import { Button } from "@/modules/ui/components/button";
 
 interface WidgetStatusIndicatorProps {
-  environment: TEnvironment;
+  workspace: { appSetupCompleted: boolean };
 }
 
-export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProps) => {
+export const WidgetStatusIndicator = ({ workspace }: WidgetStatusIndicatorProps) => {
   const { t } = useTranslation();
   const router = useRouter();
   const stati = {
     notImplemented: {
       icon: AlertTriangleIcon,
-      title: t("environments.workspace.app-connection.formbricks_sdk_not_connected"),
-      subtitle: t("environments.workspace.app-connection.formbricks_sdk_not_connected_description"),
+      title: t("workspace.app-connection.formbricks_sdk_not_connected"),
+      subtitle: t("workspace.app-connection.formbricks_sdk_not_connected_description"),
     },
     running: {
       icon: CheckIcon,
-      title: t("environments.workspace.app-connection.receiving_data"),
-      subtitle: t("environments.workspace.app-connection.formbricks_sdk_connected"),
+      title: t("workspace.app-connection.receiving_data"),
+      subtitle: t("workspace.app-connection.formbricks_sdk_connected"),
     },
   };
 
   let status: "notImplemented" | "running";
 
-  if (environment.appSetupCompleted) {
+  if (workspace.appSetupCompleted) {
     status = "running";
   } else {
     status = "notImplemented";
@@ -57,7 +56,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />
-          {t("environments.workspace.app-connection.recheck")}
+          {t("workspace.app-connection.recheck")}
         </Button>
       )}
     </div>

apps/web/app/(app)/workspaces/[workspaceId]/components/WorkspaceLayout.tsx

@@ -1,32 +1,30 @@
 import { ResourceNotFoundError } from "@formbricks/types/errors";
-import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
-import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
+import { MainNavigation } from "@/app/(app)/workspaces/[workspaceId]/components/MainNavigation";
+import { TopControlBar } from "@/app/(app)/workspaces/[workspaceId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationWorkspacesLimit } from "@/modules/ee/license-check/lib/utils";
-import { TEnvironmentLayoutData } from "@/modules/environments/types/environment-auth";
 import { LimitsReachedBanner } from "@/modules/ui/components/limits-reached-banner";
 import { PendingDowngradeBanner } from "@/modules/ui/components/pending-downgrade-banner";
+import { TWorkspaceLayoutData } from "@/modules/workspaces/types/workspace-auth";
 
-interface EnvironmentLayoutProps {
-  layoutData: TEnvironmentLayoutData;
+interface WorkspaceLayoutProps {
+  layoutData: TWorkspaceLayoutData;
   children?: React.ReactNode;
 }
 
-export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLayoutProps) => {
+export const WorkspaceLayout = async ({ layoutData, children }: WorkspaceLayoutProps) => {
   const t = await getTranslate();
   const publicDomain = getPublicDomain();
 
   // Destructure all data from props (NO database queries)
   const {
     user,
-    environment,
     organization,
     membership,
     workspace, // Current workspace details
-    environments, // All workspace environments (for environment switcher)
     isAccessControlAllowed,
     workspacePermission,
     license,
@@ -49,25 +47,19 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
   return (
     <div className="flex h-screen min-h-screen flex-col overflow-hidden">
       {IS_FORMBRICKS_CLOUD && (
-        <LimitsReachedBanner
-          organization={organization}
-          environmentId={environment.id}
-          responseCount={responseCount}
-        />
+        <LimitsReachedBanner organization={organization} responseCount={responseCount} />
       )}
 
       <PendingDowngradeBanner
         lastChecked={lastChecked}
         isPendingDowngrade={isPendingDowngrade ?? false}
         active={active}
-        environmentId={environment.id}
         locale={user.locale}
         status={status}
       />
 
       <div className="flex h-full">
         <MainNavigation
-          environment={environment}
           organization={organization}
           user={user}
           workspace={{ id: workspace.id, name: workspace.name }}
@@ -75,12 +67,14 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
           publicDomain={publicDomain}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          organizationWorkspacesLimit={organizationWorkspacesLimit}
+          isLicenseActive={active}
+          isAccessControlAllowed={isAccessControlAllowed}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar
-            environments={environments}
             currentOrganizationId={organization.id}
-            currentWorkspaceId={workspace.id}
             isMultiOrgEnabled={isMultiOrgEnabled}
             organizationWorkspacesLimit={organizationWorkspacesLimit}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}

apps/web/app/(app)/workspaces/[workspaceId]/components/WorkspaceStorageHandler.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { FORMBRICKS_ENVIRONMENT_ID_LS, FORMBRICKS_WORKSPACE_ID_LS } from "@/lib/localStorage";
+
+interface WorkspaceStorageHandlerProps {
+  workspaceId: string;
+}
+
+const WorkspaceStorageHandler = ({ workspaceId }: WorkspaceStorageHandlerProps) => {
+  useEffect(() => {
+    localStorage.setItem(FORMBRICKS_WORKSPACE_ID_LS, workspaceId);
+    // Keep legacy environment ID in sync for backward compatibility with old SDK clients
+    localStorage.setItem(FORMBRICKS_ENVIRONMENT_ID_LS, workspaceId);
+  }, [workspaceId]);
+
+  return null;
+};
+
+export default WorkspaceStorageHandler;

apps/web/app/(app)/workspaces/[workspaceId]/components/organization-breadcrumb.tsx

@@ -9,11 +9,11 @@ import {
   PlusIcon,
   SettingsIcon,
 } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
-import { getOrganizationsForSwitcherAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { getOrganizationsForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
@@ -25,42 +25,24 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
-import { useOrganization } from "../context/environment-context";
+import { useOrganization, useWorkspace } from "../context/workspace-context";
 
 interface OrganizationBreadcrumbProps {
   currentOrganizationId: string;
   currentOrganizationName?: string; // Optional: pass directly if context not available
   isMultiOrgEnabled: boolean;
-  currentEnvironmentId?: string;
-  isFormbricksCloud: boolean;
-  isMember: boolean;
-  isOwnerOrManager: boolean;
+  currentWorkspaceId?: string;
 }
 
-const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
-  // Match /settings/{settingId} or /settings/{settingId}/... but exclude account settings
-  // Exclude paths with /(account)/
-  if (pathname.includes("/(account)/")) {
-    return false;
-  }
-  // Check if path matches /settings/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
-  return pattern.test(pathname);
-};
-
 export const OrganizationBreadcrumb = ({
   currentOrganizationId,
   currentOrganizationName,
   isMultiOrgEnabled,
-  currentEnvironmentId,
-  isFormbricksCloud,
-  isMember,
-  isOwnerOrManager,
+  currentWorkspaceId,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
-  const pathname = usePathname();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
@@ -70,6 +52,7 @@ export const OrganizationBreadcrumb = ({
   // Get current organization name from context OR prop
   // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
   const { organization: currentOrganization } = useOrganization();
+  const { workspace } = useWorkspace();
   const organizationName = currentOrganization?.name || currentOrganizationName || "";
 
   // Lazy-load organizations when dropdown opens
@@ -110,9 +93,15 @@ export const OrganizationBreadcrumb = ({
     return;
   }
 
+  const workspaceBasePath = `/workspaces/${workspace?.id}`;
+
   const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === currentOrganizationId) return;
     startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      if (organizationId === currentOrganizationId && currentWorkspaceId) {
+        router.push(`/workspaces/${currentWorkspaceId}/settings/organization/general`);
+        return;
+      }
       router.push(`/organizations/${organizationId}/`);
     });
   };
@@ -127,49 +116,6 @@ export const OrganizationBreadcrumb = ({
     });
   };
 
-  const organizationSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/settings/general`,
-    },
-    {
-      id: "teams",
-      label: t("common.members_and_teams"),
-      href: `/environments/${currentEnvironmentId}/settings/teams`,
-    },
-    {
-      id: "feedback-record-directories",
-      label: t("environments.settings.feedback_record_directories.nav_label"),
-      href: `/environments/${currentEnvironmentId}/settings/feedback-record-directories`,
-      hidden: isMember,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `/environments/${currentEnvironmentId}/settings/api-keys`,
-      hidden: !isOwnerOrManager,
-    },
-    {
-      id: "domain",
-      label: t("common.domain"),
-      href: `/environments/${currentEnvironmentId}/settings/domain`,
-      hidden: isFormbricksCloud,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `/environments/${currentEnvironmentId}/settings/billing`,
-      hidden: !isFormbricksCloud,
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `/environments/${currentEnvironmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
-    },
-  ];
-
   return (
     <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
       <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
@@ -238,27 +184,16 @@ export const OrganizationBreadcrumb = ({
               )}
             </>
           )}
-          {currentEnvironmentId && (
-            <div>
+          {currentWorkspaceId && (
+            <>
               {showOrganizationDropdown && <DropdownMenuSeparator />}
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <SettingsIcon className="mr-2 inline h-4 w-4" />
-                {t("common.organization_settings")}
-              </div>
-
-              {organizationSettings.map((setting) => {
-                return setting.hidden ? null : (
-                  <DropdownMenuCheckboxItem
-                    key={setting.id}
-                    checked={isActiveOrganizationSetting(pathname, setting.id)}
-                    hidden={setting.hidden}
-                    onClick={() => handleSettingChange(setting.href)}
-                    className="cursor-pointer">
-                    {setting.label}
-                  </DropdownMenuCheckboxItem>
-                );
-              })}
-            </div>
+              <DropdownMenuCheckboxItem
+                onClick={() => handleSettingChange(`${workspaceBasePath}/settings/organization/general`)}
+                className="cursor-pointer">
+                <SettingsIcon className="mr-2 h-4 w-4" />
+                {t("common.settings")}
+              </DropdownMenuCheckboxItem>
+            </>
           )}
         </DropdownMenuContent>
       </DropdownMenu>

apps/web/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { EnvironmentBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/environment-breadcrumb";
-import { OrganizationBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/organization-breadcrumb";
-import { WorkspaceBreadcrumb } from "@/app/(app)/environments/[environmentId]/components/workspace-breadcrumb";
+import { OrganizationBreadcrumb } from "@/app/(app)/workspaces/[workspaceId]/components/organization-breadcrumb";
+import { WorkspaceBreadcrumb } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-breadcrumb";
 import { Breadcrumb, BreadcrumbList } from "@/modules/ui/components/breadcrumb";
 
 interface WorkspaceAndOrgSwitchProps {
@@ -10,15 +9,13 @@ interface WorkspaceAndOrgSwitchProps {
   currentOrganizationName?: string; // Optional: for pages without context
   currentWorkspaceId?: string;
   currentWorkspaceName?: string; // Optional: for pages without context
-  currentEnvironmentId?: string;
-  environments: { id: string; type: string }[];
   isMultiOrgEnabled: boolean;
   organizationWorkspacesLimit: number;
   isFormbricksCloud: boolean;
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
-  isMember: boolean;
   isAccessControlAllowed: boolean;
+  isMembershipPending: boolean;
 }
 
 export const WorkspaceAndOrgSwitch = ({
@@ -26,48 +23,37 @@ export const WorkspaceAndOrgSwitch = ({
   currentOrganizationName,
   currentWorkspaceId,
   currentWorkspaceName,
-  currentEnvironmentId,
-  environments,
   isMultiOrgEnabled,
   organizationWorkspacesLimit,
   isFormbricksCloud,
   isLicenseActive,
   isOwnerOrManager,
   isAccessControlAllowed,
-  isMember,
+  isMembershipPending,
 }: WorkspaceAndOrgSwitchProps) => {
-  const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
-  const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
-
   return (
     <Breadcrumb>
       <BreadcrumbList className="gap-0">
         <OrganizationBreadcrumb
           currentOrganizationId={currentOrganizationId}
           currentOrganizationName={currentOrganizationName}
-          currentEnvironmentId={currentEnvironmentId}
+          currentWorkspaceId={currentWorkspaceId}
           isMultiOrgEnabled={isMultiOrgEnabled}
-          isFormbricksCloud={isFormbricksCloud}
-          isMember={isMember}
-          isOwnerOrManager={isOwnerOrManager}
         />
-        {currentWorkspaceId && currentEnvironmentId && (
+        {currentWorkspaceId && (
           <WorkspaceBreadcrumb
             currentWorkspaceId={currentWorkspaceId}
             currentWorkspaceName={currentWorkspaceName}
             currentOrganizationId={currentOrganizationId}
-            currentEnvironmentId={currentEnvironmentId}
             isOwnerOrManager={isOwnerOrManager}
             organizationWorkspacesLimit={organizationWorkspacesLimit}
             isFormbricksCloud={isFormbricksCloud}
             isLicenseActive={isLicenseActive}
             isAccessControlAllowed={isAccessControlAllowed}
-            isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
+            isEnvironmentBreadcrumbVisible={false}
+            isMembershipPending={isMembershipPending}
           />
         )}
-        {showEnvironmentBreadcrumb && (
-          <EnvironmentBreadcrumb environments={environments} currentEnvironment={currentEnvironment} />
-        )}
       </BreadcrumbList>
     </Breadcrumb>
   );

apps/web/app/(app)/workspaces/[workspaceId]/components/workspace-breadcrumb.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
-import { getWorkspacesForSwitcherAction } from "@/app/(app)/environments/[environmentId]/actions";
+import { getWorkspacesForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { BreadcrumbItem } from "@/modules/ui/components/breadcrumb";
 import {
@@ -17,10 +17,11 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
 import { CreateWorkspaceModal } from "@/modules/workspaces/components/create-workspace-modal";
 import { WorkspaceLimitModal } from "@/modules/workspaces/components/workspace-limit-modal";
-import { useWorkspace } from "../context/environment-context";
+import { useWorkspace } from "../context/workspace-context";
 
 interface WorkspaceBreadcrumbProps {
   currentWorkspaceId: string;
@@ -30,21 +31,11 @@ interface WorkspaceBreadcrumbProps {
   isFormbricksCloud: boolean;
   isLicenseActive: boolean;
   currentOrganizationId: string;
-  currentEnvironmentId: string;
   isAccessControlAllowed: boolean;
   isEnvironmentBreadcrumbVisible: boolean;
+  isMembershipPending: boolean;
 }
 
-const isActiveWorkspaceSetting = (pathname: string, settingId: string): boolean => {
-  // Match /workspace/{settingId} or /workspace/{settingId}/... but exclude settings paths
-  if (pathname.includes("/settings/")) {
-    return false;
-  }
-  // Check if path matches /workspace/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
-  return pattern.test(pathname);
-};
-
 export const WorkspaceBreadcrumb = ({
   currentWorkspaceId,
   currentWorkspaceName,
@@ -53,9 +44,9 @@ export const WorkspaceBreadcrumb = ({
   isFormbricksCloud,
   isLicenseActive,
   currentOrganizationId,
-  currentEnvironmentId,
   isAccessControlAllowed,
   isEnvironmentBreadcrumbVisible,
+  isMembershipPending,
 }: WorkspaceBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isWorkspaceDropdownOpen, setIsWorkspaceDropdownOpen] = useState(false);
@@ -66,13 +57,14 @@ export const WorkspaceBreadcrumb = ({
   const [workspaces, setWorkspaces] = useState<{ id: string; name: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
-  const pathname = usePathname();
 
   // Get current workspace name from context OR prop
   // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
   const { workspace: currentWorkspace } = useWorkspace();
   const workspaceName = currentWorkspace?.name || currentWorkspaceName || "";
 
+  const workspaceBasePath = `/workspaces/${currentWorkspace?.id}`;
+
   // Lazy-load workspaces when dropdown opens
   useEffect(() => {
     // Only fetch when dropdown opened for first time (and no error state)
@@ -97,44 +89,6 @@ export const WorkspaceBreadcrumb = ({
     }
   }, [isWorkspaceDropdownOpen, currentOrganizationId, workspaces.length, isLoadingWorkspaces, loadError, t]);
 
-  const workspaceSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `/environments/${currentEnvironmentId}/workspace/general`,
-    },
-    {
-      id: "look",
-      label: t("common.look_and_feel"),
-      href: `/environments/${currentEnvironmentId}/workspace/look`,
-    },
-    {
-      id: "app-connection",
-      label: t("common.website_and_app_connection"),
-      href: `/environments/${currentEnvironmentId}/workspace/app-connection`,
-    },
-    {
-      id: "integrations",
-      label: t("common.integrations"),
-      href: `/environments/${currentEnvironmentId}/workspace/integrations`,
-    },
-    {
-      id: "teams",
-      label: t("common.team_access"),
-      href: `/environments/${currentEnvironmentId}/workspace/teams`,
-    },
-    {
-      id: "languages",
-      label: t("common.survey_languages"),
-      href: `/environments/${currentEnvironmentId}/workspace/languages`,
-    },
-    {
-      id: "tags",
-      label: t("common.tags"),
-      href: `/environments/${currentEnvironmentId}/workspace/tags`,
-    },
-  ];
-
   if (!currentWorkspace) {
     const errorMessage = `Workspace not found for workspace id: ${currentWorkspaceId}`;
     logger.error(errorMessage);
@@ -143,9 +97,13 @@ export const WorkspaceBreadcrumb = ({
   }
 
   const handleWorkspaceChange = (workspaceId: string) => {
-    if (workspaceId === currentWorkspaceId) return;
+    const targetPath =
+      workspaceId === currentWorkspaceId
+        ? `/workspaces/${currentWorkspaceId}/surveys`
+        : `/workspaces/${workspaceId}/`;
     startTransition(() => {
-      router.push(`/workspaces/${workspaceId}/`);
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
     });
   };
 
@@ -157,9 +115,9 @@ export const WorkspaceBreadcrumb = ({
     setOpenCreateWorkspaceModal(true);
   };
 
-  const handleWorkspaceSettingsNavigation = (settingId: string) => {
+  const handleWorkspaceSettingsNavigation = (href: string) => {
     startTransition(() => {
-      router.push(`/environments/${currentEnvironmentId}/workspace/${settingId}`);
+      router.push(href);
     });
   };
 
@@ -167,8 +125,8 @@ export const WorkspaceBreadcrumb = ({
     if (isFormbricksCloud) {
       return [
         {
-          text: t("environments.settings.billing.upgrade"),
-          href: `/environments/${currentEnvironmentId}/settings/billing`,
+          text: t("workspace.settings.billing.upgrade"),
+          href: `${workspaceBasePath}/settings/organization/billing`,
         },
         {
           text: t("common.cancel"),
@@ -179,9 +137,9 @@ export const WorkspaceBreadcrumb = ({
 
     return [
       {
-        text: t("environments.settings.billing.upgrade"),
+        text: t("workspace.settings.billing.upgrade"),
         href: isLicenseActive
-          ? `/environments/${currentEnvironmentId}/settings/enterprise`
+          ? `${workspaceBasePath}/settings/organization/enterprise`
           : "https://formbricks.com/upgrade-self-hosted-license",
       },
       {
@@ -190,15 +148,13 @@ export const WorkspaceBreadcrumb = ({
       },
     ];
   };
+
   return (
     <BreadcrumbItem isActive={isWorkspaceDropdownOpen}>
       <DropdownMenu onOpenChange={setIsWorkspaceDropdownOpen}>
-        <DropdownMenuTrigger
-          className="flex cursor-pointer items-center gap-1 outline-none"
-          id="workspaceDropdownTrigger"
-          asChild>
+        <DropdownMenuTrigger className="flex cursor-pointer items-center gap-1 outline-none" asChild>
           <div className="flex items-center gap-1">
-            <HotelIcon className="h-3 w-3" strokeWidth={1.5} />
+            <FoldersIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{workspaceName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
             {isEnvironmentBreadcrumbVisible && !isWorkspaceDropdownOpen ? (
@@ -211,7 +167,7 @@ export const WorkspaceBreadcrumb = ({
 
         <DropdownMenuContent align="start" className="mt-2">
           <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
             {t("common.choose_workspace")}
           </div>
           {isLoadingWorkspaces && (
@@ -235,19 +191,36 @@ export const WorkspaceBreadcrumb = ({
           {!isLoadingWorkspaces && !loadError && (
             <>
               <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
-                {workspaces.map((proj) => (
+                {workspaces.map((ws) => (
                   <DropdownMenuCheckboxItem
-                    key={proj.id}
-                    checked={proj.id === currentWorkspaceId}
-                    onClick={() => handleWorkspaceChange(proj.id)}
+                    key={ws.id}
+                    checked={ws.id === currentWorkspaceId}
+                    onClick={() => handleWorkspaceChange(ws.id)}
                     className="cursor-pointer">
                     <div className="flex items-center gap-2">
-                      <span>{proj.name}</span>
+                      <span>{ws.name}</span>
                     </div>
                   </DropdownMenuCheckboxItem>
                 ))}
               </DropdownMenuGroup>
-              {isOwnerOrManager && (
+              {isMembershipPending || !isOwnerOrManager ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-disabled="true"
+                      className="relative flex w-full cursor-not-allowed select-none items-center justify-between rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                      <span>{t("common.add_new_workspace")}</span>
+                      <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                    {isMembershipPending
+                      ? t("common.loading")
+                      : t("common.you_are_not_authorized_to_perform_this_action")}
+                  </PopoverContent>
+                </Popover>
+              ) : (
                 <DropdownMenuCheckboxItem
                   onClick={handleAddWorkspace}
                   className="w-full cursor-pointer justify-between">
@@ -257,22 +230,15 @@ export const WorkspaceBreadcrumb = ({
               )}
             </>
           )}
-          <DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-              <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.workspace_configuration")}
-            </div>
-            {workspaceSettings.map((setting) => (
-              <DropdownMenuCheckboxItem
-                key={setting.id}
-                checked={isActiveWorkspaceSetting(pathname, setting.id)}
-                onClick={() => handleWorkspaceSettingsNavigation(setting.id)}
-                className="cursor-pointer">
-                {setting.label}
-              </DropdownMenuCheckboxItem>
-            ))}
-          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            onClick={() =>
+              handleWorkspaceSettingsNavigation(`${workspaceBasePath}/settings/workspace/general`)
+            }
+            className="cursor-pointer">
+            <CogIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+            {t("common.settings")}
+          </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
       </DropdownMenu>
       {/* Modals */}

apps/web/app/(app)/workspaces/[workspaceId]/context/workspace-context.tsx

@@ -1,29 +1,27 @@
 "use client";
 
 import { createContext, useContext, useMemo } from "react";
-import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TWorkspace } from "@formbricks/types/workspace";
 
-export interface EnvironmentContextType {
-  environment: TEnvironment;
+export interface WorkspaceContextType {
   workspace: TWorkspace;
   organization: TOrganization;
   organizationId: string;
 }
 
-const EnvironmentContext = createContext<EnvironmentContextType | null>(null);
+const WorkspaceContext = createContext<WorkspaceContextType | null>(null);
 
-export const useEnvironment = () => {
-  const context = useContext(EnvironmentContext);
+export const useWorkspaceContext = () => {
+  const context = useContext(WorkspaceContext);
   if (!context) {
-    throw new Error("useEnvironment must be used within an EnvironmentProvider");
+    throw new Error("useWorkspaceContext must be used within a WorkspaceContextWrapper");
   }
   return context;
 };
 
 export const useWorkspace = () => {
-  const context = useContext(EnvironmentContext);
+  const context = useContext(WorkspaceContext);
   if (!context) {
     return { workspace: null };
   }
@@ -31,7 +29,7 @@ export const useWorkspace = () => {
 };
 
 export const useOrganization = () => {
-  const context = useContext(EnvironmentContext);
+  const context = useContext(WorkspaceContext);
   if (!context) {
     return { organization: null };
   }
@@ -39,30 +37,25 @@ export const useOrganization = () => {
 };
 
 // Client wrapper component to be used in server components
-interface EnvironmentContextWrapperProps {
-  environment: TEnvironment;
+interface WorkspaceContextWrapperProps {
   workspace: TWorkspace;
   organization: TOrganization;
   children: React.ReactNode;
 }
 
-export const EnvironmentContextWrapper = ({
-  environment,
+export const WorkspaceContextWrapper = ({
   workspace,
   organization,
   children,
-}: EnvironmentContextWrapperProps) => {
-  const environmentContextValue = useMemo(
+}: WorkspaceContextWrapperProps) => {
+  const workspaceContextValue = useMemo(
     () => ({
-      environment,
       workspace,
       organization,
       organizationId: workspace.organizationId,
     }),
-    [environment, workspace, organization]
+    [workspace, organization]
   );
 
-  return (
-    <EnvironmentContext.Provider value={environmentContextValue}>{children}</EnvironmentContext.Provider>
-  );
+  return <WorkspaceContext.Provider value={workspaceContextValue}>{children}</WorkspaceContext.Provider>;
 };

apps/web/app/(app)/workspaces/[workspaceId]/layout.tsx

@@ -0,0 +1,43 @@
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+import { WorkspaceLayout as WorkspaceLayoutComponent } from "@/app/(app)/workspaces/[workspaceId]/components/WorkspaceLayout";
+import { WorkspaceContextWrapper } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
+import { PostHogGroupIdentify } from "@/app/posthog/PostHogGroupIdentify";
+import { POSTHOG_KEY } from "@/lib/constants";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+import { getWorkspaceLayoutData } from "@/modules/workspaces/lib/utils";
+import WorkspaceStorageHandler from "./components/WorkspaceStorageHandler";
+
+const WorkspaceLayout = async (props: {
+  params: Promise<{ workspaceId: string }>;
+  children: React.ReactNode;
+}) => {
+  const params = await props.params;
+  const { children } = props;
+
+  const session = await getServerSession(authOptions);
+  if (!session?.user) {
+    return redirect(`/auth/login`);
+  }
+
+  const layoutData = await getWorkspaceLayoutData(params.workspaceId, session.user.id);
+
+  return (
+    <>
+      <WorkspaceStorageHandler workspaceId={params.workspaceId} />
+      {POSTHOG_KEY && (
+        <PostHogGroupIdentify
+          organizationId={layoutData.organization.id}
+          organizationName={layoutData.organization.name}
+          workspaceId={layoutData.workspace.id}
+          workspaceName={layoutData.workspace.name}
+        />
+      )}
+      <WorkspaceContextWrapper workspace={layoutData.workspace} organization={layoutData.organization}>
+        <WorkspaceLayoutComponent layoutData={layoutData}>{children}</WorkspaceLayoutComponent>
+      </WorkspaceContextWrapper>
+    </>
+  );
+};
+
+export default WorkspaceLayout;