Loads pinned add-on data in sidebar

src/addons/types.ts

@@ -1,8 +1,3 @@
-interface Author {
-  name?: string;
-  avatar?: string;
-}
-
 type AddOnCategory = "premium" | string;
 
 interface AddOnProperty {

src/lib/api/addons.ts

@@ -0,0 +1,16 @@
+import { error } from "@sveltejs/kit";
+import { BASE_API_URL } from "@/config/config.js";
+import { type AddOnListItem } from "@/addons/types";
+import { isErrorCode } from "../utils";
+
+export async function getPinnedAddons(): Promise<AddOnListItem[]> {
+  const endpoint = new URL(
+    "/api/addons/?active=true&per_page=100",
+    BASE_API_URL,
+  );
+  const resp = await fetch(endpoint, { credentials: "include" });
+  if (isErrorCode(resp.status)) {
+    error(resp.status, resp.statusText);
+  }
+  return resp.json();
+}

src/lib/api/types.d.ts

@@ -17,6 +17,55 @@ export type sizes = "thumbnail" | "small" | "normal" | "large" | "xlarge";
 
 export type Highlight = Record<string, string[]>;
 
+type AddOnCategory = "premium" | string;
+
+interface AddOnProperty {
+  type: string;
+  title: string;
+  description?: string;
+  default?: string;
+  format?: string;
+  enum?: string[];
+}
+
+interface AddOnParameters {
+  type: string;
+  version: number;
+  title: string;
+  description: string;
+  instructions: string;
+  categories: AddOnCategory[];
+  documents: string[];
+  required: string[];
+  properties: Record<string, AddOnProperty>;
+  cost: {
+    amount: number;
+    price: number;
+    unit: string;
+  };
+  eventOptions: {
+    name: string;
+    events: string[];
+  };
+}
+
+// API endpoint https://api.www.documentcloud.org/api/addons/
+export interface AddOnListItem {
+  id: number;
+  user: number;
+  organization: number;
+  access: "public" | "private";
+  name: string;
+  repository: string;
+  parameters: Partial<AddOnParameters>;
+  created_at: string;
+  updated_at: string;
+  active: boolean;
+  featured: boolean;
+  default: boolean;
+  usage?: number;
+}
+
 // https://www.documentcloud.org/help/api#documents
 export interface Document {
   id: number | string;

src/lib/utils/index.ts

@@ -0,0 +1 @@
+export { isErrorCode } from "./isErrorCode";

src/lib/utils/isErrorCode.ts

@@ -0,0 +1,5 @@
+import type { NumericRange } from "@sveltejs/kit";
+
+export function isErrorCode(status: number): status is NumericRange<400, 599> {
+  return status >= 400 && status <= 599;
+}

src/routes/app/+layout.js

@@ -1,12 +1,15 @@
 import { search } from "$lib/api/documents.js";
+import { getPinnedAddons } from "@/lib/api/addons.js";
 
 export async function load({ url, fetch }) {
   const query = url.searchParams.get("q") || "";
 
   const searchResults = search(query, true, fetch);
+  const pinnedAddons = getPinnedAddons();
 
   return {
     searchResults,
     query,
+    pinnedAddons,
   };
 }

src/routes/app/+page.svelte

@@ -12,6 +12,7 @@
     Share16,
     Book16,
     Hourglass24,
+    Pin24,
   } from "svelte-octicons";
   import MainLayout from "$lib/components/MainLayout.svelte";
   import Button from "$lib/components/common/Button.svelte";
@@ -26,15 +27,22 @@
   import Search from "$lib/components/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Paginator from "@/common/Paginator.svelte";
+  import type { DocumentResults } from "@/lib/api/types";
+  import type { AddOnListItem } from "@/addons/types";
 
-  export let data;
+  export let data: {
+    query: string;
+    searchResults: Promise<DocumentResults>;
+    pinnedAddons: Promise<AddOnListItem[]>;
+  };
 
   let page = 1;
   let per_page = 25;
   let error: Error;
 
   $: searchResults = data.searchResults;
   $: query = data.query;
+  $: pinnedAddons = data.pinnedAddons;
   $: count = searchResults.count;
   $: next = searchResults.next;
   $: previous = searchResults.previous;
@@ -151,18 +159,18 @@
       <SidebarItem slot="title"><Plug16 /> Add-Ons</SidebarItem>
       <Action slot="action" icon={Book16}>Explore</Action>
       <Flex direction="column" gap={0}>
-        <SidebarItem small href="/addon/1">
-          <Pin active /> Scraper
-        </SidebarItem>
-        <SidebarItem small href="/addon/2">
-          <Pin active /> Regex Extractor
-        </SidebarItem>
-        <SidebarItem small href="/addon/3">
-          <Pin active /> Tabula Spreadsheet Analysis
-        </SidebarItem>
-        <SidebarItem small href="/addon/4">
-          <Pin active /> GPT 3.5 Analysis
-        </SidebarItem>
+        {#await pinnedAddons}
+          <Empty icon={Hourglass24}>Loading…</Empty>
+        {:then addons}
+          {#each addons as addon}
+            <SidebarItem small href={`/addon/${addon.id}`}>
+              <Pin active={addon.active} />
+              {addon.name}
+            </SidebarItem>
+          {:else}
+            <Empty icon={Pin24}>Pinned add-ons will appear here</Empty>
+          {/each}
+        {/await}
       </Flex>
     </SidebarGroup>
   </svelte:fragment>