Update about page review info for 2.1.27

Ariver

2026-06-03 53a1692d313a1203ddbed3103b13375a8362bca3

 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')}

      <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>