wip

components/timeline/TimelineHomeFilter.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-const filter = ref({
+const homeFilter = useHomeFilter()
-  bot: true,
-  sensitive: true,
-  repost: true,
-  mutual: true,
-  tag: true,
-})
 </script>
 
 <template>
@@ -15,11 +9,11 @@ const filter = ref({
     </button>
 
     <template #popper>
-      <CommonCheckbox v-model="filter.bot" label="post by bot" />
+      <CommonCheckbox v-model="homeFilter.bot" label="post by bot" />
-      <CommonCheckbox v-model="filter.sensitive" label="post contains sensitive" />
+      <CommonCheckbox v-model="homeFilter.sensitive" label="post contains sensitive" />
-      <CommonCheckbox v-model="filter.repost" label="post is a repost" />
+      <CommonCheckbox v-model="homeFilter.repost" label="post is a repost" />
-      <CommonCheckbox v-model="filter.mutual" label="post is from a mutual" />
+      <CommonCheckbox v-model="homeFilter.mutual" label="post is from a mutual" />
-      <CommonCheckbox v-model="filter.tag" label="post is from a tag I follow" />
+      <CommonCheckbox v-model="homeFilter.tag" label="post is from a tag I follow" />
     </template>
   </VDropdown>
 </template>

composables/settings/definition.ts

@@ -35,6 +35,14 @@ export interface UserSettings {
   themeColors?: ThemeColors
 }
 
+export interface UserHomeFilter {
+  bot: boolean
+  sensitive: boolean
+  repost: boolean
+  mutual: boolean
+  tag: boolean
+}
+
 export interface ThemeColors {
   '--theme-color-name': string
 

composables/settings/storage.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue'
 import type { VueI18n } from 'vue-i18n'
 import type { LocaleObject } from 'vue-i18n-routing'
-import type { FontSize, OldFontSize, PreferencesSettings, UserSettings } from './definition'
+import type { FontSize, OldFontSize, PreferencesSettings, UserHomeFilter, UserSettings } from './definition'
-import { STORAGE_KEY_SETTINGS } from '~/constants'
+import { STORAGE_KEY_HOME_FILTER, STORAGE_KEY_SETTINGS } from '~/constants'
 import { oldFontSizeMap } from '~~/constants/options'
 
 export function useUserSettings() {
@@ -45,3 +45,13 @@ export function togglePreferences(key: keyof PreferencesSettings) {
   const flag = usePreferences(key)
   flag.value = !flag.value
 }
+
+export function useHomeFilter() {
+  return useUserSessionStorage<UserHomeFilter>(STORAGE_KEY_HOME_FILTER, () => ({
+    bot: true,
+    sensitive: true,
+    repost: true,
+    mutual: true,
+    tag: true,
+  }))
+}

composables/timeline.ts

@@ -14,7 +14,20 @@ function removeFilteredItems(items: mastodon.v1.Status[], context: mastodon.v1.F
   const isFiltered = (item: mastodon.v1.Status) => (item.account.id === currentUser.value?.account.id) || !item.filtered?.find(isStrict)
   const isReblogFiltered = (item: mastodon.v1.Status) => !item.reblog?.filtered?.find(isStrict)
 
-  return [...items].filter(isFiltered).filter(isReblogFiltered)
+  const homeFilter = useHomeFilter()
+  const { bot, mutual, repost, sensitive, tag } = homeFilter.value
+
+  const isClientSideHomeFiltered = (item: mastodon.v1.Status) => {
+    if (bot && mutual && repost && sensitive && tag)
+      return true
+
+    if (item.account.bot && !bot)
+      return false
+
+    return true
+  }
+
+  return [...items].filter(isFiltered).filter(isReblogFiltered).filter(isClientSideHomeFiltered)
 }
 
 export function reorderedTimeline(items: mastodon.v1.Status[], context: mastodon.v1.FilterContext = 'public') {

composables/users.ts

@@ -330,3 +330,17 @@ export function clearUserLocalStorage(account?: mastodon.v1.Account) {
       delete value.value[id]
   })
 }
+
+export function useUserSessionStorage<T extends object>(key: string, initial: () => T): Ref<T> {
+  if (process.server || process.test)
+    return shallowRef(initial())
+
+  const all = useSessionStorage<Record<string, T>>(key, {}, { deep: true })
+  return computed(() => {
+    const id = currentUser.value?.account.id
+      ? currentUser.value.account.acct
+      : '[anonymous]'
+    all.value[id] = Object.assign(initial(), all.value[id] || {})
+    return all.value[id]
+  })
+}

constants/index.ts

@@ -13,6 +13,7 @@ export const STORAGE_KEY_CURRENT_USER_HANDLE = 'elk-current-user-handle'
 export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
 export const STORAGE_KEY_SETTINGS = 'elk-settings'
+export const STORAGE_KEY_HOME_FILTER = 'elk-home-filter'
 export const STORAGE_KEY_CUSTOM_EMOJIS = 'elk-custom-emojis'
 export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
 export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'