feat: import/export config via clipboard

src/components/modal/Config.tsx

@@ -636,6 +636,7 @@ const ConfigUI = (props: ConfigProps) => {
   const i18n = useTranslation();
   const [menuIndex, setMenuIndex] = createSignal<number | null>(null);
   const { canImport, importConfig } = useOldConfig();
+  const { config, setConfig } = useConfig();
 
   const menu = [
     {
@@ -692,19 +693,54 @@ const ConfigUI = (props: ConfigProps) => {
           fallback={
             <>
               <h2 class="flex-1 text-center text-lg font-bold">{i18n()('config.config')}</h2>
-              <Show when={canImport()}>
+              <div class="flex gap-1">
-                <button
+                <Show when={canImport() && window.location.host === 'syusui-s.github.io'}>
-                  type="button"
+                  <button
-                  class="rounded bg-primary p-2 text-primary-fg"
+                    type="button"
-                  onClick={() => {
+                    class="rounded bg-primary p-2 text-primary-fg"
-                    if (window.confirm(i18n()('config.confirmImportOldDomainConfig'))) {
+                    onClick={() => {
-                      importConfig();
+                      if (window.confirm(i18n()('config.confirmImportOldDomainConfig'))) {
-                    }
+                        importConfig();
-                  }}
+                      }
-                >
+                    }}
-                  {i18n()('config.importOldDomainConfig')}
+                  >
-                </button>
+                    {i18n()('config.importOldDomainConfig')}
-              </Show>
+                  </button>
+                </Show>
+                <Show when={window.location.host === 'syusui-s.github.io'}>
+                  <button
+                    type="button"
+                    class="rounded bg-primary p-2 text-primary-fg"
+                    onClick={() => {
+                      navigator.clipboard
+                        .writeText(JSON.stringify(config(), null, 2))
+                        .then(() => window.alert('OK'))
+                        .catch(() => window.alert('failed to copy'));
+                    }}
+                  >
+                    {i18n()('config.copyToClipboard')}
+                  </button>
+                </Show>
+                <Show when={window.location.host === 'rabbit.syusui.net'}>
+                  <button
+                    type="button"
+                    class="rounded bg-primary p-2 text-primary-fg"
+                    onClick={() => {
+                      const text = window.prompt('Paste config') ?? '';
+                      if (text.length === 0) {
+                        window.alert('empty');
+                        return;
+                      }
+                      const json = JSON.parse(text) as ReturnType<typeof config>;
+                      if (window.confirm(`import?:\n${text}`)) {
+                        setConfig(json);
+                      }
+                    }}
+                  >
+                    {i18n()('config.importFromClipboard')}
+                  </button>
+                </Show>
+              </div>
               <ul class="flex flex-col">
                 <For each={menu}>
                   {(menuItem, i) => (

src/locales/en.ts

@@ -126,7 +126,9 @@ export default {
   config: {
     config: 'Settings',
     importOldDomainConfig: 'Import config from the old domain',
-    confirmImportOldDomainConfig: 'Import? (The config will be overwritten)',
+    confirmImport: 'Import? (The config will be overwritten)',
+    copyToClipboard: 'Copy to clipboard',
+    importFromClipboard: 'Import from clipboard',
     profile: {
       profile: 'Profile',
       openProfile: 'Open',

src/locales/ja.ts

@@ -122,7 +122,9 @@ export default {
   config: {
     config: '設定',
     importOldDomainConfig: '古いドメインから設定をインポート',
-    confirmImportOldDomainConfig: 'インポートしますか？（現在の設定は上書きされます）',
+    confirmImport: 'インポートしますか？（現在の設定は上書きされます）',
+    copyToClipboard: 'クリップボードに設定をコピー',
+    importFromClipboard: '設定をクリップボードから読み込む',
     profile: {
       profile: 'プロフィール',
       openProfile: '開く',