Add apps screen

src/app/Routes.svelte

@@ -9,6 +9,7 @@
   import ChatList from "src/app/views/ChatList.svelte"
   import Feeds from "src/app/views/Feeds.svelte"
   import UserKeys from "src/app/views/UserKeys.svelte"
+  import Apps from "src/app/views/Apps.svelte"
   import Login from "src/app/views/Login.svelte"
   import Logout from "src/app/views/Logout.svelte"
   import MessagesDetail from "src/app/views/MessagesDetail.svelte"
@@ -64,6 +65,7 @@
         <MessagesDetail entity={params.entity} />
       {/key}
     </Route>
+    <Route path="/apps" component={Apps} />
     <Route path="/keys" component={UserKeys} />
     <Route path="/relays" component={RelayList} />
     <Route path="/relays/:b64OrUrl" let:params>

src/app/SideNav.svelte

@@ -82,6 +82,11 @@
       {/if}
     </a>
   </li>
+  <li class="cursor-pointer">
+    <a class="block px-4 py-2 transition-all hover:bg-accent hover:text-white" href="/apps">
+      <i class="fa fa-motorcycle mr-2" /> Apps
+    </a>
+  </li>
   <li class="mx-3 my-4 h-px bg-gray-6" />
   {#if pool.forceUrls.length === 0}
     <li class="relative cursor-pointer">

src/app/views/Apps.svelte

@@ -0,0 +1,45 @@
+<script>
+  import {fly} from "svelte/transition"
+  import Media from "src/partials/Media.svelte"
+  import Card from "src/partials/Card.svelte"
+  import Heading from "src/partials/Heading.svelte"
+
+  const apps = [
+    ["https://zapstr.live", "Zapstr", "Stream music, zap artists"],
+    [
+      "https://highlighter.com",
+      "Highlighter",
+      "Highlight anything on the web - add notes and share with friends.",
+    ],
+    ["https://www.wavman.app", "Wavman", "A nostalgic music player built on nostr"],
+    ["https://feeds.nostr.band", "Feeds", "Find custom curated feeds - and create your own"],
+    ["https://blowater.deno.dev", "Blowater", "The best nostr micro-client for managing DMs"],
+    ["https://nosbin.com", "Nosbin", "Copy/paste/share"],
+    ["https://nostrnests.com/", "Nostr Nests", "Live stream your thoughts, as the happen"],
+    ["https://nostr.watch", "Nostr Watch", "A directory of nostr relays"],
+    ["https://nostr.directory", "Nostr Directory", "Validate your nostr pubkey with Twitter"],
+    ["https://getalby.com", "Alby", "Sign in to nostr apps without sharing your private key"],
+    ["https://nak.nostr.com", "NAK", "A Nostr Army Knife, for advanced users"],
+    ["https://nostrplebs.com", "NostrPlebs", "Get verified at nostrplebs.com"],
+  ]
+
+  document.title = "Apps"
+</script>
+
+<div in:fly={{y: 20}}>
+  <div class="flex flex-col gap-12 p-4">
+    <div class="flex flex-col items-center justify-center">
+      <Heading>Recommended micro-apps</Heading>
+      <p>Hand-picked recommendations to enhance your nostr experience.</p>
+    </div>
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {#each apps as [url, title, description]}
+        <Card class="flex flex-col gap-2">
+          <h1 class="text-2xl">{title}</h1>
+          <p>{description}</p>
+          <Media link={{url}} />
+        </Card>
+      {/each}
+    </div>
+  </div>
+</div>