feat: add reply filter preference on timelines

BDX-town · Dec 28, 2024 · 7803cf4 · 7803cf4
1 parent bf6cde7
commit 7803cf4
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 6 deletions.
diff --git a/akko/package.json b/akko/package.json
@@ -2,7 +2,7 @@
   "name": "@bdxtown/akko",
   "description": "Akkoma API client for JavaScript, TypeScript, Node.js, browsers",
   "private": false,
-  "version": "6.12.1",
+  "version": "6.13.1",
   "author": "Ryo Igarashi <[email protected]>",
   "license": "MIT",
   "type": "module",

diff --git a/akko/src/akkoma/rest/v1/timeline-repository.ts b/akko/src/akkoma/rest/v1/timeline-repository.ts
@@ -10,6 +10,8 @@ export interface ListTimelineParams extends DefaultPaginationParams {
   readonly onlyMedia?: boolean | null;
   /** Remote only */
   readonly remote?: boolean | null;
+  /** Show all replies | only replies directed to user or people they follow | only replies directed to user */
+  readonly replyVisibility?: null | "following" | "self";
 }
 
 export interface ListLinkTimelineParams extends ListTimelineParams {

diff --git a/elk/components/settings/SettingsReplyVisibility.vue b/elk/components/settings/SettingsReplyVisibility.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { akkoma } from '@bdxtown/akko'
+
+const currentVisibility = usePreferences('replyVisibility')
+
+const replyVisibilities: { label: string, icon: string, value: akkoma.rest.v1.ListTimelineParams['replyVisibility'] }[] = [
+  {
+    value: 'self',
+    icon: 'i-ri:user-line',
+    label: 'null',
+  },
+  {
+    value: 'following',
+    icon: 'i-ri:group-line',
+    label: 'null',
+  },
+  {
+    value: null,
+    icon: 'i-ri:user-community-line',
+    label: 'null',
+  },
+]
+
+function setVisibility(value: akkoma.rest.v1.ListTimelineParams['replyVisibility']) {
+  currentVisibility.value = value
+}
+</script>
+
+<template>
+  <div px5 py2>
+    <div flex items-center gap-2>
+      {{ $t('settings.preferences.reply_visibility') }}
+    </div>
+    <div block text-sm text-secondary>
+      {{ $t('settings.preferences.reply_visibility_description') }}
+    </div>
+    <div flex items-center gap2 mt-2 flex-wrap>
+      <button
+        v-for="visibility in replyVisibilities"
+        :key="visibility.value || 'null'"
+        type="button"
+        btn-text min-w-full sm:min-w-auto flex="~ gap-1 items-center" p3 border="~ base rounded" bg-base ws-nowrap
+        :aria-pressed="currentVisibility === visibility.value"
+        :class="currentVisibility === visibility.value ? 'pointer-events-none' : 'filter-saturate-0'"
+        @click="() => setVisibility(visibility.value)"
+      >
+        <div :class="visibility.icon" />
+        {{ $t(`reply_visibility.${visibility.value}`) }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/elk/components/timeline/TimelineBubble.vue b/elk/components/timeline/TimelineBubble.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { akkoma } from '@bdxtown/akko'
 
-const paginator = useAkkoClient().v1.timelines.bubble.list({ limit: 30 })
+const replyVisibility = usePreferences('replyVisibility')
+const paginator = useAkkoClient().v1.timelines.bubble.list({ limit: 30, replyVisibility: replyVisibility.value })
 
 function reorderAndFilter(items: akkoma.v1.Status[]) {
   return reorderedTimeline(items, 'public')

diff --git a/elk/components/timeline/TimelineHome.vue b/elk/components/timeline/TimelineHome.vue
@@ -4,8 +4,9 @@ import type { akkoma } from '@bdxtown/akko'
 const { isSupported, effectiveType } = useNetwork()
 const isSlow = computed(() => isSupported.value && effectiveType.value && ['slow-2g', '2g', '3g'].includes(effectiveType.value))
 const limit = computed(() => isSlow.value ? 10 : 30)
+const replyVisibility = usePreferences('replyVisibility')
 
-const paginator = useAkkoClient().v1.timelines.home.list({ limit: limit.value })
+const paginator = useAkkoClient().v1.timelines.home.list({ limit: limit.value, replyVisibility: replyVisibility.value })
 const stream = useStreaming(client => client.user.subscribe())
 function reorderAndFilter(items: akkoma.v1.Status[]) {
   return reorderedTimeline(items, 'home')

diff --git a/elk/components/timeline/TimelinePublic.vue b/elk/components/timeline/TimelinePublic.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { akkoma } from '@bdxtown/akko'
 
-const paginator = useAkkoClient().v1.timelines.public.list({ limit: 30 })
+const replyVisibility = usePreferences('replyVisibility')
+const paginator = useAkkoClient().v1.timelines.public.list({ limit: 30, replyVisibility: replyVisibility.value })
 
 const stream = useStreaming(client => client.public.subscribe())
 function reorderAndFilter(items: akkoma.v1.Status[]) {

diff --git a/elk/components/timeline/TimelinePublicLocal.vue b/elk/components/timeline/TimelinePublicLocal.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { akkoma } from '@bdxtown/akko'
 
-const paginator = useAkkoClient().v1.timelines.public.list({ limit: 30, local: true })
+const replyVisibility = usePreferences('replyVisibility')
+const paginator = useAkkoClient().v1.timelines.public.list({ limit: 30, local: true, replyVisibility: replyVisibility.value })
 const stream = useStreaming(client => client.public.local.subscribe())
 function reorderAndFilter(items: akkoma.v1.Status[]) {
   return reorderedTimeline(items, 'public')

diff --git a/elk/composables/settings/definition.ts b/elk/composables/settings/definition.ts
@@ -1,3 +1,4 @@
+import type { akkoma } from '@bdxtown/akko'
 import { DEFAULT_FONT_SIZE } from '~/constants'
 
 export type FontSize = `${number}px`
@@ -10,6 +11,7 @@ export type ColorMode = 'light' | 'dark' | 'system'
 export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'favorite' | 'bookmark' | 'compose' | 'explore' | 'local' | 'bubble' | 'federated' | 'list' | 'hashtag' | 'setting' | 'moreMenu'
 
 export interface PreferencesSettings {
+  replyVisibility: akkoma.rest.v1.ListTimelineParams['replyVisibility']
   hideAltIndicatorOnPosts: boolean
   hideGifIndicatorOnPosts: boolean
   hideBoostCount: boolean
@@ -65,6 +67,7 @@ export function getDefaultLanguage(languages: string[]) {
 }
 
 export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
+  replyVisibility: null,
   hideAltIndicatorOnPosts: false,
   hideGifIndicatorOnPosts: false,
   hideBoostCount: false,

diff --git a/elk/locales/en.json b/elk/locales/en.json
@@ -397,6 +397,11 @@
       }
     }
   },
+  "reply_visibility": {
+    "following": "For me & following",
+    "null": "Every reply",
+    "self": "Replies just for me"
+  },
   "report": {
     "additional_comments": "Additional comments",
     "another_server": "The user you're reporting is from another server",
@@ -560,6 +565,8 @@
       "hide_username_emojis_description": "Hides emojis from usernames in timelines. Emojis will still be visible in their profiles.",
       "label": "Preferences",
       "optimize_for_low_performance_device": "Optimize for low performance device",
+      "reply_visibility": "Replies visibility",
+      "reply_visibility_description": "Choose the replies you want to see in timelines: only those directed to you, those for you and people you follow, or all replies.",
       "title": "Experimental Features",
 
       "user_picker": "User Picker",

diff --git a/elk/locales/fr-FR.json b/elk/locales/fr-FR.json
@@ -362,6 +362,11 @@
       }
     }
   },
+  "reply_visibility": {
+    "following": "Pour moi & suivis",
+    "null": "Toutes les réponses",
+    "self": "Pour moi uniquement"
+  },
   "report": {
     "additional_comments": "Commentaires additionnels",
     "another_server": "L'utilisateur que vous signalez appartient à une autre instance",
@@ -517,6 +522,9 @@
       "hide_username_emojis": "Masquer les emojis sur le nom d'utilisateur",
       "hide_username_emojis_description": "Masque les emojis des noms d'utilisateur dans la timeline. \nLes emojis seront toujours visibles sur leurs profils.",
       "label": "Préférences",
+      "optimize_for_low_performance_device": "Optimiser pour appareil peu puissant",
+      "reply_visibility": "Visibilité des réponses",
+      "reply_visibility_description": "Choisissez les réponses que vous souhaitez voir dans les fils : uniquement celles qui vous sont destinées, celles pour vous et les personnes que vous suivez, ou toutes les réponses.",
       "title": "Fonctionnalités expérimentales",
       "user_picker": "User Picker",
       "user_picker_description": "Affiche tous les avatars des comptes connectés en bas à gauche afin que vous puissiez basculer rapidement entre eux.",

diff --git a/elk/package.json b/elk/package.json
@@ -32,7 +32,7 @@
     "release": "stale-dep && bumpp && tsx scripts/release.ts"
   },
   "dependencies": {
-    "@bdxtown/akko": "^6.12.1",
+    "@bdxtown/akko": "^6.13.1",
     "@emoji-mart/data": "^1.1.2",
     "@fnando/sparkline": "^0.3.10",
     "@iconify-emoji/twemoji": "^1.0.2",

diff --git a/elk/pages/settings/preferences/index.vue b/elk/pages/settings/preferences/index.vue
@@ -21,6 +21,7 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.label') }}
       </h2>
       <SettingsVisibility />
+      <SettingsReplyVisibility />
       <SettingsToggleItem
         :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
         @click="togglePreferences('hideAltIndicatorOnPosts')"