upd: add corner roundness setting

locales/en-US.yml

@@ -507,6 +507,7 @@ createAccount: "Create account"
 existingAccount: "Existing account"
 regenerate: "Regenerate"
 fontSize: "Font size"
+cornerRadius: "Corner roundness"
 mediaListWithOneImageAppearance: "Height of media lists with one image only"
 limitTo: "Limit to {x}"
 noFollowRequests: "You don't have any pending follow requests"

locales/index.d.ts

@@ -510,6 +510,7 @@ export interface Locale {
     "existingAccount": string;
     "regenerate": string;
     "fontSize": string;
+    "cornerRadius": string;
     "mediaListWithOneImageAppearance": string;
     "limitTo": string;
     "noFollowRequests": string;

locales/ja-JP.yml

@@ -507,6 +507,7 @@ createAccount: "アカウントを作成"
 existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
+cornerRadius: "コーナーの丸み"
 mediaListWithOneImageAppearance: "画像が1枚のみのメディアリストの高さ"
 limitTo: "{x}を上限に"
 noFollowRequests: "フォロー申請はありません"

packages/backend/src/server/web/boot.js

@@ -132,6 +132,11 @@
 		document.documentElement.classList.add('f-' + fontSize);
 	}
 
+	const cornerRadius = localStorage.getItem('cornerRadius');
+	if (cornerRadius) {
+		document.documentElement.classList.add(`radius-${cornerRadius}`);
+	}
+
 	const useSystemFont = localStorage.getItem('useSystemFont');
 	if (useSystemFont) {
 		document.documentElement.classList.add('useSystemFont');

packages/frontend/src/local-storage.ts

@@ -21,6 +21,7 @@ type Keys =
 	'colorScheme' |
 	'useSystemFont' |
 	'fontSize' |
+	'cornerRadius' |
 	'ui' |
 	'ui_temp' |
 	'locale' |

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

@@ -142,6 +142,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="2"><span style="font-size: 16px;">Aa</span></option>
 				<option value="3"><span style="font-size: 17px;">Aa</span></option>
 			</MkRadios>
+
+			<MkRadios v-model="cornerRadius">
+				<template #label>{{ i18n.ts.cornerRadius }}</template>
+				<option :value="null">Sharkey</option>
+				<option value="misskey">Misskey</option>
+			</MkRadios>
 		</div>
 	</FormSection>
 
@@ -212,6 +218,7 @@ import { claimAchievement } from '@/scripts/achievements.js';
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
+const cornerRadius = ref(miLocalStorage.getItem('cornerRadius'));
 const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);
 
 async function reloadAsk() {
@@ -277,6 +284,14 @@ watch(fontSize, () => {
 	}
 });
 
+watch(cornerRadius, () => {
+	if (cornerRadius.value == null) {
+		miLocalStorage.removeItem('cornerRadius');
+	} else {
+		miLocalStorage.setItem('cornerRadius', cornerRadius.value);
+	}
+});
+
 watch(useSystemFont, () => {
 	if (useSystemFont.value) {
 		miLocalStorage.setItem('useSystemFont', 't');
@@ -288,6 +303,7 @@ watch(useSystemFont, () => {
 watch([
 	lang,
 	fontSize,
+	cornerRadius,
 	useSystemFont,
 	enableInfiniteScroll,
 	squareAvatars,

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

@@ -114,6 +114,7 @@ type Profile = {
 		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
 		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
 		fontSize: string | null;
+		cornerRadius: string | null;
 		useSystemFont: 't' | null;
 		wallpaper: string | null;
 	};
@@ -171,6 +172,7 @@ function getSettings(): Profile['settings'] {
 		hot,
 		cold,
 		fontSize: miLocalStorage.getItem('fontSize'),
+		cornerRadius: miLocalStorage.getItem('cornerRadius'),
 		useSystemFont: miLocalStorage.getItem('useSystemFont') as 't' | null,
 		wallpaper: miLocalStorage.getItem('wallpaper'),
 	};
@@ -284,6 +286,13 @@ async function applyProfile(id: string): Promise<void> {
 		miLocalStorage.removeItem('fontSize');
 	}
 
+	// cornerRadius
+	if (settings.cornerRadius) {
+		miLocalStorage.setItem('cornerRadius', settings.cornerRadius);
+	} else {
+		miLocalStorage.removeItem('cornerRadius');
+	}
+
 	// useSystemFont
 	if (settings.useSystemFont) {
 		miLocalStorage.setItem('useSystemFont', settings.useSystemFont);