Add capacitor, fix some mobile bugs

src/app.css

@@ -69,7 +69,7 @@
 }
 
 .card2 {
-  @apply text-ellipsis rounded-box p-6 text-base-content;
+  @apply rounded-box p-6 text-base-content;
 }
 
 .card2.card2-sm {
@@ -112,6 +112,11 @@
   @apply flex flex-col gap-8;
 }
 
+.badge {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+  display: inline;
+}
+
 .ellipsize {
   @apply overflow-hidden text-ellipsis;
 }

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>
 

src/lib/components/FieldInline.svelte

@@ -6,7 +6,7 @@
     <slot name="input" />
   </div>
   {#if $$slots.info}
-    <p class="flex-end col-span-2 text-sm">
+    <p class="flex-end text-sm sm:col-span-2">
       <slot name="info" />
     </p>
   {/if}

src/routes/chat/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {page} from "$app/stores"
   import {onDestroy} from "svelte"
+  import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ContentSearch from "@lib/components/ContentSearch.svelte"
@@ -41,7 +42,7 @@
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
       <input
-        autofocus
+        autofocus={!isMobile}
         bind:value={term}
         class="grow"
         type="text"

src/routes/notes/+page.svelte

@@ -8,7 +8,7 @@
 
 <Page>
   <Chat {id}>
-    <p slot="info">
+    <p slot="info" class="px-4">
       This is a place for your notes. Everything you write here is encrypted and stored on the nostr
       network.
     </p>

src/routes/people/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {createScroller} from "@lib/html"
+  import {createScroller, isMobile} from "@lib/html"
   import {profileSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -34,7 +34,7 @@
       <Icon icon="magnifer" />
       <!-- svelte-ignore a11y-autofocus -->
       <input
-        autofocus
+        autofocus={!isMobile}
         bind:value={term}
         class="grow"
         type="text"

src/routes/settings/profile/+page.svelte

@@ -3,7 +3,6 @@
   import {hexToBytes} from "@noble/hashes/utils"
   import {displayPubkey, displayProfile} from "@welshman/util"
   import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
-  import {slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -50,12 +49,12 @@
       <Content event={{content: $profile?.about || "", tags: []}} hideMedia />
     {/key}
   </div>
-  <div class="card2 bg-alt col-4 shadow-xl" transition:slide>
+  <div class="card2 bg-alt col-4 shadow-xl">
     <FieldInline>
       <p slot="label">Public Key</p>
       <label class="input input-bordered flex w-full items-center gap-2" slot="input">
         <Icon icon="link-round" />
-        <input value={$session?.pubkey} class="grow" type="text" />
+        <input class="ellipsize" value={$session?.pubkey} />
         <Button class="flex items-center" on:click={copyNpub}>
           <Icon icon="copy" />
         </Button>