Copies AddOnListItem to new component

src/lib/components/addons/AddOnListItem.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+
+  import AddOnPin from "@/addons/AddOnPin.svelte";
+  import AddOnPopularity from "@/addons/Popularity.svelte";
+  import type { AddOnListItem } from "@/addons/types";
+  import PremiumBadge from "@/premium-credits/PremiumBadge.svelte";
+
+  export let addon: AddOnListItem;
+
+  $: url = `/app/add-ons/${addon?.repository}`;
+  $: description = addon?.parameters?.description;
+  $: author = { name: addon?.repository?.split("/")[0] };
+  $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false;
+</script>
+
+<a class="addon-link" href={url}>
+  <div class="container" id={addon.repository}>
+    <div class="row">
+      <div class="center-self">
+        <AddOnPin {addon} />
+      </div>
+      <div class="stretch">
+        <h3 class="addon-name">{addon.name}</h3>
+      </div>
+      <div class="metadata">
+        {#if author?.name}
+          <p class="author">
+            <a
+              href="http://github.com/{addon.repository}"
+              target="_blank"
+              rel="noopener noreferrer"
+              title={$_("addonBrowserDialog.viewsource")}>{author.name}</a
+            >
+          </p>
+        {/if}
+        {#if addon.usage}
+          <AddOnPopularity useCount={addon.usage} />
+        {/if}
+        {#if isPremium}
+          <span class="badge"><PremiumBadge /></span>
+        {/if}
+      </div>
+    </div>
+    {#if description}
+      <div class="description">{@html description}</div>
+    {/if}
+  </div>
+</a>
+
+<style>
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  .addon-link:hover .container {
+    background-color: var(--menuBg);
+  }
+  .container {
+    display: block;
+    min-width: 12rem;
+    padding: 0.5rem;
+    text-align: left;
+  }
+
+  .row {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    margin: 0.5rem;
+  }
+
+  .badge {
+    margin-bottom: -0.25em;
+    font-size: 0.8em;
+  }
+
+  .metadata {
+    display: flex;
+    align-items: flex-end;
+    gap: 1rem;
+    color: var(--darkgray);
+  }
+
+  .description {
+    margin: 0 0.5em;
+    opacity: 0.6;
+    font-size: 0.875em;
+    line-height: 1.4;
+    color: var(--darkgray);
+    overflow: hidden;
+    -webkit-line-clamp: 4;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    & > * {
+      margin-top: 0;
+    }
+  }
+
+  .addon-name {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .center-self {
+    align-self: center;
+  }
+
+  .stretch {
+    flex: 1 1 auto;
+  }
+
+  .author a:hover {
+    opacity: 0.7;
+  }
+
+  p {
+    margin: 0;
+  }
+</style>

src/lib/components/addons/stories/AddOnListItem.stories.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+
+  import AddOnListItem from "../AddOnListItem.svelte";
+
+  const addon = {
+    active: false,
+    name: "Scraper",
+    repository: "MuckRock/documentcloud-scraper-addon",
+    usage: 225000,
+    parameters: {
+      description:
+        "This add-on will scrape and optionally crawl a given site for documents to upload to DocumentCloud. It can also alert you of given keywords appearing in those documents.",
+    },
+  };
+
+  const args = { addon };
+
+  export const meta = {
+    title: "Components / Add-Ons / List Item",
+    component: AddOnListItem,
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Template let:args>
+  <div class="container">
+    <AddOnListItem {...args} />
+  </div>
+</Template>
+
+<Story name="Default" {args} />
+<Story name="Pinned" args={{ addon: { ...addon, active: true } }} />
+<Story
+  name="Long Description"
+  args={{
+    addon: {
+      ...args,
+      name: "SideKick",
+      parameters: {
+        description:
+          "SideKick is machine learning tool designed to help you quickly test ways to categorize large documents sets, apply machine learning to try to sort documents into one set or another, and get feedback on how well the model works. We're working on launching an improved, real-time graphical categorization tool, but in the meantime, this Add-On will let you get started. # Step 1: Select a project on the left-hand sidebar before running this Add-On. If you need to, click *Cancel*, select a project, and start SideKick again. # Step 2: Use DocumentCloud's *Edit->Edit Document Data* feature to add a key value pair with the category you want, with about five examples of documents that match a category and five that don't. For example, you might add a key of *Email* with five documents set to *True* and five set to *False*. Since *Email* is the value you're training on, set it as the *Value to Train* below. SideKick is a binary classifier — it will try to rank all documents on a spectrum from -1 to 1 based on how likely it believe the document is to be that value.",
+      },
+    },
+  }}
+/>
+<Story
+  name="Premium"
+  args={{
+    addon: {
+      ...addon,
+      parameters: { ...addon.parameters, categories: ["premium"] },
+    },
+  }}
+/>
+
+<style>
+  .container {
+    max-width: 32rem;
+    border: 1px solid #eee;
+  }
+</style>

src/routes/app/add-ons/+page.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { _ } from "svelte-i18n";
-  import {
-    Hourglass24,
-    Infinity16,
-    Plug24,
-    Star16,
-    StarFill16,
-  } from "svelte-octicons";
+  import { Hourglass24, Plug24 } from "svelte-octicons";
 
-  import AddOnList from "@/addons/browser/AddOnList.svelte";
   import Paginator from "@/common/Paginator.svelte";
   import Search, { query } from "@/common/SearchInput.svelte";
   import Pin from "@/common/icons/Pin.svelte";
@@ -20,9 +13,7 @@
   import MainLayout from "$lib/components/MainLayout.svelte";
   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 Premium from "@/common/icons/Premium.svelte";
-  import ListItem from "@/addons/browser/AddOnListItem.svelte";
+  import ListItem from "$lib/components/addons/AddOnListItem.svelte";
   import AddOnsNavigation from "@/lib/components/addons/AddOnsNavigation.svelte";
 
   export let data;
@@ -35,10 +26,6 @@
     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",