Add redirect for coracle chat

src/app/ModalRoutes.svelte

@@ -29,6 +29,7 @@
   import ReportCreate from "src/app/views/ReportCreate.svelte"
   import DataImport from "src/app/views/DataImport.svelte"
   import DataExport from "src/app/views/DataExport.svelte"
+  import ChatRedirect from "src/app/views/ChatRedirect.svelte"
   import RelayBrowse from "src/app/views/RelayBrowse.svelte"
   import RelayDetail from "src/app/views/RelayDetail.svelte"
   import RelayReview from "src/app/views/RelayReview.svelte"
@@ -104,6 +105,8 @@
   <DataExport />
 {:else if m.type === "data/import"}
   <DataImport />
+{:else if m.type === "chat/redirect"}
+  <ChatRedirect />
 {:else if m.type === "bech32"}
   <Bech32Entity entity={m.entity} />
 {:else if m.type === "qrcode"}

src/app/SideNav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
-  import {theme, installPrompt} from "src/partials/state"
+  import {modal, theme, installPrompt} from "src/partials/state"
   import Anchor from "src/partials/Anchor.svelte"
   import {
     hasNewNip28Messages,
@@ -14,6 +14,10 @@
 
   const toggleTheme = () => theme.update(t => (t === "dark" ? "light" : "dark"))
 
+  const openNip28Chat = () => {
+    modal.push({type: "chat/redirect"})
+  }
+
   const install = () => {
     $installPrompt.prompt()
 
@@ -84,7 +88,9 @@
     </li>
   {/if}
   <li class="relative">
-    <a class="block px-4 py-2 transition-all hover:bg-accent hover:text-white" href="/chat">
+    <a
+      class="block px-4 py-2 transition-all hover:bg-accent hover:text-white"
+      on:click={openNip28Chat}>
       <i class="fa fa-comment mr-2" /> Chat
       {#if $hasNewNip28Messages}
         <div

src/app/views/ChatRedirect.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import {modal, appName} from "src/partials/state"
+  import Card from "src/partials/Card.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
+  import Content from "src/partials/Content.svelte"
+  import Heading from "src/partials/Heading.svelte"
+</script>
+
+<Content size="lg" on:click={modal.pop}>
+  <div class="flex flex-col items-center justify-center">
+    <Heading>Select Chat App</Heading>
+    <p>
+      {appName} is phasing out public chat. Please select an alternative chat app from the options below.
+    </p>
+  </div>
+  <Anchor external href="https://www.nostrchat.io">
+    <Card invertColors interactive class="flex flex-col gap-4">
+      <p class="text-2xl">Nostrichat</p>
+      <p>A clean interface that allows you to access your DMs and public group chats.</p>
+    </Card>
+  </Anchor>
+  <Anchor external href="https://chat.coracle.social">
+    <Card invertColors interactive class="flex flex-col gap-4">
+      <p class="text-2xl">Coracle Chat</p>
+      <p>Use the legacy version of Coracle's chat at chat.coracle.social.</p>
+    </Card>
+  </Anchor>
+</Content>