Add capacitor, fix some mobile bugs

src/app/components/ChannelCompose.svelte

@@ -3,6 +3,7 @@
   import type {Readable} from "svelte/store"
   import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {getEditorOptions, getEditorTags, addFile} from "@lib/editor"
@@ -26,7 +27,13 @@
 
   onMount(() => {
     editor = createEditor(
-      getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}),
+      getEditorOptions({
+        submit,
+        loading,
+        getPubkeyHints,
+        submitOnEnter: true,
+        autofocus: !isMobile,
+      }),
     )
 
     $editor.commands.setContent(content)

src/app/components/ChatMessage.svelte

@@ -85,9 +85,9 @@
       <Icon icon="menu-dots" size={4} />
     </button>
   </Tippy>
-  <div class="flex flex-col">
+  <div class="flex min-w-0 flex-col">
     <LongPress
-      class="bg-alt chat-bubble mx-1 flex max-w-sm cursor-auto flex-col gap-1 text-left"
+      class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
       onLongPress={showMobileMenu}>
       {#if showPubkey && event.pubkey !== $pubkey}
         <div class="flex items-center gap-2">

src/app/components/LogIn.svelte

@@ -99,11 +99,11 @@
     </Button>
   {/if}
   {#each signers as app}
-    <Button disabled={loading} class="btn btn-neutral" on:click={() => loginWithSigner(app)}>
+    <Button disabled={loading} class="btn btn-primary" on:click={() => loginWithSigner(app)}>
       {#if loading}
         <span class="loading loading-spinner mr-3" />
       {:else}
-        <img src={app.iconUrl} alt={app.name} width="48" height="48" />
+        <img src={app.iconUrl} alt={app.name} width="20" height="20" />
       {/if}
       Log in with {app.name}
     </Button>

src/app/components/MenuSpaceButton.svelte

@@ -30,9 +30,8 @@
 
   const notification = derived(
     [page, events, checked, userMembership],
-    ([$page, $events, $checked, $userMembership]) => {
-      console.log(getMembershipRoomsByUrl(url, $userMembership).concat(GENERAL))
-      return getMembershipRoomsByUrl(url, $userMembership)
+    ([$page, $events, $checked, $userMembership]) =>
+      getMembershipRoomsByUrl(url, $userMembership)
         .concat(GENERAL)
         .some(room => {
           const path = makeRoomPath(url, room)
@@ -43,8 +42,7 @@
           const roomEvents = $events.filter(e => matchFilter({"#~": [room]}, e))
 
           return getNotification($pubkey, lastChecked, roomEvents)
-        })
-    },
+        }),
   )
 </script>
 

src/app/components/PeopleItem.svelte

@@ -33,7 +33,7 @@
 <div class="card2 bg-alt col-2 shadow-xl">
   <div class="flex justify-between">
     <Profile {pubkey} />
-    <Link class="btn btn-primary" href={makeChatPath([pubkey])}>
+    <Link class="btn btn-primary hidden sm:flex" href={makeChatPath([pubkey])}>
       <Icon icon="letter" />
       Start a Chat
     </Link>
@@ -45,4 +45,8 @@
       Last active {formatTimestampRelative(event.created_at)}
     </div>
   {/if}
+  <Link class="btn btn-primary sm:hidden" href={makeChatPath([pubkey])}>
+    <Icon icon="letter" />
+    Start a Chat
+  </Link>
 </div>

src/app/components/ThreadCreate.svelte

@@ -5,6 +5,7 @@
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {createEvent} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
+  import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -60,7 +61,6 @@
         submit,
         loading,
         getPubkeyHints,
-        autofocus: true,
         placeholder: "What's on your mind?",
       }),
     )
@@ -76,7 +76,9 @@
     <Field>
       <p slot="label">Title*</p>
       <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+        <!-- svelte-ignore a11y-autofocus -->
         <input
+          autofocus={!isMobile}
           bind:value={title}
           class="grow"
           type="text"

src/app/components/ThreadReply.svelte

@@ -4,6 +4,7 @@
   import {writable} from "svelte/store"
   import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {append} from "@welshman/lib"
+  import {isMobile} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -39,7 +40,7 @@
   let editor: Readable<Editor>
 
   onMount(() => {
-    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, autofocus: true}))
+    editor = createEditor(getEditorOptions({submit, loading, getPubkeyHints, autofocus: !isMobile}))
   })
 </script>