refactor: improve UI & types

components/account/AccountFollowButton.vue

@@ -5,7 +5,7 @@ const { account } = defineProps<{
   account: Account
 }>()
 
-const isSelf = $computed(() => currentUser.value?.account?.id === account.id)
+const isSelf = $computed(() => currentUser.value?.account.id === account.id)
 const relationship = $(useRelationship(account))
 
 async function toggleFollow() {

components/publish/PublishWidget.vue

@@ -118,7 +118,7 @@ onUnmounted(() => {
     </template>
 
     <div p4 flex gap-4>
-      <NuxtLink w-12 h-12 :to="getAccountPath(currentUser.account!)">
+      <NuxtLink w-12 h-12 :to="getAccountPath(currentUser.account)">
         <AccountAvatar :account="currentUser.account" w-12 h-12 />
       </NuxtLink>
       <div
@@ -154,9 +154,11 @@ onUnmounted(() => {
         </div>
 
         <div flex="~ gap-2">
-          <button btn-action-icon @click="pickAttachments">
+          <CommonTooltip placement="bottom" content="Add images, a video or an audio file">
-            <div i-ri:upload-line />
+            <button btn-action-icon @click="pickAttachments">
-          </button>
+              <div i-ri:upload-line />
+            </button>
+          </CommonTooltip>
 
           <div flex-auto />
 

components/status/StatusActions.vue

@@ -14,7 +14,7 @@ const clipboard = useClipboard()
 const router = useRouter()
 const route = useRoute()
 
-const isAuthor = $computed(() => status.account.id === currentUser.value?.account?.id)
+const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
 
 // Use different states to let the user press different actions right after the other
 const isLoading = $ref({

components/user/UserSwitcher.vue

@@ -41,7 +41,7 @@ const sorted = computed(() => {
         @click="signout"
       >
         <div i-ri:logout-box-line />
-        Sign out {{ getAccountHandle(currentUser.account!) }}
+        Sign out {{ getAccountHandle(currentUser.account) }}
       </button>
     </div>
   </div>

composables/cache.ts

@@ -14,7 +14,7 @@ export function setCached(key: string, value: any, override = false) {
     cache.set(key, value)
 }
 
-export function fetchStatus(id: string) {
+export function fetchStatus(id: string): Promise<Status> {
   const key = `status:${id}`
   const cached = cache.get(key)
   if (cached)
@@ -28,7 +28,7 @@ export function fetchStatus(id: string) {
   return promise
 }
 
-export function fetchAccount(id: string) {
+export function fetchAccount(id: string): Promise<Account> {
   const key = `account:${id}`
   const cached = cache.get(key)
   if (cached)
@@ -42,7 +42,7 @@ export function fetchAccount(id: string) {
   return promise
 }
 
-export function fetchAccountByName(acct: string) {
+export function fetchAccountByName(acct: string): Promise<Account> {
   const key = `account:${acct}`
   const cached = cache.get(key)
   if (cached)

composables/statusDrafts.ts

@@ -14,7 +14,7 @@ export type DraftMap = Record<string, Draft>
 const allDrafts = useLocalStorage<Record<string, DraftMap>>(STORAGE_KEY_DRAFTS, {})
 
 export const currentUserDrafts = computed(() => {
-  if (!currentUser.value?.account?.id)
+  if (!currentUser.value?.account.id)
     return {}
   const id = `${currentUser.value.account.acct}@${currentUser.value.server}`
   if (!allDrafts.value[id])

composables/users.ts

@@ -1,3 +1,4 @@
+import type { AccountCredentials } from 'masto'
 import { login as loginMasto } from 'masto'
 import type { UserLogin } from '~/types'
 import { DEFAULT_SERVER, STORAGE_KEY_CURRENT_USER, STORAGE_KEY_USERS } from '~/constants'
@@ -20,7 +21,7 @@ export const currentServer = computed<string>(() => currentUser.value?.server ||
 
 export const useUsers = () => users
 
-export async function loginTo(user: UserLogin) {
+export async function loginTo(user: UserLogin & { account?: AccountCredentials }) {
   const existing = users.value.findIndex(u => u.server === user.server && u.token === user.token)
   if (existing !== -1) {
     if (currentUserId.value === users.value[existing].account?.id)
@@ -48,7 +49,7 @@ export async function signout() {
   if (!currentUser.value)
     return
 
-  const index = users.value.findIndex(u => u.account?.id === currentUser.value?.account?.id)
+  const index = users.value.findIndex(u => u.account?.id === currentUser.value?.account.id)
   if (index === -1)
     return
 

pages/@[account]/followers.vue

@@ -3,7 +3,7 @@ const params = useRoute().params
 const accountName = $computed(() => params.account as string)
 
 const account = await fetchAccountByName(accountName)
-const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
+const paginator = account ? masto.accounts.getFollowersIterable(account.id, {}) : null
 </script>
 
 <template>

types/index.ts

@@ -13,7 +13,7 @@ export interface AppInfo {
 export interface UserLogin {
   server: string
   token: string
-  account?: AccountCredentials
+  account: AccountCredentials
 }
 
 export type PaginatorState = 'idle' | 'loading' | 'done' | 'error'