From af2f3f99b1a4bc9062499cd9cfa92430fe114361 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 14:57:13 -0500
Subject: [PATCH] Really lean into DocumentListItem customization

---
 src/lib/components/common/KV.svelte           |  52 +++--
 .../documents/DocumentListItem.svelte         | 178 +++++++++++++-----
 .../stories/DocumentListItem.stories.svelte   | 113 ++++++++++-
 .../components/viewer/AnnotationLayer.svelte  |   3 +-
 src/lib/components/viewer/NoteTab.svelte      |   7 +-
 src/test/fixtures/documents.ts                |  12 +-
 6 files changed, 290 insertions(+), 75 deletions(-)

diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index d8400cb0e..954972d4d 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -4,49 +4,63 @@
   export let href: null | string = null;
   export let inline: boolean = false;
   export let tag: boolean = false;
+
+  let el = href ? "a" : "span";
 </script>
 
-<div class="kv" class:inline>
+<svelte:element
+  this={el}
+  class="kv"
+  class:link={href}
+  class:inline
+  {...$$restProps}
+>
   {#if !tag}
     <span class="key">{key}</span>
   {/if}
 
   <span class="value">
-    {#if href}
-      <a {href}>{value}</a>
-    {:else}
-      {value}
-    {/if}
+    {value}
   </span>
-</div>
+</svelte:element>
 
 <style>
   .kv {
     display: flex;
+    align-items: baseline;
     padding: 0.1875rem 0.375rem;
-    align-items: flex-start;
-    gap: 0.625rem;
+    gap: 0.375rem;
 
     border-radius: 0.25rem;
-    border: 1px solid var(--blue-2, #b5ceed);
-    background: var(--blue-1, #eef3f9);
+    border: 1px solid var(--gray-2, #b5ceed);
+
+    color: var(--gray-5, #5c717c);
+    font-size: var(--font-xs, 0.75rem);
+    font-style: italic;
+    font-weight: var(--font-regular, 400);
+    line-height: normal;
+  }
+
+  .link.kv {
+    color: var(--blue-5, #153359);
+    border-color: var(--blue-2);
+    background: var(--blue-1);
+  }
+  .link.kv:hover {
+    cursor: pointer;
+    filter: brightness(1.025);
   }
 
   .kv.inline {
     display: inline-flex;
   }
 
-  .key,
-  .value {
-    color: var(--gray-4, #5c717c);
-    font-size: var(--font-xs, 0.75rem);
-    font-style: italic;
-    font-weight: var(--font-regular, 400);
-    line-height: normal;
+  .key {
+    font-style: normal;
+    font-size: var(--font-sm);
   }
 
   .value {
-    color: var(--blue-5, #153359);
     font-style: normal;
     word-break: break-all;
   }
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 3da42229d..385f1e381 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -5,6 +5,26 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
 If we're in an embed, we want to open links to documents in new tabs and hide the access label.
 -->
+<script lang="ts" context="module">
+  export interface VisibleFields {
+    fullTitle: boolean;
+    meta: boolean;
+    thumbnail: boolean;
+    description: boolean;
+    projects: boolean;
+    data: boolean;
+  }
+
+  export const defaultVisibleFields: VisibleFields = {
+    fullTitle: true,
+    meta: true,
+    thumbnail: true,
+    description: false,
+    projects: true,
+    data: false,
+  };
+</script>
+
 <script lang="ts">
   import type { Document, Project } from "$lib/api/types";
 
@@ -15,10 +35,12 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   import DocAccess, { getLevel } from "../common/Access.svelte";
   import KV from "../common/KV.svelte";
   import { canonicalUrl, userOrgString } from "@/lib/api/documents";
+  import { canonicalUrl as projectUrl } from "@/lib/api/projects";
 
   import Thumbnail from "./Thumbnail.svelte";
 
   export let document: Document;
+  export let visibleFields: Partial<VisibleFields> = defaultVisibleFields;
 
   const embed: boolean = getContext("embed");
 
@@ -28,6 +50,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     : []; // only show projects if we've loaded them
 
   $: level = getLevel(document.access);
+  $: visible = Object.assign({}, defaultVisibleFields, visibleFields);
 
   function clean(html: string) {
     return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
@@ -36,73 +59,137 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   let width: number;
 </script>
 
-<a
-  href={canonicalUrl(document).href}
+<div
   class="document-list-item"
   class:small={width < 400}
-  target={embed ? "_blank" : undefined}
   bind:clientWidth={width}
 >
-  {#if width >= 400}
-    <Thumbnail {document} />
+  {#if width >= 400 && visible.thumbnail}
+    <a
+      href={canonicalUrl(document).href}
+      class="document-link thumbnail-link"
+      target={embed ? "_blank" : undefined}
+    >
+      <Thumbnail {document} />
+    </a>
   {/if}
 
-  <div class="documentInfo">
+  <div class="document-info">
     <div class="head">
-      <h3 class="title">{document.title}</h3>
+      <h3 class="title" class:ellipsis={!visible.fullTitle}>
+        <a
+          href={canonicalUrl(document).href}
+          class="document-link title-link"
+          target={embed ? "_blank" : undefined}>{document.title}</a
+        >
+      </h3>
       {#if !embed && level}
         <div class="access">
           <DocAccess {level} />
         </div>
       {/if}
     </div>
-    <!-- {#if document.description}
+    {#if visible.meta}
+      <p class="meta">
+        <a
+          class="document-link"
+          href={`${canonicalUrl(document).href}?mode=grid`}
+          >{$_("documents.pageCount", {
+            values: { n: document.page_count },
+          })}</a
+        >
+        -
+        {#if document.notes && document.notes.length > 0}
+          <a
+            class="document-link"
+            href={`${canonicalUrl(document).href}?mode=notes`}
+            >{$_("documents.noteCount", {
+              values: { n: document.notes.length },
+            })}</a
+          > -
+        {/if}
+        {#if userOrgString(document)}
+          {userOrgString(document)} -
+        {/if}
+        {date}
+      </p>
+    {/if}
+    {#if document.description && visible.description}
       <p class="description">
         {clean(document.description)}
       </p>
-    {/if} -->
-    <p class="meta">
-      {$_("documents.pageCount", { values: { n: document.page_count } })} -
-      {#if document.notes && document.notes.length > 0}
-        {$_("documents.noteCount", { values: { n: document.notes.length } })} -
+    {/if}
+    <div class="data" class:hide={width < 400}>
+      {#if visible.projects}
+        {#each projects as project}
+          <KV
+            key="Project"
+            value={project.title}
+            href={projectUrl(project).href}
+            title={project.title}
+            target={embed ? "_blank" : undefined}
+          />
+        {/each}
       {/if}
-      {#if userOrgString(document)}
-        {userOrgString(document)} -
+      {#if visible.data}
+        {#each Object.entries(document.data) as [key, values]}
+          {#each values as value}
+            <KV {key} {value} />
+          {/each}
+        {/each}
       {/if}
-      {date}
-    </p>
-    <div class="data" class:hide={width < 400}>
-      {#each projects as project}
-        <KV key="Project" value={project.title} />
-      {/each}
     </div>
   </div>
-</a>
+</div>
 
 <style>
   .document-list-item {
     flex: 1 0 0;
     display: flex;
+    align-items: flex-start;
     max-width: 100%;
     min-width: 0;
     align-self: stretch;
-    gap: 1rem;
-    padding: 0.75rem;
-    border-radius: 0.25rem;
+    gap: 0.5rem 1rem;
+    color: var(--gray-5);
+  }
+
+  .thumbnail-link {
+    position: relative;
+  }
+
+  .thumbnail-link:hover::after {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--blue-3);
+    background-blend-mode: multiply;
+    opacity: 0.25;
+  }
+
+  .document-link {
     color: inherit;
-    text-decoration: none;
     background-color: transparent;
-    border: 1px solid transparent;
+    text-decoration-color: var(--blue-2);
   }
 
-  .document-list-item.small {
-    padding: 0.75rem 0.75rem 1.5rem;
+  .document-link:hover,
+  .document-link:focus {
+    color: var(--blue-4);
+    background-color: var(--blue-1);
+    border-color: var(--blue-2);
+    box-decoration-break: clone;
   }
 
   .head {
+    flex: 1 1 100%;
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: 0.5rem;
     align-items: baseline;
   }
@@ -117,19 +204,14 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     font-size: var(--font-md, 1rem);
   }
 
-  .document-list-item:hover,
-  .document-list-item:focus {
-    background-color: var(--blue-1);
-    border-color: var(--blue-2);
-  }
-
-  .documentInfo {
+  .document-info {
     display: flex;
-    flex-direction: column;
+    flex-flow: row wrap;
     align-items: flex-start;
+    justify-content: space-between;
     gap: 0.5rem;
     flex: 1 0 0;
-    align-self: stretch;
+    align-self: center;
     min-width: 0;
   }
 
@@ -140,14 +222,18 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     font-style: normal;
     font-weight: var(--font-semibold, 600);
     line-height: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    /* white-space: nowrap; */
     max-width: 100%;
     margin: 0;
   }
 
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .meta {
+    flex: 1 1 100%;
     color: var(--gray-4, #5c717c);
     font-size: 0.75rem;
     font-style: normal;
@@ -162,14 +248,20 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     font-weight: var(--font-regular, 400);
     line-height: normal;
     overflow: hidden;
+    display: block;
+    display: -webkit-box;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     max-width: 100ch;
     width: 100%;
   }
 
   .access {
+    flex: 0 0 8rem;
     font-size: var(--font-sm);
+    transform: translateY(0.125em);
   }
 
   .small .access {
diff --git a/src/lib/components/documents/stories/DocumentListItem.stories.svelte b/src/lib/components/documents/stories/DocumentListItem.stories.svelte
index aa8e89557..f9dcae034 100644
--- a/src/lib/components/documents/stories/DocumentListItem.stories.svelte
+++ b/src/lib/components/documents/stories/DocumentListItem.stories.svelte
@@ -1,33 +1,128 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import DocumentListItem from "../DocumentListItem.svelte";
+  import DocumentListItem, {
+    defaultVisibleFields,
+  } from "../DocumentListItem.svelte";
 
   import document from "@/test/fixtures/documents/document.json";
   import expanded from "@/test/fixtures/documents/document-expanded.json";
   import santaanas from "@/test/fixtures/documents/examples/the-santa-anas.json";
   import { projectList } from "@/test/fixtures/projects";
+  import { data } from "@/test/fixtures/documents";
 
   export const meta = {
     title: "Components / Documents / Document List Item",
     component: DocumentListItem,
     tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
   };
 </script>
 
 <Template let:args>
-  <DocumentListItem {...args} />
+  <div class="wrapper">
+    <DocumentListItem {...args} />
+  </div>
 </Template>
 
-<Story name="Basic" args={{ document: expanded }} />
+<Story
+  name="Basic"
+  args={{
+    document: { ...expanded, data },
+    visibleFields: defaultVisibleFields,
+  }}
+/>
+
+<Story
+  name="With Short Description"
+  args={{
+    document: {
+      ...expanded,
+      description:
+        "Makes David Cameron the new prime minister and installs Nick Clegg as his deputy",
+    },
+    visibleFields: { ...defaultVisibleFields, description: true },
+  }}
+/>
+
+<Story
+  name="With Long Description"
+  args={{
+    document: expanded,
+    visibleFields: { ...defaultVisibleFields, description: true },
+  }}
+/>
+
+<Story
+  name="With Many Projects"
+  args={{
+    document: {
+      ...expanded,
+      projects: projectList.results.slice(0, 7),
+      visibleFields: { ...defaultVisibleFields, thumbnail: true },
+    },
+  }}
+/>
 
 <Story
-  name="Lots of Projects"
+  name="With Much Data"
   args={{
-    document: { ...expanded, projects: projectList.results.slice(0, 7) },
+    document: {
+      ...expanded,
+      data,
+      projects: projectList.results.slice(0, 7),
+    },
+    visibleFields: { ...defaultVisibleFields, data: true, thumbnail: true },
   }}
 />
 
-<Story name="minimal" args={{ document }} />
+<Story
+  name="Minimal"
+  args={{
+    document,
+    visibleFields: {
+      meta: false,
+      thumbnail: false,
+      description: false,
+      projects: false,
+      data: false,
+    },
+  }}
+/>
+
+<Story
+  name="Maximal"
+  args={{
+    document: {
+      ...expanded,
+      projects: projectList.results.slice(0, 7),
+      data,
+    },
+    visibleFields: {
+      thumbnail: true,
+      description: true,
+      projects: true,
+      data: true,
+    },
+  }}
+/>
+
+<Story
+  name="Truncate Title"
+  args={{
+    document: {
+      ...expanded,
+      description:
+        "Makes David Cameron the new prime minister and installs Nick Clegg as his deputy",
+    },
+    visibleFields: {
+      ...defaultVisibleFields,
+      description: true,
+      fullTitle: false,
+    },
+  }}
+/>
 
 <Story name="notes" args={{ document: santaanas }} />
 
@@ -46,3 +141,9 @@
   name="Private Access"
   args={{ document: { ...expanded, access: "private" } }}
 />
+
+<style>
+  .wrapper {
+    max-width: 64rem;
+  }
+</style>
diff --git a/src/lib/components/viewer/AnnotationLayer.svelte b/src/lib/components/viewer/AnnotationLayer.svelte
index 45fe77f44..5ebabb4a5 100644
--- a/src/lib/components/viewer/AnnotationLayer.svelte
+++ b/src/lib/components/viewer/AnnotationLayer.svelte
@@ -33,6 +33,7 @@ Assumes it's a child of a ViewerContext
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
   import { getNotes, getViewerHref } from "$lib/utils/viewer";
+  import Tooltip from "../common/Tooltip.svelte";
 
   export let scale = 1.5;
   export let page_number: number; // zero-indexed
@@ -201,7 +202,7 @@ Assumes it's a child of a ViewerContext
       style:top="calc({note.y1} * 100%)"
       on:click={(e) => openNote(e, note)}
     >
-      <NoteTab access={note.access} title={note.title} />
+      <Tooltip caption={note.title}><NoteTab access={note.access} /></Tooltip>
     </a>
     <a
       href={getViewerHref({ document, note, mode: $mode, embed })}
diff --git a/src/lib/components/viewer/NoteTab.svelte b/src/lib/components/viewer/NoteTab.svelte
index 737fd9933..eb64ea0c0 100644
--- a/src/lib/components/viewer/NoteTab.svelte
+++ b/src/lib/components/viewer/NoteTab.svelte
@@ -6,16 +6,13 @@
 -->
 <script lang="ts">
   import type { Access } from "$lib/api/types";
-  import Tooltip from "../common/Tooltip.svelte";
 
   export let access: Access | "" = "";
   export let size: "small" | "normal" = "normal";
-  export let title: string | undefined = undefined;
+  // export let title: string | undefined = undefined;
 </script>
 
-<Tooltip caption={title} placement="right">
-  <div class="tab {access} {size}"></div>
-</Tooltip>
+<div class="tab {access} {size}"></div>
 
 <style>
   .tab {
diff --git a/src/test/fixtures/documents.ts b/src/test/fixtures/documents.ts
index 60c1bcc76..3cc3e0fc0 100644
--- a/src/test/fixtures/documents.ts
+++ b/src/test/fixtures/documents.ts
@@ -1,4 +1,14 @@
-import type { Document, Highlights, Page } from "$lib/api/types";
+import type { Data, Document, Highlights, Page } from "$lib/api/types";
+
+export const data: Data = {
+  date: ["2009-02-12"],
+  chair: ["Christopher Dodd"],
+  hearing: ["111-48"],
+  committee: ["Banking, Housing, and Urban Affairs"],
+  subcommittee: ["Financial Institutions", "Housing and Urban Affairs"],
+  witnesses: ["Ben Bernanke", "Timothy Geithner"],
+  topics: ["Economic Crisis", "Regulatory Reform"],
+};
 
 export const document: Document = {
   id: 24002098,