Prefix username URLs with @

web/components/user-page.tsx

@@ -11,10 +11,11 @@ import clsx from 'clsx'
 
 export function UserLink(props: { displayName: string; className?: string }) {
   const { displayName, className } = props
+  // Fix this when users can change their own names
   const username = displayName.replace(/\s+/g, '')
 
   return (
-    <Link href={`/${username}`}>
+    <Link href={`/@${username}`}>
       <a
         className={clsx(
           'hover:underline hover:decoration-indigo-400 hover:decoration-2',

web/lib/firebase/contracts.ts

@@ -41,7 +41,7 @@ export function path(contract: Contract) {
   // For now, derive username from creatorName
   // Fix this when users can change their own names
   const username = contract.creatorName.replace(/\s+/g, '')
-  return `/${username}/${contract.id}`
+  return `/@${username}/${contract.id}`
 }
 
 export function compute(contract: Contract) {

web/pages/[username]/index.tsx

@@ -7,7 +7,8 @@ import Error from 'next/error'
 export default function UserProfile() {
   const router = useRouter()
   const [user, setUser] = useState<User | null>(null)
-  const { username } = router.query as { username: string }
+  const atUsername = router.query.username as string | undefined
+  const username = atUsername?.substring(1) || '' // Remove the initial @
   useEffect(() => {
     if (username) {
       getUserByUsername(username).then(setUser)