Start admin custom css

CALCKEY.md

@@ -10,7 +10,6 @@
 - Better intro/onboarding
 - Fully revamp non-logged-in screen
 - Personal notes for all accounts
-- Admin custom CSS
 - Non-nyaify cat mode
 - Timeline filters
 - "Bubble" timeline
@@ -28,6 +27,7 @@
 
 - Less cluttered notification summary
 - Better timeline top bar
+- Admin custom CSS
 
 ## Implemented
 

locales/en-US.yml

@@ -900,6 +900,7 @@ account: "Account"
 move: "Move"
 showAds: "Show ads"
 enterSendsMessage: "Press Return in Messaging to send message (off is Ctrl + Return)"
+adminCustomCssWarn: "This setting should only be used if you know what it does. Entering improper values may cause EVERYONE'S clients to stop functioning normally. Please ensure your CSS works properly by testing it in your user settings."
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."

locales/ja-JP.yml

@@ -900,6 +900,7 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
+adminCustomCssWarn: "この設定は、それが何をするものであるかを知っている場合のみ使用してください。不適切な値を入力すると、クライアントが正常に動作しなくなる可能性があります。ユーザー設定でCSSをテストし、正しく動作することを確認してください。"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"

packages/client/src/pages/admin/custom-css.vue

@@ -0,0 +1,48 @@
+<template>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ i18n.ts.adminCustomCssWarn }}</FormInfo>
+
+	<FormTextarea v-model="globalCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
+		<template #label>Instance CSS</template>
+	</FormTextarea>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormInfo from '@/components/ui/info.vue';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+
+/*
+async function apply() {
+	localStorage.setItem('customCss', globalCustomCss.value);
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+watch(globalCustomCss, async () => {
+	await apply();
+});
+*/
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.customCss,
+	icon: 'fas fa-code',
+});
+</script>