feat: add about setting

Signed-off-by: Innei <i@innei.in>

icons/mgc/information_cute_re.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path fill="#10161F" d="M12 7a1 1 0 1 0 0 2zm.002 2a1 1 0 0 0 0-2zM11 10a1 1 0 1 0 0 2zm1.5 8a1 1 0 1 0 0-2zm7.5-6a8 8 0 0 1-8 8v2c5.523 0 10-4.477 10-10zm-8 8a8 8 0 0 1-8-8H2c0 5.523 4.477 10 10 10zm-8-8a8 8 0 0 1 8-8V2C6.477 2 2 6.477 2 12zm8-8a8 8 0 0 1 8 8h2c0-5.523-4.477-10-10-10zm0 5h.002V7H12zm-1 2.5v5h2v-5zm.5-1.5H11v2h.5zm-.5 6.5a1.5 1.5 0 0 0 1.5 1.5v-2a.5.5 0 0 1 .5.5zm2-5a1.5 1.5 0 0 0-1.5-1.5v2a.5.5 0 0 1-.5-.5z"/></svg>

src/renderer/src/modules/settings/tabs/about.tsx

@@ -0,0 +1,40 @@
+import { repository } from "@pkg"
+import { Logo } from "@renderer/components/icons/logo"
+import { StyledButton } from "@renderer/components/ui/button"
+
+export const SettingAbout = () => (
+  <div>
+    <section>
+      <div className="my-4 font-medium text-theme-foreground/60">
+        Version
+      </div>
+      <div className="flex gap-3">
+        <Logo className="size-[52px]" />
+
+        <div className="flex grow flex-col">
+          <div className="text-lg font-bold">
+            {APP_NAME}
+            {" "}
+            {!import.meta.env.PROD ? `(${import.meta.env.MODE})` : ""}
+          </div>
+          <div>
+            <span className="rounded bg-muted px-2 py-1 text-xs">
+              {APP_VERSION}
+            </span>
+          </div>
+        </div>
+
+        <div className="shrink-0">
+          <StyledButton
+            variant="outline"
+            onClick={() => {
+              window.open(`${repository.url}/releases`, "_blank")
+            }}
+          >
+            Changelog
+          </StyledButton>
+        </div>
+      </div>
+    </section>
+  </div>
+)

src/renderer/src/pages/settings/(settings)/about.tsx

@@ -0,0 +1,9 @@
+import { SettingAbout } from "@renderer/modules/settings/tabs/about"
+import { defineSettingPage } from "@renderer/modules/settings/utils"
+
+export const loader = defineSettingPage({
+  iconName: "i-mgc-information-cute-re",
+  name: "About",
+  priority: 9999,
+})
+export const Component = () => <SettingAbout />