From 8d792d003ddad681e7b2f680d30a0128561ebd46 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 30 Jan 2023 11:58:18 +0100
Subject: [PATCH] refactor: make auto import more explicit

---
 components/help/HelpPreview.vue          |  2 +-
 components/publish/PublishAttachment.vue |  2 +-
 components/publish/PublishWidget.vue     |  2 +-
 components/user/UserSwitcher.vue         |  2 +-
 composables/about.ts                     |  2 +-
 composables/command.ts                   |  2 +-
 composables/content-render.ts            |  2 +-
 composables/masto/account.ts             |  4 ++--
 composables/masto/masto.ts               |  2 +-
 composables/screen.ts                    |  2 --
 composables/users.ts                     | 12 ++++++------
 pages/settings/about/index.vue           |  2 +-
 scripts/avatars.ts                       |  4 ++--
 13 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 90cc4e58..8e37f4f6 100644
--- a/components/help/HelpPreview.vue
+++ b/components/help/HelpPreview.vue
@@ -30,7 +30,7 @@ const emit = defineEmits<{
     </p>
     {{ $t('help.desc_para3') }}
     <p flex="~ gap-2 wrap" mxa>
-      <template v-for="team of teams" :key="team.github">
+      <template v-for="team of elkTeamMembers" :key="team.github">
         <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </NuxtLink>
diff --git a/components/publish/PublishAttachment.vue b/components/publish/PublishAttachment.vue
index fa29a2e7..3e1a29ec 100644
--- a/components/publish/PublishAttachment.vue
+++ b/components/publish/PublishAttachment.vue
@@ -34,7 +34,7 @@ const toggleApply = () => {
         text-white px2 py2 rounded-full cursor-pointer
         @click="$emit('remove')"
       >
-        <div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
+        <div i-ri:close-line text-3 text-6 md:text-3 />
       </div>
     </div>
     <div absolute right-2 bottom-2>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 9a055aa8..93eed711 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -147,7 +147,7 @@ defineExpose({
       >
         <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
           <button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
-            {{ acctToShortHandle(m) }}
+            {{ accountToShortHandle(m) }}
           </button>
         </ContentMentionGroup>
 
diff --git a/components/user/UserSwitcher.vue b/components/user/UserSwitcher.vue
index 21774835..e8a766f1 100644
--- a/components/user/UserSwitcher.vue
+++ b/components/user/UserSwitcher.vue
@@ -51,7 +51,7 @@ const clickUser = (user: UserLogin) => {
         :text="$t('user.sign_out_account', [getFullHandle(currentUser.account)])"
         icon="i-ri:logout-box-line rtl-flip"
         w-full
-        @click="signout"
+        @click="signOut"
       />
     </div>
   </div>
diff --git a/composables/about.ts b/composables/about.ts
index 89d9df79..d793c76f 100644
--- a/composables/about.ts
+++ b/composables/about.ts
@@ -7,7 +7,7 @@ export interface Team {
   mastodon: string
 }
 
-export const teams: Team[] = [
+export const elkTeamMembers: Team[] = [
   {
     github: 'antfu',
     display: 'Anthony Fu',
diff --git a/composables/command.ts b/composables/command.ts
index 6c19171b..da2c5a26 100644
--- a/composables/command.ts
+++ b/composables/command.ts
@@ -349,7 +349,7 @@ export const provideGlobalCommands = () => {
     icon: 'i-ri:logout-box-line',
 
     onActivate() {
-      signout()
+      signOut()
     },
   })
 }
diff --git a/composables/content-render.ts b/composables/content-render.ts
index 26d35073..3d736f84 100644
--- a/composables/content-render.ts
+++ b/composables/content-render.ts
@@ -21,7 +21,7 @@ export function contentToVNode(
   return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
 }
 
-export function nodeToVNode(node: Node): VNode | string | null {
+function nodeToVNode(node: Node): VNode | string | null {
   if (node.type === TEXT_NODE)
     return node.value
 
diff --git a/composables/masto/account.ts b/composables/masto/account.ts
index b97c4ba1..a1041ca3 100644
--- a/composables/masto/account.ts
+++ b/composables/masto/account.ts
@@ -7,14 +7,14 @@ export function getDisplayName(account: mastodon.v1.Account, options?: { rich?:
   return displayName.replace(/:([\w-]+?):/g, '')
 }
 
-export function acctToShortHandle(acct: string) {
+export function accountToShortHandle(acct: string) {
   return `@${acct.includes('@') ? acct.split('@')[0] : acct}`
 }
 
 export function getShortHandle({ acct }: mastodon.v1.Account) {
   if (!acct)
     return ''
-  return acctToShortHandle(acct)
+  return accountToShortHandle(acct)
 }
 
 export function getServerName(account: mastodon.v1.Account) {
diff --git a/composables/masto/masto.ts b/composables/masto/masto.ts
index c9726830..d64addaa 100644
--- a/composables/masto/masto.ts
+++ b/composables/masto/masto.ts
@@ -47,7 +47,7 @@ export function mastoLogin(masto: ElkMasto, user: Pick<UserLogin, 'server' | 'to
     setParams({
       streamingApiUrl: newInstance.urls.streamingApi,
     })
-    instances.value[server] = newInstance
+    instanceStorage.value[server] = newInstance
   })
 
   return instance
diff --git a/composables/screen.ts b/composables/screen.ts
index db0c2b2f..62406e56 100644
--- a/composables/screen.ts
+++ b/composables/screen.ts
@@ -2,6 +2,4 @@ import { breakpointsTailwind } from '@vueuse/core'
 
 export const breakpoints = useBreakpoints(breakpointsTailwind)
 
-export const isSmallScreen = breakpoints.smallerOrEqual('md')
-export const isMediumScreen = breakpoints.smallerOrEqual('lg')
 export const isMediumOrLargeScreen = breakpoints.between('sm', 'xl')
diff --git a/composables/users.ts b/composables/users.ts
index e0ff87b1..062fa401 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -43,16 +43,16 @@ const initializeUsers = async (): Promise<Ref<UserLogin[]> | RemovableRef<UserLo
 }
 
 const users = await initializeUsers()
-export const instances = useLocalStorage<Record<string, mastodon.v1.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
-export const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
+const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
 const currentUserHandle = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, mock ? mock.user.account.id : '')
+export const instanceStorage = useLocalStorage<Record<string, mastodon.v1.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
 
 export type ElkInstance = Partial<mastodon.v1.Instance> & {
   uri: string
   /** support GoToSocial */
   accountDomain?: string | null
 }
-export const getInstanceCache = (server: string): mastodon.v1.Instance | undefined => instances.value[server]
+export const getInstanceCache = (server: string): mastodon.v1.Instance | undefined => instanceStorage.value[server]
 
 export const currentUser = computed<UserLogin | undefined>(() => {
   if (currentUserHandle.value) {
@@ -65,7 +65,7 @@ export const currentUser = computed<UserLogin | undefined>(() => {
 })
 
 const publicInstance = ref<ElkInstance | null>(null)
-export const currentInstance = computed<null | ElkInstance>(() => currentUser.value ? instances.value[currentUser.value.server] ?? null : publicInstance.value)
+export const currentInstance = computed<null | ElkInstance>(() => currentUser.value ? instanceStorage.value[currentUser.value.server] ?? null : publicInstance.value)
 
 export function getInstanceDomain(instance: ElkInstance) {
   return instance.accountDomain || withoutProtocol(instance.uri)
@@ -231,7 +231,7 @@ export async function switchUser(user: UserLogin) {
   }
 }
 
-export async function signout() {
+export async function signOut() {
   // TODO: confirm
   if (!currentUser.value)
     return
@@ -246,7 +246,7 @@ export async function signout() {
     // Clear stale data
     clearUserLocalStorage()
     if (!users.value.some((u, i) => u.server === currentUser.value!.server && i !== index))
-      delete instances.value[currentUser.value.server]
+      delete instanceStorage.value[currentUser.value.server]
 
     await removePushNotifications(currentUser.value)
 
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 7524d7d2..8a8ade13 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -115,7 +115,7 @@ const handleShowCommit = () => {
       </p>
 
       <SettingsItem
-        v-for="team in teams" :key="team.github"
+        v-for="team in elkTeamMembers" :key="team.github"
         :text="team.display"
         :to="`https://github.com/sponsors/${team.github}`"
         external target="_blank"
diff --git a/scripts/avatars.ts b/scripts/avatars.ts
index 03a387dd..9013cdf0 100644
--- a/scripts/avatars.ts
+++ b/scripts/avatars.ts
@@ -1,7 +1,7 @@
 import { join, resolve } from 'pathe'
 import fs from 'fs-extra'
 import { $fetch } from 'ohmyfetch'
-import { teams } from '../composables/about'
+import { elkTeamMembers } from '../composables/about'
 
 const avatarsDir = resolve('./public/avatars/')
 
@@ -24,7 +24,7 @@ async function download(url: string, fileName: string) {
 async function fetchAvatars() {
   await fs.ensureDir(avatarsDir)
 
-  await Promise.all(teams.reduce((acc, { github }) => {
+  await Promise.all(elkTeamMembers.reduce((acc, { github }) => {
     acc.push(...sizes.map(s => download(`https://github.com/${github}.png?size=${s}`, join(avatarsDir, `${github}-${s}x${s}.png`))))
     return acc
   }, [] as Promise<void>[]))