[52150] Zen mode for project lists page (#17102)

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

* remove aria-pressed attr

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
   %>

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();
+    }
+  }
+}

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);