noctalia-shell/Modules/Panels/Tray/TrayDrawerPanel.qml

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Services.SystemTray
import Quickshell.Widgets
import qs.Commons
import qs.Modules.MainScreen
import qs.Services.UI
import qs.Widgets

// A compact grid panel listing all tray items, opened from the Tray widget
SmartPanel {
  id: root

  // Do not give exclusive focus to the TrayDrawer or it will prevent the dropdown menu to request it.
  exclusiveKeyboard: false

  // Widget info for menu functionality (set by Tray widget when opening)
  property string widgetSection: ""
  property int widgetIndex: -1

  // Sizing properties must stay at root for preferredWidth/Height
  readonly property int maxColumns: 8
  readonly property real cellSize: Math.round(Style.capsuleHeight * 0.65)
  readonly property real outerPadding: Style.marginM
  readonly property real innerSpacing: Style.marginM

  // Tray values filtered (needed at root for sizing)
  readonly property var trayValuesAll: (SystemTray.items && SystemTray.items.values) ? SystemTray.items.values : []
  readonly property var trayValues: {
    // Reference panelContent properties for reactivity when panel is open
    var hidePassiveRef = panelContent ? panelContent.hidePassive : true;
    return trayValuesAll.filter(function (it) {
      if (!it)
        return false;
      // Filter out passive items if hidePassive is enabled
      if (hidePassiveRef && it.status !== undefined && (it.status === SystemTray.Passive || it.status === 0)) {
        return false;
      }
      // Check if pinned using panelContent function when available
      if (panelContent && panelContent.isPinned) {
        return !panelContent.isPinned(it);
      }
      return true;
    });
  }

  readonly property int itemCount: trayValues.length
  readonly property int columns: Math.max(1, Math.min(maxColumns, itemCount))
  readonly property int rows: Math.max(1, Math.ceil(itemCount / Math.max(1, columns)))

  preferredWidth: (columns * cellSize) + ((columns - 1) * innerSpacing) + (2 * outerPadding)
  preferredHeight: (rows * cellSize) + ((rows - 1) * innerSpacing) + (2 * outerPadding)

  // Auto-close drawer when all items are pinned (drawer becomes empty)
  onTrayValuesChanged: {
    if (visible && trayValues.length === 0) {
      close();
    }
  }

  panelContent: Item {
    id: panelContent

    // Settings state (lazy-loaded with panelContent)
    property int settingsVersion: 0

    readonly property var widgetSettings: {
      // Reference settingsVersion to force recalculation when it changes
      void (settingsVersion);
      if (root.widgetSection === "" || root.widgetIndex < 0)
        return {};
      var widgets = Settings.data.bar.widgets[root.widgetSection];
      if (!widgets || root.widgetIndex >= widgets.length)
        return {};
      var settings = widgets[root.widgetIndex];
      if (!settings || settings.id !== "Tray")
        return {};
      return settings;
    }

    readonly property var pinnedList: widgetSettings.pinned || []
    readonly property bool hidePassive: widgetSettings.hidePassive !== undefined ? widgetSettings.hidePassive : true

    // Helper functions (lazy-loaded with panelContent)
    function wildCardMatch(str, rule) {
      if (!str || !rule)
        return false;
      const placeholder = '\uE000';
      let processedRule = rule.replace(/\*/g, placeholder);
      let escaped = processedRule.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
      let pattern = '^' + escaped.replace(new RegExp(placeholder, 'g'), '.*') + '$';
      try {
        return new RegExp(pattern, 'i').test(str);
      } catch (e) {
        return false;
      }
    }

    function isPinned(item) {
      if (!pinnedList || pinnedList.length === 0)
        return false;
      const title = item?.tooltipTitle || item?.name || item?.id || "";
      for (var i = 0; i < pinnedList.length; i++) {
        if (wildCardMatch(title, pinnedList[i]))
          return true;
      }
      return false;
    }

    // Popup menu state (lazy-loaded with panelContent)
    property int popupMenuUpdateTrigger: 0

    readonly property var popupMenuWindow: {
      void (popupMenuUpdateTrigger);
      return PanelService.getPopupMenuWindow(screen);
    }

    readonly property var trayMenu: popupMenuWindow ? popupMenuWindow.trayMenuLoader : null

    // Dynamic content sizing
    property real contentPreferredWidth: (root.columns * root.cellSize) + ((root.columns - 1) * root.innerSpacing) + (2 * root.outerPadding)
    property real contentPreferredHeight: (root.rows * root.cellSize) + ((root.rows - 1) * root.innerSpacing) + (2 * root.outerPadding)

    // Connections (lazy-loaded with panelContent)
    Connections {
      target: Settings
      function onSettingsSaved() {
        panelContent.settingsVersion++;
      }
    }

    Connections {
      target: PanelService
      function onPopupMenuWindowRegistered(registeredScreen) {
        if (registeredScreen === screen) {
          panelContent.popupMenuUpdateTrigger++;
        }
      }
    }

    Grid {
      id: grid
      anchors.fill: parent
      anchors.margins: root.outerPadding
      spacing: root.innerSpacing
      columns: root.columns
      rowSpacing: root.innerSpacing
      columnSpacing: root.innerSpacing

      Repeater {
        id: repeater
        model: root.trayValues

        delegate: Item {
          width: root.cellSize
          height: root.cellSize

          IconImage {
            id: trayIcon
            anchors.fill: parent
            asynchronous: true
            backer.fillMode: Image.PreserveAspectFit
            source: {
              let icon = modelData?.icon || "";
              if (!icon)
                return "";
              if (icon.includes("?path=")) {
                const chunks = icon.split("?path=");
                const name = chunks[0];
                const path = chunks[1];
                const fileName = name.substring(name.lastIndexOf("/") + 1);
                return `file://${path}/${fileName}`;
              }
              return icon;
            }

            layer.enabled: panelContent.widgetSettings.colorizeIcons !== false
            layer.effect: ShaderEffect {
              property color targetColor: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mSurfaceVariant
              property real colorizeMode: 1.0
              fragmentShader: Qt.resolvedUrl(Quickshell.shellDir + "/Shaders/qsb/appicon_colorize.frag.qsb")
            }

            MouseArea {
              anchors.fill: parent
              cursorShape: Qt.PointingHandCursor
              hoverEnabled: true
              acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton

              onClicked: mouse => {
                           if (!modelData)
                           return;
                           if (mouse.button === Qt.LeftButton) {
                             if (!modelData.onlyMenu) {
                               modelData.activate();
                             }
                             if ((PanelService.openedPanel !== null) && !PanelService.openedPanel.isClosing) {
                               PanelService.openedPanel.close();
                             }
                           } else if (mouse.button === Qt.MiddleButton) {
                             modelData.secondaryActivate && modelData.secondaryActivate();
                             if ((PanelService.openedPanel !== null) && !PanelService.openedPanel.isClosing) {
                               PanelService.openedPanel.close();
                             }
                           } else if (mouse.button === Qt.RightButton) {
                             TooltipService.hideImmediately();

                             if (panelContent.popupMenuWindow && panelContent.popupMenuWindow.visible) {
                               panelContent.popupMenuWindow.close();
                               return;
                             }

                             if (modelData.hasMenu && modelData.menu && panelContent.popupMenuWindow && panelContent.trayMenu && panelContent.trayMenu.item) {
                               panelContent.popupMenuWindow.open();

                               const barPosition = Settings.data.bar.position;
                               let menuX, menuY;

                               if (barPosition === "left") {
                                 menuX = trayIcon.width + Style.marginM;
                                 menuY = 0;
                               } else if (barPosition === "right") {
                                 menuX = -panelContent.trayMenu.item.width - Style.marginM;
                                 menuY = 0;
                               } else {
                                 menuX = (trayIcon.width / 2) - (panelContent.trayMenu.item.width / 2);
                                 menuY = trayIcon.height + Style.marginS;
                               }

                               panelContent.trayMenu.item.trayItem = modelData;
                               panelContent.trayMenu.item.widgetSection = root.widgetSection;
                               panelContent.trayMenu.item.widgetIndex = root.widgetIndex;
                               panelContent.trayMenu.item.showAt(trayIcon, menuX, menuY);
                             }
                           }
                         }

              onWheel: wheel => {
                         if (wheel.angleDelta.y > 0)
                         modelData?.scrollUp();
                         else if (wheel.angleDelta.y < 0)
                         modelData?.scrollDown();
                       }

              onEntered: {
                if (panelContent.popupMenuWindow) {
                  panelContent.popupMenuWindow.close();
                }
                TooltipService.show(trayIcon, modelData.tooltipTitle || modelData.name || modelData.id || "Tray Item", BarService.getTooltipDirection());
              }
              onExited: TooltipService.hide()
            }
          }
        }
      }
    }
  }
}