From 198f11bcf75252126476404abd1b4a801bfa5566 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 11:19:23 -0500
Subject: [PATCH 01/19] Refactors Thumbnail into component

---
 .../documents/DocumentListItem.svelte         | 119 +-----------------
 src/lib/components/documents/Thumbnail.svelte | 113 +++++++++++++++++
 .../stories/Thumbnail.stories.svelte          |  31 +++++
 .../DocumentListItem.test.ts.snap             |  27 ++--
 4 files changed, 157 insertions(+), 133 deletions(-)
 create mode 100644 src/lib/components/documents/Thumbnail.svelte
 create mode 100644 src/lib/components/documents/stories/Thumbnail.stories.svelte

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index b7bfe3c06..3da42229d 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -6,69 +6,33 @@ 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">
-  import type { Access, Document, Project } from "$lib/api/types";
+  import type { Document, Project } from "$lib/api/types";
 
   import DOMPurify from "isomorphic-dompurify";
   import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
-  import { Alert24, Hourglass24, File24 } from "svelte-octicons";
 
   import DocAccess, { getLevel } from "../common/Access.svelte";
   import KV from "../common/KV.svelte";
-  import NoteTab from "../viewer/NoteTab.svelte";
+  import { canonicalUrl, userOrgString } from "@/lib/api/documents";
 
-  import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
-  import {
-    canonicalUrl,
-    pageImageUrl,
-    userOrgString,
-  } from "@/lib/api/documents";
-  import { pageSizesFromSpec } from "$lib/utils/pageSize";
+  import Thumbnail from "./Thumbnail.svelte";
 
   export let document: Document;
 
   const embed: boolean = getContext("embed");
 
-  const thumbnailWidth = IMAGE_WIDTHS_MAP.get("thumbnail") ?? 60;
-
-  // this can be updated later if we want different icons
-  const statusIcons = {
-    error: Alert24,
-    nofile: File24,
-    pending: Hourglass24,
-  };
-
-  $: sizes = document.page_spec ? pageSizesFromSpec(document.page_spec) : null;
-  $: aspect = sizes?.[0] ?? 11 / 8.5; // fallback to US letter for now
-  $: height = thumbnailWidth * aspect;
   $: date = new Date(document.created_at).toDateString();
   $: projects = document.projects?.every((p) => typeof p === "object")
     ? (document.projects as Project[])
     : []; // only show projects if we've loaded them
 
-  $: hasPublicNotes = document.notes?.some((note) => note.access === "public");
-  $: hasOrgNotes = document.notes?.some(
-    (note) => note.access === "organization",
-  );
-  $: hasPrivateNotes = document.notes?.some(
-    (note) => note.access === "private",
-  );
   $: level = getLevel(document.access);
 
-  $: tabs = [
-    hasPublicNotes && ("public" as Access),
-    hasOrgNotes && ("organization" as Access),
-    hasPrivateNotes && ("private" as Access),
-  ].filter(Boolean);
-
   function clean(html: string) {
     return DOMPurify.sanitize(html, { ALLOWED_TAGS: [] });
   }
 
-  function onError() {
-    document.status = "error";
-  }
-
   let width: number;
 </script>
 
@@ -79,32 +43,9 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   target={embed ? "_blank" : undefined}
   bind:clientWidth={width}
 >
-  <div class="thumbnail">
-    {#if document.status === "success" || document.status === "readable"}
-      <img
-        src={pageImageUrl(document, 1, "thumbnail").href}
-        alt="Page 1, {document.title}"
-        width="{thumbnailWidth}px"
-        height="{height}px"
-        loading="lazy"
-        on:error={onError}
-      />
-    {:else}
-      <div class="fallback {document.status}">
-        <svelte:component this={statusIcons[document.status]} />
-      </div>
-    {/if}
-
-    {#if tabs.length > 0}
-      <div class="tabs">
-        {#each tabs as access}
-          {#if access}
-            <NoteTab {access} size="small" />
-          {/if}
-        {/each}
-      </div>
-    {/if}
-  </div>
+  {#if width >= 400}
+    <Thumbnail {document} />
+  {/if}
 
   <div class="documentInfo">
     <div class="head">
@@ -182,38 +123,6 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     border-color: var(--blue-2);
   }
 
-  .small .thumbnail {
-    display: none;
-  }
-
-  .thumbnail {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-  }
-
-  .thumbnail img,
-  .thumbnail .fallback {
-    border-radius: 0.125rem;
-    border: 1px solid var(--gray-2, #cbcbcb);
-    background: var(--white, #fff);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
-    /* Constrain tall documents */
-    max-height: 4.875rem;
-    object-fit: cover;
-    object-fit: top center;
-  }
-
-  .thumbnail .tabs {
-    position: absolute;
-    left: -0.5rem;
-    top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-  }
-
   .documentInfo {
     display: flex;
     flex-direction: column;
@@ -268,22 +177,6 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     flex: 0 1 auto;
   }
 
-  .fallback {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    background-color: var(--white);
-    fill: var(--gray-3);
-    /* US letter size, thumbnail width */
-    height: calc(60px * 11 / 8.5);
-    width: 60px;
-  }
-
-  .fallback.error {
-    fill: var(--red-3, #f00);
-  }
-
   .data {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/lib/components/documents/Thumbnail.svelte b/src/lib/components/documents/Thumbnail.svelte
new file mode 100644
index 000000000..6b49f575c
--- /dev/null
+++ b/src/lib/components/documents/Thumbnail.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { Alert24, Hourglass24, File24 } from "svelte-octicons";
+
+  import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
+
+  import type { Access, Document } from "$lib/api/types";
+  import { canonicalUrl, pageImageUrl } from "$lib/api/documents";
+  import NoteTab from "$lib/components/viewer/NoteTab.svelte";
+  import { pageSizesFromSpec } from "$lib/utils/pageSize";
+
+  export let document: Document;
+
+  const thumbnailWidth = IMAGE_WIDTHS_MAP.get("thumbnail") ?? 60;
+  // this can be updated later if we want different icons
+  const statusIcons = {
+    error: Alert24,
+    nofile: File24,
+    pending: Hourglass24,
+  };
+
+  function onError() {
+    document.status = "error";
+  }
+
+  $: sizes = document.page_spec ? pageSizesFromSpec(document.page_spec) : null;
+  $: aspect = sizes?.[0] ?? 11 / 8.5; // fallback to US letter for now
+  $: height = thumbnailWidth * aspect;
+  $: hasPublicNotes = document.notes?.some((note) => note.access === "public");
+  $: hasOrgNotes = document.notes?.some(
+    (note) => note.access === "organization",
+  );
+  $: hasPrivateNotes = document.notes?.some(
+    (note) => note.access === "private",
+  );
+  $: tabs = [
+    hasPublicNotes && ("public" as Access),
+    hasOrgNotes && ("organization" as Access),
+    hasPrivateNotes && ("private" as Access),
+  ].filter(Boolean);
+</script>
+
+<div class="thumbnail">
+  {#if document.status === "success" || document.status === "readable"}
+    <img
+      src={pageImageUrl(document, 1, "thumbnail").href}
+      alt="Page 1, {document.title}"
+      width="{thumbnailWidth}px"
+      height="{height}px"
+      loading="lazy"
+      on:error={onError}
+    />
+  {:else}
+    <div class="fallback {document.status}">
+      <svelte:component this={statusIcons[document.status]} />
+    </div>
+  {/if}
+
+  {#if tabs.length > 0}
+    <div class="tabs">
+      {#each tabs as access}
+        {#if access}
+          <NoteTab {access} size="small" />
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .thumbnail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+  }
+
+  .thumbnail img,
+  .thumbnail .fallback {
+    border-radius: 0.125rem;
+    border: 1px solid var(--gray-2, #cbcbcb);
+    background: var(--white, #fff);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+    /* Constrain tall documents */
+    max-height: 4.875rem;
+    object-fit: cover;
+    object-fit: top center;
+  }
+
+  .thumbnail .tabs {
+    position: absolute;
+    left: -0.5rem;
+    top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--white);
+    fill: var(--gray-3);
+    /* US letter size, thumbnail width */
+    height: calc(60px * 11 / 8.5);
+    width: 60px;
+  }
+
+  .fallback.error {
+    fill: var(--red-3, #f00);
+  }
+</style>
diff --git a/src/lib/components/documents/stories/Thumbnail.stories.svelte b/src/lib/components/documents/stories/Thumbnail.stories.svelte
new file mode 100644
index 000000000..ed5624fc4
--- /dev/null
+++ b/src/lib/components/documents/stories/Thumbnail.stories.svelte
@@ -0,0 +1,31 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import ThumbnailComponent from "../Thumbnail.svelte";
+  import type { Document } from "@/lib/api/types";
+
+  import doc from "@/test/fixtures/documents/document-expanded.json";
+  import santaanas from "@/test/fixtures/documents/examples/the-santa-anas.json";
+  const document = doc as Document;
+
+  export const meta = {
+    title: "Components / Documents / Thumbnail",
+    component: ThumbnailComponent,
+    parameters: {
+      layout: "centered",
+    },
+  };
+</script>
+
+<Template let:args>
+  <ThumbnailComponent {...args} />
+</Template>
+
+<Story name="Basic" args={{ document }} />
+
+<Story name="With Notes" args={{ document: santaanas }} />
+
+<Story name="Pending" args={{ document: { ...document, status: "pending" } }} />
+
+<Story name="Error" args={{ document: { ...document, status: "error" } }} />
+
+<Story name="No File" args={{ document: { ...document, status: "nofile" } }} />
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index b99bbaaac..145f0745d 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,37 +3,24 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <a
-    class="document-list-item svelte-1ravpmh"
+    class="document-list-item svelte-1y641k7"
     href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
   >
-    <div
-      class="thumbnail svelte-1ravpmh"
-    >
-      <img
-        alt="Page 1, Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018"
-        class="svelte-1ravpmh"
-        height="77.64705882352942px"
-        loading="lazy"
-        src="https://s3.documentcloud.org/documents/24002098/pages/quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018-p1-thumbnail.gif"
-        width="60px"
-      />
-       
-    </div>
      
     <div
-      class="documentInfo svelte-1ravpmh"
+      class="documentInfo svelte-1y641k7"
     >
       <div
-        class="head svelte-1ravpmh"
+        class="head svelte-1y641k7"
       >
         <h3
-          class="title svelte-1ravpmh"
+          class="title svelte-1y641k7"
         >
           Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
         </h3>
          
         <div
-          class="access svelte-1ravpmh"
+          class="access svelte-1y641k7"
         >
           <div
             class="access public svelte-o63adk"
@@ -57,7 +44,7 @@ exports[`DocumentListItem > renders 1`] = `
       </div>
        
       <p
-        class="meta svelte-1ravpmh"
+        class="meta svelte-1y641k7"
       >
         20 pages
          -
@@ -70,7 +57,7 @@ exports[`DocumentListItem > renders 1`] = `
       </p>
        
       <div
-        class="data svelte-1ravpmh"
+        class="data svelte-1y641k7"
       />
     </div>
   </a>

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 02/19] 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,

From a81480d683b56ea1826945d89b5de60b58c28e60 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 15:03:51 -0500
Subject: [PATCH 03/19] Update snapshots

---
 .../DocumentListItem.test.ts.snap             | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 145f0745d..265af59db 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -2,25 +2,29 @@
 
 exports[`DocumentListItem > renders 1`] = `
 <div>
-  <a
-    class="document-list-item svelte-1y641k7"
-    href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
+  <div
+    class="document-list-item svelte-1m3ox9s"
   >
      
     <div
-      class="documentInfo svelte-1y641k7"
+      class="document-info svelte-1m3ox9s"
     >
       <div
-        class="head svelte-1y641k7"
+        class="head svelte-1m3ox9s"
       >
         <h3
-          class="title svelte-1y641k7"
+          class="title svelte-1m3ox9s"
         >
-          Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
+          <a
+            class="document-link title-link svelte-1m3ox9s"
+            href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
+          >
+            Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
+          </a>
         </h3>
          
         <div
-          class="access svelte-1y641k7"
+          class="access svelte-1m3ox9s"
         >
           <div
             class="access public svelte-o63adk"
@@ -44,11 +48,17 @@ exports[`DocumentListItem > renders 1`] = `
       </div>
        
       <p
-        class="meta svelte-1y641k7"
+        class="meta svelte-1m3ox9s"
       >
-        20 pages
-         -
-      
+        <a
+          class="document-link svelte-1m3ox9s"
+          href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/?mode=grid"
+        >
+          20 pages
+        </a>
+        
+        -
+        
          
         Mitchell Kotler (MuckRock)
          -
@@ -56,10 +66,14 @@ exports[`DocumentListItem > renders 1`] = `
         Mon Oct 02 2023
       </p>
        
+       
       <div
-        class="data svelte-1y641k7"
-      />
+        class="data svelte-1m3ox9s"
+      >
+        
+         
+      </div>
     </div>
-  </a>
+  </div>
 </div>
 `;

From 6af786a46dfd8340ab394de3fc7ca8cf3671275b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 15:03:56 -0500
Subject: [PATCH 04/19] Reorder options

---
 src/lib/components/documents/DocumentListItem.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 385f1e381..345acae4d 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -10,8 +10,8 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     fullTitle: boolean;
     meta: boolean;
     thumbnail: boolean;
-    description: boolean;
     projects: boolean;
+    description: boolean;
     data: boolean;
   }
 
@@ -19,8 +19,8 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     fullTitle: true,
     meta: true,
     thumbnail: true,
-    description: false,
     projects: true,
+    description: false,
     data: false,
   };
 </script>

From a0622073418502c77b341f05a9aeeb4a018e4fe3 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 17:34:50 -0500
Subject: [PATCH 05/19] Adds menu with customization options

---
 src/langs/json/en.json                        |  3 +-
 .../components/documents/ResultsList.svelte   | 22 +++++-
 .../components/layouts/DocumentBrowser.svelte | 28 +------
 .../layouts/DocumentListToolbar.svelte        | 77 +++++++++++++++++++
 .../stories/DocumentBrowser.stories.svelte    |  2 +-
 5 files changed, 104 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/layouts/DocumentListToolbar.svelte

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 0157af71c..94b046bcf 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -8,7 +8,8 @@
     "edit": "Edit",
     "search": "Search",
     "feedback": "Feedback",
-    "title": "Title"
+    "title": "Title",
+    "customize": "Customize"
   },
   "search": {
     "loading": "Searching…",
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 6ea8779a1..c27f47669 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -18,6 +18,17 @@
   );
 
   export let total: Writable<number> = writable(0);
+
+  // Allow users to customize the visible fields in document list items
+  const storage = new StorageManager("document-browser");
+  const userDefaultVisible = storage.get<VisibleFields, VisibleFields>(
+    "visibleFields",
+    defaultVisibleFields,
+  );
+  export const visibleFields: Writable<VisibleFields> = writable(
+    Object.assign({}, defaultVisibleFields, userDefaultVisible),
+  );
+  visibleFields.subscribe((val) => storage.set("visibleFields", val));
 </script>
 
 <script lang="ts">
@@ -26,13 +37,17 @@
   import { Search24 } from "svelte-octicons";
 
   import Button from "../common/Button.svelte";
-  import DocumentListItem from "./DocumentListItem.svelte";
+  import DocumentListItem, {
+    defaultVisibleFields,
+    type VisibleFields,
+  } from "./DocumentListItem.svelte";
   import Empty from "../common/Empty.svelte";
   import Flex from "../common/Flex.svelte";
   import NoteHighlights from "./NoteHighlights.svelte";
   import PageHighlights from "./PageHighlights.svelte";
 
   import { getApiResponse } from "$lib/utils/api";
+  import { StorageManager } from "@/lib/utils/storage";
 
   export let results: Document[] = [];
   export let count: Maybe<number> = undefined;
@@ -46,6 +61,9 @@
   let error: string = "";
 
   const embed: boolean = getContext("embed");
+  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+
+  $: console.log($visibleFields);
 
   // track what's visible so we can compare to $selected
   $: $visible = new Map(results.map((d) => [String(d.id), d]));
@@ -120,7 +138,7 @@
             />
           </label>
         {/if}
-        <DocumentListItem {document} />
+        <DocumentListItem {document} visibleFields={$visibleFields} />
       </Flex>
 
       {#if document.highlights}
diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
index eb43fc887..91ff1f2a2 100644
--- a/src/lib/components/layouts/DocumentBrowser.svelte
+++ b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -32,6 +32,7 @@
     selectedIds,
     total,
     visible,
+    visibleFields,
   } from "$lib/components/documents/ResultsList.svelte";
 
   // Form components
@@ -55,8 +56,10 @@
   import { isSupported } from "$lib/utils/files";
   import { canUploadFiles, getCurrentUser } from "$lib/utils/permissions";
   import { remToPx } from "$lib/utils/layout";
+  import DocumentListToolbar from "./DocumentListToolbar.svelte";
 
   setContext("selected", selected);
+  setContext("visibleFields", visibleFields);
 
   const embed: boolean = getContext("embed");
   const me = getCurrentUser();
@@ -78,7 +81,6 @@
     search: "common.search",
   };
 
-  let headerToolbarWidth: number;
   let footerToolbarWidth: number;
 
   $: BREAKPOINTS = {
@@ -152,19 +154,7 @@
                 </Button>
               </div>
             {/if}
-            <PageToolbar bind:width={headerToolbarWidth}>
-              <Flex slot="right">
-                <div style:flex="1 1 auto">
-                  <Search name="q" {query} placeholder={$_(uiText.search)} />
-                  <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
-                    {@html $_("search.help")}
-                    <a target="_blank" href="/help/search/">
-                      {$_("search.more")}
-                    </a>
-                  </p>
-                </div>
-              </Flex>
-            </PageToolbar>
+            <DocumentListToolbar {query} />
             {#if $sidebars["action"] === false}
               <div class="toolbar w-auto">
                 <Button
@@ -309,14 +299,4 @@
     min-width: 7rem;
     margin: 0.25rem 0;
   }
-  .help {
-    flex: 1 1 100%;
-    font-size: var(--font-xs);
-    margin: 0.25rem;
-    color: var(--gray-4);
-    text-align: left;
-  }
-  .hide {
-    display: none;
-  }
 </style>
diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
new file mode 100644
index 000000000..aa6b9c108
--- /dev/null
+++ b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import Flex from "../common/Flex.svelte";
+  import PageToolbar from "../common/PageToolbar.svelte";
+  import Search from "../forms/Search.svelte";
+  import { remToPx } from "$lib/utils/layout";
+  import Dropdown from "../common/Dropdown.svelte";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import { ChevronDown12, Paintbrush16 } from "svelte-octicons";
+  import Menu from "../common/Menu.svelte";
+  import { type Writable } from "svelte/store";
+  import { getContext } from "svelte";
+  import { type VisibleFields } from "../documents/DocumentListItem.svelte";
+  import FieldLabel from "../common/FieldLabel.svelte";
+
+  export let query: string = "";
+
+  let headerToolbarWidth: number;
+
+  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+  $: console.log($visibleFields);
+</script>
+
+<PageToolbar bind:width={headerToolbarWidth}>
+  <Flex slot="left">
+    <Dropdown>
+      <SidebarItem slot="anchor">
+        <Paintbrush16 slot="start" />
+        {$_("common.customize")}
+        <ChevronDown12 slot="end" />
+      </SidebarItem>
+      <Menu>
+        <form>
+          {#each Object.entries($visibleFields) as [key, value], index}
+            <label class="visibleField">
+              <input
+                type="checkbox"
+                name={key}
+                bind:checked={$visibleFields[key]}
+              />
+              <FieldLabel>{key}</FieldLabel>
+            </label>
+          {/each}
+        </form>
+      </Menu>
+    </Dropdown>
+  </Flex>
+  <Flex slot="right">
+    <div style:flex="1 1 auto">
+      <Search name="q" {query} placeholder={$_("common.search")} />
+      <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
+        {@html $_("search.help")}
+        <a target="_blank" href="/help/search/">
+          {$_("search.more")}
+        </a>
+      </p>
+    </div>
+  </Flex>
+</PageToolbar>
+
+<style>
+  .visibleField {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .help {
+    flex: 1 1 100%;
+    font-size: var(--font-xs);
+    margin: 0.25rem;
+    color: var(--gray-4);
+    text-align: left;
+  }
+  .hide {
+    display: none;
+  }
+</style>
diff --git a/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte b/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte
index e8cb99807..f9c01fc7a 100644
--- a/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte
+++ b/src/lib/components/layouts/stories/DocumentBrowser.stories.svelte
@@ -15,7 +15,7 @@
   };
 
   const args = {
-    documents: Promise.resolve(documentsList),
+    documents: Promise.resolve({ data: documentsList }),
   };
 </script>
 

From 108c381976d980f602e3801faf10bf3ce05b448f Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 5 Dec 2024 23:33:42 -0500
Subject: [PATCH 06/19] Adds VisibleFields menu

---
 .../components/documents/VisibleFields.svelte | 58 +++++++++++++++++++
 .../stories/VisibleFields.stories.svelte      | 30 ++++++++++
 .../layouts/DocumentListToolbar.svelte        | 26 +--------
 3 files changed, 90 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/components/documents/VisibleFields.svelte
 create mode 100644 src/lib/components/documents/stories/VisibleFields.stories.svelte

diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
new file mode 100644
index 000000000..c576bbfaf
--- /dev/null
+++ b/src/lib/components/documents/VisibleFields.svelte
@@ -0,0 +1,58 @@
+<script lang="ts" context="module">
+  export interface VisibleFields {
+    fullTitle: boolean;
+    meta: boolean;
+    thumbnail: boolean;
+    projects: boolean;
+    description: boolean;
+    data: boolean;
+  }
+
+  export const defaultVisibleFields: VisibleFields = {
+    fullTitle: true,
+    meta: true,
+    thumbnail: true,
+    projects: true,
+    description: false,
+    data: false,
+  };
+</script>
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import FieldLabel from "../common/FieldLabel.svelte";
+
+  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+
+  const labels: Record<keyof VisibleFields, string> = {
+    fullTitle: "Full Title",
+    meta: "Metadata",
+    thumbnail: "Thumbnail",
+    description: "Description",
+    projects: "Projects",
+    data: "Data",
+  };
+</script>
+
+<form>
+  {#each Object.entries($visibleFields) as [key, value], index}
+    <label class="visibleField">
+      <input type="checkbox" name={key} bind:checked={$visibleFields[key]} />
+      <FieldLabel>{labels[key]}</FieldLabel>
+    </label>
+  {/each}
+</form>
+
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .visibleField {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+</style>
diff --git a/src/lib/components/documents/stories/VisibleFields.stories.svelte b/src/lib/components/documents/stories/VisibleFields.stories.svelte
new file mode 100644
index 000000000..0c14c25fd
--- /dev/null
+++ b/src/lib/components/documents/stories/VisibleFields.stories.svelte
@@ -0,0 +1,30 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import VisibleFieldsComponent from "../VisibleFields.svelte";
+  import type { Document } from "@/lib/api/types";
+
+  import doc from "@/test/fixtures/documents/document-expanded.json";
+  import santaanas from "@/test/fixtures/documents/examples/the-santa-anas.json";
+  import { setContext } from "svelte";
+  import { defaultVisibleFields } from "../VisibleFields.svelte";
+  import { writable } from "svelte/store";
+  const document = doc as Document;
+
+  export const meta = {
+    title: "Components / Documents / Visible Fields",
+    component: VisibleFieldsComponent,
+    parameters: {
+      layout: "centered",
+    },
+  };
+</script>
+
+<script lang="ts">
+  setContext("visibleFields", writable(defaultVisibleFields));
+</script>
+
+<Template let:args>
+  <VisibleFieldsComponent {...args} />
+</Template>
+
+<Story name="Basic" args={{ document }} />
diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
index aa6b9c108..3be313cff 100644
--- a/src/lib/components/layouts/DocumentListToolbar.svelte
+++ b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -8,17 +8,11 @@
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import { ChevronDown12, Paintbrush16 } from "svelte-octicons";
   import Menu from "../common/Menu.svelte";
-  import { type Writable } from "svelte/store";
-  import { getContext } from "svelte";
-  import { type VisibleFields } from "../documents/DocumentListItem.svelte";
-  import FieldLabel from "../common/FieldLabel.svelte";
+  import VisibleFields from "../documents/VisibleFields.svelte";
 
   export let query: string = "";
 
   let headerToolbarWidth: number;
-
-  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
-  $: console.log($visibleFields);
 </script>
 
 <PageToolbar bind:width={headerToolbarWidth}>
@@ -30,18 +24,7 @@
         <ChevronDown12 slot="end" />
       </SidebarItem>
       <Menu>
-        <form>
-          {#each Object.entries($visibleFields) as [key, value], index}
-            <label class="visibleField">
-              <input
-                type="checkbox"
-                name={key}
-                bind:checked={$visibleFields[key]}
-              />
-              <FieldLabel>{key}</FieldLabel>
-            </label>
-          {/each}
-        </form>
+        <VisibleFields />
       </Menu>
     </Dropdown>
   </Flex>
@@ -59,11 +42,6 @@
 </PageToolbar>
 
 <style>
-  .visibleField {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
   .help {
     flex: 1 1 100%;
     font-size: var(--font-xs);

From 0f0ab31f5c408cd250bf61c12a573d5e32cc07a7 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 6 Dec 2024 17:53:25 -0500
Subject: [PATCH 07/19] Completes the menu

---
 src/langs/json/en.json                        |  17 ++
 .../documents/DocumentListItem.svelte         |  31 ++--
 .../components/documents/VisibleFields.svelte | 163 +++++++++++++++---
 .../stories/VisibleFields.stories.svelte      |  34 +++-
 .../layouts/DocumentListToolbar.svelte        |  38 ++--
 src/lib/components/sidebar/SidebarItem.svelte |  22 ++-
 6 files changed, 241 insertions(+), 64 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 94b046bcf..16e869f54 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -234,6 +234,23 @@
     "processing": "Processing last upload",
     "processingDocuments": "{n, plural, one {# document} other {# documents}} remaining"
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Fields",
+    "fields": {
+      "concise": "Concise",
+      "balanced": "Balanced",
+      "detailed": "Detailed",
+      "customize": "Customize",
+      "access": "Access",
+      "meta": "Metadata",
+      "thumbnail": "Thumbnail",
+      "description": "Description",
+      "projects": "Projects",
+      "data": "Data",
+      "fullTitle": "Full Title",
+      "fullDescription": "Full Description"
+    }
+  },
   "projects": {
     "header": "Projects",
     "private": "Private Project",
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 345acae4d..1c9ff3f52 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -7,21 +7,25 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
 -->
 <script lang="ts" context="module">
   export interface VisibleFields {
-    fullTitle: boolean;
-    meta: boolean;
+    access: boolean;
     thumbnail: boolean;
-    projects: boolean;
+    meta: boolean;
     description: boolean;
+    projects: boolean;
     data: boolean;
+    fullTitle: boolean;
+    fullDescription: boolean;
   }
 
   export const defaultVisibleFields: VisibleFields = {
-    fullTitle: true,
-    meta: true,
+    access: true,
     thumbnail: true,
-    projects: true,
+    meta: true,
     description: false,
+    projects: true,
     data: false,
+    fullTitle: true,
+    fullDescription: false,
   };
 </script>
 
@@ -64,7 +68,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   class:small={width < 400}
   bind:clientWidth={width}
 >
-  {#if width >= 400 && visible.thumbnail}
+  {#if visible.thumbnail}
     <a
       href={canonicalUrl(document).href}
       class="document-link thumbnail-link"
@@ -83,7 +87,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
           target={embed ? "_blank" : undefined}>{document.title}</a
         >
       </h3>
-      {#if !embed && level}
+      {#if !embed && level && visible.access}
         <div class="access">
           <DocAccess {level} />
         </div>
@@ -115,11 +119,11 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
       </p>
     {/if}
     {#if document.description && visible.description}
-      <p class="description">
+      <p class="description" class:fullDescription={visible.fullDescription}>
         {clean(document.description)}
       </p>
     {/if}
-    <div class="data" class:hide={width < 400}>
+    <div class="data">
       {#if visible.projects}
         {#each projects as project}
           <KV
@@ -216,7 +220,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   }
 
   h3 {
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     color: var(--gray-5, #233944);
     font-size: var(--font-md, 1rem);
     font-style: normal;
@@ -258,6 +262,11 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     width: 100%;
   }
 
+  .fullDescription {
+    line-clamp: unset;
+    -webkit-line-clamp: unset;
+  }
+
   .access {
     flex: 0 0 8rem;
     font-size: var(--font-sm);
diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
index c576bbfaf..a2dc7d2ef 100644
--- a/src/lib/components/documents/VisibleFields.svelte
+++ b/src/lib/components/documents/VisibleFields.svelte
@@ -1,58 +1,177 @@
 <script lang="ts" context="module">
   export interface VisibleFields {
-    fullTitle: boolean;
-    meta: boolean;
+    access: boolean;
     thumbnail: boolean;
-    projects: boolean;
+    meta: boolean;
     description: boolean;
+    projects: boolean;
     data: boolean;
+    fullTitle: boolean;
+    fullDescription: boolean;
   }
 
   export const defaultVisibleFields: VisibleFields = {
-    fullTitle: true,
-    meta: true,
+    access: true,
     thumbnail: true,
-    projects: true,
+    meta: true,
     description: false,
+    projects: true,
     data: false,
+    fullTitle: true,
+    fullDescription: false,
   };
+
+  export const defaultViews: Array<{
+    label: string;
+    icon: typeof SvgComponent;
+    fields: VisibleFields;
+  }> = [
+    {
+      label: "documentBrowser.fields.concise",
+      icon: ListUnordered24,
+      fields: {
+        access: true,
+        thumbnail: false,
+        meta: false,
+        description: false,
+        projects: false,
+        data: false,
+        fullTitle: true,
+        fullDescription: false,
+      },
+    },
+    {
+      label: "documentBrowser.fields.balanced",
+      icon: Rows24,
+      fields: {
+        access: true,
+        thumbnail: true,
+        meta: true,
+        description: false,
+        projects: true,
+        data: false,
+        fullTitle: true,
+        fullDescription: false,
+      },
+    },
+    {
+      label: "documentBrowser.fields.detailed",
+      icon: Note24,
+      fields: {
+        access: true,
+        thumbnail: true,
+        meta: true,
+        description: true,
+        projects: true,
+        data: true,
+        fullTitle: true,
+        fullDescription: false,
+      },
+    },
+  ];
 </script>
 
 <script lang="ts">
+  import { _ } from "svelte-i18n";
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
+  import deepEqual from "fast-deep-equal";
   import FieldLabel from "../common/FieldLabel.svelte";
+  import {
+    ListUnordered24,
+    Note24,
+    Paintbrush16,
+    Rows24,
+    type SvgComponent,
+  } from "svelte-octicons";
+  import SidebarItem from "../sidebar/SidebarItem.svelte";
+  import { remToPx } from "@/lib/utils/layout";
 
   const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
 
   const labels: Record<keyof VisibleFields, string> = {
-    fullTitle: "Full Title",
-    meta: "Metadata",
-    thumbnail: "Thumbnail",
-    description: "Description",
-    projects: "Projects",
-    data: "Data",
+    access: "documentBrowser.fields.access",
+    fullTitle: "documentBrowser.fields.fullTitle",
+    meta: "documentBrowser.fields.meta",
+    thumbnail: "documentBrowser.fields.thumbnail",
+    description: "documentBrowser.fields.description",
+    projects: "documentBrowser.fields.projects",
+    data: "documentBrowser.fields.data",
+    fullDescription: "documentBrowser.fields.fullDescription",
   };
+
+  let width: number;
 </script>
 
-<form>
-  {#each Object.entries($visibleFields) as [key, value], index}
-    <label class="visibleField">
-      <input type="checkbox" name={key} bind:checked={$visibleFields[key]} />
-      <FieldLabel>{labels[key]}</FieldLabel>
-    </label>
-  {/each}
-</form>
+<div
+  class="container"
+  class:small={width < remToPx(24)}
+  bind:clientWidth={width}
+>
+  <div class="views">
+    {#each defaultViews as view}
+      <div class="view">
+        <SidebarItem
+          active={deepEqual(view.fields, $visibleFields)}
+          hover
+          on:click={() => visibleFields.set(view.fields)}
+        >
+          <svelte:component this={view.icon} slot="start" />
+          {$_(view.label)}
+        </SidebarItem>
+      </div>
+    {/each}
+  </div>
+  <fieldset class="fields">
+    <legend>
+      <SidebarItem small>
+        <Paintbrush16 slot="start" height={14} width={14} />
+        {$_("documentBrowser.fields.customize")}
+      </SidebarItem>
+    </legend>
+    {#each Object.keys($visibleFields) as key}
+      <label class="field">
+        <input type="checkbox" name={key} bind:checked={$visibleFields[key]} />
+        <FieldLabel>{$_(labels[key])}</FieldLabel>
+      </label>
+    {/each}
+  </fieldset>
+</div>
 
 <style>
-  form {
+  .container {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    text-align: left;
+  }
+
+  .views {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .view {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+
+  .fields {
+    columns: 2;
+    border: 1px solid var(--gray-2);
+    border-radius: 0.25rem;
+    padding: 0.5rem;
   }
-  .visibleField {
+  .field {
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    font-size: var(--font-sm);
+  }
+  .small .views {
+    flex-direction: column;
+  }
+  .small .fields {
+    columns: 1;
   }
 </style>
diff --git a/src/lib/components/documents/stories/VisibleFields.stories.svelte b/src/lib/components/documents/stories/VisibleFields.stories.svelte
index 0c14c25fd..a452dbb6c 100644
--- a/src/lib/components/documents/stories/VisibleFields.stories.svelte
+++ b/src/lib/components/documents/stories/VisibleFields.stories.svelte
@@ -1,14 +1,12 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import VisibleFieldsComponent from "../VisibleFields.svelte";
-  import type { Document } from "@/lib/api/types";
+  import VisibleFieldsComponent, {
+    defaultVisibleFields,
+  } from "../VisibleFields.svelte";
 
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-  import santaanas from "@/test/fixtures/documents/examples/the-santa-anas.json";
+  import { documentExpanded, data } from "@/test/fixtures/documents";
   import { setContext } from "svelte";
-  import { defaultVisibleFields } from "../VisibleFields.svelte";
   import { writable } from "svelte/store";
-  const document = doc as Document;
 
   export const meta = {
     title: "Components / Documents / Visible Fields",
@@ -20,11 +18,29 @@
 </script>
 
 <script lang="ts">
-  setContext("visibleFields", writable(defaultVisibleFields));
+  import DocumentListItem from "../DocumentListItem.svelte";
+
+  const visibleFields = writable(defaultVisibleFields);
+  setContext("visibleFields", visibleFields);
 </script>
 
 <Template let:args>
-  <VisibleFieldsComponent {...args} />
+  <div class="wrapper">
+    <VisibleFieldsComponent {...args} />
+    <DocumentListItem
+      document={{ ...documentExpanded, data }}
+      visibleFields={$visibleFields}
+    />
+  </div>
 </Template>
 
-<Story name="Basic" args={{ document }} />
+<Story name="Balanced" />
+
+<style>
+  .wrapper {
+    max-width: 24rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+</style>
diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
index 3be313cff..1fe7293e4 100644
--- a/src/lib/components/layouts/DocumentListToolbar.svelte
+++ b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -6,7 +6,7 @@
   import { remToPx } from "$lib/utils/layout";
   import Dropdown from "../common/Dropdown.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
-  import { ChevronDown12, Paintbrush16 } from "svelte-octicons";
+  import { ChevronDown12, Eye16, Paintbrush16 } from "svelte-octicons";
   import Menu from "../common/Menu.svelte";
   import VisibleFields from "../documents/VisibleFields.svelte";
 
@@ -16,19 +16,19 @@
 </script>
 
 <PageToolbar bind:width={headerToolbarWidth}>
-  <Flex slot="left">
-    <Dropdown>
-      <SidebarItem slot="anchor">
-        <Paintbrush16 slot="start" />
-        {$_("common.customize")}
-        <ChevronDown12 slot="end" />
-      </SidebarItem>
-      <Menu>
-        <VisibleFields />
-      </Menu>
-    </Dropdown>
-  </Flex>
-  <Flex slot="right">
+  <div class="items" slot="center">
+    <div class="margin-xs">
+      <Dropdown>
+        <SidebarItem slot="anchor">
+          <Eye16 slot="start" />
+          {$_("documentBrowser.fieldsAnchor")}
+          <ChevronDown12 slot="end" />
+        </SidebarItem>
+        <Menu>
+          <VisibleFields />
+        </Menu>
+      </Dropdown>
+    </div>
     <div style:flex="1 1 auto">
       <Search name="q" {query} placeholder={$_("common.search")} />
       <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
@@ -38,10 +38,18 @@
         </a>
       </p>
     </div>
-  </Flex>
+  </div>
 </PageToolbar>
 
 <style>
+  .items {
+    display: flex;
+    gap: 0.25rem;
+    align-items: start;
+  }
+  .margin-xs {
+    margin: 0.25rem;
+  }
   .help {
     flex: 1 1 100%;
     font-size: var(--font-xs);
diff --git a/src/lib/components/sidebar/SidebarItem.svelte b/src/lib/components/sidebar/SidebarItem.svelte
index 79b6e20b6..efbe864af 100644
--- a/src/lib/components/sidebar/SidebarItem.svelte
+++ b/src/lib/components/sidebar/SidebarItem.svelte
@@ -91,13 +91,7 @@
     color: var(--hover-color, var(--color, inherit));
     fill: var(--hover-fill, var(--fill, inherit));
   }
-  @media (hover: none) {
-    a.container:hover,
-    .container.hover:hover {
-      cursor: default;
-      background: transparent;
-    }
-  }
+
   a.container.disabled:hover,
   a.container.disabled:focus,
   .container.disabled.hover:hover,
@@ -114,6 +108,20 @@
     fill: var(--active-fill, var(--blue-4, inherit));
   }
 
+  @media (hover: none) {
+    a.container:hover,
+    .container.hover:hover {
+      cursor: inherit;
+      background: transparent;
+    }
+    a.container.active:hover,
+    .container.active:hover {
+      background: var(--active-background, var(--blue-1, #b5ceed));
+      color: var(--active-color, var(--blue-5, inherit));
+      fill: var(--active-fill, var(--blue-4, inherit));
+    }
+  }
+
   /* Small */
   .container.small {
     font-size: var(--font-sm, 0.875rem);

From 685eca5e9c73e1e69e4ddf0d5775832feaa3ae24 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 6 Dec 2024 17:56:59 -0500
Subject: [PATCH 08/19] Update snapshots

---
 .../tests/__snapshots__/UserMenu.test.ts.snap | 16 +++----
 .../AddOnsNavigation.test.ts.snap             | 48 +++++++++----------
 .../DocumentListItem.test.ts.snap             | 36 ++++++++++----
 3 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
index db9a07916..aa64cf207 100644
--- a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
@@ -9,7 +9,7 @@ exports[`UserMenu 1`] = `
     tabindex="0"
   >
     <span
-      class="sidebarItem container svelte-8l7as"
+      class="sidebarItem container svelte-1epk331"
       role="button"
       tabindex="0"
       title="Open Menu"
@@ -26,7 +26,7 @@ exports[`UserMenu 1`] = `
       </div>
        
       <span
-        class="label svelte-8l7as"
+        class="label svelte-1epk331"
       >
         <span
           class="name"
@@ -65,7 +65,7 @@ exports[`UserMenu 1`] = `
       role="menu"
     >
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="https://dev.squarelet.com"
         target="_blank"
         title=""
@@ -84,7 +84,7 @@ exports[`UserMenu 1`] = `
         </svg>
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Account settings
         </span>
@@ -93,7 +93,7 @@ exports[`UserMenu 1`] = `
       
        
       <span
-        class="sidebarItem container svelte-8l7as hover"
+        class="sidebarItem container svelte-1epk331 hover"
         role="button"
         tabindex="0"
         title=""
@@ -112,7 +112,7 @@ exports[`UserMenu 1`] = `
         </svg>
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Upload via email
         </span>
@@ -121,7 +121,7 @@ exports[`UserMenu 1`] = `
       
        
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="https://api.dev.documentcloud.org/accounts/logout/"
         title=""
       >
@@ -139,7 +139,7 @@ exports[`UserMenu 1`] = `
         </svg>
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Sign out
         </span>
diff --git a/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap b/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
index e297a7bd7..6576216df 100644
--- a/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
+++ b/src/lib/components/addons/tests/__snapshots__/AddOnsNavigation.test.ts.snap
@@ -24,7 +24,7 @@ exports[`AddOnsNavigation 1`] = `
         style="display: contents; --hover-background: var(--blue-2);"
       >
         <a
-          class="sidebarItem container svelte-8l7as active"
+          class="sidebarItem container svelte-1epk331 active"
           href="/add-ons/"
           title=""
         >
@@ -43,7 +43,7 @@ exports[`AddOnsNavigation 1`] = `
           </svg>
            
           <span
-            class="label svelte-8l7as"
+            class="label svelte-1epk331"
           >
             All
           </span>
@@ -56,7 +56,7 @@ exports[`AddOnsNavigation 1`] = `
         style="display: contents; --hover-background: var(--orange-2);"
       >
         <a
-          class="sidebarItem container svelte-8l7as"
+          class="sidebarItem container svelte-1epk331"
           href="/add-ons/?active=true"
           title=""
         >
@@ -80,7 +80,7 @@ exports[`AddOnsNavigation 1`] = `
           </div>
            
           <span
-            class="label svelte-8l7as"
+            class="label svelte-1epk331"
           >
             Pinned
           </span>
@@ -93,7 +93,7 @@ exports[`AddOnsNavigation 1`] = `
         style="display: contents; --hover-background: var(--yellow-2);"
       >
         <a
-          class="sidebarItem container svelte-8l7as"
+          class="sidebarItem container svelte-1epk331"
           href="/add-ons/?featured=true"
           title=""
         >
@@ -112,7 +112,7 @@ exports[`AddOnsNavigation 1`] = `
           </svg>
            
           <span
-            class="label svelte-8l7as"
+            class="label svelte-1epk331"
           >
             Featured
           </span>
@@ -125,7 +125,7 @@ exports[`AddOnsNavigation 1`] = `
         style="display: contents; --hover-background: var(--green-2);"
       >
         <a
-          class="sidebarItem container svelte-8l7as"
+          class="sidebarItem container svelte-1epk331"
           href="/add-ons/?premium=true"
           title=""
         >
@@ -155,7 +155,7 @@ exports[`AddOnsNavigation 1`] = `
           </div>
            
           <span
-            class="label svelte-8l7as"
+            class="label svelte-1epk331"
           >
             Premium
           </span>
@@ -172,14 +172,14 @@ exports[`AddOnsNavigation 1`] = `
         style="display: contents; --color: var(--gray-4);"
       >
         <span
-          class="sidebarItem container svelte-8l7as small"
+          class="sidebarItem container svelte-1epk331 small"
           role="button"
           tabindex="0"
           title=""
         >
            
           <span
-            class="label svelte-8l7as"
+            class="label svelte-1epk331"
           >
             Collections
           </span>
@@ -189,13 +189,13 @@ exports[`AddOnsNavigation 1`] = `
       </div>
        
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=ai"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           AI
            
@@ -204,13 +204,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=statistical"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Analyze
            
@@ -219,13 +219,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=bulk"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Bulk
            
@@ -234,13 +234,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=export"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Export
            
@@ -249,13 +249,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=extraction"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Extract
            
@@ -264,13 +264,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=file"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           File
            
@@ -279,13 +279,13 @@ exports[`AddOnsNavigation 1`] = `
       </a>
       
       <a
-        class="sidebarItem container svelte-8l7as"
+        class="sidebarItem container svelte-1epk331"
         href="/add-ons/?category=monitor"
         title=""
       >
          
         <span
-          class="label svelte-8l7as"
+          class="label svelte-1epk331"
         >
           Monitor
            
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 265af59db..757f0d5db 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,20 +3,38 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <div
-    class="document-list-item svelte-1m3ox9s"
+    class="document-list-item svelte-13lduwc"
   >
+    <a
+      class="document-link thumbnail-link svelte-13lduwc"
+      href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
+    >
+      <div
+        class="thumbnail svelte-agzzth"
+      >
+        <img
+          alt="Page 1, Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018"
+          class="svelte-agzzth"
+          height="77.64705882352942px"
+          loading="lazy"
+          src="https://s3.documentcloud.org/documents/24002098/pages/quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018-p1-thumbnail.gif"
+          width="60px"
+        />
+         
+      </div>
+    </a>
      
     <div
-      class="document-info svelte-1m3ox9s"
+      class="document-info svelte-13lduwc"
     >
       <div
-        class="head svelte-1m3ox9s"
+        class="head svelte-13lduwc"
       >
         <h3
-          class="title svelte-1m3ox9s"
+          class="title svelte-13lduwc"
         >
           <a
-            class="document-link title-link svelte-1m3ox9s"
+            class="document-link title-link svelte-13lduwc"
             href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
           >
             Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
@@ -24,7 +42,7 @@ exports[`DocumentListItem > renders 1`] = `
         </h3>
          
         <div
-          class="access svelte-1m3ox9s"
+          class="access svelte-13lduwc"
         >
           <div
             class="access public svelte-o63adk"
@@ -48,10 +66,10 @@ exports[`DocumentListItem > renders 1`] = `
       </div>
        
       <p
-        class="meta svelte-1m3ox9s"
+        class="meta svelte-13lduwc"
       >
         <a
-          class="document-link svelte-1m3ox9s"
+          class="document-link svelte-13lduwc"
           href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/?mode=grid"
         >
           20 pages
@@ -68,7 +86,7 @@ exports[`DocumentListItem > renders 1`] = `
        
        
       <div
-        class="data svelte-1m3ox9s"
+        class="data svelte-13lduwc"
       >
         
          

From 72af2c5904f9fec7d81cbd6c3088487fdb231374 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 6 Dec 2024 17:57:25 -0500
Subject: [PATCH 09/19] Pass checks

---
 .../documents/DocumentListItem.svelte         |  4 ----
 .../DocumentListItem.test.ts.snap             | 20 +++++++++----------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 1c9ff3f52..e42a46156 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -285,8 +285,4 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     max-width: 100%;
     overflow-x: auto;
   }
-
-  .hide.data {
-    display: none;
-  }
 </style>
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 757f0d5db..1d689e272 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,10 +3,10 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <div
-    class="document-list-item svelte-13lduwc"
+    class="document-list-item svelte-1wz2dv3"
   >
     <a
-      class="document-link thumbnail-link svelte-13lduwc"
+      class="document-link thumbnail-link svelte-1wz2dv3"
       href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
     >
       <div
@@ -25,16 +25,16 @@ exports[`DocumentListItem > renders 1`] = `
     </a>
      
     <div
-      class="document-info svelte-13lduwc"
+      class="document-info svelte-1wz2dv3"
     >
       <div
-        class="head svelte-13lduwc"
+        class="head svelte-1wz2dv3"
       >
         <h3
-          class="title svelte-13lduwc"
+          class="title svelte-1wz2dv3"
         >
           <a
-            class="document-link title-link svelte-13lduwc"
+            class="document-link title-link svelte-1wz2dv3"
             href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
           >
             Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
@@ -42,7 +42,7 @@ exports[`DocumentListItem > renders 1`] = `
         </h3>
          
         <div
-          class="access svelte-13lduwc"
+          class="access svelte-1wz2dv3"
         >
           <div
             class="access public svelte-o63adk"
@@ -66,10 +66,10 @@ exports[`DocumentListItem > renders 1`] = `
       </div>
        
       <p
-        class="meta svelte-13lduwc"
+        class="meta svelte-1wz2dv3"
       >
         <a
-          class="document-link svelte-13lduwc"
+          class="document-link svelte-1wz2dv3"
           href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/?mode=grid"
         >
           20 pages
@@ -86,7 +86,7 @@ exports[`DocumentListItem > renders 1`] = `
        
        
       <div
-        class="data svelte-13lduwc"
+        class="data svelte-1wz2dv3"
       >
         
          

From 4e1df5b888b6ae81162681ba66580722d56935ec Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 9 Dec 2024 08:27:53 -0500
Subject: [PATCH 10/19] Styling tweaks

---
 .../documents/DocumentListItem.svelte         | 40 ++++++++++---------
 .../components/documents/ResultsList.svelte   |  5 ++-
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index e42a46156..10d79cf17 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -123,26 +123,28 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
         {clean(document.description)}
       </p>
     {/if}
-    <div class="data">
-      {#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 visible.data}
-        {#each Object.entries(document.data) as [key, values]}
-          {#each values as value}
-            <KV {key} {value} />
+    {#if visible.projects || visible.data}
+      <div class="data">
+        {#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}
-        {/each}
-      {/if}
-    </div>
+        {/if}
+        {#if visible.data}
+          {#each Object.entries(document.data) as [key, values]}
+            {#each values as value}
+              <KV {key} {value} />
+            {/each}
+          {/each}
+        {/if}
+      </div>
+    {/if}
   </div>
 </div>
 
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 9bd35c73e..262ca550a 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -140,7 +140,7 @@
 </script>
 
 <div class="container" data-sveltekit-preload-data={preload}>
-  <Flex direction="column" gap={0}>
+  <Flex direction="column" gap={1}>
     <slot name="start" />
     {#each results as document (document.id)}
       <div
@@ -238,9 +238,10 @@
   label {
     display: flex;
     align-items: center;
+    align-self: center;
     gap: 0.5rem;
     padding-left: 0.5rem;
-    margin-top: 1.25rem;
+    margin-top: 0;
   }
 
   input[type="checkbox"] {

From 860c4a81a427e722d7922b9c875c2522e7259dbb Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 9 Dec 2024 18:11:41 -0500
Subject: [PATCH 11/19] Fix link rendering in KV component

---
 src/lib/components/common/KV.svelte           | 10 ++-----
 .../documents/DocumentListItem.svelte         | 28 ++++++++++++-------
 .../components/documents/ResultsList.svelte   |  6 ++--
 src/lib/components/documents/Thumbnail.svelte |  9 +++---
 .../components/documents/VisibleFields.svelte | 11 +++++---
 5 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index 954972d4d..167cd98b5 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -6,15 +6,11 @@
   export let tag: boolean = false;
 
   let el = href ? "a" : "span";
+
+  $: props = { ...$$restProps, href };
 </script>
 
-<svelte:element
-  this={el}
-  class="kv"
-  class:link={href}
-  class:inline
-  {...$$restProps}
->
+<svelte:element this={el} class="kv" class:link={href} class:inline {...props}>
   {#if !tag}
     <span class="key">{key}</span>
   {/if}
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 10d79cf17..5cfe6bcd4 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -38,11 +38,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";
 
+  import { canonicalUrl, userOrgString } from "$lib/api/documents";
+  import { canonicalUrl as projectUrl } from "$lib/api/projects";
+  import { searchUrl, kv } from "$lib/utils/search";
+
   export let document: Document;
   export let visibleFields: Partial<VisibleFields> = defaultVisibleFields;
 
@@ -98,19 +99,21 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
         <a
           class="document-link"
           href={`${canonicalUrl(document).href}?mode=grid`}
-          >{$_("documents.pageCount", {
-            values: { n: document.page_count },
-          })}</a
         >
+          {$_("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", {
+          >
+            {$_("documents.noteCount", {
               values: { n: document.notes.length },
-            })}</a
-          > -
+            })}
+          </a> -
         {/if}
         {#if userOrgString(document)}
           {userOrgString(document)} -
@@ -139,7 +142,12 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
         {#if visible.data}
           {#each Object.entries(document.data) as [key, values]}
             {#each values as value}
-              <KV {key} {value} />
+              <KV
+                {key}
+                {value}
+                tag={key === "_tag"}
+                href={searchUrl(kv(key, value)).href}
+              />
             {/each}
           {/each}
         {/if}
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 262ca550a..e7662631b 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -53,7 +53,7 @@
   import PageHighlights from "./PageHighlights.svelte";
 
   import { getApiResponse } from "$lib/utils/api";
-  import { StorageManager } from "@/lib/utils/storage";
+  import { StorageManager } from "$lib/utils/storage";
 
   export let results: Document[] = [];
   export let count: Maybe<number> = undefined;
@@ -69,8 +69,6 @@
   const embed: boolean = getContext("embed");
   const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
 
-  $: console.log($visibleFields);
-
   setContext("highlightState", highlightState);
 
   function collapseAll() {
@@ -129,7 +127,7 @@
   onMount(() => {
     // set initial total, update later
     $total = count ?? 0;
-    if (auto) {
+    if (auto && end) {
       observer = watch(end);
     }
 
diff --git a/src/lib/components/documents/Thumbnail.svelte b/src/lib/components/documents/Thumbnail.svelte
index 6b49f575c..61826cf06 100644
--- a/src/lib/components/documents/Thumbnail.svelte
+++ b/src/lib/components/documents/Thumbnail.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { Alert24, Hourglass24, File24 } from "svelte-octicons";
+  import type { Access, Document } from "$lib/api/types";
 
-  import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
+  import { Alert24, Hourglass24, File24 } from "svelte-octicons";
 
-  import type { Access, Document } from "$lib/api/types";
-  import { canonicalUrl, pageImageUrl } from "$lib/api/documents";
   import NoteTab from "$lib/components/viewer/NoteTab.svelte";
+
+  import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
+  import { pageImageUrl } from "$lib/api/documents";
   import { pageSizesFromSpec } from "$lib/utils/pageSize";
 
   export let document: Document;
diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
index a2dc7d2ef..0253b98a8 100644
--- a/src/lib/components/documents/VisibleFields.svelte
+++ b/src/lib/components/documents/VisibleFields.svelte
@@ -72,11 +72,12 @@
 </script>
 
 <script lang="ts">
-  import { _ } from "svelte-i18n";
-  import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
+
   import deepEqual from "fast-deep-equal";
-  import FieldLabel from "../common/FieldLabel.svelte";
+  import { getContext } from "svelte";
+  import { _ } from "svelte-i18n";
+
   import {
     ListUnordered24,
     Note24,
@@ -84,8 +85,10 @@
     Rows24,
     type SvgComponent,
   } from "svelte-octicons";
+
+  import FieldLabel from "../common/FieldLabel.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
-  import { remToPx } from "@/lib/utils/layout";
+  import { remToPx } from "$lib/utils/layout";
 
   const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
 

From 11237d285115d8d7f635ac5087e7fac4ad9751ae Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 10 Dec 2024 09:33:07 -0500
Subject: [PATCH 12/19] formatting

---
 src/lib/components/layouts/DocumentBrowser.svelte     |  4 +---
 src/lib/components/layouts/DocumentListToolbar.svelte | 11 ++++++-----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
index 91ff1f2a2..5898eedb9 100644
--- a/src/lib/components/layouts/DocumentBrowser.svelte
+++ b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -23,7 +23,6 @@
   import Empty from "$lib/components/common/Empty.svelte";
   import Error from "$lib/components/common/Error.svelte";
   import Flex from "$lib/components/common/Flex.svelte";
-  import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
 
   // Document comopnents
@@ -38,7 +37,6 @@
   // Form components
   import Dropzone from "$lib/components/inputs/Dropzone.svelte";
   import DocumentActions from "$lib/components/sidebar/DocumentActions.svelte";
-  import Search from "$lib/components/forms/Search.svelte";
   import {
     filesToUpload,
     uploadToProject,
@@ -46,6 +44,7 @@
 
   // Layout comopnents
   import ContentLayout from "./ContentLayout.svelte";
+  import DocumentListToolbar from "./DocumentListToolbar.svelte";
   import Dropdown from "../common/Dropdown.svelte";
   import Menu from "../common/Menu.svelte";
   import Unverified from "../accounts/Unverified.svelte";
@@ -56,7 +55,6 @@
   import { isSupported } from "$lib/utils/files";
   import { canUploadFiles, getCurrentUser } from "$lib/utils/permissions";
   import { remToPx } from "$lib/utils/layout";
-  import DocumentListToolbar from "./DocumentListToolbar.svelte";
 
   setContext("selected", selected);
   setContext("visibleFields", visibleFields);
diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
index 1fe7293e4..e08d800f9 100644
--- a/src/lib/components/layouts/DocumentListToolbar.svelte
+++ b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import Flex from "../common/Flex.svelte";
+  import { ChevronDown12, Eye16 } from "svelte-octicons";
+
+  import Dropdown from "../common/Dropdown.svelte";
+  import Menu from "../common/Menu.svelte";
   import PageToolbar from "../common/PageToolbar.svelte";
   import Search from "../forms/Search.svelte";
-  import { remToPx } from "$lib/utils/layout";
-  import Dropdown from "../common/Dropdown.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
-  import { ChevronDown12, Eye16, Paintbrush16 } from "svelte-octicons";
-  import Menu from "../common/Menu.svelte";
   import VisibleFields from "../documents/VisibleFields.svelte";
 
+  import { remToPx } from "$lib/utils/layout";
+
   export let query: string = "";
 
   let headerToolbarWidth: number;

From f9804c771a9c8d63110e4694616ec3261d0ce309 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 10:12:51 -0500
Subject: [PATCH 13/19] Simplify choices with optional advanced customization

---
 src/langs/json/en.json                        |  4 +-
 src/lib/components/common/KV.svelte           |  1 +
 .../documents/DocumentListItem.svelte         | 34 ++------
 .../components/documents/VisibleFields.svelte | 80 +++++++------------
 .../stories/VisibleFields.stories.svelte      | 34 +++++---
 5 files changed, 62 insertions(+), 91 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 38309f22a..1416c42b7 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -241,7 +241,6 @@
     "fieldsAnchor": "Fields",
     "fields": {
       "concise": "Concise",
-      "balanced": "Balanced",
       "detailed": "Detailed",
       "customize": "Customize",
       "access": "Access",
@@ -250,8 +249,7 @@
       "description": "Description",
       "projects": "Projects",
       "data": "Data",
-      "fullTitle": "Full Title",
-      "fullDescription": "Full Description"
+      "wrapTitle": "Wrap Title"
     }
   },
   "projects": {
diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index 167cd98b5..bbd8edd78 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -41,6 +41,7 @@
     color: var(--blue-5, #153359);
     border-color: var(--blue-2);
     background: var(--blue-1);
+    text-decoration: none;
   }
   .link.kv:hover {
     cursor: pointer;
diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 5cfe6bcd4..3418085b2 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -5,30 +5,6 @@ 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 {
-    access: boolean;
-    thumbnail: boolean;
-    meta: boolean;
-    description: boolean;
-    projects: boolean;
-    data: boolean;
-    fullTitle: boolean;
-    fullDescription: boolean;
-  }
-
-  export const defaultVisibleFields: VisibleFields = {
-    access: true,
-    thumbnail: true,
-    meta: true,
-    description: false,
-    projects: true,
-    data: false,
-    fullTitle: true,
-    fullDescription: false,
-  };
-</script>
-
 <script lang="ts">
   import type { Document, Project } from "$lib/api/types";
 
@@ -43,6 +19,10 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   import { canonicalUrl, userOrgString } from "$lib/api/documents";
   import { canonicalUrl as projectUrl } from "$lib/api/projects";
   import { searchUrl, kv } from "$lib/utils/search";
+  import {
+    defaultVisibleFields,
+    type VisibleFields,
+  } from "./VisibleFields.svelte";
 
   export let document: Document;
   export let visibleFields: Partial<VisibleFields> = defaultVisibleFields;
@@ -81,7 +61,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
 
   <div class="document-info">
     <div class="head">
-      <h3 class="title" class:ellipsis={!visible.fullTitle}>
+      <h3 class="title" class:ellipsis={!visible.wrapTitle}>
         <a
           href={canonicalUrl(document).href}
           class="document-link title-link"
@@ -122,7 +102,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
       </p>
     {/if}
     {#if document.description && visible.description}
-      <p class="description" class:fullDescription={visible.fullDescription}>
+      <p class="description">
         {clean(document.description)}
       </p>
     {/if}
@@ -278,7 +258,7 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
   }
 
   .access {
-    flex: 0 0 8rem;
+    flex: 0 0 auto;
     font-size: var(--font-sm);
     transform: translateY(0.125em);
   }
diff --git a/src/lib/components/documents/VisibleFields.svelte b/src/lib/components/documents/VisibleFields.svelte
index 0253b98a8..b7a1b4c12 100644
--- a/src/lib/components/documents/VisibleFields.svelte
+++ b/src/lib/components/documents/VisibleFields.svelte
@@ -6,21 +6,9 @@
     description: boolean;
     projects: boolean;
     data: boolean;
-    fullTitle: boolean;
-    fullDescription: boolean;
+    wrapTitle: boolean;
   }
 
-  export const defaultVisibleFields: VisibleFields = {
-    access: true,
-    thumbnail: true,
-    meta: true,
-    description: false,
-    projects: true,
-    data: false,
-    fullTitle: true,
-    fullDescription: false,
-  };
-
   export const defaultViews: Array<{
     label: string;
     icon: typeof SvgComponent;
@@ -36,27 +24,12 @@
         description: false,
         projects: false,
         data: false,
-        fullTitle: true,
-        fullDescription: false,
-      },
-    },
-    {
-      label: "documentBrowser.fields.balanced",
-      icon: Rows24,
-      fields: {
-        access: true,
-        thumbnail: true,
-        meta: true,
-        description: false,
-        projects: true,
-        data: false,
-        fullTitle: true,
-        fullDescription: false,
+        wrapTitle: false,
       },
     },
     {
       label: "documentBrowser.fields.detailed",
-      icon: Note24,
+      icon: Rows24,
       fields: {
         access: true,
         thumbnail: true,
@@ -64,11 +37,12 @@
         description: true,
         projects: true,
         data: true,
-        fullTitle: true,
-        fullDescription: false,
+        wrapTitle: true,
       },
     },
   ];
+
+  export const defaultVisibleFields = defaultViews[1]?.fields!;
 </script>
 
 <script lang="ts">
@@ -80,7 +54,6 @@
 
   import {
     ListUnordered24,
-    Note24,
     Paintbrush16,
     Rows24,
     type SvgComponent,
@@ -90,17 +63,18 @@
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import { remToPx } from "$lib/utils/layout";
 
-  const visibleFields = getContext<Writable<VisibleFields>>("visibleFields");
+  export let showAdvanced = false;
+  export let visibleFields: Writable<VisibleFields> =
+    getContext("visibleFields");
 
   const labels: Record<keyof VisibleFields, string> = {
     access: "documentBrowser.fields.access",
-    fullTitle: "documentBrowser.fields.fullTitle",
     meta: "documentBrowser.fields.meta",
     thumbnail: "documentBrowser.fields.thumbnail",
     description: "documentBrowser.fields.description",
     projects: "documentBrowser.fields.projects",
     data: "documentBrowser.fields.data",
-    fullDescription: "documentBrowser.fields.fullDescription",
+    wrapTitle: "documentBrowser.fields.wrapTitle",
   };
 
   let width: number;
@@ -125,20 +99,26 @@
       </div>
     {/each}
   </div>
-  <fieldset class="fields">
-    <legend>
-      <SidebarItem small>
-        <Paintbrush16 slot="start" height={14} width={14} />
-        {$_("documentBrowser.fields.customize")}
-      </SidebarItem>
-    </legend>
-    {#each Object.keys($visibleFields) as key}
-      <label class="field">
-        <input type="checkbox" name={key} bind:checked={$visibleFields[key]} />
-        <FieldLabel>{$_(labels[key])}</FieldLabel>
-      </label>
-    {/each}
-  </fieldset>
+  {#if showAdvanced}
+    <fieldset class="fields">
+      <legend>
+        <SidebarItem small>
+          <Paintbrush16 slot="start" height={14} width={14} />
+          {$_("documentBrowser.fields.customize")}
+        </SidebarItem>
+      </legend>
+      {#each Object.keys($visibleFields) as key}
+        <label class="field">
+          <input
+            type="checkbox"
+            name={key}
+            bind:checked={$visibleFields[key]}
+          />
+          <FieldLabel>{$_(labels[key])}</FieldLabel>
+        </label>
+      {/each}
+    </fieldset>
+  {/if}
 </div>
 
 <style>
diff --git a/src/lib/components/documents/stories/VisibleFields.stories.svelte b/src/lib/components/documents/stories/VisibleFields.stories.svelte
index a452dbb6c..a6f3b4643 100644
--- a/src/lib/components/documents/stories/VisibleFields.stories.svelte
+++ b/src/lib/components/documents/stories/VisibleFields.stories.svelte
@@ -2,11 +2,12 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import VisibleFieldsComponent, {
     defaultVisibleFields,
+    defaultViews,
   } from "../VisibleFields.svelte";
 
   import { documentExpanded, data } from "@/test/fixtures/documents";
   import { setContext } from "svelte";
-  import { writable } from "svelte/store";
+  import { get, writable } from "svelte/store";
 
   export const meta = {
     title: "Components / Documents / Visible Fields",
@@ -19,28 +20,39 @@
 
 <script lang="ts">
   import DocumentListItem from "../DocumentListItem.svelte";
+  import Menu from "../../common/Menu.svelte";
 
-  const visibleFields = writable(defaultVisibleFields);
-  setContext("visibleFields", visibleFields);
+  const vF = writable(defaultVisibleFields);
+  setContext("visibleFields", vF);
 </script>
 
 <Template let:args>
   <div class="wrapper">
-    <VisibleFieldsComponent {...args} />
-    <DocumentListItem
-      document={{ ...documentExpanded, data }}
-      visibleFields={$visibleFields}
-    />
+    <Menu><VisibleFieldsComponent {...args} /></Menu>
+    <div class="item">
+      <DocumentListItem
+        document={{ ...documentExpanded, data }}
+        visibleFields={$vF}
+      />
+    </div>
   </div>
 </Template>
 
-<Story name="Balanced" />
+<Story name="Simple" />
+<Story name="Advanced" args={{ showAdvanced: true }} />
 
 <style>
   .wrapper {
-    max-width: 24rem;
+    max-width: 48rem;
     display: flex;
-    flex-direction: column;
+    align-items: flex-start;
     gap: 2rem;
   }
+  .item {
+    flex: 1 1 auto;
+    min-width: 0;
+    border: 1px solid var(--gray-2);
+    border-radius: 0.5rem;
+    padding: 1rem;
+  }
 </style>

From e6cd65ac0058e9e0170306bf03000dfb85b93a8e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 10:22:57 -0500
Subject: [PATCH 14/19] i18n

---
 src/langs/json/de.json | 15 +++++++++++++++
 src/langs/json/es.json | 17 ++++++++++++++++-
 src/langs/json/fr.json | 17 ++++++++++++++++-
 src/langs/json/it.json | 15 +++++++++++++++
 src/langs/json/ru.json | 15 +++++++++++++++
 src/langs/json/uk.json | 15 +++++++++++++++
 6 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/src/langs/json/de.json b/src/langs/json/de.json
index dc1483c1c..0e6351783 100644
--- a/src/langs/json/de.json
+++ b/src/langs/json/de.json
@@ -25,6 +25,21 @@
     "dismiss": "Verwerfen",
     "dispatch": "Senden"
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Felder",
+    "fields": {
+      "concise": "Prägnant",
+      "detailed": "Detailliert",
+      "customize": "Anpassen",
+      "access": "Zugriff",
+      "meta": "Metadaten",
+      "thumbnail": "Miniaturansicht",
+      "description": "Beschreibung",
+      "projects": "Projekte",
+      "data": "Daten",
+      "wrapTitle": "Titel umbrechen"
+    }
+  },
   "dialogReprocessDialog": {
     "title": "Wiederaufbereitung bestätigen",
     "reprocessDocs": "Wenn Sie fortfahren, {n, plural, one {wird das ausgewählte Dokument} other {werden die # ausgewählten Dokumente}} den Seiten- und Bildtext erzwungermaßen wiederaufbereiten. Möchten Sie fortfahren?",
diff --git a/src/langs/json/es.json b/src/langs/json/es.json
index cd8721ac2..328fb3402 100644
--- a/src/langs/json/es.json
+++ b/src/langs/json/es.json
@@ -144,6 +144,21 @@
       "done": "Hacido"
     }
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Campos",
+    "fields": {
+      "concise": "Conciso",
+      "detailed": "Detallado",
+      "customize": "Personalizar",
+      "access": "Acceso",
+      "meta": "Metadatos",
+      "thumbnail": "Miniatura",
+      "description": "Descripción",
+      "projects": "Proyectos",
+      "data": "Datos",
+      "wrapTitle": "Ajustar título"
+    }
+  },
   "authSection": {
     "help": {
       "faq": "Preguntas Frecuentes",
@@ -565,4 +580,4 @@
     },
     "success": "Agradecemos su retroalimentaci\u00f3n. \u00a1Muchas gracias!"
   }
-}
\ No newline at end of file
+}
diff --git a/src/langs/json/fr.json b/src/langs/json/fr.json
index 4bc29d004..19082424d 100644
--- a/src/langs/json/fr.json
+++ b/src/langs/json/fr.json
@@ -26,6 +26,21 @@
     "selected": "S\u00e9lectionn\u00e9",
     "resultsCount": "Mostrando {n, number} de {total, number} r\u00e9sultats"
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Champs",
+    "fields": {
+      "concise": "Concis",
+      "detailed": "Détaillé",
+      "customize": "Personnaliser",
+      "access": "Accès",
+      "meta": "Métadonnées",
+      "thumbnail": "Miniature",
+      "description": "Description",
+      "projects": "Projets",
+      "data": "Données",
+      "wrapTitle": "Ajuster le titre"
+    }
+  },
   "access": {
     "private": {
       "value": "priv\u00e9",
@@ -564,4 +579,4 @@
     },
     "success": "Nous avons re\u00e7u vos retours. Merci !"
   }
-}
\ No newline at end of file
+}
diff --git a/src/langs/json/it.json b/src/langs/json/it.json
index f00b2c9c1..abb5458c3 100644
--- a/src/langs/json/it.json
+++ b/src/langs/json/it.json
@@ -46,6 +46,21 @@
   "notfound": {
     "content": "Perci\u00f2 prova un altro indirizzo URL."
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Campi",
+    "fields": {
+      "concise": "Conciso",
+      "detailed": "Dettaglio",
+      "customize": "Personalizza",
+      "access": "Accesso",
+      "meta": "Metadati",
+      "thumbnail": "Miniatura",
+      "description": "Descrizione",
+      "projects": "Progetti",
+      "data": "Dati",
+      "wrapTitle": "Adatta titolo"
+    }
+  },
   "appearanceDimension": {
     "responsive": "Automatico",
     "fixed": "Fissato"
diff --git a/src/langs/json/ru.json b/src/langs/json/ru.json
index 93073d1d9..316015be9 100644
--- a/src/langs/json/ru.json
+++ b/src/langs/json/ru.json
@@ -41,6 +41,21 @@
     "reprocessSingleDoc": "Если вы продолжите, это заставит документ повторно обработать страницу и текст изображения. Вы хотите продолжить?",
     "confirm": "Повторная обработка"
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Поля",
+    "fields": {
+      "concise": "Кратко",
+      "detailed": "Подробно",
+      "customize": "Настроить",
+      "access": "Доступ",
+      "meta": "Метаданные",
+      "thumbnail": "Миниатюра",
+      "description": "Описание",
+      "projects": "Проекты",
+      "data": "Данные",
+      "wrapTitle": "Оборачивать заголовок"
+    }
+  },
   "dialogDocumentEmbedDialog": {
     "responsive": "Адаптивный",
     "respOn": "Вкл (по умолчанию)",
diff --git a/src/langs/json/uk.json b/src/langs/json/uk.json
index 62ad60579..3fb5e30be 100644
--- a/src/langs/json/uk.json
+++ b/src/langs/json/uk.json
@@ -31,6 +31,21 @@
     "reprocessSingleDoc": "Продовження призведе до того, що документ повторно обробить сторінку та текст зображення. Бажаєте продовжити?",
     "confirm": "Повторна обробка"
   },
+  "documentBrowser": {
+    "fieldsAnchor": "Поля",
+    "fields": {
+      "concise": "Стислий",
+      "detailed": "Детально",
+      "customize": "Налаштувати",
+      "access": "Доступ",
+      "meta": "Метадані",
+      "thumbnail": "Мініатюра",
+      "description": "Опис",
+      "projects": "Проекти",
+      "data": "Дані",
+      "wrapTitle": "Обгорнути заголовок"
+    }
+  },
   "dialogDocumentEmbedDialog": {
     "responsive": "Адаптивне",
     "respOn": "Ввімкнено (за замовчуванням)",

From 7fc94577b1fe8e1e9c193a744911872e3cf9e8b1 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 10:25:59 -0500
Subject: [PATCH 15/19] Fix test and check

---
 .../documents/DocumentListItem.svelte         |  4 ++--
 .../components/documents/ResultsList.svelte   | 10 +++++----
 .../stories/DocumentListItem.stories.svelte   |  5 ++---
 .../DocumentListItem.test.ts.snap             | 21 ++++++++++---------
 4 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 3418085b2..ff8a480e2 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -252,10 +252,10 @@ If we're in an embed, we want to open links to documents in new tabs and hide th
     width: 100%;
   }
 
-  .fullDescription {
+  /* .fullDescription {
     line-clamp: unset;
     -webkit-line-clamp: unset;
-  }
+  } */
 
   .access {
     flex: 0 0 auto;
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index e7662631b..2628906ab 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -7,6 +7,11 @@
     type Writable,
   } from "svelte/store";
 
+  import {
+    defaultVisibleFields,
+    type VisibleFields,
+  } from "./VisibleFields.svelte";
+
   // IDs might be strings or numbers, depending on the API endpoint
   // enforce type consistency here to avoid comparison bugs later
   export const visible: Writable<Map<string, Document>> = writable(new Map());
@@ -43,10 +48,7 @@
   import { Search24 } from "svelte-octicons";
 
   import Button from "../common/Button.svelte";
-  import DocumentListItem, {
-    defaultVisibleFields,
-    type VisibleFields,
-  } from "./DocumentListItem.svelte";
+  import DocumentListItem from "./DocumentListItem.svelte";
   import Empty from "../common/Empty.svelte";
   import Flex from "../common/Flex.svelte";
   import NoteHighlights from "./NoteHighlights.svelte";
diff --git a/src/lib/components/documents/stories/DocumentListItem.stories.svelte b/src/lib/components/documents/stories/DocumentListItem.stories.svelte
index f9dcae034..c1388d3a2 100644
--- a/src/lib/components/documents/stories/DocumentListItem.stories.svelte
+++ b/src/lib/components/documents/stories/DocumentListItem.stories.svelte
@@ -1,8 +1,7 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
-  import DocumentListItem, {
-    defaultVisibleFields,
-  } from "../DocumentListItem.svelte";
+  import DocumentListItem from "../DocumentListItem.svelte";
+  import { defaultVisibleFields } from "../VisibleFields.svelte";
 
   import document from "@/test/fixtures/documents/document.json";
   import expanded from "@/test/fixtures/documents/document-expanded.json";
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 1d689e272..f78240277 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,10 +3,10 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <div
-    class="document-list-item svelte-1wz2dv3"
+    class="document-list-item svelte-145vmhw"
   >
     <a
-      class="document-link thumbnail-link svelte-1wz2dv3"
+      class="document-link thumbnail-link svelte-145vmhw"
       href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
     >
       <div
@@ -25,16 +25,16 @@ exports[`DocumentListItem > renders 1`] = `
     </a>
      
     <div
-      class="document-info svelte-1wz2dv3"
+      class="document-info svelte-145vmhw"
     >
       <div
-        class="head svelte-1wz2dv3"
+        class="head svelte-145vmhw"
       >
         <h3
-          class="title svelte-1wz2dv3"
+          class="title svelte-145vmhw"
         >
           <a
-            class="document-link title-link svelte-1wz2dv3"
+            class="document-link title-link svelte-145vmhw"
             href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
           >
             Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
@@ -42,7 +42,7 @@ exports[`DocumentListItem > renders 1`] = `
         </h3>
          
         <div
-          class="access svelte-1wz2dv3"
+          class="access svelte-145vmhw"
         >
           <div
             class="access public svelte-o63adk"
@@ -66,10 +66,10 @@ exports[`DocumentListItem > renders 1`] = `
       </div>
        
       <p
-        class="meta svelte-1wz2dv3"
+        class="meta svelte-145vmhw"
       >
         <a
-          class="document-link svelte-1wz2dv3"
+          class="document-link svelte-145vmhw"
           href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/?mode=grid"
         >
           20 pages
@@ -86,10 +86,11 @@ exports[`DocumentListItem > renders 1`] = `
        
        
       <div
-        class="data svelte-1wz2dv3"
+        class="data svelte-145vmhw"
       >
         
          
+        
       </div>
     </div>
   </div>

From 46af7717aa5ecb2260adcd6b18a61913ea3bf67b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 10:27:18 -0500
Subject: [PATCH 16/19] Moves dropdown to right-hand side of toolbar

---
 .../layouts/DocumentListToolbar.svelte         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/layouts/DocumentListToolbar.svelte b/src/lib/components/layouts/DocumentListToolbar.svelte
index e08d800f9..55f92711a 100644
--- a/src/lib/components/layouts/DocumentListToolbar.svelte
+++ b/src/lib/components/layouts/DocumentListToolbar.svelte
@@ -18,6 +18,15 @@
 
 <PageToolbar bind:width={headerToolbarWidth}>
   <div class="items" slot="center">
+    <div style:flex="1 1 auto">
+      <Search name="q" {query} placeholder={$_("common.search")} />
+      <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
+        {@html $_("search.help")}
+        <a target="_blank" href="/help/search/">
+          {$_("search.more")}
+        </a>
+      </p>
+    </div>
     <div class="margin-xs">
       <Dropdown>
         <SidebarItem slot="anchor">
@@ -30,15 +39,6 @@
         </Menu>
       </Dropdown>
     </div>
-    <div style:flex="1 1 auto">
-      <Search name="q" {query} placeholder={$_("common.search")} />
-      <p class="help" class:hide={headerToolbarWidth < remToPx(38)}>
-        {@html $_("search.help")}
-        <a target="_blank" href="/help/search/">
-          {$_("search.more")}
-        </a>
-      </p>
-    </div>
   </div>
 </PageToolbar>
 

From e7063f4ac9f43fb18e6e336dc8f454598b3583ca Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 10 Dec 2024 11:10:39 -0500
Subject: [PATCH 17/19] overflow-y: auto on menu

---
 src/lib/components/common/Menu.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/common/Menu.svelte b/src/lib/components/common/Menu.svelte
index 2b8146f9c..0b1d3b526 100644
--- a/src/lib/components/common/Menu.svelte
+++ b/src/lib/components/common/Menu.svelte
@@ -18,7 +18,7 @@
     gap: 0.25rem;
     min-width: 16rem;
     max-height: var(--max-height, auto);
-    overflow-y: scroll;
+    overflow-y: auto;
   }
   :global(.menu.small) {
     color: var(--gray-3);

From 995ae835f94dca422e7fd229988439e48a1a9a08 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 10 Dec 2024 11:15:25 -0500
Subject: [PATCH 18/19] oh snap

---
 .../accounts/tests/__snapshots__/UserMenu.test.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
index aa64cf207..42b98bb65 100644
--- a/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
+++ b/src/lib/components/accounts/tests/__snapshots__/UserMenu.test.ts.snap
@@ -61,7 +61,7 @@ exports[`UserMenu 1`] = `
     style="left: 0px; top: 0px;"
   >
     <div
-      class="menu svelte-ei6d2h"
+      class="menu svelte-nrjt2v"
       role="menu"
     >
       <a

From a99d61886f3f01b9ee730a766a97dc0abda1aea8 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 10 Dec 2024 11:25:32 -0500
Subject: [PATCH 19/19] Language tweak

---
 src/langs/json/de.json | 2 +-
 src/langs/json/en.json | 2 +-
 src/langs/json/es.json | 2 +-
 src/langs/json/fr.json | 2 +-
 src/langs/json/it.json | 2 +-
 src/langs/json/ru.json | 2 +-
 src/langs/json/uk.json | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/langs/json/de.json b/src/langs/json/de.json
index 0e6351783..176532abd 100644
--- a/src/langs/json/de.json
+++ b/src/langs/json/de.json
@@ -26,7 +26,7 @@
     "dispatch": "Senden"
   },
   "documentBrowser": {
-    "fieldsAnchor": "Felder",
+    "fieldsAnchor": "Ansicht",
     "fields": {
       "concise": "Prägnant",
       "detailed": "Detailliert",
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 1416c42b7..939923a1b 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -238,7 +238,7 @@
     "processingDocuments": "{n, plural, one {# document} other {# documents}} remaining"
   },
   "documentBrowser": {
-    "fieldsAnchor": "Fields",
+    "fieldsAnchor": "View",
     "fields": {
       "concise": "Concise",
       "detailed": "Detailed",
diff --git a/src/langs/json/es.json b/src/langs/json/es.json
index 328fb3402..adbb6906d 100644
--- a/src/langs/json/es.json
+++ b/src/langs/json/es.json
@@ -145,7 +145,7 @@
     }
   },
   "documentBrowser": {
-    "fieldsAnchor": "Campos",
+    "fieldsAnchor": "Vista",
     "fields": {
       "concise": "Conciso",
       "detailed": "Detallado",
diff --git a/src/langs/json/fr.json b/src/langs/json/fr.json
index 19082424d..a25e7129d 100644
--- a/src/langs/json/fr.json
+++ b/src/langs/json/fr.json
@@ -27,7 +27,7 @@
     "resultsCount": "Mostrando {n, number} de {total, number} r\u00e9sultats"
   },
   "documentBrowser": {
-    "fieldsAnchor": "Champs",
+    "fieldsAnchor": "Vue",
     "fields": {
       "concise": "Concis",
       "detailed": "Détaillé",
diff --git a/src/langs/json/it.json b/src/langs/json/it.json
index abb5458c3..364a69a54 100644
--- a/src/langs/json/it.json
+++ b/src/langs/json/it.json
@@ -47,7 +47,7 @@
     "content": "Perci\u00f2 prova un altro indirizzo URL."
   },
   "documentBrowser": {
-    "fieldsAnchor": "Campi",
+    "fieldsAnchor": "Vista",
     "fields": {
       "concise": "Conciso",
       "detailed": "Dettaglio",
diff --git a/src/langs/json/ru.json b/src/langs/json/ru.json
index 316015be9..b515e2d9d 100644
--- a/src/langs/json/ru.json
+++ b/src/langs/json/ru.json
@@ -42,7 +42,7 @@
     "confirm": "Повторная обработка"
   },
   "documentBrowser": {
-    "fieldsAnchor": "Поля",
+    "fieldsAnchor": "Вид",
     "fields": {
       "concise": "Кратко",
       "detailed": "Подробно",
diff --git a/src/langs/json/uk.json b/src/langs/json/uk.json
index 3fb5e30be..0152fecd3 100644
--- a/src/langs/json/uk.json
+++ b/src/langs/json/uk.json
@@ -32,7 +32,7 @@
     "confirm": "Повторна обробка"
   },
   "documentBrowser": {
-    "fieldsAnchor": "Поля",
+    "fieldsAnchor": "Вигляд",
     "fields": {
       "concise": "Стислий",
       "detailed": "Детально",