Rework feed header again

coracle-social · Nov 20, 2024 · 615e496 · 615e496
1 parent b35c3c8
commit 615e496
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 55 deletions.
diff --git a/src/app/shared/FeedControls.svelte b/src/app/shared/FeedControls.svelte
@@ -1,18 +1,17 @@
 <script lang="ts">
   import {debounce} from "throttle-debounce"
-  import {equals} from "ramda"
-  import {sortBy, uniqBy} from "@welshman/lib"
+  import {sortBy, equals, uniqBy} from "@welshman/lib"
   import {getAddress} from "@welshman/util"
   import {isSearchFeed, makeSearchFeed, makeScopeFeed, Scope, getFeedArgs} from "@welshman/feeds"
   import {signer} from "@welshman/app"
   import {toSpliced} from "src/util/misc"
+  import {slide} from "src/util/transition"
   import {boolCtrl} from "src/partials/utils"
+  import Card from "src/partials/Card.svelte"
   import Modal from "src/partials/Modal.svelte"
   import Input from "src/partials/Input.svelte"
-  import Popover2 from "src/partials/Popover2.svelte"
+  import Chip from "src/partials/Chip.svelte"
   import Anchor from "src/partials/Anchor.svelte"
-  import Menu from "src/partials/Menu.svelte"
-  import MenuItem from "src/partials/MenuItem.svelte"
   import FeedForm from "src/app/shared/FeedForm.svelte"
   import {router} from "src/app/util"
   import {normalizeFeedDefinition, readFeed, makeFeed, displayFeed} from "src/domain"
@@ -24,7 +23,7 @@
   feed.definition = normalizeFeedDefinition(feed.definition)
 
   const form = boolCtrl()
-  const listMenu = boolCtrl()
+  const expanded = boolCtrl()
   const followsFeed = makeFeed({definition: normalizeFeedDefinition(makeScopeFeed(Scope.Follows))})
   const networkFeed = makeFeed({definition: normalizeFeedDefinition(makeScopeFeed(Scope.Network))})
 
@@ -44,7 +43,6 @@
     feed.definition = definition
     search = getSearch(definition)
     $form.disable()
-    $listMenu.disable()
     updateFeed(feed)
   }
 
@@ -98,7 +96,7 @@
 </script>
 
 <div class="flex flex-col gap-1">
-  <div class="flex flex-grow items-center justify-end gap-1">
+  <div class="flex flex-grow items-center justify-end gap-2">
     <div class="flex">
       <Input
         dark
@@ -109,59 +107,60 @@
           <i class="fa fa-search" />
         </div>
       </Input>
-      <Anchor button low class="border-none xs:rounded-l-none" on:click={openForm}>
+      <Anchor button low class="xs:rounded-l-none" on:click={openForm}>
         Filters ({feed.definition.length - 1})
       </Anchor>
     </div>
     <slot name="controls" />
-  </div>
-  <div class="flex flex-wrap justify-end gap-1">
-    <Anchor
-      button
-      low={!equals(followsFeed.definition, feed.definition)}
-      accent={equals(followsFeed.definition, feed.definition)}
-      on:click={() => setFeed(followsFeed)}>
-      Follows
-    </Anchor>
-    <Anchor
-      button
-      low={!equals(networkFeed.definition, feed.definition)}
-      accent={equals(networkFeed.definition, feed.definition)}
-      on:click={() => setFeed(networkFeed)}>
-      Network
+    <Anchor class="py-4 pl-1" on:click={$expanded.toggle}>
+      <i class="fa fa-lg fa-cog transition-all duration-700" class:rotate-180={$expanded.enabled} />
     </Anchor>
-    {#each allFeeds as other}
-      <Anchor
-        button
-        low={!equals(other.definition, feed.definition)}
-        accent={equals(other.definition, feed.definition)}
-        on:click={() => setFeed(other)}>
-        {displayFeed(other)}
-      </Anchor>
-    {/each}
-    {#if $signer}
-      <div class="relative">
-        <button
-          type="button"
-          class="flex h-7 w-6 cursor-pointer items-center justify-center rounded bg-neutral-700 text-center text-neutral-50 transition-colors hover:bg-neutral-600"
-          on:click={$listMenu.enable}>
-          <i class="fa fa-sm fa-ellipsis-v" />
-        </button>
-        {#if $listMenu.enabled}
-          <Popover2 absolute hideOnClick onClose={$listMenu.disable} class="right-0 top-8 w-60">
-            <Menu>
-              <MenuItem href={router.at("feeds").toString()} class="flex items-center gap-2">
-                <i class="fa fa-rss" /> Manage feeds
-              </MenuItem>
-              <MenuItem href={router.at("lists").toString()} class="flex items-center gap-2">
-                <i class="fa fa-list" /> Manage lists
-              </MenuItem>
-            </Menu>
-          </Popover2>
-        {/if}
-      </div>
-    {/if}
   </div>
+  {#if $expanded.enabled}
+    <div transition:slide>
+      <Card class="flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <p class="staatliches text-2xl">Your Feeds</p>
+          <Anchor on:click={$expanded.toggle}>
+            <i
+              class="fa fa-lg fa-times transition-all duration-700"
+              class:rotate-180={$expanded.enabled} />
+          </Anchor>
+        </div>
+        <div class="flex flex-wrap gap-1">
+          <Chip
+            class="cursor-pointer"
+            accent={equals(followsFeed.definition, feed.definition)}
+            on:click={() => setFeed(followsFeed)}>
+            Follows
+          </Chip>
+          <Chip
+            class="cursor-pointer"
+            accent={equals(networkFeed.definition, feed.definition)}
+            on:click={() => setFeed(networkFeed)}>
+            Network
+          </Chip>
+          {#each allFeeds as other}
+            <Chip
+              class="cursor-pointer"
+              accent={equals(other.definition, feed.definition)}
+              on:click={() => setFeed(other)}>
+              {displayFeed(other)}
+            </Chip>
+          {/each}
+        </div>
+        {#if $signer}
+          <div class="my-4 flex flex-col-reverse justify-between gap-2 sm:flex-row">
+            <div class="flex flex-col gap-2 sm:flex-row">
+              <Anchor button href={router.at("lists").toString()}>Manage lists</Anchor>
+              <Anchor button href={router.at("feeds").toString()}>Manage feeds</Anchor>
+            </div>
+            <Anchor button accent on:click={openForm}>Customize feed</Anchor>
+          </div>
+        {/if}
+      </Card>
+    </div>
+  {/if}
 </div>
 
 {#if $form.enabled}

diff --git a/src/partials/Chip.svelte b/src/partials/Chip.svelte
@@ -4,6 +4,7 @@
   export let pad = false
   export let dark = true
   export let light = false
+  export let accent = false
   export let danger = false
   export let warning = false
   export let small = false
@@ -13,6 +14,7 @@
     "border-neutral-800": light,
     "border-neutral-100": dark,
     "!border-danger": danger,
+    "!bg-accent": accent,
     "!border-warning": warning,
     "py-1 px-2": !small,
     "py-0.5 px-2 text-sm": small,