[client] Add wellness preferences

locales/en-US.yml

@@ -2138,3 +2138,9 @@ _cwStyle:
   alternative: "Alternative (Firefish-like)"
 alwaysExpandCws: "Always expand posts with content warnings"
 hideFromHome: "Hide from home timeline"
+_wellness:
+  name: "Wellness"
+  description: "These settings allow you to adjust possibly addictive or anxiety-inducing aspects of social media. Choose the settings that are ideal for you."
+  newPostsButton: "Enable new posts alert button"
+  newPostsGlowOpacity: "New posts glow opacity"
+  immediacy: "Immediacy"

packages/client/src/components/MkTimeline.vue

@@ -9,11 +9,16 @@
 			<template #icon></template>
 		</I18n>
 	</MkInfo>
-	<div v-if="queue > 0" class="new">
+	<div
+		v-if="queue > 0"
+		class="new"
+		:class="{ noShadow: newPostsGlowOpacity < 0.05 }"
+		:style="{ '--opacity': newPostsGlowOpacity }"
+	>
 		<button
 			class="_buttonPrimary _shadow"
 			@click="tlComponent.scrollTop()"
-			:class="{ instant: !$store.state.animation }"
+			:class="{ instant: !$store.state.animation, isHidden: !newPostsButton }"
 		>
 			{{ i18n.ts.newNoteRecived }}
 			<i class="ph-arrow-up ph-bold"></i>
@@ -246,6 +251,15 @@ const timetravel = (date?: Date) => {
 	this.$refs.tl.reload();
 };
 */
+
+const newPostsButton = computed(
+		defaultStore.makeGetterSetter("newPostsButton"),
+);
+
+const newPostsGlowOpacity = computed(
+		defaultStore.makeGetterSetter("newPostsGlowOpacity"),
+);
+
 </script>
 <style lang="scss" scoped>
 @keyframes slideUp {
@@ -267,11 +281,21 @@ const timetravel = (date?: Date) => {
 	margin-top: -60px;
 	z-index: 1001;
 	box-shadow: 0 24px 24px -20px var(--accentedBg);
+
+	> .isHidden {
+		display: none;
+	}
+
+	&.noShadow {
+		box-shadow: 0 0;
+	}
+
 	&::after {
 		content: "";
 		position: absolute;
 		inset: -2px 0;
 		border: 2px solid var(--accentDarken);
+		opacity: var(--opacity);
 		mask: linear-gradient(
 			to right,
 			transparent,

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

@@ -176,6 +176,12 @@ const menuDef = computed(() => [
 				to: "/settings/sounds",
 				active: currentPage?.route.name === "sounds",
 			},
+			{
+				icon: "ph-heart ph-bold ph-lg",
+				text: i18n.ts._wellness.name,
+				to: "/settings/wellness",
+				active: currentPage?.route.name === "wellness",
+			},
 			{
 				icon: "ph-plug ph-bold ph-lg",
 				text: i18n.ts.plugins,

packages/client/src/pages/settings/preferences-backups.vue

@@ -118,6 +118,8 @@ const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [
 	"expandOnNoteClick",
 	"alwaysExpandCws",
 	"cwStyle",
+	"newPostsButton",
+	"newPostsGlowOpacity",
 ];
 const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
 	"lightTheme",

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

@@ -0,0 +1,47 @@
+<template>
+	<div class="_formRoot">
+		<MkInfo>
+			{{ i18n.ts._wellness.description }}
+		</MkInfo>
+		<FormSection>
+			<template #label>{{ i18n.ts._wellness.immediacy }}</template>
+			<FormSwitch v-model="newPostsButton" class="_formBlock">{{
+					i18n.ts._wellness.newPostsButton
+				}}</FormSwitch>
+			<FormRange
+				v-model="newPostsGlowOpacity"
+				:min="0"
+				:max="1"
+				:step="0.05"
+				:text-converter="(v) => `${Math.floor(v * 100)}%`"
+				class="_formBlock"
+			>
+				<template #label>{{ i18n.ts._wellness.newPostsGlowOpacity }}</template>
+			</FormRange>
+		</FormSection>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import FormRange from "@/components/form/range.vue";
+import { defaultStore } from "@/store";
+import { i18n } from "@/i18n";
+import { definePageMetadata } from "@/scripts/page-metadata";
+import FormSwitch from "@/components/form/switch.vue";
+import MkInfo from "@/components/MkInfo.vue";
+import FormSection from "@/components/form/section.vue";
+
+const newPostsButton = computed(
+		defaultStore.makeGetterSetter("newPostsButton"),
+);
+
+const newPostsGlowOpacity = computed(
+		defaultStore.makeGetterSetter("newPostsGlowOpacity"),
+);
+
+definePageMetadata({
+	title: i18n.ts._wellness.wellness,
+	icon: "ph-heart ph-bold ph-lg",
+});
+</script>

packages/client/src/router.ts

@@ -261,6 +261,11 @@ export const routes = [
 				name: "other",
 				component: page(() => import("./pages/settings/other.vue")),
 			},
+			{
+				path: "/wellness",
+				name: "wellness",
+				component: page(() => import("./pages/settings/wellness.vue")),
+			},
 			{
 				path: "/",
 				component: page(() => import("./pages/_empty_.vue")),

packages/client/src/store.ts

@@ -343,6 +343,14 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: false,
 		},
+		newPostsButton: {
+			where: "device",
+			default: true,
+		},
+		newPostsGlowOpacity: {
+			where: "device",
+			default: 1.0,
+		},
 	}),
 );