diff --git a/locales/en-US.yml b/locales/en-US.yml index 958a37c2722e02cfcf172eaaeea3e64ef04841af..ab09ccaf861cdd79016c809f923902b071188623 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -126,6 +126,7 @@ inChannelQuote: "Channel-only Quote" renoteToChannel: "Renote to channel" renoteToOtherChannel: "Renote to other channel" pinnedNote: "Pinned note" +pinnedOnly: "Pinned" pinned: "Pin to profile" you: "You" clickToShow: "Click to show" diff --git a/locales/index.d.ts b/locales/index.d.ts index 56f4150592e71da787229f3f9648807913313d66..742bab234156dcfe9e57bf318d0973330e1aca3b 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -520,6 +520,10 @@ export interface Locale extends ILocale { * ピン留ã‚ã•ã‚ŒãŸãƒŽãƒ¼ãƒˆ */ "pinnedNote": string; + /** + * Pinned + */ + "pinnedOnly": string; /** * ピン留゠*/ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 11d788c210a0d109fbd9b7ca67fe7365b8d74fbf..67a45805604837a0797b97296bd7859c732e448f 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -126,6 +126,7 @@ inChannelQuote: "ãƒãƒ£ãƒ³ãƒãƒ«å†…引用" renoteToChannel: "ãƒãƒ£ãƒ³ãƒãƒ«ã«ãƒªãƒŽãƒ¼ãƒˆ" renoteToOtherChannel: "ä»–ã®ãƒãƒ£ãƒ³ãƒãƒ«ã«ãƒªãƒŽãƒ¼ãƒˆ" pinnedNote: "ピン留ã‚ã•ã‚ŒãŸãƒŽãƒ¼ãƒˆ" +pinnedOnly: "Pinned" pinned: "ピン留ã‚" you: "ã‚ãªãŸ" clickToShow: "クリックã—ã¦è¡¨ç¤º" diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index e82ec0cb979c28eb783608f6f74bccd6123c6d95..2ec47889d69dfa2bb65c2d4de1df849f63f94187 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -125,10 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div class="contents _gaps"> - <div v-if="user.pinnedNotes.length > 0" class="_gaps"> - <MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/> - </div> - <MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo> + <MkInfo v-if="user.pinnedNotes.length === 0 && $i?.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo> <template v-if="narrow"> <MkLazy> <XFiles :key="user.id" :user="user"/> @@ -147,14 +144,27 @@ SPDX-License-Identifier: AGPL-3.0-only </div> --> <MkStickyContainer> <template #header> + <!-- You can't use v-if on these, as MkTab first *deletes* and replaces all children with native HTML elements. --> + <!-- Instead, we add a "no notes" placeholder and default to null (all notes) if there's nothing pinned. --> + <!-- It also converts all comments into text! --> <MkTab v-model="noteview" :class="$style.tab"> + <option value="pinned">{{ i18n.ts.pinnedOnly }}</option> <option :value="null">{{ i18n.ts.notes }}</option> <option value="all">{{ i18n.ts.all }}</option> <option value="files">{{ i18n.ts.withFiles }}</option> </MkTab> </template> <MkLazy> - <MkNotes :class="$style.tl" :noGap="true" :pagination="AllPagination"/> + <div v-if="noteview === 'pinned'" class="_gaps"> + <div v-if="user.pinnedNotes.length < 1" class="_fullinfo"> + <img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/> + <div>{{ i18n.ts.noNotes }}</div> + </div> + <div v-else class="_panel"> + <MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/> + </div> + </div> + <MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination"/> </MkLazy> </MkStickyContainer> </div> @@ -194,6 +204,7 @@ import { misskeyApi } from '@/scripts/misskey-api.js'; import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js'; import { useRouter } from '@/router/supplier.js'; import { getStaticImageUrl } from '@/scripts/media-proxy.js'; +import { infoImageUrl } from '@/instance.js'; const MkNote = defineAsyncComponent(() => (defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') : @@ -795,7 +806,7 @@ onUnmounted(() => { } .tab { - margin: calc(var(--margin) / 2) 0; + margin-bottom: calc(var(--margin) / 2); padding: calc(var(--margin) / 2) 0; background: color-mix(in srgb, var(--bg) 65%, transparent); backdrop-filter: var(--blur, blur(15px)); @@ -812,4 +823,8 @@ onUnmounted(() => { margin-left: 4px; color: var(--success); } + +.pinnedNote:not(:last-child) { + border-bottom: solid 0.5px var(--divider); +} </style>