Use /@username routes by default

https://codeberg.org/silverpill/mitra/issues/22

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Changed
+
+- Use `/@username` routes by default.
+
 ## [1.15.0] - 2023-02-27
 
 ### Added

src/api/users.ts

@@ -121,8 +121,8 @@ export class ProfileWrapper {
         option.type === "monero-subscription"
       ) {
         return {
-          name: "profile-subscription",
-          params: { profileId: this.id },
+          name: "profile-by-acct-subscription",
+          params: { acct: this.acct },
         }
       }
     }

src/components/Post.vue

@@ -5,7 +5,7 @@
         class="floating-avatar"
         :href="post.account.url"
         :title="author.getDisplayName()"
-        @click="openProfile($event, post.account.id)"
+        @click="openProfile($event, post.account)"
       >
         <avatar :profile="post.account"></avatar>
       </a>
@@ -13,7 +13,7 @@
         class="display-name"
         :href="post.account.url"
         :title="author.getDisplayName()"
-        @click="openProfile($event, post.account.id)"
+        @click="openProfile($event, post.account)"
       >
         {{ author.getDisplayName() }}
       </a>
@@ -53,7 +53,7 @@
         :key="mention.id"
         :href="mention.url"
         :title="getActorAddress(mention)"
-        @click="openProfile($event, mention.id)"
+        @click="openProfile($event, mention)"
       >
         @{{ mention.username }}
       </a>
@@ -255,7 +255,11 @@ import {
   createRepost,
   deleteRepost,
 } from "@/api/posts"
-import { Permissions, ProfileWrapper } from "@/api/users"
+import {
+  Permissions,
+  Profile,
+  ProfileWrapper,
+} from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
 import CryptoAddress from "@/components/CryptoAddress.vue"
 import PostAttachment from "@/components/PostAttachment.vue"
@@ -301,13 +305,13 @@ let isWaitingForToken = $ref(false)
 const blockchain = $computed(() => instance?.blockchains[0])
 const author = $computed(() => new ProfileWrapper(props.post.account))
 
-function openProfile(event: Event, profileId: string) {
+function openProfile(event: Event, profile: Mention | Profile) {
   if (currentUser === null) {
     // Viewing as guest; do not override click handler
     return
   }
   event.preventDefault()
-  router.push({ name: "profile", params: { profileId: profileId } })
+  router.push({ name: "profile-by-acct", params: { acct: profile.acct } })
 }
 
 function highlight(postId: string | null) {

src/components/PostContent.vue

@@ -38,7 +38,7 @@ function configureInlineLinks() {
     if (mention) {
       mentionElement.addEventListener("click", (event: Event) => {
         event.preventDefault()
-        router.push({ name: "profile", params: { profileId: mention.id } })
+        router.push({ name: "profile-by-acct", params: { acct: mention.acct } })
       })
     }
   }

src/components/PostEditor.vue

@@ -3,7 +3,7 @@
     <router-link
       v-if="author"
       class="floating-avatar"
-      :to="{ name: 'profile', params: { profileId: author.id }}"
+      :to="{ name: 'profile-by-acct', params: { acct: author.acct }}"
     >
       <avatar :profile="author"></avatar>
     </router-link>

src/components/PostOrRepost.vue

@@ -3,7 +3,7 @@
     <div class="action">
       <img :src="require('@/assets/feather/repeat.svg')">
       <router-link
-        :to="{ name: 'profile', params: { profileId: post.account.id }}"
+        :to="{ name: 'profile-by-acct', params: { acct: post.account.acct }}"
         :title="getActorAddress(post.account)"
       >
         {{ author.getDisplayName() }}

src/components/SidebarLayout.vue

@@ -15,7 +15,7 @@
       <div id="profile">
         <router-link
           class="profile-link"
-          :to="{ name: 'profile', params: { profileId: currentUser.id }}"
+          :to="{ name: 'profile-by-acct', params: { acct: currentUser.acct }}"
         >
           <avatar :profile="currentUser"></avatar>
           <div class="profile-name">@{{ currentUser.username }}</div>

src/components/SubscriptionEthereum.vue

@@ -4,7 +4,7 @@
       <component
         class="profile-card"
         :is="sender.id ? 'router-link' : 'div'"
-        :to="{ name: 'profile', params: { profileId: sender.id }}"
+        :to="{ name: 'profile-by-acct', params: { acct: sender.acct }}"
       >
         <avatar :profile="sender"></avatar>
         <div class="display-name">{{ sender.getDisplayName() }}</div>
@@ -13,7 +13,10 @@
       <div class="separator">
         <img :src="require('@/assets/feather/arrow-right.svg')">
       </div>
-      <router-link class="profile-card" :to="{ name: 'profile', params: { profileId: recipient.id }}">
+      <router-link
+        class="profile-card"
+        :to="{ name: 'profile-by-acct', params: { acct: recipient.acct }}"
+      >
         <avatar :profile="recipient"></avatar>
         <div class="display-name">{{ recipient.getDisplayName() }}</div>
         <div class="wallet-address">{{ recipientEthereumAddress }}</div>

src/components/SubscriptionMonero.vue

@@ -4,7 +4,7 @@
       <component
         class="profile-card"
         :is="sender.id ? 'router-link' : 'div'"
-        :to="{ name: 'profile', params: { profileId: sender.id } }"
+        :to="{ name: 'profile-by-acct', params: { acct: sender.acct } }"
       >
         <avatar :profile="sender"></avatar>
         <div class="display-name">{{ sender.getDisplayName() }}</div>
@@ -12,7 +12,10 @@
       <div class="separator">
         <img :src="require('@/assets/feather/arrow-right.svg')">
       </div>
-      <router-link class="profile-card" :to="{ name: 'profile', params: { profileId: recipient.id }}">
+      <router-link
+        class="profile-card"
+        :to="{ name: 'profile-by-acct', params: { acct: recipient.acct }}"
+      >
         <avatar :profile="recipient"></avatar>
         <div class="display-name">{{ recipient.getDisplayName() }}</div>
       </router-link>

src/components/SubscriptionSettingsMonero.vue

@@ -110,8 +110,8 @@ async function loadSubscriptionSettings() {
 
 function getSubscriptionPagePath(): string {
   const route = router.resolve({
-    name: "profile-subscription",
-    params: { profileId: ensureCurrentUser().id },
+    name: "profile-by-acct-subscription",
+    params: { acct: ensureCurrentUser().acct },
   })
   return route.fullPath
 }

src/router/index.ts

@@ -100,12 +100,24 @@ const routes: Array<RouteRecordRaw> = [
     component: ProfileView,
     meta: { },
   },
+  {
+    path: "/@:acct(.*)",
+    name: "profile-by-acct",
+    component: ProfileView,
+    meta: { },
+  },
   {
     path: "/profile/:profileId/subscription",
     name: "profile-subscription",
     component: SubscriptionPage,
     meta: { },
   },
+  {
+    path: "/@:acct(.*)/subscription",
+    name: "profile-by-acct-subscription",
+    component: SubscriptionPage,
+    meta: { },
+  },
   {
     path: "/profile-directory",
     name: "profile-directory",
@@ -160,12 +172,6 @@ const routes: Array<RouteRecordRaw> = [
         .includes(Permissions.ManageSubscriptionOptions)
     },
   },
-  {
-    path: "/@:acct(.*)",
-    name: "profile-by-acct",
-    component: ProfileView,
-    meta: { },
-  },
   {
     path: "/:pathMatch(.*)*",
     redirect: { name: "home" },

src/views/IdentityProof.vue

@@ -67,7 +67,7 @@ async function submit() {
       did,
       signature,
     )
-    router.push({ name: "profile", params: { profileId: currentUser.id } })
+    router.push({ name: "profile-by-acct", params: { acct: currentUser.acct } })
   }
 }
 </script>

src/views/ImportFollows.vue

@@ -61,7 +61,7 @@ async function submit() {
   }
   isLoading = false
   errorMessage = null
-  router.push({ name: "profile", params: { profileId: currentUser.id } })
+  router.push({ name: "profile-by-acct", params: { acct: currentUser.acct } })
 }
 </script>
 

src/views/MoveFollowers.vue

@@ -73,7 +73,7 @@ async function move() {
   isLoading = false
   errorMessage = null
   setCurrentUser(user)
-  router.push({ name: "profile", params: { profileId: currentUser.id } })
+  router.push({ name: "profile-by-acct", params: { acct: currentUser.acct } })
 }
 </script>
 

src/views/NotificationList.vue

@@ -19,7 +19,7 @@
           <img v-else-if="notification.type === 'move'" :src="require('@/assets/feather/truck.svg')">
           <router-link
             :title="getSenderInfo(notification)"
-            :to="{ name: 'profile', params: { profileId: notification.account.id } }"
+            :to="{ name: 'profile-by-acct', params: { acct: notification.account.acct } }"
           >
             {{ getSenderName(notification) }}
           </router-link>
@@ -42,7 +42,7 @@
         <router-link
           v-else
           class="profile"
-          :to="{ name: 'profile', params: { profileId: notification.account.id } }"
+          :to="{ name: 'profile-by-acct', params: { acct: notification.account.acct } }"
         >
           <div class="floating-avatar">
             <avatar :profile="notification.account"></avatar>

src/views/PostOverlay.vue

@@ -13,7 +13,10 @@
         </div>
       </div>
       <div class="token-info">
-        <router-link class="profile" :to="{ name: 'profile', params: { profileId: post.account.id }}">
+        <router-link
+          class="profile"
+          :to="{ name: 'profile-by-acct', params: { acct: post.account.acct }}"
+        >
           <avatar :profile="post.account"></avatar>
           <div class="actor-address">@{{ actorAddress }}</div>
         </router-link>

src/views/Profile.vue

@@ -231,7 +231,7 @@
           <router-link
             v-for="profile in followList"
             :key="profile.id"
-            :to="{ name: 'profile', params: { profileId: profile.id } }"
+            :to="{ name: 'profile-by-acct', params: { acct: profile.acct } }"
           >
             <profile-list-item :profile="profile"></profile-list-item>
           </router-link>

src/views/ProfileDirectory.vue

@@ -5,7 +5,7 @@
         <router-link
           v-for="profile in profiles"
           class="profile-list-item"
-          :to="{ name: 'profile', params: { profileId: profile.id }}"
+          :to="{ name: 'profile-by-acct', params: { acct: profile.acct }}"
           :key="profile.id"
         >
           <profile-card :profile="profile" :compact="false"></profile-card>

src/views/ProfileForm.vue

@@ -217,7 +217,7 @@ async function save() {
   }
   isLoading = false
   setCurrentUser(user)
-  router.push({ name: "profile", params: { profileId: user.id } })
+  router.push({ name: "profile-by-acct", params: { acct: user.acct } })
 }
 </script>
 

src/views/SearchResultList.vue

@@ -14,7 +14,7 @@
           class="search-result"
           v-for="profile in profiles"
           :key="profile.id"
-          :to="{ name: 'profile', params: { profileId: profile.id } }"
+          :to="{ name: 'profile-by-acct', params: { acct: profile.acct } }"
         >
           <profile-list-item :profile="profile"></profile-list-item>
         </router-link>

src/views/SubscriptionPage.vue

@@ -13,7 +13,11 @@ import { onMounted } from "vue"
 import { $, $computed, $ref } from "vue/macros"
 import { useRoute } from "vue-router"
 
-import { getProfile, Profile } from "@/api/users"
+import {
+  lookupProfile,
+  getProfile,
+  Profile,
+} from "@/api/users"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import SubscriptionEthereum from "@/components/SubscriptionEthereum.vue"
 import SubscriptionMonero from "@/components/SubscriptionMonero.vue"
@@ -29,10 +33,17 @@ const blockchain = $computed(() => instance?.blockchains[0])
 
 onMounted(async () => {
   // Recipient
+  if (route.params.acct) {
+    profile = await lookupProfile(
+      authToken,
+      route.params.acct as string,
+    )
+  } else {
     profile = await getProfile(
       authToken,
       route.params.profileId as string,
     )
+  }
 })
 
 function isLocalUser(): boolean {