From ac935ac76437dc04eaa3fa84ccad40e19bc5a549 Mon Sep 17 00:00:00 2001 From: yawhn Date: Thu, 23 Mar 2023 16:02:37 +0000 Subject: [PATCH] feat: swap home timeline with social's functionality (#9597) The Home timeline functionality is swapped with social's. Meaning that Home timeline now consists of followee's and local posts. Social from now on will contain only followee's posts. See more info in the attached ticket. Some changes applied in english locales as well. Probably the rest of the languages need to be fixed though. This PR closes the ticket: https://codeberg.org/calckey/calckey/issues/9552 Co-authored-by: yawhn Co-authored-by: ThatOneCalculator Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9597 Co-authored-by: yawhn Co-committed-by: yawhn --- locales/ar-SA.yml | 21 ----- locales/bn-BD.yml | 21 ----- locales/en-US.yml | 9 +- locales/sk-SK.yml | 21 ----- locales/vi-VN.yml | 21 ----- .../client/src/pages/settings/general.vue | 8 ++ .../pages/settings/preferences-backups.vue | 1 + packages/client/src/pages/timeline.vue | 89 +++++++++++++------ packages/client/src/store.ts | 4 + 9 files changed, 81 insertions(+), 114 deletions(-) diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml index fc29623dd..844cfb5d5 100644 --- a/locales/ar-SA.yml +++ b/locales/ar-SA.yml @@ -1027,27 +1027,6 @@ _time: minute: "د" hour: "سا" day: "ي" -_tutorial: - title: "How to use Calckey" - step1_1: "Welcome!" - step1_2: "Let's get you set up. You'll be up and running in no time!" - step2_1: "First, please fill out your profile." - step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you." - step3_1: "Now time to follow some people!" - step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them." - step4_1: "Let's get you out there." - step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\"" - step5_1: "Timelines, timelines everywhere!" - step5_2: "Your instance has {timelines} different timelines enabled." - step5_3: "The Home {icon} timeline is where you can see posts from your followers." - step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance." - step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." - step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers." - step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance." - step6_1: "So, what is this place?" - step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"." - step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time." - step6_4: "Now go, explore, and have fun!" _2fa: alreadyRegistered: "سجلت سلفًا جهازًا للاستيثاق بعاملين." registerDevice: "سجّل جهازًا جديدًا" diff --git a/locales/bn-BD.yml b/locales/bn-BD.yml index 3ed6e53aa..8a9358e2a 100644 --- a/locales/bn-BD.yml +++ b/locales/bn-BD.yml @@ -1108,27 +1108,6 @@ _time: minute: "মিনিট" hour: "ঘণ্টা" day: "দিন" -_tutorial: - title: "How to use Calckey" - step1_1: "Welcome!" - step1_2: "Let's get you set up. You'll be up and running in no time!" - step2_1: "First, please fill out your profile." - step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you." - step3_1: "Now time to follow some people!" - step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them." - step4_1: "Let's get you out there." - step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\"" - step5_1: "Timelines, timelines everywhere!" - step5_2: "Your instance has {timelines} different timelines enabled." - step5_3: "The Home {icon} timeline is where you can see posts from your followers." - step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance." - step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." - step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers." - step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance." - step6_1: "So, what is this place?" - step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"." - step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time." - step6_4: "Now go, explore, and have fun!" _2fa: alreadyRegistered: "আপনি ইতিমধ্যে একটি 2-ফ্যাক্টর অথেনটিকেশন ডিভাইস নিবন্ধন করেছেন৷" registerDevice: "নতুন ডিভাইস নিবন্ধন করুন" diff --git a/locales/en-US.yml b/locales/en-US.yml index 8da78d3b8..ee0025cb9 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -849,6 +849,9 @@ overridedDeviceKind: "Device type" smartphone: "Smartphone" tablet: "Tablet" auto: "Auto" +showLocalPosts: "Show local posts in:" +homeTimeline: "Home Timeline" +socialTimeline: "Social Timeline" themeColor: "Instance Ticker Color" size: "Size" numberOfColumn: "Number of columns" @@ -1240,10 +1243,10 @@ _tutorial: step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\"" step5_1: "Timelines, timelines everywhere!" step5_2: "Your instance has {timelines} different timelines enabled." - step5_3: "The Home {icon} timeline is where you can see posts from your followers." + step5_3: "The Home {icon} timeline is where you can see posts from the accounts you follow and from everyone else on this instance. If you prefer your Home timeline to only display posts from accounts you follow, you can easily change this in Settings!" step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance." - step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." - step5_6: "The Social {icon} timeline is your home + local." + step5_5: "The Social {icon} timeline is where you can see posts only from the accounts you follow." + step5_6: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance." step6_1: "So, what is this place?" step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"." diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml index ced0d67b7..3f8a4b7b9 100644 --- a/locales/sk-SK.yml +++ b/locales/sk-SK.yml @@ -1174,27 +1174,6 @@ _time: minute: "min" hour: "hod" day: "dní" -_tutorial: - title: "How to use Calckey" - step1_1: "Welcome!" - step1_2: "Let's get you set up. You'll be up and running in no time!" - step2_1: "First, please fill out your profile." - step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you." - step3_1: "Now time to follow some people!" - step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them." - step4_1: "Let's get you out there." - step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\"" - step5_1: "Timelines, timelines everywhere!" - step5_2: "Your instance has {timelines} different timelines enabled." - step5_3: "The Home {icon} timeline is where you can see posts from your followers." - step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance." - step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." - step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers." - step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance." - step6_1: "So, what is this place?" - step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"." - step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time." - step6_4: "Now go, explore, and have fun!" _2fa: alreadyRegistered: "Už ste zaregistrovali 2-faktorové autentifikačné zariadenie." registerDevice: "Registrovať nové zariadenie" diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml index 4f38b80c8..48ef4e323 100644 --- a/locales/vi-VN.yml +++ b/locales/vi-VN.yml @@ -1179,27 +1179,6 @@ _time: minute: "phút" hour: "giờ" day: "ngày" -_tutorial: - title: "How to use Calckey" - step1_1: "Welcome!" - step1_2: "Let's get you set up. You'll be up and running in no time!" - step2_1: "First, please fill out your profile." - step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you." - step3_1: "Now time to follow some people!" - step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them." - step4_1: "Let's get you out there." - step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\"" - step5_1: "Timelines, timelines everywhere!" - step5_2: "Your instance has {timelines} different timelines enabled." - step5_3: "The Home {icon} timeline is where you can see posts from your followers." - step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance." - step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend." - step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers." - step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance." - step6_1: "So, what is this place?" - step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"." - step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time." - step6_4: "Now go, explore, and have fun!" _2fa: alreadyRegistered: "Bạn đã đăng ký thiết bị xác minh 2 bước." registerDevice: "Đăng ký một thiết bị" diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index 5df37c958..1e18b7aa6 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -20,6 +20,12 @@ + + + + + + {{ i18n.ts.showFixedPostForm }} @@ -127,6 +133,7 @@ async function reloadAsk() { } const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind')); +const showLocalPostsInTimeline = computed(defaultStore.makeGetterSetter('showLocalPostsInTimeline')); const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior')); const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v)); const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal')); @@ -183,6 +190,7 @@ watch([ showGapBetweenNotesInTimeline, instanceTicker, overridedDeviceKind, + showLocalPostsInTimeline, showAds, showUpdates, swipeOnDesktop, diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue index 9340b4440..62ad029f3 100644 --- a/packages/client/src/pages/settings/preferences-backups.vue +++ b/packages/client/src/pages/settings/preferences-backups.vue @@ -55,6 +55,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [ 'widgets', 'tl', 'overridedDeviceKind', + 'showLocalPostsInTimeline', 'serverDisconnectedBehavior', 'nsfw', 'showAds', diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index a3d272e4d..5a5e51ec6 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -94,17 +94,27 @@ const keymap = { t: focus, }; -let timelines = ['home']; +let timelines = []; + +if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') { + timelines.push('social'); +} else { + timelines.push('home'); +} if (isLocalTimelineAvailable) { timelines.push('local'); } + +if (isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home') { + timelines.push('home'); +} else if (isLocalTimelineAvailable) { + timelines.push('social'); +} + if (isRecommendedTimelineAvailable) { timelines.push('recommended'); } -if (isLocalTimelineAvailable) { - timelines.push('social'); -} if (isGlobalTimelineAvailable) { timelines.push('global'); } @@ -220,13 +230,26 @@ const headerActions = $computed(() => [ }*/, ]); +// Swap home timeline with social's functionality + const headerTabs = $computed(() => [ - { - key: 'home', - title: i18n.ts._timelines.home, - icon: 'ph-house ph-bold ph-lg', - iconOnly: true, - }, + ...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home' + ? [ + { + key: 'social', + title: i18n.ts._timelines.home, + icon: 'ph-house ph-bold ph-lg', + iconOnly: true, + }, + ] + : [ + { + key: 'home', + title: i18n.ts._timelines.home, + icon: 'ph-house ph-bold ph-lg', + iconOnly: true, + } + ]), ...(isLocalTimelineAvailable ? [ { @@ -237,6 +260,24 @@ const headerTabs = $computed(() => [ }, ] : []), + ...(isLocalTimelineAvailable && defaultStore.state.showLocalPostsInTimeline === 'home' + ? [ + { + key: 'home', + title: i18n.ts._timelines.social, + icon: 'ph-handshake ph-bold ph-lg', + iconOnly: true, + }, + ] + : isLocalTimelineAvailable ? [ + { + key: 'social', + title: i18n.ts._timelines.social, + icon: 'ph-handshake ph-bold ph-lg', + iconOnly: true, + }, + ] + : []), ...(isRecommendedTimelineAvailable ? [ { @@ -247,16 +288,6 @@ const headerTabs = $computed(() => [ }, ] : []), - ...(isLocalTimelineAvailable - ? [ - { - key: 'social', - title: i18n.ts._timelines.social, - icon: 'ph-handshake ph-bold ph-lg', - iconOnly: true, - }, - ] - : []), ...(isGlobalTimelineAvailable ? [ { @@ -275,13 +306,17 @@ definePageMetadata( icon: src === 'local' ? 'ph-users ph-bold ph-lg' - : src === 'social' - ? 'ph-handshake ph-bold ph-lg' - : src === 'recommended' - ? 'ph-thumbs-up ph-bold ph-lg' - : src === 'global' - ? 'ph-planet ph-bold ph-lg' - : 'ph-house ph-bold ph-lg', + : src === 'social' && defaultStore.state.showLocalPostsInTimeline === 'home' + ? 'ph-house ph-bold ph-lg' + : src === 'social' + ? 'ph-handshake ph-bold ph-lg' + : src === 'recommended' + ? 'ph-thumbs-up ph-bold ph-lg' + : src === 'global' + ? 'ph-planet ph-bold ph-lg' + : src === 'home' && defaultStore.state.showLocalPostsInTimeline === 'home' + ? 'ph-handshake ph-bold ph-lg' + : 'ph-house ph-bold ph-lg', })), ); diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 0e23ae1b7..6c0398ac4 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -133,6 +133,10 @@ export const defaultStore = markRaw( where: "device", default: null as null | "smartphone" | "tablet" | "desktop", }, + showLocalPostsInTimeline: { + where: "device", + default: "home" as "home" | "social", + }, serverDisconnectedBehavior: { where: "device", default: "nothing" as "nothing" | "quiet" | "reload" | "dialog",