ユーザーのページでノートを表示するかハイライトを表示するか決められるようにした

locales/index.d.ts

@@ -543,6 +543,8 @@ export interface Locale {
     "deleteAll": string;
     "showFixedPostForm": string;
     "showFixedPostFormInChannel": string;
+    "FeaturedOrNote": string;
+    "FeaturedOrNoteInfo": string;
     "newNoteRecived": string;
     "sounds": string;
     "sound": string;

locales/ja-JP.yml

@@ -540,6 +540,8 @@ serverLogs: "サーバーログ"
 deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
 showFixedPostFormInChannel: "タイムライン上部に投稿フォームを表示する(チャンネル)"
+FeaturedOrNote: "ユーザーのページで最新のノートを表示する"
+FeaturedOrNoteInfo: "ユーザーのページに行ったときにハイライトか最新のノートを表示するかを選択することができます。 オフでハイライト オンで最新のノート です"
 newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
 sound: "サウンド"

packages/frontend/src/pages/settings/general.vue

@@ -30,6 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
 			<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
 			<MkSwitch v-model="showMediaTimeline">{{ i18n.ts.showMediaTimeline}}<template #caption>{{ i18n.ts.showMediaTimelineInfo }} </template></MkSwitch>
+      <MkSwitch v-model="FeaturedOrNote">{{ i18n.ts.FeaturedOrNote}}<template #caption>{{ i18n.ts.FeaturedOrNoteInfo }} </template></MkSwitch>
       <MkFolder>
 				<template #label>{{ i18n.ts.pinnedList }}</template>
 				<!-- 複数ピン止め管理できるようにしたいけどめんどいので一旦ひとつのみ -->
@@ -286,6 +287,7 @@ const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const enableonlyAndWithSave = computed(defaultStore.makeGetterSetter('onlyAndWithSave'));
 const showMediaTimeline = computed(defaultStore.makeGetterSetter('showMediaTimeline'));
 const showVisibilityColor = computed(defaultStore.makeGetterSetter('showVisibilityColor'))
+const FeaturedOrNote = computed(defaultStore.makeGetterSetter('FeaturedOrNote'))
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
 	miLocalStorage.removeItem('locale');
@@ -347,6 +349,7 @@ watch([
 	showMediaTimeline,
   showVisibilityColor,
   enableonlyAndWithSave,
+  FeaturedOrNote,
 ], async () => {
 	await reloadAsk();
 });

packages/frontend/src/pages/user/home.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkSpacer :contentMax="narrow ? 800 : 1100">
+  <MkSpacer :contentMax="narrow ? 800 : 1100">
     <div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }" style="container-type: inline-size;">
       <div class="main _gaps">
         <!-- TODO -->
@@ -23,7 +23,8 @@ SPDX-License-Identifier: AGPL-3.0-only
                 <MkUserName class="name" :user="user" :nowrap="true"/>
                 <div class="bottom">
                   <span class="username"><MkAcct :user="user" :detail="true"/></span>
-								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+                  <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
+                      class="ti ti-shield"></i></span>
                   <span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
                   <span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
                   <button v-if="!isEditingMemo && !memoDraft" class="_button add-note-button" @click="showMemoTextarea">
@@ -35,7 +36,8 @@ SPDX-License-Identifier: AGPL-3.0-only
               <div v-if="$i" class="actions">
                 <button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
                 <MkNotifyButton v-if="$i.id != user.id " :user="user"></MkNotifyButton>
-							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
+                <MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true"
+                                class="koudoku"/>
               </div>
             </div>
             <MkAvatar class="avatar" :user="user" indicator/>
@@ -43,13 +45,15 @@ SPDX-License-Identifier: AGPL-3.0-only
               <MkUserName :user="user" :nowrap="false" class="name"/>
               <div class="bottom">
                 <span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+                <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i
+                    class="ti ti-shield"></i></span>
                 <span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
                 <span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
               </div>
             </div>
             <div v-if="user.roles.length > 0" class="roles">
-						<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role" :style="{ '--color': role.color }">
+						<span v-for="role in user.roles" :key="role.id" v-tooltip="role.description" class="role"
+                  :style="{ '--color': role.color }">
 							<MkA v-adaptive-bg :to="`/roles/${role.id}`">
 								<img v-if="role.iconUrl" style="height: 1.3em; vertical-align: -22%;" :src="role.iconUrl"/>
 								{{ role.name }}
@@ -57,7 +61,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</span>
             </div>
             <div v-if="iAmModerator" class="moderationNote">
-						<MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')" v-model="moderationNote" manualSave>
+              <MkTextarea v-if="editModerationNote || (moderationNote != null && moderationNote !== '')"
+                          v-model="moderationNote" manualSave>
                 <template #label>{{ i18n.ts.moderationNote }}</template>
               </MkTextarea>
               <div v-else>
@@ -88,11 +93,17 @@ SPDX-License-Identifier: AGPL-3.0-only
               </dl>
               <dl v-if="user.birthday" class="field">
                 <dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ i18n.t('yearsOld', { age }) }})</dd>
+                <dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{
+                    i18n.t('yearsOld', {age})
+                  }})
+                </dd>
               </dl>
               <dl class="field">
                 <dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
-							<dd class="value">{{ dateString(user.createdAt) }} (<MkTime :time="user.createdAt"/>)</dd>
+                <dd class="value">{{ dateString(user.createdAt) }} (
+                  <MkTime :time="user.createdAt"/>
+                  )
+                </dd>
               </dl>
             </div>
             <div v-if="user.fields.length > 0" class="fields">
@@ -102,7 +113,8 @@ SPDX-License-Identifier: AGPL-3.0-only
                 </dt>
                 <dd class="value">
                   <Mfm :text="field.value" :author="user" :i="$i" :colored="false"/>
-								<i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink" class="ti ti-circle-check" :class="$style.verifiedLink"></i>
+                  <i v-if="user.verifiedLinks.includes(field.value)" v-tooltip:dialog="i18n.ts.verifiedLink"
+                     class="ti ti-circle-check" :class="$style.verifiedLink"></i>
                 </dd>
               </dl>
             </div>
@@ -132,22 +144,28 @@ SPDX-License-Identifier: AGPL-3.0-only
             <XFiles :key="user.id" :user="user"/>
             <XActivity :key="user.id" :user="user"/>
           </template>
+          <div v-if="!defaultStore.state.FeaturedOrNote">
             <div v-if="!disableNotes">
               <div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div>
               <MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/>
             </div>
           </div>
+          <div v-else>
+            <div style="margin-bottom: 8px;">{{ i18n.ts._sfx.note }}</div>
+            <MkNotes :class="$style.tl" :noGap="true" :pagination="Notes"/>
+          </div>
+        </div>
       </div>
       <div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
         <XFiles :key="user.id" :user="user"/>
         <XActivity :key="user.id" :user="user"/>
       </div>
     </div>
-</MkSpacer>
+  </MkSpacer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import {defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch} from 'vue';
 import * as Misskey from 'misskey-js';
 import MkNote from '@/components/MkNote.vue';
 import MkFollowButton from '@/components/MkFollowButton.vue';
@@ -157,21 +175,22 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkOmit from '@/components/MkOmit.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
-import { getScrollPosition } from '@/scripts/scroll.js';
+import {getScrollPosition} from '@/scripts/scroll.js';
-import { getUserMenu } from '@/scripts/get-user-menu.js';
+import {getUserMenu} from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
-import { userPage } from '@/filters/user.js';
+import {userPage} from '@/filters/user.js';
 import * as os from '@/os.js';
-import { useRouter } from '@/router.js';
+import {useRouter} from '@/router.js';
-import { i18n } from '@/i18n.js';
+import {i18n} from '@/i18n.js';
-import { $i, iAmModerator } from '@/account.js';
+import {$i, iAmModerator} from '@/account.js';
-import { dateString } from '@/filters/date.js';
+import {dateString} from '@/filters/date.js';
-import { confetti } from '@/scripts/confetti.js';
+import {confetti} from '@/scripts/confetti.js';
 import MkNotes from '@/components/MkNotes.vue';
-import { api } from '@/os.js';
+import {api} from '@/os.js';
-import { isFfVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
+import {isFfVisibleForMe} from '@/scripts/isFfVisibleForMe.js';
 import MkNotifyButton from "@/components/MkNotifyButton.vue";
 import MkRemoteInfoUpdate from "@/components/MkRemoteInfoUpdate.vue";
+import {defaultStore} from '@/store.js';
 
 function calcAge(birthdate: string): number {
   const date = new Date(birthdate);
@@ -212,7 +231,7 @@ let moderationNote = $ref(props.user.moderationNote);
 let editModerationNote = $ref(false);
 
 watch($$(moderationNote), async () => {
-	await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote });
+  await os.api('admin/update-user-note', {userId: props.user.id, text: moderationNote});
 });
 
 const pagination = {
@@ -222,11 +241,18 @@ const pagination = {
     userId: props.user.id,
   })),
 };
+const Notes ={
+  endpoint: 'users/notes' as const,
+  limit: 10,
+  params: computed(() => ({
+    userId: props.user.id,
+  })),
+}
 
 const style = $computed(() => {
   if (props.user.bannerUrl == null) return {};
   return {
-		backgroundImage: `url(${ props.user.bannerUrl })`,
+    backgroundImage: `url(${props.user.bannerUrl})`,
   };
 });
 
@@ -235,7 +261,7 @@ const age = $computed(() => {
 });
 
 function menu(ev) {
-	const { menu, cleanup } = getUserMenu(props.user, router);
+  const {menu, cleanup} = getUserMenu(props.user, router);
   os.popupMenu(menu, ev.currentTarget ?? ev.target).finally(cleanup);
 }
 

packages/frontend/src/store.ts

@@ -432,6 +432,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	FeaturedOrNote: {
+		where: 'device',
+		default: false
+	}
 }));
 
 // TODO: 他のタブと永続化されたstateを同期