diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue index a96da68e4f..0c92a9dd99 100644 --- a/packages/frontend/src/components/MkFollowButton.vue +++ b/packages/frontend/src/components/MkFollowButton.vue @@ -37,6 +37,7 @@ import { useStream } from '@/stream'; import { i18n } from '@/i18n'; import { claimAchievement } from '@/scripts/achievements'; import { $i } from '@/account'; +import {userName} from "@/filters/user"; const props = withDefaults(defineProps<{ user: Misskey.entities.UserDetailed, @@ -73,7 +74,7 @@ async function onClick() { if (isFollowing) { const { canceled } = await os.confirm({ type: 'warning', - text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }), + text: i18n.t('unfollowConfirm', { name: userName(props.user) }), }); if (canceled) return; diff --git a/packages/frontend/src/components/global/MkUserName.vue b/packages/frontend/src/components/global/MkUserName.vue index 2b2a155039..a53f7c0dd8 100644 --- a/packages/frontend/src/components/global/MkUserName.vue +++ b/packages/frontend/src/components/global/MkUserName.vue @@ -1,10 +1,11 @@ diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 26349e3393..4f4d2f75a4 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -15,7 +15,12 @@
- +
+ + +
@@ -185,6 +190,7 @@ import { api } from '@/os'; import { isFfVisibility } from '@/scripts/is-ff-visibility'; import { defaultStore } from '@/store'; import { miLocalStorage } from '@/local-storage'; +import { editNickname } from '@/scripts/edit-nickname'; const XPhotos = defineAsyncComponent(() => import('./index.photos.vue')); const XActivity = defineAsyncComponent(() => import('./index.activity.vue')); @@ -409,12 +415,25 @@ onUnmounted(() => { color: #fff; > .name { - display: block; + display: flex; + gap: 8px; margin: 0; line-height: 32px; font-weight: bold; font-size: 1.8em; text-shadow: 0 0 8px #000; + + > .nickname-button { + -webkit-backdrop-filter: var(--blur, blur(8px)); + backdrop-filter: var(--blur, blur(8px)); + background: rgba(0, 0, 0, 0.2); + color: #ccc; + font-size: 0.7em; + line-height: 1; + width: 1.8em; + height: 1.8em; + border-radius: 100%; + } } > .bottom { @@ -607,7 +626,7 @@ onUnmounted(() => { font-size: 70%; } } - + >div { flex: 1; text-align: center; diff --git a/packages/frontend/src/scripts/edit-nickname.ts b/packages/frontend/src/scripts/edit-nickname.ts new file mode 100644 index 0000000000..fadfc27cee --- /dev/null +++ b/packages/frontend/src/scripts/edit-nickname.ts @@ -0,0 +1,19 @@ +import {User} from "misskey-js/built/entities"; +import {defaultStore} from "@/store"; +import * as os from '@/os'; + +export async function editNickname(user: User) { + const { result, canceled } = await os.inputText({ + title: 'ニックネームを編集', + placeholder: user.name || user.username, + default: defaultStore.state.nicknameMap[user.id] ?? null, + }); + if (canceled) return + const newMap = {...defaultStore.state.nicknameMap}; + if (result) { + newMap[user.id] = result; + } else { + delete newMap[user.id]; + } + await defaultStore.set('nicknameMap', newMap); +} diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 6b83852a8c..0e86e56139 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -376,6 +376,15 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: false, }, + nicknameEnabled: { + where: 'account', + default: true, + }, + nicknameMap: { + where: 'account', + default: {} as Record, + }, + // #endregion })); // TODO: 他のタブと永続化されたstateを同期