Remove safe area inset stuff to re-apply later

capacitor.config.ts

@@ -17,10 +17,10 @@ const config: CapacitorConfig = {
     },
   },
   // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
-  // server: {
-  //   url: "http://192.168.1.250:1847",
-  //   cleartext: true
-  // },
+  server: {
+    url: "http://192.168.1.115:1847",
+    cleartext: true
+  },
 };
 
 export default config;

src/app.css

@@ -54,6 +54,10 @@
   --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
   --secondary-content: oklch(var(--sc));
+  --sait: env(safe-area-inset-top);
+  --saib: env(safe-area-inset-bottom);
+  --sail: env(safe-area-inset-left);
+  --sair: env(safe-area-inset-right);
 }
 
 :root,
@@ -64,48 +68,80 @@ html {
 
 /* ios */
 
-.sait {
-  padding-top: env(safe-area-inset-top);
+.pt-sai {
+  padding-top: var(--sait);
 }
 
-.sair {
-  padding-right: env(safe-area-inset-right);
+.pr-sai {
+  padding-right: var(--sair);
 }
 
-.saib {
-  padding-bottom: env(safe-area-inset-bottom);
+.pb-sai {
+  padding-bottom: var(--saib);
 }
 
-.sail {
-  padding-left: env(safe-area-inset-left);
+.pl-sai {
+  padding-left: var(--sail);
 }
 
-.saix {
-  @apply sail sair;
+.px-sai {
+  @apply pl-sai pr-sai;
 }
 
-.saiy {
-  @apply sait saib;
+.py-sai {
+  @apply pt-sai pb-sai;
 }
 
-.sai {
-  @apply saiy saix;
+.p-sai {
+  @apply py-sai px-sai;
+}
+
+.mt-sai {
+  padding-top: var(--sait);
+}
+
+.mr-sai {
+  padding-right: var(--sair);
+}
+
+.mb-sai {
+  padding-bottom: var(--saib);
+}
+
+.ml-sai {
+  padding-left: var(--sail);
+}
+
+.mx-sai {
+  @apply ml-sai mr-sai;
+}
+
+.my-sai {
+  @apply mt-sai mb-sai;
+}
+
+.m-sai {
+  @apply my-sai mx-sai;
 }
 
 .top-sai {
-  top: env(safe-area-inset-top);
+  top: var(--sait);
 }
 
 .right-sai {
-  right: env(safe-area-inset-right);
+  right: var(--sair);
 }
 
 .bottom-sai {
-  bottom: env(safe-area-inset-bottom);
+  bottom: var(--saib);
 }
 
 .left-sai {
-  left: env(safe-area-inset-left);
+  left: var(--sail);
+}
+
+.h-saib {
+  height: var(--saib);
 }
 
 /* utilities */
@@ -349,7 +385,7 @@ progress[value]::-webkit-progress-value {
 }
 
 .cb {
-  @apply saib bottom-14 md:bottom-0;
+  @apply bottom-14 md:bottom-0;
 }
 
 /* chat view */
@@ -359,5 +395,5 @@ progress[value]::-webkit-progress-value {
 }
 
 .chat__scroll-down {
-  @apply saib fixed bottom-28 right-4 md:bottom-16;
+  @apply fixed bottom-28 right-4 md:bottom-16;
 }

src/app/components/PrimaryNav.svelte

@@ -51,7 +51,7 @@
 
 <svelte:window bind:innerHeight={windowHeight} />
 
-<div class="sail sait saib relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+<div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col justify-between">
     <div>
       {#if PLATFORM_RELAY}
@@ -103,9 +103,9 @@
 {@render children?.()}
 
 <!-- a little extra something for ios -->
-<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden"></div>
+<div class="fixed bottom-0 left-0 right-0 z-nav h-saib bg-base-100 md:hidden"></div>
 <div
-  class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="border-top bottom-0 fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-8">
       <PrimaryNavItem title="Home" href="/home">

src/app/components/ProfileFeed.svelte

@@ -45,7 +45,8 @@
           e => e.id,
           sortBy(e => -e.created_at, buffer),
         )
-        events = [...events, ...buffer.splice(0, 5)]
+
+        events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
 
         if (buffer.length < 50) {
           ctrl.load(50)

src/lib/components/Divider.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    children?: import("svelte").Snippet
+    children?: Snippet
   }
 
-  const {children}: Props = $props()
+  const {children, ...props}: Props = $props()
 </script>
 
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">

src/lib/components/Drawer.svelte

@@ -12,7 +12,7 @@
     onclick={onClose}>
   </button>
   <div
-    class="scroll-container saiy sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:translate={{axis: "x", duration: 300}}>
     {@render children?.()}
   </div>

src/lib/components/Page.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <div
-  class="sait saib sair scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
+  data-component="Page"
+  class="scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>

src/lib/components/PageBar.svelte

@@ -11,7 +11,7 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="sait cw fixed top-2 z-feature rounded-xl px-2 pt-2 {props.class}">
+<div data-component="PageBar" class="cw fixed top-2 z-feature rounded-xl px-2 pt-2 {props.class}">
   <div
     class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="ellipsize flex items-center gap-4 whitespace-nowrap">

src/lib/components/PageContent.svelte

@@ -13,6 +13,6 @@
 <div
   {...props}
   bind:this={element}
-  class="scroll-container saib cw fixed top-12 h-[calc(100%-6.5rem)] overflow-y-auto overflow-x-hidden md:h-[calc(100%-3rem)] {props.class}">
+  class="scroll-container cw fixed top-12 h-[calc(100%-6.5rem)] overflow-y-auto overflow-x-hidden md:h-[calc(100%-3rem)] {props.class}">
   {@render children?.()}
 </div>

src/lib/components/SecondaryNav.svelte

@@ -6,7 +6,6 @@
   const {children}: Props = $props()
 </script>
 
-<div
-  class="sail sait saib hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
+<div class="hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
   {@render children?.()}
 </div>