diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 069c0b40..e663ba15 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,5 +1,8 @@ import { reduce, filter, findIndex, clone, get } from 'lodash' import Status from '../status/status.vue' +import ThreadTree from '../thread_tree/thread_tree.vue' + +const debug = console.log const sortById = (a, b) => { const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id @@ -53,6 +56,15 @@ const conversation = { } }, computed: { + displayStyle () { + return this.$store.state.config.conversationDisplay + }, + isTreeView () { + return this.displayStyle === 'tree' + }, + isLinearView () { + return this.displayStyle === 'linear' + }, hideStatus () { if (this.$refs.statusComponent && this.$refs.statusComponent[0]) { return this.virtualHidden && this.$refs.statusComponent[0].suspendable @@ -90,6 +102,49 @@ const conversation = { return sortAndFilterConversation(conversation, this.status) }, + threadTree () { + const reverseLookupTable = this.conversation.reduce((table, status, index) => { + table[status.id] = index + return table + }, {}) + + const threads = this.conversation.reduce((a, cur) => { + const id = cur.id + a.forest[id] = this.getReplies(id) + .map(s => s.id) + .sort((a, b) => reverseLookupTable[a] - reverseLookupTable[b]) + + a.topLevel = a.topLevel.filter(k => a.forest[id].contains(k)) + return a + }, { + forest: {}, + topLevel: this.conversation.map(s => s.id) + }) + + const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => { + if (processed[id]) { + return [] + } + + processed[id] = true + return [{ + status: this.conversation[reverseLookupTable[id]], + id, + depth + }, walk(forest, forest[child], depth + 1, processed)].reduce((a, b) => a.concat(b), []) + }).reduce((a, b) => a.concat(b), []) + + const linearized = walk(threads.forest, threads.topLevel) + + return linearized + }, + topLevel () { + const topLevel = this.conversation.reduce((tl, cur) => + tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation) + debug("toplevel =", topLevel) + debug("toplevel =", topLevel) + return topLevel + }, replies () { let i = 1 // eslint-disable-next-line camelcase @@ -109,7 +164,7 @@ const conversation = { }, {}) }, isExpanded () { - return this.expanded || this.isPage + return !!(this.expanded || this.isPage) }, hiddenStyle () { const height = (this.status && this.status.virtualHeight) || '120px' @@ -117,7 +172,8 @@ const conversation = { } }, components: { - Status + Status, + ThreadTree }, watch: { statusId (newVal, oldVal) { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 3fb26d92..cea5f88f 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -18,24 +18,47 @@ {{ $t('timeline.collapse') }} - +
+ +
+
+ +
({ + key: mode, + value: mode, + label: this.$t(`settings.conversation_display_${mode}`) + })), mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({ key: mode, value: mode, diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index eba3b268..8951c021 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -152,6 +152,15 @@ {{ $t('settings.show_yous') }} +
  • + + {{ $t('settings.conversation_display') }} + +
  • { + table[status.id] = index + return table + }, {}) + }, + currentReplies () { + debug('status:', this.status) + debug('getReplies:', this.getReplies(this.status.id)) + return this.getReplies(this.status.id).map(({ id }) => this.statusById(id)) + }, + }, + methods: { + statusById (id) { + return this.conversation[this.reverseLookupTable[id]] + }, + collapseThread () { + }, + showThread () { + }, + showAllSubthreads () { + } + } +} + +export default ThreadTree diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue new file mode 100644 index 00000000..8256eee6 --- /dev/null +++ b/src/components/thread_tree/thread_tree.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/modules/config.js b/src/modules/config.js index 20979174..ec75dbfb 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -12,6 +12,7 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0] export const multiChoiceProperties = [ 'postContentType', 'subjectLineBehavior', + 'conversationDisplay', // tree | linear 'mentionLinkDisplay' // short | full_for_remote | full ] @@ -81,7 +82,8 @@ export const defaultState = { hidePostStats: undefined, // instance default hideUserStats: undefined, // instance default virtualScrolling: undefined, // instance default - sensitiveByDefault: undefined // instance default + sensitiveByDefault: undefined, // instance default + conversationDisplay: undefined // instance default } // caching the instance default properties diff --git a/src/modules/instance.js b/src/modules/instance.js index 1abd784f..a160a557 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -53,6 +53,7 @@ const defaultState = { theme: 'pleroma-dark', virtualScrolling: true, sensitiveByDefault: false, + conversationDisplay: 'tree', // Nasty stuff customEmoji: [],