From f617f54334e1f9bbf01dd5c65d8f40c08b485833 Mon Sep 17 00:00:00 2001
From: Xyphyn <james@xylight.dev>
Date: Tue, 3 Oct 2023 18:01:32 -0700
Subject: [PATCH] feat: new centered layout

---
 package.json                                  |  2 +-
 src/lib/components/lemmy/post/PostFeed.svelte |  2 +-
 src/lib/components/ui/ExpandableImage.svelte  |  2 +-
 src/lib/components/ui/Navbar.svelte           |  6 +-
 src/lib/components/ui/StickyCard.svelte       |  4 +-
 src/lib/components/ui/layout/Shell.svelte     | 79 ++++++++++++++++++-
 .../ui/sidebar/CommunityList.svelte           | 12 ++-
 src/lib/components/ui/sidebar/Sidebar.svelte  | 39 +++++----
 src/routes/+layout.svelte                     | 76 +++++++++++-------
 src/routes/+page.svelte                       |  4 +-
 src/routes/c/[name]/+page.svelte              | 23 +++---
 11 files changed, 179 insertions(+), 70 deletions(-)

diff --git a/package.json b/package.json
index aa930fbc..aea89177 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "1.15.3",
+  "version": "1.16.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/lib/components/lemmy/post/PostFeed.svelte b/src/lib/components/lemmy/post/PostFeed.svelte
index 554df958..fcb7dd15 100644
--- a/src/lib/components/lemmy/post/PostFeed.svelte
+++ b/src/lib/components/lemmy/post/PostFeed.svelte
@@ -14,7 +14,7 @@
 <div
   class="flex flex-col {$userSettings.view == 'card'
     ? 'gap-3 md:gap-4'
-    : ''} divide-slate-200 dark:divide-zinc-800 z-[5]"
+    : ''} divide-slate-200 dark:divide-zinc-800"
   class:divide-y={$userSettings.view != 'card'}
 >
   {#if posts.length == 0}
diff --git a/src/lib/components/ui/ExpandableImage.svelte b/src/lib/components/ui/ExpandableImage.svelte
index c4a645ee..eb4ebd7b 100644
--- a/src/lib/components/ui/ExpandableImage.svelte
+++ b/src/lib/components/ui/ExpandableImage.svelte
@@ -24,7 +24,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-positive-tabindex -->
   <div
-    class="fixed top-0 left-0 w-screen h-screen overflow-auto bg-black/50
+    class="isolate fixed backdrop-blur-sm top-0 left-0 w-screen h-screen overflow-auto bg-black/50
     flex flex-col z-[200] overscroll-contain"
     transition:fade={{ duration: 200 }}
     on:click={() => (open = false)}
diff --git a/src/lib/components/ui/Navbar.svelte b/src/lib/components/ui/Navbar.svelte
index 2463da1d..529a59c5 100644
--- a/src/lib/components/ui/Navbar.svelte
+++ b/src/lib/components/ui/Navbar.svelte
@@ -46,9 +46,11 @@
 </script>
 
 <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
+  class="flex flex-row gap-2 items-center
+   backdrop-blur-3xl w-full mx-auto px-4 py-2 z-50 box-border h-16
+  {$$props.class}
   "
+  style={$$props.style}
 >
   <div class="flex flex-row gap-2 items-center mr-auto">
     <a href="/" class="flex flex-row items-center gap-2 logo group">
diff --git a/src/lib/components/ui/StickyCard.svelte b/src/lib/components/ui/StickyCard.svelte
index 1cf21d15..0bfa442b 100644
--- a/src/lib/components/ui/StickyCard.svelte
+++ b/src/lib/components/ui/StickyCard.svelte
@@ -1,6 +1,6 @@
 <aside
-  class="sticky top-16 break-words flex
-    flex-col gap-4 p-6 max-w-full 2xl:w-96 w-80 max-h-[calc(100svh-4rem)]
+  class="sticky top-16 left-0 break-words flex flex-shrink
+    flex-col gap-4 p-6 max-w-full w-full max-h-[calc(100svh-8rem)]
     overflow-auto text-sm border-slate-200 dark:border-zinc-800 {$$props.class}"
 >
   <slot />
diff --git a/src/lib/components/ui/layout/Shell.svelte b/src/lib/components/ui/layout/Shell.svelte
index c5932149..8c84b959 100644
--- a/src/lib/components/ui/layout/Shell.svelte
+++ b/src/lib/components/ui/layout/Shell.svelte
@@ -1,7 +1,84 @@
 <script lang="ts">
+  import Navbar from '$lib/components/ui/Navbar.svelte'
+  import { userSettings } from '$lib/settings.js'
   import { routes } from '$lib/util.js'
 
-  export let route: { id: string } | undefined = undefined
+  export let route: { id: string | null } | undefined = undefined
 
   $: title = route ? routes[(route.id as keyof typeof routes) ?? ''] : ''
+
+  let scroll = 0
 </script>
+
+<svelte:window bind:scrollY={scroll} />
+
+<div class="shell {$$props.class}">
+  <slot
+    name="navbar"
+    class="sticky top-0 border-b border-slate-200 dark:border-zinc-900
+    {scroll > 0
+      ? 'bg-slate-50/70 dark:bg-zinc-950/70'
+      : 'bg-slate-50 dark:bg-zinc-950'} transition-colors duration-500"
+    style="grid-area: navbar"
+    {title}
+  />
+  <div
+    class="content md:divide-x divide-slate-200 dark:divide-zinc-900 {$userSettings.newWidth
+      ? 'limit-width'
+      : ''}"
+  >
+    <slot
+      name="sidebar"
+      class="hidden md:flex sticky top-16 justify-self-end left-0 w-full max-w-full"
+      style="grid-area: sidebar; max-width: 20rem;"
+    />
+    <slot
+      name="main"
+      class="w-full bg-slate-25 dark:bg-transparent justify-self-center"
+      style="grid-area: main"
+    />
+    <slot
+      name="suffix"
+      class="hidden xl:flex w-full justify-self-start"
+      style="grid-area: suffix; max-width: 20rem;"
+    />
+  </div>
+</div>
+
+<style>
+  .shell {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      'navbar'
+      'content';
+  }
+
+  .content {
+    width: 100%;
+    display: grid;
+    margin-left: auto;
+    margin-right: auto;
+    grid-area: content;
+    grid-template-columns: 1fr;
+    grid-template-areas: 'sidebar main suffix';
+    justify-items: end center start;
+  }
+
+  @media (min-width: 768px) {
+    .content {
+      grid-template-columns: 1fr 2fr;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .content {
+      grid-template-columns: 1fr 2fr 1fr;
+    }
+  }
+
+  .limit-width {
+    max-width: 96rem;
+  }
+</style>
diff --git a/src/lib/components/ui/sidebar/CommunityList.svelte b/src/lib/components/ui/sidebar/CommunityList.svelte
index 62b3b247..63385e3a 100644
--- a/src/lib/components/ui/sidebar/CommunityList.svelte
+++ b/src/lib/components/ui/sidebar/CommunityList.svelte
@@ -30,9 +30,15 @@
           slot="prefix"
         />
       </div>
-      <span class="max-w-full break-words" class:hidden={!expanded}>
-        {follow.title}
-      </span>
+      <div
+        class="flex flex-col max-w-full break-words"
+        class:hidden={!expanded}
+      >
+        <span>{follow.title}</span>
+        <span class="text-xs text-slate-600 dark:text-zinc-400">
+          {new URL(follow.actor_id).hostname}
+        </span>
+      </div>
     </Button>
   </div>
 {/each}
diff --git a/src/lib/components/ui/sidebar/Sidebar.svelte b/src/lib/components/ui/sidebar/Sidebar.svelte
index 51f56262..ee92afca 100644
--- a/src/lib/components/ui/sidebar/Sidebar.svelte
+++ b/src/lib/components/ui/sidebar/Sidebar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import {
     ArrowLeftOnRectangle,
-    ChevronDoubleLeft,
     Cog6Tooth,
     GlobeAlt,
     Home,
@@ -18,16 +17,19 @@
   import { flip } from 'svelte/animate'
   import { expoOut } from 'svelte/easing'
   import { Button } from 'mono-svelte'
+
+  export let route = ''
 </script>
 
 <nav
-  class="hidden sm:flex flex-col pl-4 pr-4 py-4 overflow-auto sticky top-16 bottom-0
-  gap-1 max-h-[calc(100svh-4rem)] w-full bg-slate-50 dark:bg-black
+  class="flex flex-col pl-4 pr-4 py-4 overflow-auto
+  gap-1 max-h-[calc(100svh-4rem)]
   {$userSettings.expandSidebar
-    ? 'max-w-[25%] resize-x min-w-[12rem]'
+    ? ''
     : 'w-max max-w-max min-w-max'} {$$props.class}"
+  style={$$props.style}
 >
-  <Button
+  <!-- <Button
     on:click={() =>
       ($userSettings.expandSidebar = !$userSettings.expandSidebar)}
     class="w-max !p-2"
@@ -42,18 +44,23 @@
         : 'rotate-180'}"
       title="Toggle Sidebar"
     />
-  </Button>
+  </Button> -->
   <SidebarButton href="/" expanded={$userSettings.expandSidebar}>
-    <Icon src={Home} mini size="20" title="Frontpage" />
-    <span class:hidden={!$userSettings.expandSidebar}>Frontpage</span>
+    <Icon src={Home} mini={route == '/'} size="20" title="Frontpage" />
+    <span>Frontpage</span>
   </SidebarButton>
   <SidebarButton href="/settings" expanded={$userSettings.expandSidebar}>
-    <Icon src={Cog6Tooth} mini size="20" title="Settings" />
-    <span class:hidden={!$userSettings.expandSidebar}>Settings</span>
+    <Icon
+      src={Cog6Tooth}
+      mini={route == '/settings'}
+      size="20"
+      title="Settings"
+    />
+    <span>Settings</span>
   </SidebarButton>
   <SidebarButton expanded={$userSettings.expandSidebar} href="/communities">
-    <Icon mini src={GlobeAlt} size="20" />
-    <span class:hidden={!$userSettings.expandSidebar}>Communities</span>
+    <Icon mini={route == '/communities'} src={GlobeAlt} size="20" />
+    <span>Communities</span>
   </SidebarButton>
   {#if $profileData.profiles.length >= 1}
     <hr class="border-slate-300 dark:border-zinc-800 my-1" />
@@ -64,7 +71,7 @@
     {/each}
     <SidebarButton href="/accounts" expanded={$userSettings.expandSidebar}>
       <Icon src={UserGroup} mini size="20" />
-      <span class:hidden={!$userSettings.expandSidebar}>Accounts</span>
+      <span>Accounts</span>
     </SidebarButton>
   {/if}
   <hr class="border-slate-300 dark:border-zinc-800 my-1" />
@@ -90,7 +97,7 @@
       title="Log In"
     >
       <Icon mini src={ArrowLeftOnRectangle} size="20" />
-      <span class:hidden={!$userSettings.expandSidebar}>Log In</span>
+      <span>Log In</span>
     </Button>
     <Button
       class="hover:bg-slate-200 {$userSettings.expandSidebar ? '' : '!p-1.5'}"
@@ -100,7 +107,7 @@
       title="Sign Up"
     >
       <Icon mini src={Identification} size="20" />
-      <span class:hidden={!$userSettings.expandSidebar}>Sign Up</span>
+      <span>Sign Up</span>
     </Button>
     <Button
       class="hover:bg-slate-200 {$userSettings.expandSidebar ? '' : '!p-1.5'}"
@@ -110,7 +117,7 @@
       title="Change Instance"
     >
       <Icon mini src={ServerStack} size="20" />
-      <span class:hidden={!$userSettings.expandSidebar}>Change instance</span>
+      <span>Change instance</span>
     </Button>
   {/if}
 </nav>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 296a3200..7ca51629 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,11 +10,14 @@
   import { pwaInfo } from 'virtual:pwa-info'
   import { inDarkTheme, theme } from '$lib/ui/colors.js'
   import { userSettings } from '$lib/settings.js'
-  import { Button, ToastContainer } from 'mono-svelte'
+  import { Button, Spinner, ToastContainer } from 'mono-svelte'
   import { onMount } from 'svelte'
   import { browser } from '$app/environment'
   import { Forward, Icon } from 'svelte-hero-icons'
   import { routes } from '$lib/util.js'
+  import Shell from '$lib/components/ui/layout/Shell.svelte'
+  import SiteCard from '$lib/components/lemmy/SiteCard.svelte'
+  import { site } from '$lib/lemmy.js'
 
   nProgress.configure({
     minimum: 0.4,
@@ -72,36 +75,53 @@
   Skip Navigation
 </Button>
 
-<div
-  class="flex flex-col min-h-screen
-  font-inter
-  {$userSettings.font == 'inter'
+<Shell
+  class="min-h-screen {$userSettings.font == 'inter'
     ? 'font-inter'
     : $userSettings.font == 'system'
     ? 'font-system'
-    : 'font-sans'}
-  "
+    : 'font-sans'}"
+  route={$page.route}
 >
-  <Navbar {title} />
-  <ToastContainer />
-  <Moderation />
-  <div
-    class="flex flex-row h-full w-full max-w-full flex-1
-  "
+  <Navbar
+    slot="navbar"
+    let:style={s}
+    let:class={c}
+    class={c}
+    style={s}
+    {title}
+  />
+  <Sidebar
+    route={$page.route.id ?? ''}
+    slot="sidebar"
+    let:style={s}
+    let:class={c}
+    class={c}
+    style={s}
+  />
+  <main
+    slot="main"
+    let:style={s}
+    let:class={c}
+    class="p-3 sm:p-6 min-w-0 w-full flex flex-col min-h-full {c}"
+    style={s}
+    class:max-w-6xl={$userSettings.newWidth}
+    id="main"
   >
-    <Sidebar />
-    <div
-      class="w-full min-w-0 border-t sm:border-l border-slate-200 dark:border-zinc-900
-    sm:rounded-xl bg-slate-25 dark:bg-zinc-950 min-h-full"
-    >
-      <main
-        class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg mx-auto flex flex-col min-h-full
-      "
-        class:max-w-6xl={$userSettings.newWidth}
-        id="main"
-      >
-        <slot />
-      </main>
-    </div>
+    <slot />
+  </main>
+  <div slot="suffix" let:class={c} let:style={s} class={c} style={s}>
+    {#if $site}
+      <SiteCard
+        site={$site.site_view}
+        taglines={$site.taglines}
+        admins={$site.admins}
+        version={$site.version}
+      />
+    {:else}
+      <div class="h-64 grid place-items-center">
+        <Spinner width={32} />
+      </div>
+    {/if}
   </div>
-</div>
+</Shell>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ba7a0473..191feffb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -104,7 +104,7 @@
       </Pageination>
     </div>
   </div>
-  <div class="hidden xl:block">
+  <!-- <div class="hidden xl:block">
     {#if !$site}
       <StickyCard>
         <div class="h-64 grid place-items-center">
@@ -119,5 +119,5 @@
         version={$site.version}
       />
     {/if}
-  </div>
+  </div> -->
 </div>
diff --git a/src/routes/c/[name]/+page.svelte b/src/routes/c/[name]/+page.svelte
index ef5e605b..f9151e9d 100644
--- a/src/routes/c/[name]/+page.svelte
+++ b/src/routes/c/[name]/+page.svelte
@@ -11,7 +11,7 @@
   import { Button, Modal, toast } from 'mono-svelte'
   import { afterNavigate } from '$app/navigation'
   import { browser } from '$app/environment'
-  import { ChartBar, Icon } from 'svelte-hero-icons'
+  import { ChartBar, EllipsisHorizontal, Icon } from 'svelte-hero-icons'
 
   export let data
 
@@ -70,21 +70,24 @@
 
             toast({ content: 'Copied to clipboard.' })
           }}
-          class="dark:text-zinc-400 text-slate-600 text-sm"
+          class="dark:text-zinc-400 text-slate-600 text-sm text-left"
         >
           !{data.community.community_view.community.name}@{new URL(
             data.community.community_view.community.actor_id
           ).hostname}
         </button>
       </div>
+      <Button
+        size="square-md"
+        color="secondary"
+        class="ml-auto"
+        on:click={() => (sidebar = !sidebar)}
+      >
+        <Icon src={EllipsisHorizontal} size="16" mini />
+      </Button>
     </div>
     <div class="flex flex-row gap-4 max-w-full w-full items-end">
       <Sort selected={data.sort} />
-      <div class="xl:hidden">
-        <Button color="secondary" on:click={() => (sidebar = !sidebar)}>
-          About
-        </Button>
-      </div>
     </div>
     <PostFeed community={true} posts={data.posts.posts} />
 
@@ -110,10 +113,4 @@
       {/if}
     </Pageination>
   </div>
-  <div class="hidden xl:block">
-    <CommunityCard
-      community_view={data.community.community_view}
-      moderators={data.community.moderators}
-    />
-  </div>
 </div>