feat: improve image loading

package.json

@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",

src/lib/components/lemmy/post/Post.svelte

@@ -79,12 +79,35 @@
             <svelte:element
               this={$userSettings.expandImages ? 'div' : 'a'}
               href={postLink(post.post)}
-              class="container mx-auto z-10 relative {loaded
+              class="container mx-auto z-10 transition-colors {loaded
                 ? ''
-                : 'bg-slate-200 dark:bg-zinc-800'} rounded-md w-fit max-h-[70vh]"
+                : 'bg-slate-200 dark:bg-zinc-800'} rounded-xl max-h-[60vh] relative overflow-hidden"
               data-sveltekit-preload-data="off"
               aria-label={post.post.name}
             >
+              <picture
+                class="absolute top-1/2 -translate-y-1/2 left-0 w-full
+               opacity-30 object-cover scale-[1.2] blur-3xl -z-10"
+              >
+                <source
+                  srcset={bestImageURL(post.post, false, 512)}
+                  media="(max-width: 256px)"
+                />
+                <source
+                  srcset={bestImageURL(post.post, false, 512)}
+                  media="(max-width: 512px)"
+                />
+                <!-- svelte-ignore a11y-missing-attribute -->
+                <img
+                  src={bestImageURL(post.post, false, 1024)}
+                  loading="lazy"
+                  class="w-full h-full object-cover rounded-xl blur-3xl z-50"
+                  width={512}
+                  height={300}
+                  class:blur-3xl={post.post.nsfw && $userSettings.nsfwBlur}
+                  on:load={() => (loaded = true)}
+                />
+              </picture>
               <picture class="max-h-[inherit]">
                 <source
                   srcset={bestImageURL(post.post, false, 512)}
@@ -98,7 +121,8 @@
                 <img
                   src={bestImageURL(post.post, false, 1024)}
                   loading="lazy"
-                  class="max-h-[inherit] w-auto rounded-md z-30 opacity-0 transition-opacity duration-300"
+                  class="max-h-[inherit] max-w-full h-auto z-30
+                  opacity-0 transition-opacity duration-300 object-contain mx-auto"
                   class:opacity-100={loaded}
                   width={512}
                   height={300}

src/lib/components/ui/ExpandableImage.svelte

@@ -47,6 +47,6 @@
   </div>
 {/if}
 
-<button on:click={() => (open = !open)} class="{$$props.class}">
+<button on:click={() => (open = !open)} class="contents {$$props.class}">
   <slot />
 </button>

src/lib/components/ui/Navbar.svelte

@@ -44,7 +44,9 @@
 
 <nav
   class="flex flex-row gap-2 items-center sticky top-0 bg-slate-50/80
-  dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16"
+  dark:bg-black/80 backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16
+  
+  "
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
     <a href="/" class="flex flex-row items-center gap-2 logo group">

src/lib/components/ui/sidebar/Sidebar.svelte

@@ -23,7 +23,7 @@
   gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
   {$userSettings.expandSidebar
     ? 'max-w-[25%] resize-x min-w-[12rem]'
-    : 'w-max max-w-max min-w-max'}"
+    : 'w-max max-w-max min-w-max'} {$$props.class}"
 >
   <Button
     on:click={() =>

src/lib/settings.ts

@@ -63,6 +63,8 @@ interface Settings {
   font: 'inter' | 'system' | 'browser'
   leftAlign: boolean
   hidePhoton: boolean
+
+  newWidth: boolean
 }
 
 export const defaultSettings: Settings = {
@@ -103,6 +105,7 @@ export const defaultSettings: Settings = {
   font: 'system',
   leftAlign: false,
   hidePhoton: toBool(env.PUBLIC_REMOVE_CREDIT) ?? false,
+  newWidth: false,
 }
 
 export const userSettings = writable(defaultSettings)

src/routes/+layout.svelte

@@ -83,14 +83,23 @@
   <Navbar />
   <ToastContainer />
   <Moderation />
-  <div class="flex flex-row h-full w-full max-w-full flex-1">
+  <div
+    class="flex flex-row h-full w-full max-w-full flex-1
+  "
+  >
     <Sidebar />
-    <main
-      class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
-      border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
-      id="main"
+    <div
+      class="w-full border-t sm:border-l border-slate-200 dark:border-zinc-900
+    sm:rounded-xl bg-slate-25 dark:bg-zinc-950"
     >
-      <slot />
-    </main>
+      <main
+        class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg mx-auto
+      "
+        class:max-w-6xl={$userSettings.newWidth}
+        id="main"
+      >
+        <slot />
+      </main>
+    </div>
   </div>
 </div>

src/routes/settings/+page.svelte

@@ -81,6 +81,15 @@
         {$userSettings.randomPlaceholders ? 'Enabled' : 'Disabled'}
       </Checkbox>
     </Setting>
+    <Setting>
+      <span slot="title">Limit Layout Width</span>
+      <span slot="description">
+        Improve readability by limiting main content width.
+      </span>
+      <Checkbox bind:checked={$userSettings.newWidth}>
+        {$userSettings.newWidth ? 'Enabled' : 'Disabled'}
+      </Checkbox>
+    </Setting>
 
     <Setting>
       <span slot="title">Default sort</span>

src/style/app.css

@@ -25,7 +25,7 @@
 }
 
 body {
-  @apply bg-slate-100 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
+  @apply bg-slate-50 text-slate-900 dark:bg-zinc-950 dark:text-zinc-100 accent-slate-950 dark:accent-zinc-50;
 }
 
 .dark {