add about page in the preferences

Author: funinkina

README.md

@@ -1,13 +1,22 @@
-# Weekly Commits (GNOME extension)
-## See your past weeks' GitHub contributions in the top bar
+<table>
+   <tr>
+      <td style="vertical-align: middle; width: 72px;">
+         <img src="weekly-commits-logo.png" alt="Weekly Commits Logo" width="64">
+      </td>
+      <td style="vertical-align: middle;">
+         <h1>Weekly Commits (GNOME extension)</h1>
+         <h3>See your past weeks' GitHub contributions in the top bar</h3>
+      </td>
+   </tr>
+</table>
+
+![Screenshot](screenshot.png)
+
 ![GitHub](https://img.shields.io/github/license/funinkina/weekly-commits)
 ![GitHub issues](https://img.shields.io/github/issues/funinkina/weekly-commits)
 ![GitHub last commit](https://img.shields.io/github/last-commit/funinkina/weekly-commits)
 ![GitHub stars](https://img.shields.io/github/stars/funinkina/weekly-commits)
 
-
-![Screenshot](screenshot.png)
-
 ## Get this extension on GNOME Extensions
 > [!NOTE]  
 > This extension is not yet available in the GNOME Extensions website. You can install it manually by following the instructions below.

about.js

@@ -0,0 +1,136 @@
+'use strict';
+import Adw from 'gi://Adw';
+import Gio from 'gi://Gio';
+import GObject from 'gi://GObject';
+import Gtk from 'gi://Gtk';
+import GLib from 'gi://GLib';
+import GdkPixbuf from 'gi://GdkPixbuf';
+import { gettext as _ } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';
+
+export default class About extends Adw.PreferencesPage {
+    static {
+        GObject.registerClass(this);
+    }
+
+    constructor(extensionObject) {
+        super({
+            title: _('About'),
+            icon_name: 'help-about-symbolic',
+            name: 'about'
+        });
+
+        const extensionDir = extensionObject.path;
+        const iconFile = GLib.build_filenamev([extensionDir, 'weekly-commits-logo.png']);
+        const extensionName = extensionObject.metadata.name;
+        const githubLink = 'https://github.com/funinkina/weekly-commits';
+        const issueFeatureLink = 'https://github.com/funinkina/weekly-commits/issues/new';
+        const authorBlogsLink = 'https://funinkina.is-a.dev/';
+
+        const headerGroup = new Adw.PreferencesGroup();
+        this.add(headerGroup);
+
+        const headerBox = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            spacing: 10,
+            margin_top: 24,
+            margin_bottom: 24,
+            hexpand: true,
+            halign: Gtk.Align.CENTER
+        });
+
+        const iconImage = new Gtk.Image({
+            pixel_size: 128
+        });
+
+        try {
+            if (Gio.File.new_for_path(iconFile).query_exists(null)) {
+                const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(iconFile, 128, 128);
+                iconImage.set_from_pixbuf(pixbuf);
+            } else {
+                iconImage.set_from_icon_name('application-x-addon-symbolic');
+            }
+        } catch (e) {
+            console.error(`Error loading icon: ${e.message}`);
+            iconImage.set_from_icon_name('application-x-addon-symbolic');
+        }
+
+        const nameLabel = new Gtk.Label({
+            label: `<b><span size="large">${extensionName}</span></b>`,
+            use_markup: true
+        });
+
+        const authorLabel = new Gtk.Label({
+            label: `<span size="small">by funinkina</span>`,
+            use_markup: true
+        });
+
+        headerBox.append(iconImage);
+        headerBox.append(nameLabel);
+        headerBox.append(authorLabel);
+        headerGroup.add(headerBox);
+
+        const linksGroup = new Adw.PreferencesGroup();
+        this.add(linksGroup);
+
+        const githubRow = new Adw.ActionRow({
+            title: _('GitHub Repository'),
+            subtitle: githubLink,
+            activatable: true
+        });
+
+        const githubIcon = new Gtk.Image({
+            icon_name: 'web-browser-symbolic'
+        });
+        githubRow.add_prefix(githubIcon);
+        linksGroup.add(githubRow);
+        this._makeRowClickable(githubRow, githubLink);
+
+        const issueRow = new Adw.ActionRow({
+            title: _('Report Issue or Request Feature'),
+            subtitle: _('Help improve this extension'),
+            activatable: true
+        });
+
+        const issueIcon = new Gtk.Image({
+            icon_name: 'dialog-question-symbolic'
+        });
+        issueRow.add_prefix(issueIcon);
+        linksGroup.add(issueRow);
+        this._makeRowClickable(issueRow, issueFeatureLink);
+
+        const authorGroup = new Adw.PreferencesGroup({
+            title: _('More About the Author')
+        });
+        this.add(authorGroup);
+
+        const moreInfo = new Adw.ActionRow({
+            title: _('More about me'),
+            subtitle: authorBlogsLink,
+            activatable: true
+        });
+
+        const blogIcon = new Gtk.Image({
+            icon_name: 'user-info-symbolic'
+        });
+        moreInfo.add_prefix(blogIcon);
+        authorGroup.add(moreInfo);
+        this._makeRowClickable(moreInfo, authorBlogsLink);
+    }
+
+    _makeRowClickable(row, link) {
+        row.set_tooltip_text(link);
+        row.connect('activated', () => {
+            try {
+                Gio.AppInfo.launch_default_for_uri_async(link, null, null, (source, result) => {
+                    try {
+                        Gio.AppInfo.launch_default_for_uri_finish(result);
+                    } catch (e) {
+                        console.error(`Error opening link ${link}: ${e.message}`);
+                    }
+                });
+            } catch (e) {
+                console.error(`Error launching URI ${link}: ${e.message}`);
+            }
+        });
+    }
+}

prefs.js

@@ -2,6 +2,7 @@ import Adw from 'gi://Adw';
 import Gtk from 'gi://Gtk';
 
 import { ExtensionPreferences, gettext as _ } from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js';
+import About from './about.js';
 
 export default class WeeklyCommitsPreferences extends ExtensionPreferences {
     fillPreferencesWindow(window) {
@@ -11,6 +12,8 @@ export default class WeeklyCommitsPreferences extends ExtensionPreferences {
         page.set_title(_('Settings'));
         page.set_icon_name('preferences-system-symbolic');
         window.add(page);
+        window.add(new About(this));
+        window.set_title(_('Weekly Commits Settings'));
 
         const group = new Adw.PreferencesGroup();
         group.set_title(_('GitHub Credentials'));