feat: add communitiy links

src/components/newtab/app/AppSidebar.vue

@@ -41,12 +41,7 @@
       </router-link>
     </div>
     <div class="flex-grow"></div>
-    <ui-popover
-      v-if="store.state.user"
-      trigger="mouseenter"
-      placement="right"
-      class="mb-4"
-    >
+    <ui-popover v-if="store.state.user" trigger="mouseenter" placement="right">
       <template #trigger>
         <span class="inline-block p-1 bg-box-transparent rounded-full">
           <img
@@ -59,6 +54,26 @@
       </template>
       {{ store.state.user.username }}
     </ui-popover>
+    <ui-popover trigger="mouseenter" placement="right" class="my-4">
+      <template #trigger>
+        <v-remixicon name="riGroupLine" />
+      </template>
+      <p class="mb-2">{{ t('home.communities') }}</p>
+      <ui-list class="w-40">
+        <ui-list-item
+          v-for="item in communities"
+          :key="item.name"
+          :href="item.url"
+          small
+          tag="a"
+          target="_blank"
+          rel="noopener"
+        >
+          <v-remixicon :name="item.icon" class="mr-2" />
+          {{ item.name }}
+        </ui-list-item>
+      </ui-list>
+    </ui-popover>
     <router-link v-tooltip:right.group="t('settings.menu.about')" to="/about">
       <v-remixicon class="cursor-pointer" name="riInformationLine" />
     </router-link>
@@ -71,6 +86,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useShortcut, getShortcut } from '@/composable/shortcut';
 import { useGroupTooltip } from '@/composable/groupTooltip';
+import { communities } from '@/utils/shared';
 
 useGroupTooltip();
 

src/lib/v-remixicon.js

@@ -2,213 +2,215 @@ import vRemixicon from 'v-remixicon';
 import {
   riH1,
   riH2,
+  riAB,
+  riBold,
+  riLink,
   riLinkM,
-  riTwitterLine,
+  riItalic,
+  riTable2,
+  riEyeLine,
+  riAddLine,
+  riSortAsc,
+  riKey2Line,
+  riTBoxLine,
+  riSaveLine,
+  riPlayLine,
+  riMoreLine,
+  riStopLine,
+  riSortDesc,
+  riFlagLine,
+  riGroupLine,
   riGuideLine,
   riChat3Line,
-  riDiscordLine,
   riEarthLine,
-  riClipboardLine,
   riLock2Line,
-  riBaseStationLine,
-  riKeyboardLine,
-  riLinkUnlinkM,
-  riFileEditLine,
-  riBold,
-  riItalic,
-  riStrikethrough2,
-  riDoubleQuotesL,
   riHome5Line,
   riShareLine,
-  riTable2,
-  riArrowLeftRightLine,
-  riFileUploadLine,
-  riLightbulbLine,
-  riSideBarLine,
-  riSideBarFill,
-  riFolderZipLine,
-  riHandHeartLine,
-  riCompass3Line,
-  riFileCopyLine,
-  riShieldKeyholeLine,
+  riBook3Line,
+  riPauseLine,
+  riFlowChart,
+  riMore2Line,
+  riMouseLine,
+  riFocusLine,
+  riParagraph,
+  riImageLine,
+  riCloseLine,
+  riCheckLine,
+  riTimerLine,
   riToggleLine,
   riFolderLine,
-  riInformationLine,
+  riGithubFill,
+  riEyeOffLine,
+  riWindowLine,
+  riPencilLine,
+  riGlobalLine,
+  riCursorLine,
+  riUploadLine,
+  riFocus3Line,
+  riTwitterLine,
+  riDiscordLine,
+  riLinkUnlinkM,
+  riSideBarLine,
+  riSideBarFill,
   riWindow2Line,
-  riArrowUpDownLine,
   riRefreshLine,
   riRefreshFill,
-  riBook3Line,
-  riGithubFill,
-  riCodeSSlashLine,
-  riRecordCircleLine,
-  riErrorWarningLine,
-  riEyeLine,
-  riEyeOffLine,
-  riCalendarLine,
-  riFileTextLine,
   riFilter2Line,
-  riArrowGoBackLine,
-  riArrowGoForwardLine,
-  riDatabase2Line,
-  riSettings3Line,
-  riWindowLine,
-  riKey2Line,
   riRestartLine,
-  riTBoxLine,
-  riAB,
-  riSaveLine,
-  riSubtractLine,
-  riPlayLine,
-  riPauseLine,
   riSearch2Line,
-  riMoreLine,
-  riDeleteBin7Line,
-  riPencilLine,
-  riExternalLinkLine,
-  riLink,
-  riArrowLeftSLine,
-  riArrowLeftLine,
   riEditBoxLine,
-  riStopLine,
-  riCheckboxCircleLine,
-  riFlowChart,
   riHistoryLine,
-  riArrowDropDownLine,
-  riAddLine,
-  riFullscreenLine,
-  riSortAsc,
-  riSortDesc,
-  riGlobalLine,
-  riMore2Line,
-  riInputCursorMove,
   riRepeat2Line,
-  riMouseLine,
+  riCommandLine,
+  riKeyboardLine,
+  riFileEditLine,
+  riCompass3Line,
+  riFileCopyLine,
+  riCalendarLine,
+  riFileTextLine,
+  riSubtractLine,
   riBracketsLine,
-  riEqualizerLine,
-  riFocusLine,
-  riCursorLine,
   riDownloadLine,
-  riFileDownloadLine,
-  riUploadLine,
-  riCommandLine,
-  riParagraph,
-  riImageLine,
-  riCloseLine,
-  riCloseCircleLine,
   riDragDropLine,
-  riCheckLine,
-  riFocus3Line,
-  riTimerLine,
-  riLightbulbFlashLine,
+  riClipboardLine,
+  riDoubleQuotesL,
+  riLightbulbLine,
+  riFolderZipLine,
+  riHandHeartLine,
+  riDatabase2Line,
+  riSettings3Line,
+  riArrowLeftLine,
+  riEqualizerLine,
+  riStrikethrough2,
+  riFileUploadLine,
+  riCodeSSlashLine,
+  riDeleteBin7Line,
+  riArrowLeftSLine,
+  riFullscreenLine,
   riFlashlightLine,
-  riFlagLine,
+  riBaseStationLine,
+  riInformationLine,
+  riArrowUpDownLine,
+  riArrowGoBackLine,
+  riInputCursorMove,
+  riCloseCircleLine,
+  riRecordCircleLine,
+  riErrorWarningLine,
+  riExternalLinkLine,
+  riFileDownloadLine,
+  riShieldKeyholeLine,
+  riArrowDropDownLine,
+  riArrowLeftRightLine,
+  riArrowGoForwardLine,
+  riCheckboxCircleLine,
+  riLightbulbFlashLine,
 } from 'v-remixicon/icons';
 
 export const icons = {
   riH1,
   riH2,
+  riAB,
+  riBold,
+  riLink,
   riLinkM,
-  riTwitterLine,
+  riItalic,
+  riTable2,
+  riEyeLine,
+  riAddLine,
+  riSortAsc,
+  riKey2Line,
+  riTBoxLine,
+  riSaveLine,
+  riPlayLine,
+  riMoreLine,
+  riStopLine,
+  riSortDesc,
+  riFlagLine,
+  riGroupLine,
   riGuideLine,
   riChat3Line,
-  riDiscordLine,
   riEarthLine,
-  riClipboardLine,
   riLock2Line,
-  riBaseStationLine,
-  riKeyboardLine,
-  riLinkUnlinkM,
-  riFileEditLine,
-  riBold,
-  riItalic,
-  riStrikethrough2,
-  riDoubleQuotesL,
   riHome5Line,
   riShareLine,
-  riTable2,
-  riArrowLeftRightLine,
-  riFileUploadLine,
-  riLightbulbLine,
-  riSideBarLine,
-  riSideBarFill,
-  riFolderZipLine,
-  riHandHeartLine,
-  riCompass3Line,
-  riFileCopyLine,
-  riShieldKeyholeLine,
+  riBook3Line,
+  riPauseLine,
+  riFlowChart,
+  riMore2Line,
+  riMouseLine,
+  riFocusLine,
+  riParagraph,
+  riImageLine,
+  riCloseLine,
+  riCheckLine,
+  riTimerLine,
   riToggleLine,
   riFolderLine,
-  riInformationLine,
+  riGithubFill,
+  riEyeOffLine,
+  riWindowLine,
+  riPencilLine,
+  riGlobalLine,
+  riCursorLine,
+  riUploadLine,
+  riFocus3Line,
+  riTwitterLine,
+  riDiscordLine,
+  riLinkUnlinkM,
+  riSideBarLine,
+  riSideBarFill,
   riWindow2Line,
-  riArrowUpDownLine,
   riRefreshLine,
   riRefreshFill,
-  riBook3Line,
-  riGithubFill,
-  riCodeSSlashLine,
-  riRecordCircleLine,
-  riErrorWarningLine,
-  riEyeLine,
-  riEyeOffLine,
-  riCalendarLine,
-  riFileTextLine,
   riFilter2Line,
-  riArrowGoBackLine,
-  riArrowGoForwardLine,
-  riDatabase2Line,
-  riSettings3Line,
-  riWindowLine,
-  riKey2Line,
   riRestartLine,
-  riTBoxLine,
-  riAB,
-  riSaveLine,
-  riSubtractLine,
-  riPlayLine,
-  riPauseLine,
   riSearch2Line,
-  riMoreLine,
-  riDeleteBin7Line,
-  riPencilLine,
-  riExternalLinkLine,
-  riLink,
-  riArrowLeftSLine,
-  riArrowLeftLine,
   riEditBoxLine,
-  riStopLine,
-  riCheckboxCircleLine,
-  riFlowChart,
   riHistoryLine,
-  riArrowDropDownLine,
-  riAddLine,
-  riFullscreenLine,
-  riSortAsc,
-  riSortDesc,
-  riGlobalLine,
-  riMore2Line,
-  riInputCursorMove,
   riRepeat2Line,
-  riMouseLine,
+  riCommandLine,
+  riKeyboardLine,
+  riFileEditLine,
+  riCompass3Line,
+  riFileCopyLine,
+  riCalendarLine,
+  riFileTextLine,
+  riSubtractLine,
   riBracketsLine,
-  riEqualizerLine,
-  riFocusLine,
-  riCursorLine,
   riDownloadLine,
-  riFileDownloadLine,
-  riUploadLine,
-  riCommandLine,
-  riParagraph,
-  riImageLine,
-  riCloseLine,
-  riCloseCircleLine,
   riDragDropLine,
-  riCheckLine,
-  riFocus3Line,
-  riTimerLine,
-  riLightbulbFlashLine,
+  riClipboardLine,
+  riDoubleQuotesL,
+  riLightbulbLine,
+  riFolderZipLine,
+  riHandHeartLine,
+  riDatabase2Line,
+  riSettings3Line,
+  riArrowLeftLine,
+  riEqualizerLine,
+  riStrikethrough2,
+  riFileUploadLine,
+  riCodeSSlashLine,
+  riDeleteBin7Line,
+  riArrowLeftSLine,
+  riFullscreenLine,
   riFlashlightLine,
-  riFlagLine,
+  riBaseStationLine,
+  riInformationLine,
+  riArrowUpDownLine,
+  riArrowGoBackLine,
+  riInputCursorMove,
+  riCloseCircleLine,
+  riRecordCircleLine,
+  riErrorWarningLine,
+  riExternalLinkLine,
+  riFileDownloadLine,
+  riShieldKeyholeLine,
+  riArrowDropDownLine,
+  riArrowLeftRightLine,
+  riArrowGoForwardLine,
+  riCheckboxCircleLine,
+  riLightbulbFlashLine,
   mdiEqual: 'M19,10H5V8H19V10M19,16H5V14H19V16Z',
   mdiVariable:
     'M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z',

src/locales/en/newtab.json

@@ -1,6 +1,7 @@
 {
   "home": {
-    "viewAll": "View all"
+    "viewAll": "View all",
+    "communities": "Communities"
   },
   "welcome": {
     "title": "Welcome to Automa! 🎉",

src/newtab/pages/settings/About.vue

@@ -51,27 +51,14 @@
 import { onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { useGroupTooltip } from '@/composable/groupTooltip';
+import { communities } from '@/utils/shared';
 
 useGroupTooltip();
 const store = useStore();
 
 const extensionVersion = chrome.runtime.getManifest().version;
 const links = [
-  {
-    name: 'GitHub',
-    icon: 'riGithubFill',
-    url: 'https://github.com/kholid060/automa',
-  },
-  {
-    name: 'Twitter',
-    icon: 'riTwitterLine',
-    url: 'https://twitter.com/AutomaApp',
-  },
-  {
-    name: 'Discord',
-    icon: 'riDiscordLine',
-    url: 'https://discord.gg/C6khwwTE84',
-  },
+  ...communities,
   { name: 'Website', icon: 'riGlobalLine', url: 'https://www.automa.site' },
   {
     name: 'Documentation',

src/utils/shared.js

@@ -924,6 +924,24 @@ export const supportLocales = [
   { id: 'fr', name: 'Français' },
 ];
 
+export const communities = [
+  {
+    name: 'GitHub',
+    icon: 'riGithubFill',
+    url: 'https://github.com/kholid060/automa',
+  },
+  {
+    name: 'Twitter',
+    icon: 'riTwitterLine',
+    url: 'https://twitter.com/AutomaApp',
+  },
+  {
+    name: 'Discord',
+    icon: 'riDiscordLine',
+    url: 'https://discord.gg/C6khwwTE84',
+  },
+];
+
 export const conditionBuilder = {
   valueTypes: [
     {