noctalia-shell/Modules/SettingsPanel/Tabs/AboutTab.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Services
import qs.Widgets

ColumnLayout {
  id: root
  spacing: Style.marginL * scaling

  property string latestVersion: GitHubService.latestVersion
  property string currentVersion: UpdateService.currentVersion
  property var contributors: GitHubService.contributors

  NHeader {
    label: "Noctalia Shell"
    description: "A sleek and minimal desktop shell thoughtfully crafted for Wayland, built with Quickshell."
  }

  RowLayout {
    spacing: Style.marginL * scaling
  

  // Versions
  GridLayout {
    columns: 2
    rowSpacing: Style.marginXS * scaling
    columnSpacing: Style.marginS * scaling

    NText {
      text: "Latest Version:"
      color: Color.mOnSurface
    }

    NText {
      text: root.latestVersion
      color: Color.mOnSurface
      font.weight: Style.fontWeightBold
    }

    NText {
      text: "Installed Version:"
      color: Color.mOnSurface
    }

    NText {
      text: root.currentVersion
      color: Color.mOnSurface
      font.weight: Style.fontWeightBold
    }
  }

  Item {
    Layout.fillWidth: true
  }

 // Update button
  Rectangle {
    Layout.alignment: Qt.alignmentRight
    Layout.preferredWidth: Math.round(updateRow.implicitWidth + (Style.marginL * scaling * 2))
    Layout.preferredHeight: Math.round(Style.barHeight * scaling)
    radius: Style.radiusL * scaling
    color: updateArea.containsMouse ? Color.mPrimary : Color.transparent
    border.color: Color.mPrimary
    border.width: Math.max(1, Style.borderS * scaling)
    visible: {
      if (root.latestVersion === "Unknown")
        return false

      const latest = root.latestVersion.replace("v", "").split(".")
      const current = root.currentVersion.replace("v", "").split(".")
      for (var i = 0; i < Math.max(latest.length, current.length); i++) {
        const l = parseInt(latest[i] || "0")
        const c = parseInt(current[i] || "0")
        if (l > c)
          return true

        if (l < c)
          return false
      }
      return false
    }

    RowLayout {
      id: updateRow
      anchors.centerIn: parent
      spacing: Style.marginS * scaling

      NIcon {
        icon: "download"
        font.pointSize: Style.fontSizeXXL * scaling
        color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
      }

      NText {
        id: updateText
        text: "Download latest release"
        font.pointSize: Style.fontSizeL * scaling
        color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
      }
    }

    MouseArea {
      id: updateArea

      anchors.fill: parent
      hoverEnabled: true
      cursorShape: Qt.PointingHandCursor
      onClicked: {
        Quickshell.execDetached(["xdg-open", "https://github.com/Ly-sec/Noctalia/releases/latest"])
      }
    }
  }

}

  NDivider {
    Layout.fillWidth: true
    Layout.topMargin: Style.marginXL * scaling
    Layout.bottomMargin: Style.marginXL * scaling
  }

  NHeader {
    label: "Contributors"
    description: `Shout-out to our ${root.contributors.length} <b>awesome</b> contributors!`
  }

  GridView {
    id: contributorsGrid
    Layout.alignment: Qt.AlignHCenter
    Layout.preferredWidth: cellWidth * 3 // Fixed 3 columns
    Layout.preferredHeight: {
      if (root.contributors.length === 0)
        return 0
      const columns = 3
      const rows = Math.ceil(root.contributors.length / columns)
      return rows * cellHeight
    }
    cellWidth: Style.baseWidgetSize * 7 * scaling
    cellHeight: Style.baseWidgetSize * 3 * scaling
    model: root.contributors
    clip: true

    delegate: Rectangle {
      width: contributorsGrid.cellWidth - Style.marginM * scaling
      height: contributorsGrid.cellHeight - Style.marginM * scaling
      radius: Style.radiusL * scaling
      color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent

      Behavior on color {
        ColorAnimation {
          duration: Style.animationFast
        }
      }

      RowLayout {
        anchors.fill: parent
        anchors.margins: Style.marginS * scaling
        spacing: Style.marginM * scaling

        Item {
          Layout.alignment: Qt.AlignVCenter
          Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling
          Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling

          NImageCircled {
            imagePath: modelData.avatar_url || ""
            anchors.fill: parent
            anchors.margins: Style.marginXS * scaling
            fallbackIcon: "person"
            borderColor: contributorArea.containsMouse ? Color.mOnTertiary : Color.mPrimary
            borderWidth: Math.max(1, Style.borderM * scaling)

            Behavior on borderColor {
              ColorAnimation {
                duration: Style.animationFast
              }
            }
          }
        }

        ColumnLayout {
          spacing: Style.marginXS * scaling
          Layout.alignment: Qt.AlignVCenter
          Layout.fillWidth: true

          NText {
            text: modelData.login || "Unknown"
            font.weight: Style.fontWeightBold
            color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
            elide: Text.ElideRight
            Layout.fillWidth: true
          }

          NText {
            text: (modelData.contributions || 0) + " " + ((modelData.contributions || 0) === 1 ? "commit" : "commits")
            font.pointSize: Style.fontSizeXS * scaling
            color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
          }
        }
      }

      MouseArea {
        id: contributorArea

        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        onClicked: {
          if (modelData.html_url)
            Quickshell.execDetached(["xdg-open", modelData.html_url])
        }
      }
    }
  }

  Item {
    Layout.fillHeight: true
  }
}