Skip to content

🚸 use vue router for profile links #5113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MrKrisKrisu merged 1 commit into from
Sep 27, 2026
Merged

🚸 use vue router for profile links #5113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions resources/tailwind-app/components/Status/StatusCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,42 +165,34 @@ watch(
{ immediate: true },
);

function escapeHtml(s: string): string {
return s
.replaceAll('&', '&')
.replaceAll('<', '&lt;')
.replaceAll('>', '&gt;')
.replaceAll('"', '&quot;')
.replaceAll("'", '&#039;');
}
type BodySegment = { text: string; username?: string };

const enrichedBody = computed(() => {
const bodySegments = computed<BodySegment[]>(() => {
const body = statusObject.value.body ?? '';
const mentions: MentionDto[] =
(statusObject.value as unknown as { bodyMentions?: MentionDto[] }).bodyMentions ?? [];

if (!body) return '';
if (!mentions.length) return escapeHtml(body);
if (!body) return [];

const userMap = new Map<string, UserResource>();
for (const m of mentions) {
if (m.user?.username) userMap.set(m.user.username.toLowerCase(), m.user);
}
if (!userMap.size) return escapeHtml(body);
if (!userMap.size) return [{ text: body }];

const mentionRegex = /@(\w+)/g;
let result = '';
const segments: BodySegment[] = [];
let lastIndex = 0;
let match: RegExpExecArray | null;
while ((match = mentionRegex.exec(body)) !== null) {
const user = userMap.get(match[1].toLowerCase());
if (!user) continue;
result += escapeHtml(body.slice(lastIndex, match.index));
result += `<a href="/@${encodeURIComponent(user.username)}" class="link text-primary [[data-theme=dark]_&]:text-red-400">${escapeHtml(match[0])}</a>`;
if (match.index > lastIndex) segments.push({ text: body.slice(lastIndex, match.index) });
segments.push({ text: match[0], username: user.username });
lastIndex = match.index + match[0].length;
}
result += escapeHtml(body.slice(lastIndex));
return result;
if (lastIndex < body.length) segments.push({ text: body.slice(lastIndex) });
return segments;
});

function toggleLike() {
Expand Down Expand Up @@ -366,12 +358,19 @@ const inProgress = computed(() => progress.value > 0 && progress.value < 100);
</div>

<!-- Status body -->
<!-- eslint-disable-next-line vue/no-v-html -->
<p
v-if="statusObject.body"
class="text-base text-base-content/80 italic whitespace-pre-wrap break-words [font-synthesis:none]"
v-html="enrichedBody"
/>
>
<template v-for="(segment, index) in bodySegments" :key="index">
<router-link
v-if="segment.username"
:to="{ name: 'user-profile', params: { username: segment.username } }"
class="link text-primary [[data-theme=dark]_&]:text-red-400"
>{{ segment.text }}</router-link
><template v-else>{{ segment.text }}</template>
</template>
</p>

<!-- Moderation notices -->
<div
Expand Down
8 changes: 4 additions & 4 deletions resources/tailwind-app/pages/Settings/Blocks/Blocks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,16 @@ fetchBlockedUsers();
<li v-for="user in blockedUsers" :key="user.id" class="list-row items-center">
<div class="avatar">
<div class="rounded-full w-12 h-12">
<a :href="`/@${user.username}`">
<router-link :to="{ name: 'user-profile', params: { username: user.username } }">
<img :src="user.profilePicture" :alt="user.displayName" />
</a>
</router-link>
</div>
</div>
<div class="list-col-grow">
<a :href="`/@${user.username}`">
<router-link :to="{ name: 'user-profile', params: { username: user.username } }">
<p class="font-semibold mb-0">{{ user.displayName }}</p>
<p class="text-sm opacity-75 mb-0">@{{ user.username }}</p>
</a>
</router-link>
</div>
<button class="btn btn-sm btn-primary" @click="unblock(user)">
<UserRoundCheck class="size-4" />
Expand Down
8 changes: 4 additions & 4 deletions resources/tailwind-app/pages/Settings/Followers/FollowRequests.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,16 @@ getFollowers();
<li v-for="follower in requests" :key="follower.id" class="list-row items-center">
<div class="avatar">
<div class="rounded-full w-12 h-12">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<img :src="follower.profilePicture" :alt="follower.displayName" />
</a>
</router-link>
</div>
</div>
<div class="list-col-grow">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<h6 class="mb-0">{{ follower.displayName }}</h6>
<p class="mb-0 opacity-75">@{{ follower.username }}</p>
</a>
</router-link>
</div>
<button role="button" class="btn btn-sm btn-error" @click="rejectFollower(follower)">
<UserMinus class="w-4 h-4" />
Expand Down
8 changes: 4 additions & 4 deletions resources/tailwind-app/pages/Settings/Followers/Followers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,16 @@ getFollowers();
<li v-for="follower in followers" :key="follower.id" class="list-row items-center">
<div class="avatar">
<div class="rounded-full w-12 h-12">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<img :src="follower.profilePicture" :alt="follower.displayName" />
</a>
</router-link>
</div>
</div>
<div class="list-col-grow">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<h6 class="mb-0">{{ follower.displayName }}</h6>
<p class="mb-0 opacity-75">@{{ follower.username }}</p>
</a>
</router-link>
</div>
<button role="button" class="btn btn-sm btn-error" @click="removeUser(follower)">
<UserMinus class="w-4 h-4" />
Expand Down
8 changes: 4 additions & 4 deletions resources/tailwind-app/pages/Settings/Followers/Followings.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,16 @@ getFollowings();
<li v-for="follower in followers" :key="follower.id" class="list-row items-center">
<div class="avatar">
<div class="rounded-full w-12 h-12">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<img :src="follower.profilePicture" :alt="follower.displayName" />
</a>
</router-link>
</div>
</div>
<div class="list-col-grow">
<a :href="`/@${follower.username}`">
<router-link :to="{ name: 'user-profile', params: { username: follower.username } }">
<h6 class="mb-0">{{ follower.displayName }}</h6>
<p class="mb-0 opacity-75">@{{ follower.username }}</p>
</a>
</router-link>
</div>
<button role="button" class="btn btn-sm btn-error" @click="removeUser(follower)">
<UserMinus class="w-4 h-4" />
Expand Down
8 changes: 4 additions & 4 deletions resources/tailwind-app/pages/Settings/Mutes/Mutes.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,16 @@ fetchMutedUsers();
<li v-for="user in mutedUsers" :key="user.id" class="list-row items-center">
<div class="avatar">
<div class="rounded-full w-12 h-12">
<a :href="`/@${user.username}`">
<router-link :to="{ name: 'user-profile', params: { username: user.username } }">
<img :src="user.profilePicture" :alt="user.displayName" />
</a>
</router-link>
</div>
</div>
<div class="list-col-grow">
<a :href="`/@${user.username}`">
<router-link :to="{ name: 'user-profile', params: { username: user.username } }">
<p class="font-semibold mb-0">{{ user.displayName }}</p>
<p class="text-sm opacity-75 mb-0">@{{ user.username }}</p>
</a>
</router-link>
</div>
<button class="btn btn-sm btn-primary" @click="unmute(user)">
<Eye class="size-4" />
Expand Down
14 changes: 10 additions & 4 deletions resources/tailwind-app/pages/Status/SingleStatus.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,18 +209,24 @@ watch(status, (data) => {
:key="user.id"
class="flex items-center gap-3 px-4 py-2 border-b border-base-200 last:border-0"
>
<a :href="`/@${user.username}`" class="shrink-0">
<router-link
:to="{ name: 'user-profile', params: { username: user.username } }"
class="shrink-0"
>
<img
:src="user.profilePicture"
:alt="user.username"
class="w-8 h-8 rounded-full object-cover"
loading="lazy"
/>
</a>
</router-link>
<div class="text-sm">
<a :href="`/@${user.username}`" class="link link-hover font-medium">
<router-link
:to="{ name: 'user-profile', params: { username: user.username } }"
class="link link-hover font-medium"
>
{{ user.username }}
</a>
</router-link>
<span class="text-base-content/50 ml-1">
{{
user.id === status.user.id
Expand Down
Loading