From dd5dd6184a6640cd3f8a91582ea5673697e45e31 Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 13 Apr 2025 15:48:43 +0900 Subject: fix(frontend): keyval-storeの値が削除できずに処理が止まる問題を修正 (#15803) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): keyval-storeの値が削除できずに処理が止まる問題を修正 * Update Changelog * implement abortcontroller * fix lint --- packages/frontend/src/signout.ts | 28 ++++++++++++++++++++++++---- packages/frontend/src/utility/idb-proxy.ts | 5 +++++ 2 files changed, 29 insertions(+), 4 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/signout.ts b/packages/frontend/src/signout.ts index c9f9278369..60509d3d07 100644 --- a/packages/frontend/src/signout.ts +++ b/packages/frontend/src/signout.ts @@ -6,7 +6,8 @@ import { apiUrl } from '@@/js/config.js'; import { defaultMemoryStorage } from '@/memory-storage'; import { waiting } from '@/os.js'; -import { unisonReload, reloadChannel } from '@/utility/unison-reload.js'; +import { unisonReload } from '@/utility/unison-reload.js'; +import { clear } from '@/utility/idb-proxy.js'; import { $i } from '@/i.js'; export async function signout() { @@ -19,13 +20,30 @@ export async function signout() { localStorage.clear(); defaultMemoryStorage.clear(); - const idbPromises = ['MisskeyClient', 'keyval-store'].map((name, i, arr) => new Promise((res, rej) => { + const idbAbortController = new AbortController(); + const timeout = window.setTimeout(() => idbAbortController.abort(), 5000); + + const idbPromises = ['MisskeyClient'].map((name, i, arr) => new Promise((res, rej) => { const delidb = indexedDB.deleteDatabase(name); delidb.onsuccess = () => res(); delidb.onerror = e => rej(e); + delidb.onblocked = () => idbAbortController.signal.aborted && rej(new Error('Operation aborted')); })); - await Promise.all(idbPromises); + try { + await Promise.race([ + Promise.all([ + ...idbPromises, + // idb keyval-storeはidb-keyvalライブラリによる別管理 + clear(), + ]), + new Promise((_, rej) => idbAbortController.signal.addEventListener('abort', () => rej(new Error('Operation timed out')))), + ]); + } catch { + // nothing + } finally { + window.clearTimeout(timeout); + } //#region Remove service worker registration try { @@ -50,7 +68,9 @@ export async function signout() { .then(registrations => { return Promise.all(registrations.map(registration => registration.unregister())); }); - } catch (err) {} + } catch { + // nothing + } //#endregion unisonReload('/'); diff --git a/packages/frontend/src/utility/idb-proxy.ts b/packages/frontend/src/utility/idb-proxy.ts index 20f51660c7..350169a81d 100644 --- a/packages/frontend/src/utility/idb-proxy.ts +++ b/packages/frontend/src/utility/idb-proxy.ts @@ -9,6 +9,7 @@ import { get as iget, set as iset, del as idel, + clear as iclear, } from 'idb-keyval'; import { miLocalStorage } from '@/local-storage.js'; @@ -51,3 +52,7 @@ export async function del(key: string) { if (idbAvailable) return idel(key); return miLocalStorage.removeItem(`${PREFIX}${key}`); } + +export async function clear() { + if (idbAvailable) return iclear(); +} -- cgit v1.2.3-freya From f7195d54d0f4ab0de74aea199bd6a23175b3897c Mon Sep 17 00:00:00 2001 From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sun, 13 Apr 2025 16:59:01 +0900 Subject: fix(frontend): 自動バックアップが設定されていない環境では設定が消滅する旨の警告を出すように (#15802) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(frontend): 自動バックアップが設定されていない環境ではローカルの設定を削除しないように * Update Changelog * fix lint * fix: 警告を出すだけのみにする * fix * apply suggestion --- CHANGELOG.md | 1 + locales/index.d.ts | 4 ++++ locales/ja-JP.yml | 1 + packages/frontend/src/pages/settings/index.vue | 3 ++- packages/frontend/src/signout.ts | 10 ++++++---- 5 files changed, 14 insertions(+), 5 deletions(-) (limited to 'packages/frontend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ac8c57520..4c57d2ee56 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ ### Client - Fix: ログアウトした際に処理が終了しない問題を修正 +- Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように ### Server - Fix: システムアカウントの名前がサーバー名と同期されない問題を修正 diff --git a/locales/index.d.ts b/locales/index.d.ts index 868a6e2489..887627d905 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -3934,6 +3934,10 @@ export interface Locale extends ILocale { * ログアウトしますか？ */ "logoutConfirm": string; + /** + * ログアウトするとクライアントの設定情報がブラウザから消去されます。再ログイン時に設定情報を復元できるようにするためには、設定の自動バックアップを有効にしてください。 + */ + "logoutWillClearClientData": string; /** * 最終利用日時 */ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index c7a9fc8792..db01b9a4f9 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -979,6 +979,7 @@ document: "ドキュメント" numberOfPageCache: "ページキャッシュ数" numberOfPageCacheDescription: "多くすると利便性が向上しますが、負荷とメモリ使用量が増えます。" logoutConfirm: "ログアウトしますか？" +logoutWillClearClientData: "ログアウトするとクライアントの設定情報がブラウザから消去されます。再ログイン時に設定情報を復元できるようにするためには、設定の自動バックアップを有効にしてください。" lastActiveDate: "最終利用日時" statusbar: "ステータスバー" pleaseSelect: "選択してください" diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue index 5921a8c812..a11ae2a6f6 100644 --- a/packages/frontend/src/pages/settings/index.vue +++ b/packages/frontend/src/pages/settings/index.vue @@ -177,7 +177,8 @@ const menuDef = computed(() => [{ action: async () => { const { canceled } = await os.confirm({ type: 'warning', - text: i18n.ts.logoutConfirm, + title: i18n.ts.logoutConfirm, + text: i18n.ts.logoutWillClearClientData, }); if (canceled) return; signout(); diff --git a/packages/frontend/src/signout.ts b/packages/frontend/src/signout.ts index 60509d3d07..703c6fc534 100644 --- a/packages/frontend/src/signout.ts +++ b/packages/frontend/src/signout.ts @@ -4,7 +4,8 @@ */ import { apiUrl } from '@@/js/config.js'; -import { defaultMemoryStorage } from '@/memory-storage'; +import { cloudBackup } from '@/preferences/utility.js'; +import { store } from '@/store.js'; import { waiting } from '@/os.js'; import { unisonReload } from '@/utility/unison-reload.js'; import { clear } from '@/utility/idb-proxy.js'; @@ -13,12 +14,13 @@ import { $i } from '@/i.js'; export async function signout() { if (!$i) return; - // TODO: preferの自動バックアップがオンの場合、いろいろ消す前に強制バックアップ - waiting(); + if (store.s.enablePreferencesAutoCloudBackup) { + await cloudBackup(); + } + localStorage.clear(); - defaultMemoryStorage.clear(); const idbAbortController = new AbortController(); const timeout = window.setTimeout(() => idbAbortController.abort(), 5000); -- cgit v1.2.3-freya From 7c0806f208d85e29b9fc99f86844349e3708aa2d Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Apr 2025 15:36:53 +0900 Subject: feat(frontend): chat column Resolve #15830 --- CHANGELOG.md | 1 + locales/index.d.ts | 4 + locales/ja-JP.yml | 1 + .../frontend/src/components/MkChatHistories.vue | 208 +++++++++++++++++++++ packages/frontend/src/deck.ts | 1 + packages/frontend/src/pages/chat/home.home.vue | 161 +--------------- packages/frontend/src/ui/deck.vue | 2 + packages/frontend/src/ui/deck/chat-column.vue | 27 +++ 8 files changed, 247 insertions(+), 158 deletions(-) create mode 100644 packages/frontend/src/components/MkChatHistories.vue create mode 100644 packages/frontend/src/ui/deck/chat-column.vue (limited to 'packages/frontend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 770e5cef13..90952614c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Feat: デッキにチャットカラムを追加 - Fix: ログアウトした際に処理が終了しない問題を修正 - Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように diff --git a/locales/index.d.ts b/locales/index.d.ts index 887627d905..5885e04847 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -10230,6 +10230,10 @@ export interface Locale extends ILocale { * ロールタイムライン */ "roleTimeline": string; + /** + * チャット + */ + "chat": string; }; }; "_dialog": { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index db01b9a4f9..4a334c2b41 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2705,6 +2705,7 @@ _deck: mentions: "あなた宛て" direct: "ダイレクト" roleTimeline: "ロールタイムライン" + chat: "チャット" _dialog: charactersExceeded: "最大文字数を超えています！ 現在 {current} / 制限 {max}" diff --git a/packages/frontend/src/components/MkChatHistories.vue b/packages/frontend/src/components/MkChatHistories.vue new file mode 100644 index 0000000000..c508ea8451 --- /dev/null +++ b/packages/frontend/src/components/MkChatHistories.vue @@ -0,0 +1,208 @@ + + + + + + + diff --git a/packages/frontend/src/deck.ts b/packages/frontend/src/deck.ts index 9df56c52df..c108a365b6 100644 --- a/packages/frontend/src/deck.ts +++ b/packages/frontend/src/deck.ts @@ -38,6 +38,7 @@ export const columnTypes = [ 'mentions', 'direct', 'roleTimeline', + 'chat', ] as const; export type ColumnType = typeof columnTypes[number]; diff --git a/packages/frontend/src/pages/chat/home.home.vue b/packages/frontend/src/pages/chat/home.home.vue index a8ed891de0..a0853fb0c9 100644 --- a/packages/frontend/src/pages/chat/home.home.vue +++ b/packages/frontend/src/pages/chat/home.home.vue @@ -34,34 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only -
- - - -
-
- {{ item.message.toRoom.name }} - -
-
- - - -
-
{{ i18n.ts.you }}:{{ item.message.text }}
-
- -
-
-
{{ i18n.ts._chat.noHistory }}
-
- + @@ -81,20 +54,12 @@ import { updateCurrentAccountPartial } from '@/accounts.js'; import MkInput from '@/components/MkInput.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkInfo from '@/components/MkInfo.vue'; +import MkChatHistories from '@/components/MkChatHistories.vue'; const $i = ensureSignin(); const router = useRouter(); -const initializing = ref(true); -const fetching = ref(false); -const history = ref<{ - id: string; - message: Misskey.entities.ChatMessage; - other: Misskey.entities.ChatMessage['fromUser'] | Misskey.entities.ChatMessage['toUser'] | null; - isMe: boolean; -}[]>([]); - const searchQuery = ref(''); const searched = ref(false); const searchResults = ref([]); @@ -148,57 +113,8 @@ async function search() { searched.value = true; } -async function fetchHistory() { - if (fetching.value) return; - - fetching.value = true; - - const [userMessages, roomMessages] = await Promise.all([ - misskeyApi('chat/history', { room: false }), - misskeyApi('chat/history', { room: true }), - ]); - - history.value = [...userMessages, ...roomMessages] - .toSorted((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()) - .map(m => ({ - id: m.id, - message: m, - other: (!('room' in m) || m.room == null) ? (m.fromUserId === $i.id ? m.toUser : m.fromUser) : null, - isMe: m.fromUserId === $i.id, - })); - - fetching.value = false; - initializing.value = false; - - updateCurrentAccountPartial({ hasUnreadChatMessages: false }); -} - -let isActivated = true; - -onActivated(() => { - isActivated = true; -}); - -onDeactivated(() => { - isActivated = false; -}); - -useInterval(() => { - // TODO: DOM的にバックグラウンドになっていないかどうかも考慮する - if (!window.document.hidden && isActivated) { - fetchHistory(); - } -}, 1000 * 10, { - immediate: false, - afterMounted: true, -}); - -onActivated(() => { - fetchHistory(); -}); - onMounted(() => { - fetchHistory(); + updateCurrentAccountPartial({ hasUnreadChatMessages: false }); }); @@ -207,77 +123,6 @@ onMounted(() => { margin: 0 auto; } -.message { - position: relative; - display: flex; - padding: 16px 24px; - - &.isRead, - &.isMe { - opacity: 0.8; - } - - &:not(.isMe):not(.isRead) { - &::before { - content: ''; - position: absolute; - top: 8px; - right: 8px; - width: 8px; - height: 8px; - border-radius: 100%; - background-color: var(--MI_THEME-accent); - } - } -} - -.messageAvatar { - width: 50px; - height: 50px; - margin: 0 16px 0 0; -} - -.messageBody { - flex: 1; - min-width: 0; -} - -.messageHeader { - display: flex; - align-items: center; - margin-bottom: 2px; - white-space: nowrap; - overflow: clip; -} - -.messageHeaderName { - margin: 0; - padding: 0; - overflow: hidden; - text-overflow: ellipsis; - font-size: 1em; - font-weight: bold; -} - -.messageHeaderUsername { - margin: 0 8px; -} - -.messageHeaderTime { - margin-left: auto; -} - -.messageBodyText { - overflow: hidden; - overflow-wrap: break-word; - font-size: 1.1em; -} - -.youSaid { - font-weight: bold; - margin-right: 0.5em; -} - .searchResultItem { padding: 12px; border: solid 1px var(--MI_THEME-divider); diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index 96961d951f..7556f513c2 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -97,6 +97,7 @@ import XWidgetsColumn from '@/ui/deck/widgets-column.vue'; import XMentionsColumn from '@/ui/deck/mentions-column.vue'; import XDirectColumn from '@/ui/deck/direct-column.vue'; import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue'; +import XChatColumn from '@/ui/deck/chat-column.vue'; import { mainRouter } from '@/router.js'; import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js'; @@ -114,6 +115,7 @@ const columnComponents = { mentions: XMentionsColumn, direct: XDirectColumn, roleTimeline: XRoleTimelineColumn, + chat: XChatColumn, }; mainRouter.navHook = (path, flag): boolean => { diff --git a/packages/frontend/src/ui/deck/chat-column.vue b/packages/frontend/src/ui/deck/chat-column.vue new file mode 100644 index 0000000000..791af2e44c --- /dev/null +++ b/packages/frontend/src/ui/deck/chat-column.vue @@ -0,0 +1,27 @@ + + + + + -- cgit v1.2.3-freya From 525b6a76773a25c7bb48761082fa93732567b138 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Apr 2025 15:37:29 +0900 Subject: feat(frontend): chat widget --- CHANGELOG.md | 1 + locales/index.d.ts | 4 +++ locales/ja-JP.yml | 1 + packages/frontend/src/widgets/WidgetChat.vue | 52 ++++++++++++++++++++++++++++ packages/frontend/src/widgets/index.ts | 2 ++ 5 files changed, 60 insertions(+) create mode 100644 packages/frontend/src/widgets/WidgetChat.vue (limited to 'packages/frontend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 90952614c9..38563da555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - ### Client +- Feat: チャットウィジェットを追加 - Feat: デッキにチャットカラムを追加 - Fix: ログアウトした際に処理が終了しない問題を修正 - Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように diff --git a/locales/index.d.ts b/locales/index.d.ts index 5885e04847..97e66be6d7 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -9207,6 +9207,10 @@ export interface Locale extends ILocale { * 今日誕生日のユーザー */ "birthdayFollowings": string; + /** + * チャット + */ + "chat": string; }; "_cw": { /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 4a334c2b41..1801c8e15b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2421,6 +2421,7 @@ _widgets: chooseList: "リストを選択" clicker: "クリッカー" birthdayFollowings: "今日誕生日のユーザー" + chat: "チャット" _cw: hide: "隠す" diff --git a/packages/frontend/src/widgets/WidgetChat.vue b/packages/frontend/src/widgets/WidgetChat.vue new file mode 100644 index 0000000000..43b2a6e522 --- /dev/null +++ b/packages/frontend/src/widgets/WidgetChat.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts index ea17d484c5..aea810d1ea 100644 --- a/packages/frontend/src/widgets/index.ts +++ b/packages/frontend/src/widgets/index.ts @@ -35,6 +35,7 @@ export default function(app: App) { app.component('WidgetUserList', defineAsyncComponent(() => import('./WidgetUserList.vue'))); app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue'))); app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue'))); + app.component('WidgetChat', defineAsyncComponent(() => import('./WidgetChat.vue'))); } // 連合関連のウィジェット（連合無効時に隠す） @@ -70,6 +71,7 @@ export const widgets = [ 'userList', 'clicker', 'birthdayFollowings', + 'chat', ...federationWidgets, ]; -- cgit v1.2.3-freya From 6bd45a27b13c4c00d627ad056bc7b57047b9493d Mon Sep 17 00:00:00 2001 From: anatawa12 Date: Tue, 15 Apr 2025 16:09:04 +0900 Subject: fix: フォルダを開いた状態でメニューからアップロードしてもルートフォルダにアップロードされる問題 (#15836) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: フォルダを開いた状態でメニューからアップロードしてもルートフォルダにアップロードされる問題 * docs(changelog): Fix: フォルダを開いた状態でメニューからアップロードしてもルートフォルダにアップロードされる問題を修正 #15836 --- CHANGELOG.md | 1 + packages/frontend/src/components/MkDrive.vue | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'packages/frontend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 38563da555..3214ef936f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - Feat: デッキにチャットカラムを追加 - Fix: ログアウトした際に処理が終了しない問題を修正 - Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように +- Fix: フォルダを開いた状態でメニューからアップロードしてもルートフォルダにアップロードされる問題を修正 #15836 ### Server - Enhance: フォローしているユーザーならフォロワー限定投稿のノートでもアンテナで検知できるように diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue index c212167c8f..6270ac8314 100644 --- a/packages/frontend/src/components/MkDrive.vue +++ b/packages/frontend/src/components/MkDrive.vue @@ -626,13 +626,13 @@ function getMenu() { text: i18n.ts.upload + ' (' + i18n.ts.compress + ')', icon: 'ti ti-upload', action: () => { - chooseFileFromPc(true, { keepOriginal: false }); + chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: false }); }, }, { text: i18n.ts.upload, icon: 'ti ti-upload', action: () => { - chooseFileFromPc(true, { keepOriginal: true }); + chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: true }); }, }, { text: i18n.ts.fromUrl, -- cgit v1.2.3-freya From ee29f31324ca3b0513325cbb14b25a59e6485d23 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Apr 2025 20:33:04 +0900 Subject: fix(frontend): make keep scroll pos of timeline --- CHANGELOG.md | 1 + .../frontend/src/use/use-scroll-position-keeper.ts | 58 ++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 packages/frontend/src/use/use-scroll-position-keeper.ts (limited to 'packages/frontend/src') diff --git a/CHANGELOG.md b/CHANGELOG.md index 97c754a86b..693b31c44a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Fix: ログアウトした際に処理が終了しない問題を修正 - Fix: 自動バックアップが設定されている環境でログアウト直前に設定をバックアップするように - Fix: フォルダを開いた状態でメニューからアップロードしてもルートフォルダにアップロードされる問題を修正 #15836 +- Fix: タイムラインのスクロール位置を記憶するように修正 ### Server - Enhance: フォローしているユーザーならフォロワー限定投稿のノートでもアンテナで検知できるように diff --git a/packages/frontend/src/use/use-scroll-position-keeper.ts b/packages/frontend/src/use/use-scroll-position-keeper.ts new file mode 100644 index 0000000000..00cc51a459 --- /dev/null +++ b/packages/frontend/src/use/use-scroll-position-keeper.ts @@ -0,0 +1,58 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +import { throttle } from 'throttle-debounce'; +import { nextTick, onActivated, onUnmounted, watch } from 'vue'; +import type { Ref } from 'vue'; + +// note render skippingがオンだとズレるため、遷移直前にスクロール範囲に表示されているdata-scroll-anchor要素を特定して、復元時に当該要素までスクロールするようにする + +export function useScrollPositionKeeper(scrollContainerRef: Ref): void { + let anchorId: string | null = null; + + watch(scrollContainerRef, (el) => { + if (!el) return; + + const onScroll = () => { + if (!el) return; + const scrollContainerRect = el.getBoundingClientRect(); + const viewPosition = scrollContainerRect.height / 2; + + const anchorEls = el.querySelectorAll('[data-scroll-anchor]'); + for (let i = anchorEls.length - 1; i > -1; i--) { // 下から見た方が速い + const anchorEl = anchorEls[i] as HTMLElement; + const anchorRect = anchorEl.getBoundingClientRect(); + const anchorTop = anchorRect.top; + const anchorBottom = anchorRect.bottom; + if (anchorTop <= viewPosition && anchorBottom >= viewPosition) { + anchorId = anchorEl.getAttribute('data-scroll-anchor'); + break; + } + } + }; + + // ほんとはscrollイベントじゃなくてonBeforeDeactivatedでやりたい + // https://github.com/vuejs/vue/issues/9454 + // https://github.com/vuejs/rfcs/pull/284 + el.addEventListener('scroll', throttle(1000, onScroll), { passive: true }); + }, { + immediate: true, + }); + + onActivated(() => { + nextTick(() => { + if (!anchorId) return; + const scrollContainer = scrollContainerRef.value; + if (!scrollContainer) return; + const scrollAnchorEl = scrollContainer.querySelector(`[data-scroll-anchor="${anchorId}"]`); + if (!scrollAnchorEl) return; + scrollAnchorEl.scrollIntoView({ + behavior: 'instant', + block: 'center', + inline: 'center', + }); + }); + }); +} -- cgit v1.2.3-freya From 165830d6c8331f14da455cedcb4cd695aaa6c9b3 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Apr 2025 20:34:00 +0900 Subject: コミット忘れ MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/MkNotes.vue | 4 ++-- packages/frontend/src/pages/timeline.vue | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue index ad6210816d..214d52ec7f 100644 --- a/packages/frontend/src/components/MkNotes.vue +++ b/packages/frontend/src/components/MkNotes.vue @@ -23,13 +23,13 @@ SPDX-License-Identifier: AGPL-3.0-only tag="div" > diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue index 644b2d3d13..d2bf162ce5 100644 --- a/packages/frontend/src/pages/timeline.vue +++ b/packages/frontend/src/pages/timeline.vue @@ -52,12 +52,15 @@ import { miLocalStorage } from '@/local-storage.js'; import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js'; import { prefer } from '@/preferences.js'; import { useRouter } from '@/router.js'; +import { useScrollPositionKeeper } from '@/use/use-scroll-position-keeper.js'; provide('shouldOmitHeaderTitle', true); const tlComponent = useTemplateRef('tlComponent'); const rootEl = useTemplateRef('rootEl'); +useScrollPositionKeeper(rootEl); + const router = useRouter(); router.useListener('same', () => { top(); -- cgit v1.2.3-freya From de19d9a4d429b4ce9d4713e647659fe6460bdd11 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Tue, 15 Apr 2025 20:48:25 +0900 Subject: refactor(frontend): MkHorizontalSwipe -> MkSwiper --- .../frontend/src/components/MkHorizontalSwipe.vue | 238 --------------------- packages/frontend/src/components/MkSwiper.vue | 238 +++++++++++++++++++++ packages/frontend/src/pages/about.vue | 6 +- packages/frontend/src/pages/announcements.vue | 6 +- packages/frontend/src/pages/channel.vue | 6 +- packages/frontend/src/pages/channels.vue | 6 +- packages/frontend/src/pages/chat/home.vue | 6 +- packages/frontend/src/pages/drive.file.vue | 6 +- packages/frontend/src/pages/explore.vue | 6 +- packages/frontend/src/pages/flash/flash-index.vue | 6 +- packages/frontend/src/pages/follow-requests.vue | 6 +- packages/frontend/src/pages/gallery/index.vue | 6 +- packages/frontend/src/pages/instance-info.vue | 6 +- packages/frontend/src/pages/my-clips/index.vue | 6 +- packages/frontend/src/pages/notifications.vue | 2 +- packages/frontend/src/pages/pages.vue | 6 +- packages/frontend/src/pages/search.vue | 6 +- packages/frontend/src/pages/user/index.vue | 6 +- packages/frontend/src/utility/touch.ts | 2 +- 19 files changed, 285 insertions(+), 285 deletions(-) delete mode 100644 packages/frontend/src/components/MkHorizontalSwipe.vue create mode 100644 packages/frontend/src/components/MkSwiper.vue (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/components/MkHorizontalSwipe.vue b/packages/frontend/src/components/MkHorizontalSwipe.vue deleted file mode 100644 index 1d0ffaea11..0000000000 --- a/packages/frontend/src/components/MkHorizontalSwipe.vue +++ /dev/null @@ -1,238 +0,0 @@ - - - - - - diff --git a/packages/frontend/src/components/MkSwiper.vue b/packages/frontend/src/components/MkSwiper.vue new file mode 100644 index 0000000000..1d0ffaea11 --- /dev/null +++ b/packages/frontend/src/components/MkSwiper.vue @@ -0,0 +1,238 @@ + + + + + + diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue index b4315a5cfa..ec286f109f 100644 --- a/packages/frontend/src/pages/about.vue +++ b/packages/frontend/src/pages/about.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -28,7 +28,7 @@ import { instance } from '@/instance.js'; import { i18n } from '@/i18n.js'; import { claimAchievement } from '@/utility/achievements.js'; import { definePage } from '@/page.js'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; const XOverview = defineAsyncComponent(() => import('@/pages/about.overview.vue')); const XEmojis = defineAsyncComponent(() => import('@/pages/about.emojis.vue')); diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue index 1902267a6a..7a04914dd7 100644 --- a/packages/frontend/src/pages/announcements.vue +++ b/packages/frontend/src/pages/announcements.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -50,7 +50,7 @@ import { ref, computed } from 'vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; import MkInfo from '@/components/MkInfo.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import * as os from '@/os.js'; import { misskeyApi } from '@/utility/misskey-api.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue index a62e035198..e71d372722 100644 --- a/packages/frontend/src/pages/channel.vue +++ b/packages/frontend/src/pages/channel.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only - + @@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { computed, ref, defineAsyncComponent } from 'vue'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; const props = defineProps<{ fileId: string; diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue index 85b9fe4932..bcece47e35 100644 --- a/packages/frontend/src/pages/explore.vue +++ b/packages/frontend/src/pages/explore.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -25,7 +25,7 @@ import XFeatured from './explore.featured.vue'; import XUsers from './explore.users.vue'; import XRoles from './explore.roles.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import { definePage } from '@/page.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue index 98ab587b55..4ef33cbe0f 100644 --- a/packages/frontend/src/pages/flash/flash-index.vue +++ b/packages/frontend/src/pages/flash/flash-index.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -43,7 +43,7 @@ import { computed, ref } from 'vue'; import MkFlashPreview from '@/components/MkFlashPreview.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { useRouter } from '@/router.js'; diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index 36643b1acb..d467d875fd 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -52,7 +52,7 @@ import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { infoImageUrl } from '@/instance.js'; import { $i } from '@/i.js'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; const paginationComponent = useTemplateRef('paginationComponent'); diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue index 4cf3fca83b..c6ce773ab0 100644 --- a/packages/frontend/src/pages/gallery/index.vue +++ b/packages/frontend/src/pages/gallery/index.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -50,7 +50,7 @@ import { watch, ref, computed } from 'vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import { definePage } from '@/page.js'; import { i18n } from '@/i18n.js'; import { useRouter } from '@/router.js'; diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue index 66ddf627e4..fde462944c 100644 --- a/packages/frontend/src/pages/instance-info.vue +++ b/packages/frontend/src/pages/instance-info.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -153,7 +153,7 @@ import { definePage } from '@/page.js'; import { i18n } from '@/i18n.js'; import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkPagination from '@/components/MkPagination.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js'; import { dateString } from '@/filters/date.js'; import MkTextarea from '@/components/MkTextarea.vue'; diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue index 1525bbef9b..5b9b3af90b 100644 --- a/packages/frontend/src/pages/my-clips/index.vue +++ b/packages/frontend/src/pages/my-clips/index.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -33,7 +33,7 @@ import { misskeyApi } from '@/utility/misskey-api.js'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { clipsCache } from '@/cache.js'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; const pagination = { endpoint: 'clips/list' as const, diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue index 0a2bc02de5..61a1b2725c 100644 --- a/packages/frontend/src/pages/notifications.vue +++ b/packages/frontend/src/pages/notifications.vue @@ -24,7 +24,7 @@ import { computed, ref } from 'vue'; import { notificationTypes } from '@@/js/const.js'; import XNotifications from '@/components/MkNotifications.vue'; import MkNotes from '@/components/MkNotes.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import * as os from '@/os.js'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue index c99d7f1a0f..d412bad616 100644 --- a/packages/frontend/src/pages/pages.vue +++ b/packages/frontend/src/pages/pages.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -41,7 +41,7 @@ import { computed, ref } from 'vue'; import MkPagePreview from '@/components/MkPagePreview.vue'; import MkPagination from '@/components/MkPagination.vue'; import MkButton from '@/components/MkButton.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { useRouter } from '@/router.js'; diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue index e0cb2dcbab..814ddf3cb9 100644 --- a/packages/frontend/src/pages/search.vue +++ b/packages/frontend/src/pages/search.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -28,7 +28,7 @@ import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { notesSearchAvailable } from '@/utility/check-permissions.js'; import MkInfo from '@/components/MkInfo.vue'; -import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; +import MkSwiper from '@/components/MkSwiper.vue'; const props = withDefaults(defineProps<{ query?: string, diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue index 58f44d7591..83c7bf45bb 100644 --- a/packages/frontend/src/pages/user/index.vue +++ b/packages/frontend/src/pages/user/index.vue @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only