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 <kordaris@gmail.com>
Co-authored-by: ThatOneCalculator <kainoa@t1c.dev>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9597
Co-authored-by: yawhn <yawhn@noreply.codeberg.org>
Co-committed-by: yawhn <yawhn@noreply.codeberg.org>

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: "سجّل جهازًا جديدًا"

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: "নতুন ডিভাইস নিবন্ধন করুন"

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\"."

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"

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ị"

packages/client/src/pages/settings/general.vue

@@ -20,6 +20,12 @@
 		<option value="desktop"><i class="ph-desktop ph-bold ph-lg"/> {{ i18n.ts.desktop }}</option>
 	</FormRadios>
 
+	<FormRadios v-model="showLocalPostsInTimeline" class="_formBlock">
+		<template #label>{{ i18n.ts.showLocalPosts }}</template>
+		<option value="home"><i class="ph-house ph-bold ph-lg"/> {{ i18n.ts.homeTimeline }}</option>
+		<option value="social"><i class="ph-handshake ph-bold ph-lg"/> {{ i18n.ts.socialTimeline }}</option>
+	</FormRadios>
+
 	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
 
 	<FormSection>
@@ -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,

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',

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(() => [
+	...(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,12 +306,16 @@ definePageMetadata(
 		icon:
 			src === 'local'
 				? 'ph-users 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',
 	})),
 );

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",