From 194bc20af1f87724e528ab60aa528f5873fb0665 Mon Sep 17 00:00:00 2001 From: Hazelnoot Date: Fri, 1 Nov 2024 18:33:06 -0400 Subject: fix type of deepMerge --- packages/frontend/src/scripts/merge.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/merge.ts b/packages/frontend/src/scripts/merge.ts index 9794a300da..89fdda0cbb 100644 --- a/packages/frontend/src/scripts/merge.ts +++ b/packages/frontend/src/scripts/merge.ts @@ -18,7 +18,7 @@ function isPureObject(value: unknown): value is Record>(value: DeepPartial, def: X): X { +export function deepMerge(value: DeepPartial, def: X): X { if (isPureObject(value) && isPureObject(def)) { const result = deepClone(value as Cloneable) as X; for (const [k, v] of Object.entries(def) as [keyof X, X[keyof X]][]) { -- cgit v1.2.3-freya From 38e30c0d54ee1f73e79f7722473db51517cfe5d1 Mon Sep 17 00:00:00 2001 From: Hazelnoot Date: Sat, 2 Nov 2024 11:20:54 -0400 Subject: allow following-feed-utils to use alternate state backends --- .../frontend/src/scripts/following-feed-utils.ts | 98 ++++++++++++++++------ 1 file changed, 72 insertions(+), 26 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/following-feed-utils.ts b/packages/frontend/src/scripts/following-feed-utils.ts index 064d6b72e3..bf4266f830 100644 --- a/packages/frontend/src/scripts/following-feed-utils.ts +++ b/packages/frontend/src/scripts/following-feed-utils.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import { computed } from 'vue'; +import { computed, Ref, WritableComputedRef } from 'vue'; import { defaultStore } from '@/store.js'; import { deepMerge } from '@/scripts/merge.js'; import { PageHeaderItem } from '@/types/page-header.js'; @@ -13,9 +13,45 @@ import { popupMenu } from '@/os.js'; export const followingTab = 'following' as const; export const mutualsTab = 'mutuals' as const; export const followersTab = 'followers' as const; -export type FollowingFeedTab = typeof followingTab | typeof mutualsTab | typeof followersTab; +export const followingFeedTabs = [followingTab, mutualsTab, followersTab] as const; +export type FollowingFeedTab = typeof followingFeedTabs[number]; -export function createOptions(): PageHeaderItem { +export function followingTabName(tab: FollowingFeedTab): string; +export function followingTabName(tab: FollowingFeedTab | null | undefined): null; +export function followingTabName(tab: FollowingFeedTab | null | undefined): string | null { + if (tab === followingTab) return i18n.ts.following; + if (tab === followersTab) return i18n.ts.followers; + if (tab === mutualsTab) return i18n.ts.mutuals; + return null; +} + +export function followingTabIcon(tab: FollowingFeedTab | null | undefined): string { + if (tab === followersTab) return 'ph-user ph-bold ph-lg'; + if (tab === mutualsTab) return 'ph-user-switch ph-bold ph-lg'; + return 'ph-user-check ph-bold ph-lg'; +} + +export type FollowingFeedModel = { + [Key in keyof FollowingFeedState]: WritableComputedRef; +} + +export interface FollowingFeedState { + withNonPublic: boolean, + withQuotes: boolean, + withBots: boolean, + withReplies: boolean, + onlyFiles: boolean, + userList: FollowingFeedTab, + remoteWarningDismissed: boolean, +} + +interface StorageInterface = Partial> { + readonly state: Partial; + readonly reactiveState: Ref>; + save(updated: T): void; +} + +export function createOptions(storage?: Ref): PageHeaderItem { const { userList, withNonPublic, @@ -23,7 +59,7 @@ export function createOptions(): PageHeaderItem { withBots, withReplies, onlyFiles, - } = createModel(); + } = createModel(storage); return { icon: 'ti ti-dots', @@ -62,41 +98,47 @@ export function createOptions(): PageHeaderItem { disabled: withReplies, }, ], ev.currentTarget ?? ev.target), + +export function createModel(storage?: Ref): FollowingFeedModel { + // eslint-disable-next-line no-param-reassign + storage ??= createDefaultStorage(); + + // Based on timeline.saveTlFilter() + const saveFollowingFilter = (key: K, value: FollowingFeedState[K]) => { + const state = deepMerge(storage.value.state, defaultFollowingFeedState); + const out = deepMerge({ [key]: value }, state); + storage.value.save(out); }; -} -export function createModel() { - const userList = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.userList, + const userList: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.userList ?? defaultFollowingFeedState.userList, set: value => saveFollowingFilter('userList', value), }); - - const withNonPublic = computed({ + const withNonPublic: WritableComputedRef = computed({ get: () => { if (userList.value === 'followers') return false; - return defaultStore.reactiveState.followingFeed.value.withNonPublic; + return storage.value.reactiveState.value.withNonPublic ?? defaultFollowingFeedState.withNonPublic; }, set: value => saveFollowingFilter('withNonPublic', value), }); - const withQuotes = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.withQuotes, + const withQuotes: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.withQuotes ?? defaultFollowingFeedState.withQuotes, set: value => saveFollowingFilter('withQuotes', value), }); - const withBots = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.withBots, + const withBots: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.withBots ?? defaultFollowingFeedState.withBots, set: value => saveFollowingFilter('withBots', value), }); - const withReplies = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.withReplies, + const withReplies: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.withReplies ?? defaultFollowingFeedState.withReplies, set: value => saveFollowingFilter('withReplies', value), }); - const onlyFiles = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.onlyFiles, + const onlyFiles: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.onlyFiles ?? defaultFollowingFeedState.onlyFiles, set: value => saveFollowingFilter('onlyFiles', value), }); - - const remoteWarningDismissed = computed({ - get: () => defaultStore.reactiveState.followingFeed.value.remoteWarningDismissed, + const remoteWarningDismissed: WritableComputedRef = computed({ + get: () => storage.value.reactiveState.value.remoteWarningDismissed ?? defaultFollowingFeedState.remoteWarningDismissed, set: value => saveFollowingFilter('remoteWarningDismissed', value), }); @@ -111,8 +153,12 @@ export function createModel() { }; } -// Based on timeline.saveTlFilter() -function saveFollowingFilter(key: Key, value: (typeof defaultStore.state.followingFeed)[Key]) { - const out = deepMerge({ [key]: value }, defaultStore.state.followingFeed); - return defaultStore.set('followingFeed', out); +function createDefaultStorage() { + return computed(() => ({ + state: defaultStore.state.followingFeed, + reactiveState: defaultStore.reactiveState.followingFeed, + save(updated: typeof defaultStore.state.followingFeed) { + return defaultStore.set('followingFeed', updated); + }, + })); } -- cgit v1.2.3-freya From 1ca350e45dc81990a71afb1772b2230f17a3ba96 Mon Sep 17 00:00:00 2001 From: Hazelnoot Date: Sat, 2 Nov 2024 11:23:15 -0400 Subject: define defult Following Feed state in following-feed-utils.ts instead of store.ts --- .../frontend/src/scripts/following-feed-utils.ts | 21 ++++++++++++++++++++- packages/frontend/src/store.ts | 12 ++---------- 2 files changed, 22 insertions(+), 11 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/following-feed-utils.ts b/packages/frontend/src/scripts/following-feed-utils.ts index bf4266f830..3b4020f84b 100644 --- a/packages/frontend/src/scripts/following-feed-utils.ts +++ b/packages/frontend/src/scripts/following-feed-utils.ts @@ -45,13 +45,32 @@ export interface FollowingFeedState { remoteWarningDismissed: boolean, } +export const defaultFollowingFeedState: FollowingFeedState = { + withNonPublic: false, + withQuotes: false, + withBots: true, + withReplies: false, + onlyFiles: false, + userList: followingTab, + remoteWarningDismissed: false, +}; + interface StorageInterface = Partial> { readonly state: Partial; readonly reactiveState: Ref>; save(updated: T): void; } -export function createOptions(storage?: Ref): PageHeaderItem { +export function createHeaderItem(storage?: Ref): PageHeaderItem { + const menu = createOptionsMenu(storage); + return { + icon: 'ti ti-dots', + text: i18n.ts.options, + handler: ev => popupMenu(menu, ev.currentTarget ?? ev.target), + }; +} + +export function createOptionsMenu(storage?: Ref): MenuItem[] { const { userList, withNonPublic, diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index fd84ad2e4d..bbd9873ad8 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -11,7 +11,7 @@ import darkTheme from '@@/themes/d-ice.json5'; import { miLocalStorage } from './local-storage.js'; import { searchEngineMap } from './scripts/search-engine-map.js'; import type { SoundType } from '@/scripts/sound.js'; -import type { FollowingFeedTab } from '@/scripts/following-feed-utils.js'; +import { defaultFollowingFeedState } from '@/scripts/following-feed-utils.js'; import { Storage } from '@/pizzax.js'; interface PostFormAction { @@ -244,15 +244,7 @@ export const defaultStore = markRaw(new Storage('base', { }, followingFeed: { where: 'account', - default: { - withNonPublic: false, - withQuotes: false, - withBots: true, - withReplies: false, - onlyFiles: false, - userList: 'following' as FollowingFeedTab, - remoteWarningDismissed: false, - }, + default: defaultFollowingFeedState, }, overridedDeviceKind: { -- cgit v1.2.3-freya From 2b0a62287542597f9f53f45cd932efeb8ec0a12e Mon Sep 17 00:00:00 2001 From: Hazelnoot Date: Sat, 2 Nov 2024 11:30:56 -0400 Subject: separate following feed's menu component from the actual filter options --- packages/frontend/src/pages/following-feed.vue | 30 +++------ packages/frontend/src/pages/user/recent-notes.vue | 4 +- .../frontend/src/scripts/following-feed-utils.ts | 72 +++++++++++----------- 3 files changed, 46 insertions(+), 60 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue index 9054769034..21e76b9094 100644 --- a/packages/frontend/src/pages/following-feed.vue +++ b/packages/frontend/src/pages/following-feed.vue @@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only diff --git a/packages/frontend/src/pages/user/recent-notes.vue b/packages/frontend/src/pages/user/recent-notes.vue index 6375979c00..d636068408 100644 --- a/packages/frontend/src/pages/user/recent-notes.vue +++ b/packages/frontend/src/pages/user/recent-notes.vue @@ -20,7 +20,7 @@ import { PageHeaderItem } from '@/types/page-header.js'; import MkPageHeader from '@/components/global/MkPageHeader.vue'; import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue'; import { acct } from '@/filters/user.js'; -import { createModel, createOptions } from '@/scripts/following-feed-utils.js'; +import { createModel, createHeaderItem } from '@/scripts/following-feed-utils.js'; import MkStickyContainer from '@/components/global/MkStickyContainer.vue'; defineProps<{ @@ -44,7 +44,7 @@ const headerActions: PageHeaderItem[] = [ text: i18n.ts.reload, handler: () => userRecentNotes.value?.reload(), }, - createOptions(), + createHeaderItem(), ]; // Based on user/index.vue diff --git a/packages/frontend/src/scripts/following-feed-utils.ts b/packages/frontend/src/scripts/following-feed-utils.ts index 3b4020f84b..39f17949d6 100644 --- a/packages/frontend/src/scripts/following-feed-utils.ts +++ b/packages/frontend/src/scripts/following-feed-utils.ts @@ -9,6 +9,7 @@ import { deepMerge } from '@/scripts/merge.js'; import { PageHeaderItem } from '@/types/page-header.js'; import { i18n } from '@/i18n.js'; import { popupMenu } from '@/os.js'; +import { MenuItem } from '@/types/menu.js'; export const followingTab = 'following' as const; export const mutualsTab = 'mutuals' as const; @@ -80,43 +81,40 @@ export function createOptionsMenu(storage?: Ref): MenuItem[] { onlyFiles, } = createModel(storage); - return { - icon: 'ti ti-dots', - text: i18n.ts.options, - handler: ev => - popupMenu([ - { - type: 'switch', - text: i18n.ts.showNonPublicNotes, - ref: withNonPublic, - disabled: userList.value === 'followers', - }, - { - type: 'switch', - text: i18n.ts.showQuotes, - ref: withQuotes, - }, - { - type: 'switch', - text: i18n.ts.showBots, - ref: withBots, - }, - { - type: 'switch', - text: i18n.ts.showReplies, - ref: withReplies, - disabled: onlyFiles, - }, - { - type: 'divider', - }, - { - type: 'switch', - text: i18n.ts.fileAttachedOnly, - ref: onlyFiles, - disabled: withReplies, - }, - ], ev.currentTarget ?? ev.target), + return [ + { + type: 'switch', + text: i18n.ts.showNonPublicNotes, + ref: withNonPublic, + disabled: computed(() => userList.value === followersTab), + }, + { + type: 'switch', + text: i18n.ts.showQuotes, + ref: withQuotes, + }, + { + type: 'switch', + text: i18n.ts.showBots, + ref: withBots, + }, + { + type: 'switch', + text: i18n.ts.showReplies, + ref: withReplies, + disabled: onlyFiles, + }, + { + type: 'divider', + }, + { + type: 'switch', + text: i18n.ts.fileAttachedOnly, + ref: onlyFiles, + disabled: withReplies, + }, + ]; +} export function createModel(storage?: Ref): FollowingFeedModel { // eslint-disable-next-line no-param-reassign -- cgit v1.2.3-freya