Add-Ons Navigation sidebar

MuckRock · Apr 11, 2024 · aa4fdac · aa4fdac
1 parent d600e6e
commit aa4fdac
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 49 deletions.
diff --git a/src/common/icons/Pin.svelte b/src/common/icons/Pin.svelte
@@ -16,5 +16,6 @@
   svg {
     display: block;
     transform: rotate(-45deg);
+    fill: var(--fill, var(--black, #0c1e27));
   }
 </style>
diff --git a/src/common/icons/Premium.svelte b/src/common/icons/Premium.svelte
@@ -2,15 +2,9 @@
   const REM = 16;
   export let size = 1;
   export let title = "Premium";
-  export let color = "#24CC99";
 </script>
 
-<svg
-  width={`${size * REM}px`}
-  height={`${size * REM}px`}
-  viewBox="0 0 16 16"
-  style="--premium-color: {color}"
->
+<svg width={`${size * REM}px`} height={`${size * REM}px`} viewBox="0 0 16 16">
   <title>{title}</title>
   <path
     fill-rule="evenodd"
@@ -27,5 +21,6 @@
 <style>
   svg {
     display: block;
+    fill: var(--fill, var(--black, #0c1e27));
   }
 </style>
diff --git a/src/lib/api/addons.ts b/src/lib/api/addons.ts
@@ -6,13 +6,13 @@ import type { Page } from "@/api/types/common";
 import type { AddOnParams } from "@/api/types/addons";
 
 export const CATEGORIES = [
-  ["export", "Export"],
   ["ai", "AI"],
+  ["statistical", "Analyze"],
   ["bulk", "Bulk"],
-  ["extraction", "Extraction"],
+  ["export", "Export"],
+  ["extraction", "Extract"],
   ["file", "File"],
   ["monitor", "Monitor"],
-  ["statistical", "Statistical"],
 ];
 
 export async function getAddons(

diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
@@ -37,7 +37,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
   }
   footer {
     flex: 0 0 0;

diff --git a/src/lib/components/addons/AddOnsNavigation.svelte b/src/lib/components/addons/AddOnsNavigation.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Hash16, Infinity16, StarFill16, Tag16 } from "svelte-octicons";
+  import Pin from "@/common/icons/Pin.svelte";
+  import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
+  import Premium from "@/common/icons/Premium.svelte";
+  import { _ } from "svelte-i18n";
+  import Flex from "../common/Flex.svelte";
+  import { CATEGORIES } from "$lib/api/addons";
+
+  export let active: string = "all";
+</script>
+
+<Flex direction="column" gap={1}>
+  <header class="header">
+    <h2>{$_("addonBrowserDialog.title")}</h2>
+    <p>{$_("addonBrowserDialog.subtitle")}</p>
+  </header>
+  <Flex direction="column">
+    <SidebarItem
+      active={active === "all"}
+      href="/app/add-ons"
+      --hover="var(--blue-2)"
+    >
+      <Infinity16 fill="var(--blue-3)" />
+      All
+    </SidebarItem>
+    <SidebarItem
+      active={active === "pinned"}
+      href="/app/add-ons?active=true"
+      --hover="var(--orange-light)"
+    >
+      <Pin --fill="var(--orange)" />
+      Pinned
+    </SidebarItem>
+    <SidebarItem
+      active={active === "featured"}
+      href="/app/add-ons?featured=true"
+      --hover="var(--yellow-light)"
+    >
+      <StarFill16 fill="var(--yellow)" />
+      Featured
+    </SidebarItem>
+    <SidebarItem
+      active={active === "premium"}
+      href="/app/add-ons?premium=true"
+      --hover="var(--green-light)"
+    >
+      <Premium --fill="var(--green)" />
+      Premium
+    </SidebarItem>
+  </Flex>
+  <Flex direction="column">
+    <SidebarItem small --color="var(--gray-4)">Collections</SidebarItem>
+    {#each CATEGORIES as [key, label]}
+      <SidebarItem href={`/app/add-ons?category=${key}`}>
+        <!-- <Hash16 fill="var(--gray-4)" /> -->
+        {label}
+      </SidebarItem>
+    {/each}
+  </Flex>
+</Flex>
diff --git a/src/lib/components/addons/stories/AddOnsNavigation.stories.svelte b/src/lib/components/addons/stories/AddOnsNavigation.stories.svelte
@@ -0,0 +1,21 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import AddOnNavigation from "../AddOnsNavigation.svelte";
+
+  export const meta = {
+    title: "Components / Add-Ons / Navigation",
+    component: AddOnNavigation,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  let args = {
+    active: "all",
+  };
+</script>
+
+<Template let:args>
+  <AddOnNavigation {...args} />
+</Template>
+
+<Story name="Navigation" {args} />
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
@@ -2,6 +2,7 @@
   export let disabled = false;
   export let small = false;
   export let hover = false;
+  export let active = false;
   // handling link behavior
   export let href: string = undefined;
   export let target: string = undefined;
@@ -18,13 +19,14 @@
     class="container"
     class:disabled
     class:small
+    class:active
     on:click
     on:keydown
   >
     <slot />
   </a>
 {:else}
-  <span class="container" class:hover class:disabled class:small>
+  <span class="container" class:active class:hover class:disabled class:small>
     <slot />
   </span>
 {/if}
@@ -39,7 +41,7 @@
     border-radius: 0.25rem;
     border: none;
 
-    color: inherit;
+    color: var(--color, inherit);
     fill: inherit;
     background: transparent;
 
@@ -52,12 +54,14 @@
   }
 
   /* Hover */
+  a.container.active,
+  .container.active,
   a.container:hover,
   a.container:focus,
   .container.hover:hover,
   .container.hover:focus {
     cursor: pointer;
-    background: var(--gray-2, #d8dee2);
+    background: var(--hover, var(--gray-2, #d8dee2));
   }
   @media (hover: none) {
     a.container:hover,

diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { _ } from "svelte-i18n";
-  import { Hourglass24, Infinity16, Star16 } from "svelte-octicons";
+  import { Hourglass24, Infinity16, Star16, StarFill16 } from "svelte-octicons";
 
-  import type { Page } from "@/api/types/common.js";
-  import type { AddOnListItem } from "$lib/api/types";
   import AddOnList from "@/addons/browser/AddOnList.svelte";
-  import { buildParams, buildUrl, filter } from "@/addons/browser/browser";
-  import Filters from "@/addons/browser/Filters.svelte";
-  import Categories from "@/addons/browser/Categories.svelte";
   import Paginator from "@/common/Paginator.svelte";
   import Search, { query } from "@/common/SearchInput.svelte";
   import Pin from "@/common/icons/Pin.svelte";
@@ -20,10 +15,10 @@
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Error from "@/lib/components/common/Error.svelte";
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
-  import type { PageData } from "./$types";
   import Premium from "@/common/icons/Premium.svelte";
+  import AddOnsNavigation from "@/lib/components/addons/AddOnsNavigation.svelte";
 
-  export let data: PageData;
+  export let data;
 
   function gotoPage(pageUrl: string) {
     const { url } = data;
@@ -32,50 +27,37 @@
     url.searchParams.set("cursor", cursor);
     goto(url);
   }
+
+  function hasFilter(filter: string) {
+    return (data.url as URL).searchParams.has(filter, "true");
+  }
+
+  $: active =
+    Array.from((data.url as URL).searchParams.entries()).find(
+      ([_, value]) => value === "true",
+    )?.[0] ?? "all";
 </script>
 
 <MainLayout>
-  <svelte:fragment slot="navigation">
-    <header class="header">
-      <h2>{$_("addonBrowserDialog.title")}</h2>
-      <p>{$_("addonBrowserDialog.subtitle")}</p>
-    </header>
-    <div class="filters">
-      <SidebarItem href="/app/add-ons">
-        <Infinity16 />
-        All
-      </SidebarItem>
-      <SidebarItem href="/app/add-ons?active=true">
-        <Pin />
-        Pinned
-      </SidebarItem>
-      <SidebarItem href="/app/add-ons?featured=true">
-        <Star16 />
-        Featured
-      </SidebarItem>
-      <SidebarItem href="/app/add-ons?premium=true">
-        <Premium />
-        Premium
-      </SidebarItem>
-    </div>
-  </svelte:fragment>
+  <AddOnsNavigation {active} slot="navigation" />
 
   <svelte:fragment slot="content">
     <ContentLayout>
       <PageToolbar slot="header">
         <Search slot="center" />
       </PageToolbar>
-      {#if $filter === "active"}
+
+      {#if hasFilter("active")}
         <aside class="pinned tip">
           <div class="icon"><Pin size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.pinnedTip")}</p>
         </aside>
-      {:else if $filter === "featured"}
+      {:else if hasFilter("featured")}
         <aside class="featured tip">
           <div class="icon"><Star size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.featuredTip")}</p>
         </aside>
-      {:else if $filter === "premium"}
+      {:else if hasFilter("premium")}
         <aside class="premium tip">
           <div class="icon"><Credit badge size={1.75} /></div>
           <p class="message">{$_("addonBrowserDialog.premiumTip")}</p>