From 74b52213eec21e9ead7574cdfd1f8cc11022e000 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 25 Jul 2022 17:00:44 -0700
Subject: [PATCH] Start admin custom css

---
 CALCKEY.md                                    |  2 +-
 locales/en-US.yml                             |  1 +
 locales/ja-JP.yml                             |  1 +
 .../client/src/pages/admin/custom-css.vue     | 48 +++++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/pages/admin/custom-css.vue

diff --git a/CALCKEY.md b/CALCKEY.md
index 859428acd3..cc6539ed22 100644
--- a/CALCKEY.md
+++ b/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
@@ -22,6 +21,7 @@
 
 - Less cluttered notification summary
 - Better timeline top bar
+- Admin custom CSS
 
 ## Implemented
 
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 7a507d27d4..0088af46d5 100644
--- a/locales/en-US.yml
+++ b/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."
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4ac0f509cb..1c832e1f7a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -900,6 +900,7 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
+adminCustomCssWarn: "この設定は、それが何をするものであるかを知っている場合のみ使用してください。不適切な値を入力すると、クライアントが正常に動作しなくなる可能性があります。ユーザー設定でCSSをテストし、正しく動作することを確認してください。"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/custom-css.vue
new file mode 100644
index 0000000000..65c70dda7d
--- /dev/null
+++ b/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>