feat: add about panel on mac, show about info in settings

config/selfupdate.go

@@ -14,6 +14,10 @@ import (
 // Version is the current version of the binary. Set at compile time using ldflags (see .github/workflows/build.yml).
 const Version = "development"
 
+func (c *config) GetVersion() string {
+	return Version
+}
+
 // SelfUpdate checks for updates and prompts the user to update if there is one.
 func SelfUpdate(ctx context.Context) {
 	shouldUpdate, release := checkForUpdates()

frontend/.eslintrc.json

@@ -24,8 +24,10 @@
     }],
     "import/prefer-default-export": 0,
     "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-shadow": 0,
     "react/no-unstable-nested-components": 0,
-    "react/require-default-props": 0
+    "react/require-default-props": 0,
+    "import/no-relative-packages": 0
   },
   "parserOptions": {
     "project": "./frontend/tsconfig.json"

frontend/src/SettingsManager/index.css

@@ -3,16 +3,26 @@
 }
 
 .settings-manager__section-header {
-  background-color: #fbb360;
   border-radius: 2px 2px 0 0;
   font-weight: bold;
 }
 
-.settings-manager__section {
+.settings-manager__section--advanced {
   border: 1px solid #fbb360;
   border-radius: 4px;
+  margin-bottom: 4px;
 }
 
 .settings-manager__section-body {
   padding: 10px 10px 0 10px;
-}
+}
+
+.settings-manager__about {
+  margin-top: 16px;
+  text-align: center;
+  font-size: .8rem;
+}
+
+.settings-manager__about-github-button {
+  font-size: .8rem;
+}

frontend/src/SettingsManager/index.tsx

@@ -1,32 +1,31 @@
-import { NumericInput, FormGroup, Tag } from '@blueprintjs/core';
+import { NumericInput, FormGroup, Tag, Button } from '@blueprintjs/core';
 import { useEffect, useState } from 'react';
 
-import { GetPort, SetPort } from '../../wailsjs/go/config/config';
 import './index.css';
+
+import { GetPort, SetPort, GetVersion } from '../../wailsjs/go/config/config';
+import { BrowserOpenURL } from '../../wailsjs/runtime/runtime';
 import { AppToaster } from '../common/toaster';
 
 export function SettingsManager() {
   const [state, setState] = useState({
     proxy: {
       port: 0,
     },
-    loading: true,
+    version: '',
   });
 
-  const fetchPort = async () => {
-    const port = await GetPort();
-    setState({ ...state, proxy: { port }, loading: false });
-  };
-
   useEffect(() => {
     (async () => {
-      await fetchPort();
+      const port = await GetPort();
+      const version = await GetVersion();
+      setState({ ...state, proxy: { port }, version });
     })();
   }, []);
 
   return (
     <div className="settings-manager">
-      <div className="settings-manager__section">
+      <div className="settings-manager__section--advanced">
         <Tag large intent="warning" fill className="settings-manager__section-header">
           Advanced
         </Tag>
@@ -59,6 +58,24 @@ export function SettingsManager() {
           </FormGroup>
         </div>
       </div>
+
+      <div className="settings-manager__about bp5-text-muted">
+        <div>
+          <strong>Zen</strong>
+        </div>
+        <div>Your Comprehensive Ad-Blocker and Privacy Guard</div>
+        <div>Version: {state.version}</div>
+        <div>© 2023 Ansar Smagulov</div>
+        <Button
+          minimal
+          small
+          icon="git-branch"
+          className="settings-manager__about-github-button"
+          onClick={() => BrowserOpenURL('https://github.com/anfragment/zen')}
+        >
+          GitHub
+        </Button>
+      </div>
     </div>
   );
 }

frontend/wailsjs/go/config/config.d.ts

@@ -8,6 +8,8 @@ export function GetFilterLists():Promise<Array<config.filterList>>;
 
 export function GetPort():Promise<number>;
 
+export function GetVersion():Promise<string>;
+
 export function RemoveFilterList(arg1:string):Promise<string>;
 
 export function Save():Promise<void>;

frontend/wailsjs/go/config/config.js

@@ -14,6 +14,10 @@ export function GetPort() {
   return window['go']['config']['config']['GetPort']();
 }
 
+export function GetVersion() {
+  return window['go']['config']['config']['GetVersion']();
+}
+
 export function RemoveFilterList(arg1) {
   return window['go']['config']['config']['RemoveFilterList'](arg1);
 }

main.go

@@ -2,12 +2,14 @@ package main
 
 import (
 	"embed"
+	"fmt"
 	"runtime"
 
 	"github.com/anfragment/zen/config"
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+	"github.com/wailsapp/wails/v2/pkg/options/mac"
 )
 
 //go:embed all:frontend/dist
@@ -32,6 +34,12 @@ func main() {
 			app,
 			&config.Config,
 		},
+		Mac: &mac.Options{
+			About: &mac.AboutInfo{
+				Title:   "Zen",
+				Message: fmt.Sprintf("Your Comprehensive Ad-Blocker and Privacy Guard\nVersion: %s\n© 2023 Ansar Smagulov", config.Version),
+			},
+		},
 		/*
 			As the app doesn't yet have a tray icon, the correct behaviour is to hide the window on close.
 			However, on Windows, setting this to true causes the taskbar icon to disappear without any apparent way to restore the window.