From 73314f0e151a0b45cbfb7ca76e3ccba2f2c2ae04 Mon Sep 17 00:00:00 2001
From: Behrokh Satarnejad <62008897+bsatarnejad@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:45:50 +0100
Subject: [PATCH] [52150] Zen mode for project lists page (#17102)

* pass zen-mode button to the more menu in projects list

* remove aria-pressed attr
---
 .../index_page_header_component.html.erb      |  8 +++
 .../dynamic/projects/zen-mode.controller.ts   | 53 +++++++++++++++++++
 frontend/src/stimulus/setup.ts                |  2 +
 3 files changed, 63 insertions(+)
 create mode 100644 frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts

diff --git a/app/components/projects/index_page_header_component.html.erb b/app/components/projects/index_page_header_component.html.erb
index 2d4bdb4e1667..50579e86c016 100644
--- a/app/components/projects/index_page_header_component.html.erb
+++ b/app/components/projects/index_page_header_component.html.erb
@@ -152,6 +152,14 @@
             item.with_leading_visual_icon(icon: 'trash')
           end
         end
+        menu.with_item(
+          tag: :button,
+          label: t('label_zen_mode'),
+          content_arguments: { data: { controller: "projects-zen-mode", target: "projects-zen-mode.button", action: "click->projects-zen-mode#performAction" }
+          }
+        ) do |item|
+          item.with_leading_visual_icon(icon: 'screen-full')
+        end
       end
     end
   %>
diff --git a/frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts b/frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts
new file mode 100644
index 000000000000..b512dbc6b20f
--- /dev/null
+++ b/frontend/src/stimulus/controllers/dynamic/projects/zen-mode.controller.ts
@@ -0,0 +1,53 @@
+import { ApplicationController } from 'stimulus-use';
+
+export default class OpProjectsZenModeController extends ApplicationController {
+  static targets = ['button'];
+  inZenMode = false;
+
+  declare readonly buttonTarget:HTMLElement;
+
+  connect() {
+    document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+  }
+
+  disconnect() {
+    super.disconnect();
+    document.removeEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this));
+  }
+
+  fullscreenChangeEventHandler() {
+    this.inZenMode = !this.inZenMode;
+    this.dispatchZenModeStatus();
+  }
+
+  dispatchZenModeStatus() {
+    // Create a new custom event
+    const event = new CustomEvent('zenModeToggled', {
+      detail: {
+        active: this.inZenMode,
+      },
+    });
+    // Dispatch the custom event
+    window.dispatchEvent(event);
+  }
+
+  private deactivateZenMode() {
+    if (document.exitFullscreen) {
+      void document.exitFullscreen();
+    }
+  }
+
+  private activateZenMode() {
+    if (document.documentElement.requestFullscreen) {
+      void document.documentElement.requestFullscreen();
+    }
+  }
+
+  public performAction() {
+    if (this.inZenMode) {
+      this.deactivateZenMode();
+    } else {
+      this.activateZenMode();
+    }
+  }
+}
diff --git a/frontend/src/stimulus/setup.ts b/frontend/src/stimulus/setup.ts
index 59fa7f5045b4..2d170cc8c6bd 100644
--- a/frontend/src/stimulus/setup.ts
+++ b/frontend/src/stimulus/setup.ts
@@ -11,6 +11,7 @@ import TableHighlightingController from './controllers/table-highlighting.contro
 import OpShowWhenCheckedController from './controllers/show-when-checked.controller';
 import OpShowWhenValueSelectedController from './controllers/show-when-value-selected.controller';
 import FlashController from './controllers/flash.controller';
+import OpProjectsZenModeController from './controllers/dynamic/projects/zen-mode.controller';
 
 declare global {
   interface Window {
@@ -38,3 +39,4 @@ instance.register('refresh-on-form-changes', RefreshOnFormChangesController);
 instance.register('async-dialog', AsyncDialogController);
 instance.register('poll-for-changes', PollForChangesController);
 instance.register('table-highlighting', TableHighlightingController);
+instance.register('projects-zen-mode', OpProjectsZenModeController);