Fix person detail layout on small screens

ROADMAP.md

@@ -1,20 +1,12 @@
 # Current
 
-- [ ] Fix person detail on small screens
-- [ ] Fork and white label blowater
-- [ ] Add relayset support with kind 30022
-- [ ] White-labeled
-  - [ ] Add invite code registration for relay
-    - [ ] Add endpoint to nostream that updates whitelist
-    - [ ] Show invite code somewhere so users can share it.
-    - [ ] Use a signed string so it's based on pubkey?
-    - [ ] Nostream is public-read, apply registration to reads as well
-  - [ ] Avoid leaking events from private relays
-- [ ] Image classification
-  - https://github.com/bhky/opennsfw2
 
 # Core
 
+- [ ] Fork and white label blowater
+- [ ] Fix uploads
+  - Monetize, classify, or out source
+  - https://github.com/bhky/opennsfw2
 - [ ] Push notifications https://web.dev/notifications/
 - [ ] Put chat in window
 - [ ] Private groups
@@ -26,6 +18,7 @@
 - [ ] Reminders for max time spent on coracle
 - [ ] Proxy handle requests for CORS
 - [ ] Low data mode that hides counts on notes
+- [ ] Add relayset support with kind 30022
 - [ ] Show npubs/nip05 when mentioning
   - nevent1qqswv0ztgm8z6zeqmd0pzvwss7fzny675dx9lkqvr4zw0d9ad59eh3gpzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxg6k804t
 - [ ] Support server-rendered link previews

package.json

@@ -53,7 +53,7 @@
     "marked": "^5.1.0",
     "nostr-tools": "^1.12.1",
     "npm-run-all": "^4.1.5",
-    "paravel": "^0.2.0",
+    "paravel": "^0.2.1",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.1",
     "ramda": "^0.28.0",

src/app/TopNav.svelte

@@ -88,20 +88,21 @@
 
     if (isHex(entity)) {
       navigate("/" + nip19.npubEncode(entity))
+      hideSearch()
     } else if (entity.includes("@")) {
       let profile = await nip05.queryProfile(entity)
 
       if (profile) {
         navigate("/" + nip19.nprofileEncode(profile))
+        hideSearch()
       }
     } else {
       tryFunc(() => {
         nip19.decode(entity)
         navigate("/" + entity)
+        hideSearch()
       })
     }
-
-    hideSearch()
   }
 
   const topicOptions = engine.Content.topics.derived(
@@ -223,7 +224,7 @@
 <div
   class={cx(
     "search-input pointer-events-none fixed top-0 z-10 w-full px-2 text-gray-1",
-    "flex h-16 items-center justify-end gap-4",
+    "flex h-16 items-center justify-end gap-4 pr-16",
     {
       "sm:pr-16": $pubkey,
       "sm:pr-28": !$pubkey,

src/app/shared/NoteContentQuote.svelte

@@ -46,7 +46,7 @@
   })
 </script>
 
-<div class="py-2">
+<div class="py-2" on:click|stopPropagation>
   <Card interactive invertColors class="my-2" on:click={openQuote}>
     {#if loading}
       <div class="px-20">

src/app/shared/PersonAbout.svelte

@@ -12,7 +12,7 @@
   const content = parseContent({content: truncate ? ellipsize(about, 140) : about})
 </script>
 
-<p class="overflow-hidden text-ellipsis">
+<p>
   {#each content as { type, value }}
     {#if type === "newline"}
       {#each value as _}

src/app/shared/PersonNotes.svelte

@@ -4,9 +4,8 @@
 
   export let pubkey
   export let relays
-  export let invertColors = false
 
   const filter = {kinds: noteKinds, authors: [pubkey]}
 </script>
 
-<Feed {relays} {filter} {invertColors} />
+<Feed {relays} {filter} invertColors />

src/app/shared/PersonStats.svelte

@@ -56,7 +56,7 @@
   <button on:click={showFollows}>
     <strong>{$followsCount}</strong> following
   </button>
-  <button on:click={showFollowers}>
+  <button on:click={showFollowers} class="hidden xs:block">
     <strong>
       {#if canLoadFollowers}
         <i class="fa fa-download mr-1" on:click|stopPropagation={loadFollowers} />

src/app/views/Notification.svelte

@@ -75,7 +75,7 @@
         </small>
       </div>
       <div class="break-word overflow-hidden text-gray-1">
-        <NoteContent maxLength={80} expandable={false} showMedia={false} {note} />
+        <NoteContent maxLength={240} expandable={false} showMedia={false} {note} />
       </div>
     </Card>
   </div>

src/app/views/PersonDetail.svelte

@@ -51,17 +51,26 @@
 
 <Content>
   <div class="flex gap-4 text-gray-1">
-    <PersonCircle {pubkey} size={16} class="sm:h-32 sm:w-32" />
-    <div class="flex flex-grow flex-col gap-4">
-      <div class="flex items-start justify-between gap-4">
-        <div class="flex flex-grow flex-col gap-2">
+    <PersonCircle {pubkey} size={12} class="mt-1 sm:h-32 sm:w-32" />
+    <div class="flex min-w-0 flex-grow flex-col gap-4">
+      <div class="flex flex-col">
+        <div class="flex items-center justify-between gap-4">
           <PersonName class="text-2xl" {pubkey} />
-          <PersonHandle {pubkey} />
-        </div>
+          <div class="hidden xs:block">
             <PersonActions {pubkey} />
           </div>
+        </div>
+        <PersonHandle {pubkey} />
+      </div>
+      <div class="-ml-16 flex flex-grow flex-col gap-4 xs:ml-0">
         <PersonAbout {pubkey} />
+        <div class="flex justify-between">
           <PersonStats {pubkey} />
+          <div class="block xs:hidden">
+            <PersonActions {pubkey} />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 

src/engine/components/Settings.ts

@@ -12,7 +12,11 @@ export class Settings {
   imgproxy = (url: string, {w = 640, h = 1024} = {}) => {
     const base = this.getSetting("imgproxy_url")
 
+    try {
       return base && url ? `${base}/x/s:${w}:${h}/${btoa(url)}` : url
+    } catch(e) {
+      return url
+    }
   }
 
   dufflepud = (path: string) => `${this.getSetting("dufflepud_url")}/${path}`
@@ -22,7 +26,7 @@ export class Settings {
 
     this.settings = writable<Record<string, any>>({
       last_updated: 0,
-      relay_limit: 10,
+      relay_limit: 5,
       default_zap: 21,
       show_media: true,
       report_analytics: true,

src/engine/util/FeedLoader.ts

@@ -1,4 +1,4 @@
-import {partition, uniqBy, pluck, sortBy, without, any, prop, assoc} from "ramda"
+import {partition, identity, uniqBy, pluck, sortBy, without, any, prop, assoc} from "ramda"
 import {ensurePlural, seconds, doPipe, throttle, batch} from "hurdak"
 import {now, race} from "src/util/misc"
 import {findReplyId} from "src/util/nostr"
@@ -107,9 +107,10 @@ export class FeedLoader {
   addToFeed = (notes: Event[]) => {
     this.feed.update($feed => {
       // Avoid showing the same note twice, even if it's once as a parent and once as a child
-      const feedIds = new Set(pluck("id", $feed))
-      // Maybe this?
-      // const feedIds = new Set(pluck("id", $feed).concat($feed.concat(notes).map(findReplyId).filter(identity)))
+      const feedIds = pluck("id", $feed)
+      const feedParentIds = $feed.map(findReplyId).filter(identity)
+      const noteParentIds = notes.map(findReplyId).filter(identity)
+      const ids = new Set([...feedIds, ...feedParentIds, ...noteParentIds])
 
       return uniqBy(
         prop("id"),
@@ -117,7 +118,7 @@ export class FeedLoader {
           this.context.applyContext(
             sortBy(
               e => -e.created_at,
-              notes.filter(e => !feedIds.has(findReplyId(e)))
+              notes.filter(e => !ids.has(findReplyId(e)))
             ),
             true
           )

tailwind.config.cjs

@@ -4,6 +4,14 @@ module.exports = {
   safelist: ["w-4", "h-4"],
   theme: {
     extend: {},
+    screens: {
+      xs: "400px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
     colors: {
       transparent: "var(--transparent)",
       black: "var(--black)",