feat: add social app

src/components/Social.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="flex items-center justify-center">
+    <q-btn
+      v-for="social in socials"
+      :key="social.href"
+      :href="social.href"
+      target="_blank"
+      round
+      unelevated
+    >
+      <component :is="social.icon" class="size-1.5em" />
+    </q-btn>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LogosDiscord from "~icons/logos/discord-icon"
+import LogosFacebook from "~icons/logos/facebook"
+import LogosGithub from "~icons/logos/github-octocat"
+import LogosTwitter from "~icons/logos/twitter"
+
+const socials = [
+  { icon: LogosTwitter, href: "https://twitter.com/tachib_shin" },
+  { icon: LogosGithub, href: "https://github.com/manga-raiku" },
+  { icon: LogosDiscord, href: "https://discord.gg/tachib_shin" },
+  { icon: LogosFacebook, href: "https://facebook.com/manga-raiku" }
+]
+</script>

src/components/app/AppHeaderSearch.vue

@@ -42,7 +42,7 @@
 
     <transition name="q-transition--fade">
       <ul
-        class="absolute w-full  bg-[rgba(0,0,0,.5)] backdrop-filter backdrop-blur-12px rounded-xl left-0 max-h-[80vh] overflow-y-auto scrollbar-custom pt-2 py-4 top-[calc(100%+8px)] !shadow-8"
+        class="absolute w-full bg-[rgba(0,0,0,.5)] backdrop-filter backdrop-blur-12px rounded-xl left-0 max-h-[80vh] overflow-y-auto scrollbar-custom pt-2 py-4 top-[calc(100%+8px)] !shadow-8"
         v-show="focusing"
         @click.stop.prevent
         @mousedown="

src/components/app/AppHeaderUser.vue

@@ -178,6 +178,8 @@
                 </q-item-section>
               </q-item>
             </template>
+
+            <Social v-if="!APP_NATIVE_MOBILE" />
           </q-list>
 
           <q-list v-if="tabMenuAccountActive === 'locale'">
@@ -258,12 +260,13 @@ import { version } from "app/package.json"
 import { QCircularProgress } from "quasar"
 import { Icons } from "src/Icons"
 import type { Icon } from "src/Icons"
+import { APP_NATIVE_MOBILE } from "src/constants"
 import { installedSW, updatingCache } from "src/logic/state-sw"
 import langs from "virtual:i18n-langs"
 
 import antDesignAppleOutlined from "~icons/ant-design/apple-outlined"
 import phTabsDuotone from "~icons/ph/tabs-duotone"
-Object.assign(self, { installedSW, updatingCache })
+
 defineOptions({
   inheritAttrs: false
 })

src/pages/app/about.vue

@@ -46,6 +46,8 @@ meta:
       <small class="text-gray-400 mt-10 text-12px text-center display-block">{{
         $t("ung-dung-thuoc-to-chuc-phi-loi-nhuan")
       }}</small>
+
+      <Social />
     </q-page>
   </div>
 </template>
@@ -88,5 +90,3 @@ const buttons = computed(() => [
   }
 ])
 </script>
-
-<style></style>