From 53a1692d313a1203ddbed3103b13375a8362bca3 Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Wed, 03 Jun 2026 22:39:30 +0800
Subject: [PATCH] Update about page review info for 2.1.27

---
 privatevoice.src/frontend/src/components/settings/AboutPage.svelte |   93 +++++++++++++++++++++++++++++++++-------------
 1 files changed, 66 insertions(+), 27 deletions(-)

diff --git a/privatevoice.src/frontend/src/components/settings/AboutPage.svelte b/privatevoice.src/frontend/src/components/settings/AboutPage.svelte
index 78ddffd..8c814f4 100644
--- a/privatevoice.src/frontend/src/components/settings/AboutPage.svelte
+++ b/privatevoice.src/frontend/src/components/settings/AboutPage.svelte
@@ -3,8 +3,14 @@
   import { t } from '../../lib/i18n'
   import AppIcon from '../shared/AppIcon.svelte'
 
-  let version = $state('2.1.12')
+  let version = $state('2.1.27 (build 20260603.2238)')
   const currentYear = new Date().getFullYear().toString()
+  const aboutLinks = [
+    { labelKey: 'about.sourceProjectLabel', urlKey: 'about.sourceUrl' },
+    { labelKey: 'about.licenseLabel', urlKey: 'about.licenseUrl' },
+    { labelKey: 'about.privacyLabel', urlKey: 'about.privacyUrl' },
+    { labelKey: 'about.feedbackLabel', urlKey: 'about.feedbackUrl' },
+  ]
 
   async function loadVersion() {
     try {
@@ -14,29 +20,38 @@
   }
   loadVersion()
 
-  function openSupport() {
-    Call.ByName('voicesnap/services.AppService.OpenURL', t('about.supportUrl'))
+  function openUrl(url: string) {
+    Call.ByName('voicesnap/services.AppService.OpenURL', url)
   }
 </script>
 
 <div class="about">
   <div class="center-content">
-    <AppIcon size={80} elevated />
-    <h2 class="app-name">{t('app.name')}</h2>
-    <p class="app-secondary-name">{t('app.secondaryName')}</p>
+    <AppIcon size={72} elevated />
+    <h2 class="app-name">{t('about.displayName')}</h2>
     <p class="app-version">v{version}</p>
     <p class="app-tagline">{t('about.tagline')}</p>
     <p class="app-slogan">{t('about.slogan')}</p>
 
     <div class="legal">
+      <p>{t('about.offlineText')}</p>
+      <p>{t('about.noDataText')}</p>
       <p>{t('about.legalText')}</p>
       <p>{t('about.legalDetails')}</p>
-      <button type="button" class="support-link" onclick={openSupport}>
-        {t('about.supportUrl')}
-      </button>
+
+      <div class="link-list">
+        {#each aboutLinks as item}
+          <div class="link-row">
+            <span class="link-label">{t(item.labelKey)}</span>
+            <button type="button" class="support-link" onclick={() => openUrl(t(item.urlKey))}>
+              {t(item.urlKey)}
+            </button>
+          </div>
+        {/each}
+      </div>
     </div>
 
-    <button type="button" class="support-btn" onclick={openSupport}>
+    <button type="button" class="support-btn" onclick={() => openUrl(t('about.feedbackUrl'))}>
       {t('about.openSupport')}
     </button>
   </div>
@@ -52,31 +67,25 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     min-height: calc(100vh - 40px);
+    padding: 28px 24px 18px;
     background: var(--color-bg-grouped-secondary);
     border-radius: var(--radius-md);
-    position: relative;
   }
 
   .center-content {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: min(420px, 100%);
-    margin-top: -20px;
+    width: min(560px, 100%);
   }
 
   .app-name {
     font-size: 22px;
     font-weight: 700;
     margin-top: 16px;
-  }
-
-  .app-secondary-name {
-    font-size: var(--font-size-sm);
-    color: var(--color-secondary-label);
-    margin-top: 3px;
+    text-align: center;
   }
 
   .app-version {
@@ -100,15 +109,38 @@
 
   .legal {
     width: 100%;
-    margin-top: 28px;
+    margin-top: 22px;
     color: var(--color-secondary-label);
     font-size: var(--font-size-sm);
     line-height: 1.65;
-    text-align: center;
+    text-align: left;
+  }
+
+  .legal p + p {
+    margin-top: 10px;
+  }
+
+  .link-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  .link-row {
+    display: grid;
+    grid-template-columns: 96px minmax(0, 1fr);
+    gap: 10px;
+    align-items: baseline;
+  }
+
+  .link-label {
+    color: var(--color-tertiary-label);
+    white-space: nowrap;
   }
 
   .support-link {
-    display: inline;
+    display: inline-block;
     padding: 0;
     border: none;
     background: transparent;
@@ -116,6 +148,7 @@
     font: inherit;
     cursor: pointer;
     word-break: break-all;
+    text-align: left;
   }
 
   .support-btn {
@@ -137,10 +170,9 @@
   }
 
   .bottom {
-    position: absolute;
-    bottom: 20px;
-    left: 30px;
-    right: 30px;
+    width: min(560px, 100%);
+    margin-top: auto;
+    padding-top: 22px;
     text-align: center;
   }
 
@@ -154,4 +186,11 @@
     font-size: var(--font-size-xs);
     color: var(--color-tertiary-label);
   }
+
+  @media (max-width: 520px) {
+    .link-row {
+      grid-template-columns: 1fr;
+      gap: 2px;
+    }
+  }
 </style>

--
Gitblit v1.9.3