refactor: make auto import more explicit

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>

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>

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>
 

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>

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',

composables/command.ts

@@ -349,7 +349,7 @@ export const provideGlobalCommands = () => {
     icon: 'i-ri:logout-box-line',
 
     onActivate() {
-      signout()
+      signOut()
     },
   })
 }

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
 

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) {

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

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')

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)
 

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"

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>[]))