From 3955c9ebcda5ead41d505c3f106d140c9e55f89e Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 19 Dec 2024 18:56:00 +0100
Subject: [PATCH] refactor(about): [WIP] use new components

---
 front/src/components/About.vue | 1017 +++++++++++++++-----------------
 1 file changed, 487 insertions(+), 530 deletions(-)

diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index d4320c32d..e448118a4 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -10,6 +10,9 @@ import LogoText from '~/components/LogoText.vue'
 import type { NodeInfo } from '~/store/instance'
 import useMarkdown from '~/composables/useMarkdown'
 
+import Link from './ui/Link.vue'
+import Card from './ui/Card.vue'
+
 const store = useStore()
 const nodeinfo = computed(() => store.state.instance.nodeinfo)
 
@@ -74,8 +77,6 @@ const federationEnabled = computed(() => {
   const hasAnonymousCanListen = features.includes('federation')
   return hasAnonymousCanListen
 })
-
-const onDesktop = computed(() => window.innerWidth > 800)
 </script>
 
 <template>
@@ -83,547 +84,503 @@ const onDesktop = computed(() => window.innerWidth > 800)
     v-title="labels.title"
     class="main pusher page-about"
   >
-    <div class="ui container">
-      <div class="ui horizontally fitted basic stripe segment">
-        <div class="ui horizontally fitted basic very padded segment">
-          <div class="ui center aligned text container">
-            <div class="ui text container">
-              <div class="ui equal width compact stackable grid">
-                <div class="column" />
-                <div class="ten wide column">
-                  <div class="ui vertically fitted basic segment">
-                    <router-link to="/">
-                      <logo-text />
-                    </router-link>
-                  </div>
-                </div>
-                <div class="column" />
+    <!-- About funkwhale -->
+
+    <Link to="/">
+      <logo-text />
+    </Link>
+
+    <h2 class="header">
+      {{ t('components.About.header.funkwhale') }}
+    </h2>
+
+    <p>
+      {{ t('components.About.description.funkwhale') }}
+    </p>
+
+    <Layout flex>
+
+      <Card :title="t('components.About.header.signup')" v-if="!store.state.auth.authenticated">
+
+        <template v-if="openRegistrations">
+          <p>
+            {{ t('components.About.description.signup') }}
+          </p>
+          <p v-if="defaultUploadQuota">
+            {{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
+          </p>
+          <signup-form
+            button-classes="success"
+            :show-login="false"
+          />
+        </template>
+
+        <div v-else>
+          <p>
+            {{ t('components.About.help.closedRegistrations') }}
+          </p>
+
+          <a
+            target="_blank"
+            rel="noopener"
+            href="https://funkwhale.audio/#get-started"
+          >
+            {{ t('components.About.link.findOtherPod') }}
+            &nbsp;<i class="external alternate icon" />
+          </a>
+        </div>
+
+        <div
+          v-else
+          class="signup-form content"
+        >
+          <h3 class="header">
+            {{ t('components.About.header.signup') }}
+            <div class="ui positive message">
+              <div class="header">
+                {{ t('components.About.message.loggedIn') }}
               </div>
-              <h2 class="header">
-                {{ t('components.About.header.funkwhale') }}
-              </h2>
               <p>
-                {{ t('components.About.description.funkwhale') }}
+                {{ t('components.About.message.greeting', {username: store.state.auth.username}) }}
               </p>
             </div>
-          </div>
+          </h3>
         </div>
-        <div class="ui hidden divider" />
-        <div class="ui vertically fitted basic stripe segment">
-          <div class="ui two stackable cards">
-            <div class="ui card">
-              <div
-                v-if="!store.state.auth.authenticated"
-                class="signup-form content"
-              >
-                <h3 class="header">
-                  {{ t('components.About.header.signup') }}
-                </h3>
-                <template v-if="openRegistrations">
-                  <p>
-                    {{ t('components.About.description.signup') }}
-                  </p>
-                  <p v-if="defaultUploadQuota">
-                    {{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
-                  </p>
-                  <signup-form
-                    button-classes="success"
-                    :show-login="false"
-                  />
-                </template>
-                <div v-else>
-                  <p>
-                    {{ t('components.About.help.closedRegistrations') }}
-                  </p>
+      </Card>
 
-                  <a
-                    target="_blank"
-                    rel="noopener"
-                    href="https://funkwhale.audio/#get-started"
-                  >
-                    {{ t('components.About.link.findOtherPod') }}
-                    &nbsp;<i class="external alternate icon" />
-                  </a>
-                </div>
-              </div>
-              <div
-                v-else
-                class="signup-form content"
-              >
-                <h3 class="header">
-                  {{ t('components.About.header.signup') }}
-                  <div class="ui positive message">
-                    <div class="header">
-                      {{ t('components.About.message.loggedIn') }}
-                    </div>
-                    <p>
-                      {{ t('components.About.message.greeting', {username: store.state.auth.username}) }}
-                    </p>
-                  </div>
-                </h3>
-              </div>
-            </div>
-            <div class="ui card">
-              <section
-                :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
-                :style="headerStyle"
-              >
-                <h1>
-                  <i class="music icon" />
-                  {{ podName }}
-                </h1>
-              </section>
-              <div class="content pod-description">
-                <h3
-                  id="description"
-                  class="ui header"
-                >
-                  {{ t('components.About.header.aboutPod') }}
-                </h3>
-                <div
-                  v-if="shortDescription"
-                  class="sub header"
-                >
-                  {{ shortDescription }}
-                </div>
-                <p v-else>
-                  {{ t('components.About.placeholder.noDescription') }}
-                </p>
-
-                <template v-if="stats">
-                  <div class="statistics-container ui doubling grid">
-                    <div class="two column row">
-                      <div class="column">
-                        <span class="statistics-figure ui text">
-                          <span class="ui big text"><strong>{{ stats.users?.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                          <br>
-                          {{ stats.users ? t('components.About.stat.activeUsers', stats.users) : "—" }}
-                        </span>
-                      </div>
-                      <div class="column">
-                        <span class="statistics-figure ui text">
-                          <span class="ui big text"><strong>{{ stats.hours ? stats.hours.toLocaleString(store.state.ui.momentLocale) : "—" }}</strong></span>
-                          <br>
-                          {{ stats.hours ? t('components.About.stat.hoursOfMusic', stats.hours) : "—" }}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-
-                <router-link
-                  to="/about/pod"
-                  class="ui fluid basic secondary button"
-                >
-                  {{ t('components.About.link.learnMore') }}
-                </router-link>
-              </div>
-            </div>
-          </div>
-          <!-- TODO (wvffle): Remove style when migrate away from fomantic -->
-          <div
-            class="ui three stackable cards"
-            style="z-index: 1; position: relative;"
+      <Card title="{{ podName }}">
+        <section
+          :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
+          :style="headerStyle"
+        >
+          <h1>
+            <i class="music icon" />
+          </h1>
+        </section>
+        <div class="content pod-description">
+          <h3
+            id="description"
+            class="ui header"
           >
-            <router-link
-              to="/"
-              class="ui card"
-            >
-              <div class="content">
-                <h3
-                  id="description"
-                  class="ui header"
-                >
-                  {{ t('components.About.header.publicContent') }}
-                </h3>
-                <p>
-                  {{ t('components.About.description.publicContent') }}
-                </p>
-              </div>
-            </router-link>
-            <a
-              href="https://funkwhale.audio/#get-started"
-              class="ui card"
-              target="_blank"
-            >
-              <div class="content">
-                <h3
-                  id="description"
-                  class="ui header"
-                >
-                  {{ t('components.About.link.findOtherPod') }}
-                  &nbsp;<i class="external alternate icon" />
-                </h3>
-                <p>
-                  {{ t('components.About.description.publicContent') }}
-                </p>
-              </div>
-            </a>
-            <a
-              href="https://funkwhale.audio/apps"
-              class="ui card"
-              target="_blank"
-            >
-              <div class="content">
-                <h3
-                  id="description"
-                  class="ui header"
-                >
-                  {{ t('components.About.header.findApp') }}
-                  &nbsp;<i class="external alternate icon" />
-                </h3>
-                <p>
-                  {{ t('components.About.description.findApp') }}
-                </p>
-              </div>
-            </a>
-          </div>
+            {{ t('components.About.header.aboutPod') }}
+          </h3>
           <div
-      class="ui"
-      :class="{ container: onDesktop}"
+            v-if="shortDescription"
+            class="sub header"
+          >
+            {{ shortDescription }}
+          </div>
+          <p v-else>
+            {{ t('components.About.placeholder.noDescription') }}
+          </p>
+
+          <template v-if="stats">
+            <div class="statistics-container ui doubling grid">
+              <div class="two column row">
+                <div class="column">
+                  <span class="statistics-figure ui text">
+                    <span class="ui big text"><strong>{{ stats.users?.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                    <br>
+                    {{ stats.users ? t('components.About.stat.activeUsers', stats.users) : "—" }}
+                  </span>
+                </div>
+                <div class="column">
+                  <span class="statistics-figure ui text">
+                    <span class="ui big text"><strong>{{ stats.hours ? stats.hours.toLocaleString(store.state.ui.momentLocale) : "—" }}</strong></span>
+                    <br>
+                    {{ stats.hours ? t('components.About.stat.hoursOfMusic', stats.hours) : "—" }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <router-link
+            to="/about/pod"
+            class="ui fluid basic secondary button"
+          >
+            {{ t('components.About.link.learnMore') }}
+          </router-link>
+        </div>
+      </Card>
+
+    </Layout>
+
+
+    <Layout flex>
+
+      <Card
+        to="/"
+        :title="t('components.About.header.publicContent')"
+      >
+        <!-- TODO: Link to Explore page? -->
+        {{ t('components.About.description.publicContent') }}
+      </Card>
+
+      <Card
+        :title="t('components.About.link.findOtherPod')"
+        to="https://funkwhale.audio/#get-started"
+      >
+          <h3
+            id="description"
+            class="ui header"
+          >
+            <i class="external alternate icon" />
+          </h3>
+          {{ t('components.About.description.publicContent') }}
+      </Card>
+
+      <Card
+        :title="t('components.About.header.findApp')"
+        to="https://funkwhale.audio/apps"
+      >
+          <h3
+            id="description"
+            class="ui header"
+          >
+            <i class="external alternate icon" />
+          </h3>
+          {{ t('components.About.description.findApp') }}
+      </Card>
+
+
+    </Layout>
+
+
+    <section
+      :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
+      :style="headerStyle"
     >
-      <div class="ui horizontally fitted stripe basic segment">
-        <div class="ui basic vertically fitted stripe segment content">
-          <section
-            :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
-            :style="headerStyle"
+      <h1>
+        <i class="music icon" />
+        {{ podName }}
+      </h1>
+    </section>
+
+
+    <!-- About Pod -->
+    <div class="about-pod-info-container">
+      <div class="about-pod-info-toc">
+        <div class="ui vertical pointing secondary menu">
+          <router-link
+            to="/about/pod"
+            class="item"
           >
-            <h1>
-              <i class="music icon" />
-              {{ podName }}
-            </h1>
-          </section>
-        </div>
-        <div class="ui basic vertically fitted stripe segment content">
-          <!-- See layout in _about.scss -->
-          <div class="about-pod-info-container">
-            <div class="about-pod-info-toc">
-              <div class="ui vertical pointing secondary menu">
-                <router-link
-                  to="/about/pod"
-                  class="item"
-                >
-                  {{ t('components.AboutPod.link.about') }}
-                </router-link>
-                <router-link
-                  to="/about/pod#rules"
-                  class="item"
-                >
-                  {{ t('components.AboutPod.link.rules') }}
-                </router-link>
-                <router-link
-                  to="/about/pod#terms"
-                  class="item"
-                >
-                  {{ t('components.AboutPod.link.terms') }}
-                </router-link>
-                <router-link
-                  to="/about/pod#features"
-                  class="item"
-                >
-                  {{ t('components.AboutPod.link.features') }}
-                </router-link>
-                <router-link
-                  v-if="stats"
-                  to="/about/pod#statistics"
-                  class="item"
-                >
-                  {{ t('components.AboutPod.link.statistics') }}
-                </router-link>
-              </div>
-            </div>
-
-            <div class="about-pod-info">
-              <h2
-                id="description about-this-pod"
-                class="ui header"
-              >
-                {{ t('components.AboutPod.header.about') }}
-              </h2>
-              <sanitized-html
-                v-if="longDescription"
-                :html="longDescription"
-              />
-              <p v-else>
-                {{ t('components.AboutPod.placeholder.noDescription') }}
-              </p>
-
-              <h3
-                id="rules"
-                class="ui header"
-              >
-                {{ t('components.AboutPod.header.rules') }}
-              </h3>
-              <sanitized-html
-                v-if="rules"
-                :html="rules"
-              />
-              <p v-else>
-                {{ t('components.AboutPod.placeholder.noRules') }}
-              </p>
-
-              <h3
-                id="terms"
-                class="ui header"
-              >
-                {{ t('components.AboutPod.header.terms') }}
-              </h3>
-              <sanitized-html
-                v-if="terms"
-                :html="terms"
-              />
-              <p v-else>
-                {{ t('components.AboutPod.placeholder.noTerms') }}
-              </p>
-
-              <h3
-                id="features"
-                class="header"
-              >
-                {{ t('components.AboutPod.header.features') }}
-              </h3>
-              <div class="features-container ui two column stackable grid">
-                <div class="column">
-                  <table class="ui very basic table unstackable">
-                    <tbody>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.version') }}
-                        </td>
-                        <td
-                          v-if="version"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            {{ version }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            {{ t('components.AboutPod.notApplicable') }}
-                          </span>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.federation') }}
-                        </td>
-                        <td
-                          v-if="federationEnabled"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="check icon" />
-                            {{ t('components.AboutPod.feature.status.enabled') }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="x icon" />
-                            {{ t('components.AboutPod.feature.status.disabled') }}
-                          </span>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.allowList') }}
-                        </td>
-                        <td
-                          v-if="allowListEnabled"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="check icon" />
-                            {{ t('components.AboutPod.feature.status.enabled') }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="x icon" />
-                            {{ t('components.AboutPod.feature.status.disabled') }}
-                          </span>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-                <div class="column">
-                  <table class="ui very basic table unstackable">
-                    <tbody>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.anonymousAccess') }}
-                        </td>
-                        <td
-                          v-if="anonymousCanListen"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="check icon" />
-                            {{ t('components.AboutPod.feature.status.enabled') }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="x icon" />
-                            {{ t('components.AboutPod.feature.status.disabled') }}
-                          </span>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.registrations') }}
-                        </td>
-                        <td
-                          v-if="openRegistrations"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="check icon" />
-                            {{ t('components.AboutPod.feature.status.open') }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            <i class="x icon" />
-                            {{ t('components.AboutPod.feature.status.closed') }}
-                          </span>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>
-                          {{ t('components.AboutPod.feature.quota') }}
-                        </td>
-                        <td
-                          v-if="defaultUploadQuota"
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            {{ defaultUploadQuota }}
-                          </span>
-                        </td>
-                        <td
-                          v-else
-                          class="right aligned"
-                        >
-                          <span class="features-status ui text">
-                            {{ t('components.AboutPod.notApplicable') }}
-                          </span>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <template v-if="stats">
-                <h3
-                  id="statistics"
-                  class="header"
-                >
-                  {{ t('components.AboutPod.header.statistics') }}
-                </h3>
-                <div class="statistics-container">
-                  <div
-                    v-if="stats.hours"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.hours.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
-                    </span>
-                  </div>
-                  <div
-                    v-if="stats.data.artists"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.data.artists.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.artistsCount', stats.data.artists) }}
-                    </span>
-                  </div>
-                  <div
-                    v-if="stats.data.albums"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.data.albums.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.albumsCount', stats.data.albums) }}
-                    </span>
-                  </div>
-                  <div
-                    v-if="stats.data.tracks"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.data.tracks.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.tracksCount', stats.data.tracks) }}
-                    </span>
-                  </div>
-                  <div
-                    v-if="stats.users"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.users.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.activeUsers', stats.users) }}
-                    </span>
-                  </div>
-                  <div
-                    v-if="stats.data.listenings"
-                    class="statistics-statistic"
-                  >
-                    <span class="statistics-figure ui text">
-                      <span class="ui big text"><strong>{{ stats.data.listenings.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
-                      <br>
-                      {{ t('components.AboutPod.stat.listeningsCount', stats.data.listenings) }}
-                    </span>
-                  </div>
-                </div>
-              </template>
-
-              <template v-if="contactEmail">
-                <h3
-                  id="contact"
-                  class="ui header"
-                >
-                  {{ t('components.AboutPod.header.contact') }}
-                </h3>
-                <a
-                  v-if="contactEmail"
-                  :href="`mailto:${contactEmail}`"
-                >
-                  {{ t('components.AboutPod.message.contact', { contactEmail }) }}
-                </a>
-              </template>
-
-              <div class="ui hidden divider" />
-            </div>
-          </div>
+            {{ t('components.AboutPod.link.about') }}
+          </router-link>
+          <router-link
+            to="/about/pod#rules"
+            class="item"
+          >
+            {{ t('components.AboutPod.link.rules') }}
+          </router-link>
+          <router-link
+            to="/about/pod#terms"
+            class="item"
+          >
+            {{ t('components.AboutPod.link.terms') }}
+          </router-link>
+          <router-link
+            to="/about/pod#features"
+            class="item"
+          >
+            {{ t('components.AboutPod.link.features') }}
+          </router-link>
+          <router-link
+            v-if="stats"
+            to="/about/pod#statistics"
+            class="item"
+          >
+            {{ t('components.AboutPod.link.statistics') }}
+          </router-link>
         </div>
       </div>
-    </div>
+
+      <div class="about-pod-info">
+        <h2
+          id="description about-this-pod"
+          class="ui header"
+        >
+          {{ t('components.AboutPod.header.about') }}
+        </h2>
+        <sanitized-html
+          v-if="longDescription"
+          :html="longDescription"
+        />
+        <p v-else>
+          {{ t('components.AboutPod.placeholder.noDescription') }}
+        </p>
+
+        <h3
+          id="rules"
+          class="ui header"
+        >
+          {{ t('components.AboutPod.header.rules') }}
+        </h3>
+        <sanitized-html
+          v-if="rules"
+          :html="rules"
+        />
+        <p v-else>
+          {{ t('components.AboutPod.placeholder.noRules') }}
+        </p>
+
+        <h3
+          id="terms"
+          class="ui header"
+        >
+          {{ t('components.AboutPod.header.terms') }}
+        </h3>
+        <sanitized-html
+          v-if="terms"
+          :html="terms"
+        />
+        <p v-else>
+          {{ t('components.AboutPod.placeholder.noTerms') }}
+        </p>
+
+        <h3
+          id="features"
+          class="header"
+        >
+          {{ t('components.AboutPod.header.features') }}
+        </h3>
+        <div class="features-container ui two column stackable grid">
+          <div class="column">
+            <table class="ui very basic table unstackable">
+              <tbody>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.version') }}
+                  </td>
+                  <td
+                    v-if="version"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      {{ version }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      {{ t('components.AboutPod.notApplicable') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.federation') }}
+                  </td>
+                  <td
+                    v-if="federationEnabled"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="check icon" />
+                      {{ t('components.AboutPod.feature.status.enabled') }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="x icon" />
+                      {{ t('components.AboutPod.feature.status.disabled') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.allowList') }}
+                  </td>
+                  <td
+                    v-if="allowListEnabled"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="check icon" />
+                      {{ t('components.AboutPod.feature.status.enabled') }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="x icon" />
+                      {{ t('components.AboutPod.feature.status.disabled') }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="column">
+            <table class="ui very basic table unstackable">
+              <tbody>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.anonymousAccess') }}
+                  </td>
+                  <td
+                    v-if="anonymousCanListen"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="check icon" />
+                      {{ t('components.AboutPod.feature.status.enabled') }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="x icon" />
+                      {{ t('components.AboutPod.feature.status.disabled') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.registrations') }}
+                  </td>
+                  <td
+                    v-if="openRegistrations"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="check icon" />
+                      {{ t('components.AboutPod.feature.status.open') }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      <i class="x icon" />
+                      {{ t('components.AboutPod.feature.status.closed') }}
+                    </span>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    {{ t('components.AboutPod.feature.quota') }}
+                  </td>
+                  <td
+                    v-if="defaultUploadQuota"
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      {{ defaultUploadQuota }}
+                    </span>
+                  </td>
+                  <td
+                    v-else
+                    class="right aligned"
+                  >
+                    <span class="features-status ui text">
+                      {{ t('components.AboutPod.notApplicable') }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
+
+        <template v-if="stats">
+          <h3
+            id="statistics"
+            class="header"
+          >
+            {{ t('components.AboutPod.header.statistics') }}
+          </h3>
+          <div class="statistics-container">
+            <div
+              v-if="stats.hours"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.hours.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.hoursOfMusic', stats.hours) }}
+              </span>
+            </div>
+            <div
+              v-if="stats.data.artists"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.data.artists.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.artistsCount', stats.data.artists) }}
+              </span>
+            </div>
+            <div
+              v-if="stats.data.albums"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.data.albums.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.albumsCount', stats.data.albums) }}
+              </span>
+            </div>
+            <div
+              v-if="stats.data.tracks"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.data.tracks.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.tracksCount', stats.data.tracks) }}
+              </span>
+            </div>
+            <div
+              v-if="stats.users"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.users.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.activeUsers', stats.users) }}
+              </span>
+            </div>
+            <div
+              v-if="stats.data.listenings"
+              class="statistics-statistic"
+            >
+              <span class="statistics-figure ui text">
+                <span class="ui big text"><strong>{{ stats.data.listenings.toLocaleString(store.state.ui.momentLocale) }}</strong></span>
+                <br>
+                {{ t('components.AboutPod.stat.listeningsCount', stats.data.listenings) }}
+              </span>
+            </div>
+          </div>
+        </template>
+
+        <template v-if="contactEmail">
+          <h3
+            id="contact"
+            class="ui header"
+          >
+            {{ t('components.AboutPod.header.contact') }}
+          </h3>
+          <a
+            v-if="contactEmail"
+            :href="`mailto:${contactEmail}`"
+          >
+            {{ t('components.AboutPod.message.contact', { contactEmail }) }}
+          </a>
+        </template>
+
+        <div class="ui hidden divider" />
       </div>
     </div>
   </main>