From 9f1ad19391e83ffde15795de34a0a018d1fcf20a Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sun, 15 Sep 2024 14:11:02 -0700
Subject: [PATCH 1/2] design: make compact posts even more compact

---
 package.json                                  |  2 +-
 .../lemmy/dropdowns/ViewSelect.svelte         |  9 ---
 src/lib/components/lemmy/post/Post.svelte     | 54 +++++++------
 .../components/lemmy/post/PostActions.svelte  |  4 +-
 src/lib/components/lemmy/post/PostMeta.svelte | 79 +++++++++++--------
 .../lemmy/post/feed/PostFeed.svelte           |  8 --
 .../lemmy/post/feed/VirtualFeed.svelte        |  8 --
 .../lemmy/post/link/PostLink.svelte           |  6 +-
 .../lemmy/post/media/PostMediaCompact.svelte  |  5 +-
 9 files changed, 83 insertions(+), 92 deletions(-)

diff --git a/package.json b/package.json
index b0934faf..7a9fbf95 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.31.3",
+  "version": "1.31.4",
   "devDependencies": {
     "@catdadcode/svelte-adapter-bun": "^0.5.7",
     "@dicebear/core": "^8.0.1",
diff --git a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
index 216a3142..c3db9b9f 100644
--- a/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
+++ b/src/lib/components/lemmy/dropdowns/ViewSelect.svelte
@@ -52,13 +52,4 @@
     />
     {$t('filter.view.compact')}
   </option>
-  <option value="card">
-    <Icon
-      src={Clock}
-      size="16"
-      micro
-      class="text-slate-600 dark:text-zinc-400"
-    />
-    {$t('filter.view.legacy')}
-  </option>
 </Select>
diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
index 27772d79..14957d93 100644
--- a/src/lib/components/lemmy/post/Post.svelte
+++ b/src/lib/components/lemmy/post/Post.svelte
@@ -82,18 +82,16 @@
 -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<Material
-  element="article"
-  color={view != 'card' ? 'none' : 'distinct'}
-  class="post relative max-w-full min-w-0 w-full cursor-pointer outline-none group
-  {view != 'card' ? 'bg-transparent !border-0' : 'p-5'} {view == 'compact'
-    ? 'py-3 list-type compact-view'
-    : view == 'list'
-      ? 'py-5 list-type'
-      : 'py-5 flex flex-col gap-2'} {$$props.class}"
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div
+  class="post relative max-w-full min-w-0 w-full cursor-pointer outline-none
+  group @container/post
+  {$userSettings.leftAlign ? 'left-align' : ''}
+  {view == 'compact' ? 'py-3 list-type compact' : ''}
+  {view == 'list' ? 'py-5 list-type' : ''}
+  {view == 'cozy' ? 'py-5 flex flex-col gap-2' : ''}
+  {$$props.class ?? ''}"
   id={post.post.id.toString()}
-  padding="none"
-  rounding={view == 'card' ? undefined : 'none'}
   on:click={(e) => {
     onClick(e)
   }}
@@ -153,8 +151,8 @@
         bind:post={post.post}
         bind:type
         class="{$userSettings.leftAlign
-          ? 'mr-2'
-          : 'ml-2'} flex-shrink no-list-margin"
+          ? 'mr-3'
+          : 'ml-3'} flex-shrink no-list-margin"
         style="grid-area: media;"
         {view}
       />
@@ -191,27 +189,35 @@
     group-focus:inset-y-0.5 group-focus:-inset-x-4 group-focus:sm:-inset-x-5 group-focus:opacity-100
     duration-150"
   />
-</Material>
+</div>
 
 <style>
-  :global(.list-type) {
+  .list-type {
     display: grid;
-    grid-template-areas: var(
-      --template-areas,
-      'meta media' 'title media' 'body media' 'embed embed' 'actions actions'
-    );
+    grid-template-areas: 'meta media' 'title media' 'body media' 'embed embed' 'actions actions';
+    grid-template-columns: minmax(0, 1fr) auto;
     width: 100%;
     height: 100%;
-    grid-template-columns: var(--template-columns, 1fr auto);
   }
 
-  :global(.compact-view > *:not(.no-list-margin):not(:first-child)) {
+  .list-type.left-align {
+    grid-template-areas: 'media meta' 'media title' 'media body' 'embed embed' 'actions actions';
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .list-type.compact {
+    grid-template-areas: 'meta media' 'title media' 'body media' 'embed media' 'actions media';
+  }
+
+  .list-type.compact.left-align {
+    grid-template-areas: 'media meta' 'media title' 'media body' 'media embed' 'media actions';
+  }
+
+  :global(.compact > *:not(.no-list-margin):not(:first-child)) {
     margin-top: 0.3rem;
   }
 
-  :global(
-      .list-type:not(.compact-view) > *:not(.no-list-margin):not(:first-child)
-    ) {
+  :global(.list-type:not(.compact) > *:not(.no-list-margin):not(:first-child)) {
     margin-top: 0.5rem;
   }
 </style>
diff --git a/src/lib/components/lemmy/post/PostActions.svelte b/src/lib/components/lemmy/post/PostActions.svelte
index ab2007f8..94052407 100644
--- a/src/lib/components/lemmy/post/PostActions.svelte
+++ b/src/lib/components/lemmy/post/PostActions.svelte
@@ -80,8 +80,8 @@
 
   let localShare = false
 
-  $: buttonHeight = view == 'compact' ? 'h-[30px]' : 'h-8'
-  $: buttonSquare = view == 'compact' ? 'w-[30px] h-[30px]' : 'w-8 h-8'
+  $: buttonHeight = view == 'compact' ? 'h-7' : 'h-8'
+  $: buttonSquare = view == 'compact' ? 'w-7 h-7' : 'w-8 h-8'
 </script>
 
 {#if editing}
diff --git a/src/lib/components/lemmy/post/PostMeta.svelte b/src/lib/components/lemmy/post/PostMeta.svelte
index 394dc676..68982fe0 100644
--- a/src/lib/components/lemmy/post/PostMeta.svelte
+++ b/src/lib/components/lemmy/post/PostMeta.svelte
@@ -115,6 +115,7 @@
   class="grid w-full meta {community
     ? 'grid-rows-2'
     : 'grid-rows-1'} text-xs min-w-0 max-w-full"
+  class:compact={view == 'compact'}
   style={$$props.style ?? ''}
 >
   {#if showCommunity && community && subscribed}
@@ -126,7 +127,7 @@
       >
         <Avatar
           url={community.icon}
-          width={32}
+          width={view == 'compact' ? 24 : 32}
           alt={community.name}
           class="group-hover/community:ring-2 transition-all ring-offset-1 ring-primary-900 dark:ring-primary-100"
         />
@@ -145,42 +146,44 @@
     <CommunityLink
       {community}
       style="grid-area: community;"
-      class="flex-shrink self-end"
+      class="flex-shrink"
     />
   {/if}
-  <span
-    class="text-slate-600 dark:text-zinc-400 flex flex-row gap-2 items-center self-start"
-    style="grid-area: stats;"
-  >
-    {#if user}
-      <address class="contents not-italic">
-        <UserLink avatarSize={20} {user} avatar={!showCommunity}>
-          <svelte:fragment slot="badges">
-            {#if badges.moderator}
-              <ShieldIcon filled width={14} class="text-green-500" />
-            {/if}
-            {#if badges.admin}
-              <ShieldIcon filled width={14} class="text-red-500" />
-            {/if}
-          </svelte:fragment>
-        </UserLink>
-      </address>
-    {/if}
-    {#if published}
-      <RelativeDate date={published} class="flex-shrink-0" />
-    {/if}
-    {#if edited}
-      <div
-        title={$t('post.meta.lastEdited', {
-          default: formatRelativeDate(publishedToDate(edited), {
-            style: 'long',
-          }),
-        })}
-      >
-        <Icon src={Pencil} micro size="14" />
-      </div>
-    {/if}
-  </span>
+  {#if view != 'compact'}
+    <span
+      class="text-slate-600 dark:text-zinc-400 flex flex-row gap-2 items-center self-start"
+      style="grid-area: stats;"
+    >
+      {#if user}
+        <address class="contents not-italic">
+          <UserLink avatarSize={20} {user} avatar={!showCommunity}>
+            <svelte:fragment slot="badges">
+              {#if badges.moderator}
+                <ShieldIcon filled width={14} class="text-green-500" />
+              {/if}
+              {#if badges.admin}
+                <ShieldIcon filled width={14} class="text-red-500" />
+              {/if}
+            </svelte:fragment>
+          </UserLink>
+        </address>
+      {/if}
+      {#if published}
+        <RelativeDate date={published} class="flex-shrink-0" />
+      {/if}
+      {#if edited}
+        <div
+          title={$t('post.meta.lastEdited', {
+            default: formatRelativeDate(publishedToDate(edited), {
+              style: 'long',
+            }),
+          })}
+        >
+          <Icon src={Pencil} micro size="14" />
+        </div>
+      {/if}
+    </span>
+  {/if}
   <div
     class="flex flex-row justify-end items-center self-center flex-wrap gap-2 [&>*]:flex-shrink-0 badges ml-2"
     style="grid-area: badges;"
@@ -293,6 +296,12 @@
     grid-template-columns: max-content minmax(0, auto) auto;
   }
 
+  .meta.compact {
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+  }
+
   :global(.badge-tag-color) {
     background-color: var(--tag-color) !important;
   }
diff --git a/src/lib/components/lemmy/post/feed/PostFeed.svelte b/src/lib/components/lemmy/post/feed/PostFeed.svelte
index 96a1ddc0..1c1127bc 100644
--- a/src/lib/components/lemmy/post/feed/PostFeed.svelte
+++ b/src/lib/components/lemmy/post/feed/PostFeed.svelte
@@ -23,14 +23,6 @@
   class="flex flex-col list-none {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
     : 'divide-y'} divide-slate-200 dark:divide-zinc-800"
-  style={$userSettings.leftAlign
-    ? `--template-areas: 
-'media meta'
-'media title'
-'media body'
-'embed embed'
-'actions actions'; --template-columns: auto 1fr;`
-    : ``}
 >
   {#if posts?.length == 0}
     <div class="h-full grid place-items-center">
diff --git a/src/lib/components/lemmy/post/feed/VirtualFeed.svelte b/src/lib/components/lemmy/post/feed/VirtualFeed.svelte
index 7c7470a0..37265f19 100644
--- a/src/lib/components/lemmy/post/feed/VirtualFeed.svelte
+++ b/src/lib/components/lemmy/post/feed/VirtualFeed.svelte
@@ -214,14 +214,6 @@
   class="flex flex-col list-none {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
     : 'divide-y'} divide-slate-200 dark:divide-zinc-800"
-  style={$userSettings.leftAlign
-    ? `--template-areas: 
-'media meta'
-'media title'
-'media body'
-'embed embed'
-'actions actions'; --template-columns: auto 1fr;`
-    : ``}
 >
   {#if posts?.length == 0}
     <div class="h-full grid place-items-center">
diff --git a/src/lib/components/lemmy/post/link/PostLink.svelte b/src/lib/components/lemmy/post/link/PostLink.svelte
index 21b20e96..742433cb 100644
--- a/src/lib/components/lemmy/post/link/PostLink.svelte
+++ b/src/lib/components/lemmy/post/link/PostLink.svelte
@@ -31,7 +31,7 @@
     color="distinct"
     class="flex flex-col-reverse sm:flex-row
     overflow-hidden gap-4 embed-card z-0 relative
-    dark:border-t-zinc-800 border-opacity-80"
+    dark:border-t-zinc-800 border-opacity-80 max-w-full"
     rounding="xl"
     element="article"
   >
@@ -125,7 +125,7 @@
     </PostLinkSources>
   </div>
 {:else}
-  <div class="flex items-center gap-1">
+  <div class="flex space-x-1">
     <PostLinkSources {url}>
       <Button
         color="ghost"
@@ -147,7 +147,7 @@
       href={url}
       target="_blank"
       class="text-slate-900 dark:text-zinc-300 items-center
-    text-xs overflow-hidden max-w-full block"
+    text-xs overflow-hidden max-w-full block flex-shrink"
       size="sm"
       color="ghost"
       rounding="pill"
diff --git a/src/lib/components/lemmy/post/media/PostMediaCompact.svelte b/src/lib/components/lemmy/post/media/PostMediaCompact.svelte
index fa87a6aa..3c592d7b 100644
--- a/src/lib/components/lemmy/post/media/PostMediaCompact.svelte
+++ b/src/lib/components/lemmy/post/media/PostMediaCompact.svelte
@@ -70,8 +70,9 @@
       />
       {#if type != 'image'}
         <div
-          class="absolute w-7 h-7 bottom-0 left-0 m-2 rounded-lg text-slate-800 dark:text-zinc-200
-          backdrop-blur-sm bg-[#ffffff]/75 dark:bg-black/75 grid place-items-center"
+          class="absolute w-8 h-8 bottom-0 left-0 m-1 rounded-xl text-slate-800 dark:text-zinc-200
+          backdrop-blur-sm bg-slate-25/75 dark:bg-zinc-900/75 border border-slate-200/75 dark:border-zinc-700/75
+          grid place-items-center"
         >
           <Icon src={type == 'iframe' ? VideoCamera : Link} micro size="16" />
         </div>

From 368ba6f02d88b0bb83d33d9073b9f4727a3aa496 Mon Sep 17 00:00:00 2001
From: Xylight <james@xylight.dev>
Date: Sun, 15 Sep 2024 14:22:27 -0700
Subject: [PATCH 2/2] misc: only use compact style if screen size allows

---
 src/lib/components/lemmy/post/Post.svelte | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/lemmy/post/Post.svelte b/src/lib/components/lemmy/post/Post.svelte
index 14957d93..b78d0dc3 100644
--- a/src/lib/components/lemmy/post/Post.svelte
+++ b/src/lib/components/lemmy/post/Post.svelte
@@ -85,7 +85,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   class="post relative max-w-full min-w-0 w-full cursor-pointer outline-none
-  group @container/post
+  group
   {$userSettings.leftAlign ? 'left-align' : ''}
   {view == 'compact' ? 'py-3 list-type compact' : ''}
   {view == 'list' ? 'py-5 list-type' : ''}
@@ -191,7 +191,7 @@
   />
 </div>
 
-<style>
+<style lang="postcss">
   .list-type {
     display: grid;
     grid-template-areas: 'meta media' 'title media' 'body media' 'embed embed' 'actions actions';
@@ -200,17 +200,24 @@
     height: 100%;
   }
 
+  /* Swap media/item positions */
   .list-type.left-align {
     grid-template-areas: 'media meta' 'media title' 'media body' 'embed embed' 'actions actions';
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  .list-type.compact {
-    grid-template-areas: 'meta media' 'title media' 'body media' 'embed media' 'actions media';
+  /* Has media on the right for all of them */
+  @media (min-width: 480px) {
+    .list-type.compact {
+      grid-template-areas: 'meta media' 'title media' 'body media' 'embed media' 'actions media';
+    }
   }
 
-  .list-type.compact.left-align {
-    grid-template-areas: 'media meta' 'media title' 'media body' 'media embed' 'media actions';
+  /* Swap above again */
+  @media (min-width: 480px) {
+    .list-type.compact.left-align {
+      grid-template-areas: 'media meta' 'media title' 'media body' 'media embed' 'media actions';
+    }
   }
 
   :global(.compact > *:not(.no-list-margin):not(:first-child)) {