feat: show migration info

src/App.tsx

@@ -6,6 +6,7 @@ import { persistQueryClient } from '@tanstack/query-persist-client-core';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { get as getItem, set as setItem, del as removeItem } from 'idb-keyval';
 
+import DomainTransferInfo from '@/components/DomainTransferInfo';
 import useColorTheme from '@/hooks/useColorTheme';
 import i18nextInstance from '@/i18n/i18n';
 import { I18NextProvider } from '@/i18n/useTranslation';
@@ -48,12 +49,14 @@ const App: Component = () => {
   return (
     <I18NextProvider i18next={i18next}>
       <QueryClientProvider client={queryClient}>
-        <HashRouter>
-          <Route path="/hello" component={() => <Hello />} />
-          <Route path="/" component={() => <Home />} />
-          <Route path="/:id" component={() => <Permalink />} />
-          <Route path="/*" component={() => <NotFound />} />
-        </HashRouter>
+        <DomainTransferInfo>
+          <HashRouter>
+            <Route path="/hello" component={() => <Hello />} />
+            <Route path="/" component={() => <Home />} />
+            <Route path="/:id" component={() => <Permalink />} />
+            <Route path="/*" component={() => <NotFound />} />
+          </HashRouter>
+        </DomainTransferInfo>
       </QueryClientProvider>
     </I18NextProvider>
   );

src/components/DomainTransferInfo.tsx

@@ -0,0 +1,47 @@
+import { createSignal, Show, type Component, type JSX } from 'solid-js';
+
+import XMark from 'heroicons/24/outline/x-mark.svg';
+
+import SafeLink from '@/components/utils/SafeLink';
+import { useTranslation } from '@/i18n/useTranslation';
+
+const isPermittedDomain = (url: URL | Location) =>
+  url.host === 'rabbit.syusui.net' || url.host.startsWith('localhost');
+
+const DomainTransferInfo: Component<{ children: JSX.Element }> = (props) => {
+  const i18n = useTranslation();
+  const [showContent, setShowContent] = createSignal(false);
+
+  return (
+    <Show
+      when={isPermittedDomain(window.location) || showContent()}
+      fallback={
+        <div class="flex h-svh w-screen shrink-0 flex-col items-center justify-center border-b border-border bg-bg-tertiary text-fg">
+          <h3 class="text-2xl font-bold">{i18n()('domainTransfer.announcementHead')}</h3>
+          <div>{i18n()('domainTransfer.announcementDescription')}</div>
+          <SafeLink class="text-lg text-link underline" href="https://rabbit.syusui.net/" />
+          <SafeLink
+            class="mt-4 text-sm text-link underline"
+            href="https://scrapbox.io/nostr/Rabbit#659be5fa1246d700005facb8"
+          >
+            {i18n()('domainTransfer.howToMigrateSettings')}
+          </SafeLink>
+          <button
+            type="button"
+            class="mt-4 flex items-center text-fg-secondary"
+            onClick={() => setShowContent(true)}
+          >
+            <span class="inline-block h-5 w-5">
+              <XMark />
+            </span>
+            {i18n()('domainTransfer.close')}
+          </button>
+        </div>
+      }
+    >
+      {props.children}
+    </Show>
+  );
+};
+
+export default DomainTransferInfo;

src/locales/en.ts

@@ -188,4 +188,10 @@ export default {
     signerUnavailable: 'Please install NIP-07 browser extension.',
     loginWithSigner: 'Login with NIP-07 browser extension',
   },
+  domainTransfer: {
+    announcementHead: 'Rabbit has moved to the new domain',
+    announcementDescription: 'Please update your bookmark and links',
+    howToMigrateSettings: 'How to migrate settings',
+    close: 'Close',
+  },
 } satisfies typeof ja;

src/locales/ja.ts

@@ -185,4 +185,10 @@ export default {
     signerUnavailable: '利用にはNIP-07に対応した拡張機能が必要です。',
     loginWithSigner: 'NIP-07 拡張機能でログイン',
   },
+  domainTransfer: {
+    announcementHead: 'Rabbitは新しいドメインに移りました',
+    announcementDescription: 'ブックマークやリンクの更新をお願いします',
+    howToMigrateSettings: '設定の移行方法について',
+    close: '閉じる',
+  },
 };