Accessibility settings without login 2/2

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

@@ -89,7 +89,41 @@ const ro = new ResizeObserver((entries, observer) => {
 	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = computed(() => [
+let menuDef = computed(() => [
+	{
+		title: i18n.ts.clientSettings,
+		items: [
+			{
+				icon: "ph-gear-six ph-bold ph-lg",
+				text: i18n.ts.general,
+				to: "/settings/general",
+				active: currentPage?.route.name === "general",
+			},
+			{
+				icon: "ph-palette ph-bold ph-lg",
+				text: i18n.ts.theme,
+				to: "/settings/theme",
+				active: currentPage?.route.name === "theme",
+			},
+			{
+				icon: "ph-speaker-high ph-bold ph-lg",
+				text: i18n.ts.sounds,
+				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",
+			},
+		],
+	},
+]);
+
+// If logged in, give more options...
+if ($i) {
+	menuDef = computed(() => [
 		{
 			title: i18n.ts.basicSettings,
 			items: [
@@ -278,6 +312,7 @@ const menuDef = computed(() => [
 			],
 		},
 	]);
+}
 
 watch($$(narrow), () => {});
 
@@ -287,7 +322,11 @@ onMounted(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
+		// Check if logged in...
+		if ($i)
 			router.replace("/settings/profile");
+		else
+			router.replace("/settings/general");
 	}
 });
 
@@ -295,7 +334,11 @@ onActivated(() => {
 	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
 
 	if (!narrow && currentPage?.route.name == null) {
+		// Check if logged in...
+		if ($i)
 			router.replace("/settings/profile");
+		else
+			router.replace("/settings/general");
 	}
 });
 
@@ -309,12 +352,16 @@ watch(router.currentRef, (to) => {
 		to.child?.route.name == null &&
 		!narrow
 	) {
+		// Check if logged in...
+		if ($i)
 			router.replace("/settings/profile");
+		else
+			router.replace("/settings/general");
 	}
 });
 
 const emailNotConfigured = computed(
-	() => instance.enableEmail && ($i.email == null || !$i.emailVerified),
+	() => instance.enableEmail && ($i) && ($i.email == null || !$i.emailVerified),
 );
 
 provideMetadataReceiver((info) => {

packages/client/src/router.ts

@@ -58,47 +58,54 @@ export const routes = [
 		name: "settings",
 		path: "/settings",
 		component: page(() => import("./pages/settings/index.vue")),
-		loginRequired: true,
 		children: [
 			{
 				path: "/profile",
 				name: "profile",
 				component: page(() => import("./pages/settings/profile.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/privacy",
 				name: "privacy",
 				component: page(() => import("./pages/settings/privacy.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/reaction",
 				name: "reaction",
 				component: page(() => import("./pages/settings/reaction.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/drive",
 				name: "drive",
 				component: page(() => import("./pages/settings/drive.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/notifications",
 				name: "notifications",
 				component: page(() => import("./pages/settings/notifications.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/email",
 				name: "email",
 				component: page(() => import("./pages/settings/email.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/integration",
 				name: "integration",
 				component: page(() => import("./pages/settings/integration.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/security",
 				name: "security",
 				component: page(() => import("./pages/settings/security.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/general",
@@ -109,11 +116,13 @@ export const routes = [
 				path: "/theme/install",
 				name: "theme",
 				component: page(() => import("./pages/settings/theme.install.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/theme/manage",
 				name: "theme",
 				component: page(() => import("./pages/settings/theme.manage.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/theme",
@@ -124,6 +133,7 @@ export const routes = [
 				path: "/custom-css",
 				name: "custom-css",
 				component: page(() => import("./pages/settings/custom-css.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/custom-katex-macro",
@@ -131,21 +141,25 @@ export const routes = [
 				component: page(
 					() => import("./pages/settings/custom-katex-macro.vue"),
 				),
+				loginRequired: true,
 			},
 			{
 				path: "/account-info",
 				name: "account-info",
 				component: page(() => import("./pages/settings/account-info.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/navbar",
 				name: "navbar",
 				component: page(() => import("./pages/settings/navbar.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/statusbar",
 				name: "statusbar",
 				component: page(() => import("./pages/settings/statusbar.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/sounds",
@@ -156,56 +170,67 @@ export const routes = [
 				path: "/plugin/install",
 				name: "plugin",
 				component: page(() => import("./pages/settings/plugin.install.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/plugin",
 				name: "plugin",
 				component: page(() => import("./pages/settings/plugin.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/import-export",
 				name: "import-export",
 				component: page(() => import("./pages/settings/import-export.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/instance-mute",
 				name: "instance-mute",
 				component: page(() => import("./pages/settings/instance-mute.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/mute-block",
 				name: "mute-block",
 				component: page(() => import("./pages/settings/mute-block.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/word-mute",
 				name: "word-mute",
 				component: page(() => import("./pages/settings/word-mute.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/api",
 				name: "api",
 				component: page(() => import("./pages/settings/api.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/apps",
 				name: "apps",
 				component: page(() => import("./pages/settings/apps.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/webhook/edit/:webhookId",
 				name: "webhook",
 				component: page(() => import("./pages/settings/webhook.edit.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/webhook/new",
 				name: "webhook",
 				component: page(() => import("./pages/settings/webhook.new.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/webhook",
 				name: "webhook",
 				component: page(() => import("./pages/settings/webhook.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/deck",
@@ -216,6 +241,7 @@ export const routes = [
 				path: "/delete-account",
 				name: "delete-account",
 				component: page(() => import("./pages/settings/delete-account.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/preferences-backups",
@@ -223,16 +249,19 @@ export const routes = [
 				component: page(
 					() => import("./pages/settings/preferences-backups.vue"),
 				),
+				loginRequired: true,
 			},
 			{
 				path: "/migration",
 				name: "migration",
 				component: page(() => import("./pages/settings/migration.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/custom-css",
 				name: "general",
 				component: page(() => import("./pages/settings/custom-css.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/custom-katex-macro",
@@ -240,26 +269,31 @@ export const routes = [
 				component: page(
 					() => import("./pages/settings/custom-katex-macro.vue"),
 				),
+				loginRequired: true,
 			},
 			{
 				path: "/accounts",
 				name: "profile",
 				component: page(() => import("./pages/settings/accounts.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/account-info",
 				name: "other",
 				component: page(() => import("./pages/settings/account-info.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/delete-account",
 				name: "other",
 				component: page(() => import("./pages/settings/delete-account.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/other",
 				name: "other",
 				component: page(() => import("./pages/settings/other.vue")),
+				loginRequired: true,
 			},
 			{
 				path: "/wellness",