feat: sponsors in about page and nav footer

README.md

@@ -41,7 +41,7 @@ We are grateful for the generous sponsorship and help of:
 </a>
 <br><br>
 
-And all the companies and individuals sponsoring Elk Team members. If you're enjoying the app, consider sponsoring our team:
+And all the companies and individuals sponsoring Elk Team and the members. If you're enjoying the app, consider sponsoring us:
 
 - [Elk Team's GitHub Sponsors](https://github.com/sponsors/elk-zone)
 

components/nav/NavFooter.vue

@@ -26,6 +26,16 @@ function toggleDark() {
           @click="userSettings.zenMode = !userSettings.zenMode"
         />
       </CommonTooltip>
+      <CommonTooltip :content="$t('settings.about.sponsor_action')">
+        <NuxtLink
+          flex
+          text-lg
+          i-ri-heart-3-line hover="i-ri-heart-3-fill text-rose"
+          :aria-label="$t('settings.about.sponsor_action')"
+          href="https://github.com/sponsors/elk-zone"
+          target="_blank"
+        />
+      </CommonTooltip>
     </div>
     <div>
       <i18n-t v-if="isHydrated" keypath="nav.built_at">

components/settings/SettingsItem.vue

@@ -62,7 +62,7 @@ useCommand({
             />
           </slot>
         </div>
-        <div space-y-1>
+        <div flex="~ col gap-0.5">
           <p>
             <slot>
               <span>{{ text }}</span>

locales/en-US.json

@@ -236,7 +236,13 @@
   "settings": {
     "about": {
       "label": "About",
-      "meet_the_team": "Meet the team"
+      "meet_the_team": "Meet the team",
+      "sponsor_action": "Sponsor us",
+      "sponsor_action_desc": "To support the team developing Elk",
+      "sponsors": "Sponsors",
+      "sponsors_body_1": "Elk is made possible thanks the generous sponsoring and help of:",
+      "sponsors_body_2": "And all the companies and individuals sponsoring Elk Team and the members.",
+      "sponsors_body_3": "If you're enjoying the app, consider sponsoring us:"
     },
     "account_settings": {
       "description": "Edit your account settings in Mastodon UI",

pages/settings/about/index.vue

@@ -54,7 +54,7 @@ const handleShowCommit = () => {
     <SettingsItem
       :text="$t('nav.show_intro')"
       icon="i-ri:article-line"
-      cursor-pointer
+      cursor-pointer large
       @click="openPreviewHelp"
     />
 
@@ -62,27 +62,58 @@ const handleShowCommit = () => {
       text="Mastodon"
       icon="i-ri:mastodon-line"
       to="/m.webtoo.ls/@elk"
-      external target="_blank"
+      external large target="_blank"
     />
     <SettingsItem
       text="Discord"
       icon="i-ri:discord-fill"
       to="https://chat.elk.zone"
-      external target="_blank"
+      external large target="_blank"
     />
     <SettingsItem
       text="GitHub"
       icon="i-ri:github-fill"
       to="https://github.com/elk-zone"
-      external target="_blank"
+      external large target="_blank"
     />
 
     <div h-1px bg-border my2 />
 
+    <p px5 py3 font-bold text-lg>
+      {{ $t('settings.about.sponsors') }}
+    </p>
+
+    <p px5 text-secondary>
+      {{ $t('settings.about.sponsors_body_1') }}
+    </p>
+
+    <LazySettingsSponsorsList />
+
+    <p px5 mb1 text-secondary>
+      {{ $t('settings.about.sponsors_body_2') }}
+    </p>
+    <p px5 mb2 text-secondary>
+      {{ $t('settings.about.sponsors_body_3') }}
+    </p>
+
+    <SettingsItem
+      :text="$t('settings.about.sponsor_action')"
+      to="https://github.com/sponsors/elk-zone"
+      :description="$t('settings.about.sponsor_action_desc')"
+      external large target="_blank"
+    >
+      <template #icon>
+        <div i-ri-heart-3-fill text-rose rounded-full w-8 h-8 height="32" width="32" />
+      </template>
+    </SettingsItem>
+
+    <div h-1px bg-border my2 />
+
     <template v-if="isHydrated">
       <p px5 py3 font-bold text-lg>
         {{ $t('settings.about.meet_the_team') }}
       </p>
+
       <SettingsItem
         v-for="team in teams" :key="team.github"
         :text="team.display"

pages/settings/users/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+/* eslint-disable no-alert */
 import { fileOpen } from 'browser-fs-access'
 import type { UserLogin } from '~/types'