library: self-host Source Sans Pro for tags and polish sidebar/toolbar

src/components/library/molecules/Tag/Tag.module.scss

@@ -21,6 +21,9 @@
 
   .text {
     display: inline;
+    // Beats the global `.library p` serif rule (0,2,0 > 0,1,1) so tag labels
+    // use the sans face.
+    font-family: var(--font-source-sans);
   }
 
   .removeButton {

src/components/library/organisms/LibraryToolbar/LibraryToolbar.module.scss

@@ -12,24 +12,14 @@
   }
 }
 
-.divider {
-  width: 100%;
-  height: 1px;
-  background: var(--black-100);
-  margin: 16px 0;
-
-  // Mobile: collapse the top margin so the divider connects to the fixed
-  // header (paired with the layout wrapper dropping its top padding).
-  @media (max-width: 768px) {
-    margin-top: 0;
-  }
-}
-
 .controls {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
+  // Replaces the removed divider's 16px top margin so the controls keep their
+  // breathing room below the global header.
+  margin-top: 16px;
   animation: toolbar-fade 0.3s ease;
 
   // On phones everything crammed onto one row collapsed the flex:1 pill
@@ -40,12 +30,17 @@
     flex-direction: column;
     align-items: stretch;
     gap: 12px;
+    // Collapse the top margin on mobile so the controls connect to the fixed
+    // header (paired with the layout wrapper dropping its top padding), matching
+    // the removed divider's mobile behavior.
+    margin-top: 0;
   }
 }
 
 // Guest view of someone else's library: the divider is dropped, so restore the
 // vertical breathing room on the controls row itself.
 .controlsGuest {
+  margin-top: 0;
   padding: 24px 10px;
 }
 

src/components/library/organisms/LibraryToolbar/LibraryToolbar.tsx

@@ -332,8 +332,6 @@ export function LibraryToolbar(props: LibraryToolbarProps): JSX.Element {
 
   return (
     <div className={classNames(styles.toolbar, className)}>
-      <div className={styles.divider} />
-
       <div className={styles.controls}>
         <Text className={styles.text}>
           {isReordering ? 'Drag to reorder →' : 'Jump to →'}

src/components/library/organisms/Sidebar/Sidebar.module.scss

@@ -87,7 +87,8 @@
 
     .button {
       width: auto;
-      padding: 3px 8px;
+      height: auto;
+      padding: 4px 8px;
     }
 
     .text {
@@ -132,6 +133,15 @@
       display: flex;
       flex-wrap: wrap;
 
+      &.tagsEmpty {
+        height: 50px;
+        align-items: center;
+      }
+
+      .emptyTags {
+        color: var(--gray-medium);
+      }
+
       .button {
         color: var(--brown);
         height: 26px;

src/components/library/organisms/Sidebar/Sidebar.tsx

@@ -171,6 +171,9 @@ export function Sidebar() {
     resolveStrapiUrl(currentOwner?.avatar) ??
     (isMyLibrary ? accountData?.picture : undefined);
   const aboutAuthorText = stripHtml(currentOwner?.aboutMe);
+  const aboutLibraryText = stripHtml(
+    currentLibrary?.attributes.libraryDetails?.aboutLibrary,
+  );
 
   // Owner sees their full tag palette; a true visitor sees only the tags
   // actually used on this library's objects — no cross-account tag fetch.
@@ -397,7 +400,7 @@ export function Sidebar() {
                     ''}
                 </Text>
               </div>
-              <div className={styles.divider} />
+              {aboutLibraryText && <div className={styles.divider} />}
 
               <div className={styles.totalObjects}>
                 <Text className={styles.label}>Total objects:</Text>
@@ -468,7 +471,14 @@ export function Sidebar() {
               )}
             </div>
             <div className={styles.content}>
-              <div className={styles.tags}>
+              <div
+                className={classNames(styles.tags, {
+                  [styles.tagsEmpty]: displayedTags.length === 0,
+                })}
+              >
+                {displayedTags.length === 0 && (
+                  <Text className={styles.emptyTags}>No tags yet.</Text>
+                )}
                 {displayedTags.map(tag => (
                   <Tag key={tag.name} label={tag.name} color={tag.color} />
                 ))}

src/styles/globals.scss

@@ -267,6 +267,15 @@ body {
   font-display: block;
 }
 
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/keepsimple_/fonts/SourceSansPro/SourceSansPro-Regular.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: block;
+}
+
 // Aldrich is being used in Company Management(new)
 @font-face {
   font-family: 'Aldrich';

src/styles/library/variables.scss

@@ -113,5 +113,7 @@
   /* Fonts — the upstream library injected these via next/font on <body>;
      here we declare them directly with web-safe fallbacks. */
   --font-source-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
+  --font-source-sans:
+    'Source Sans Pro', system-ui, -apple-system, Arial, sans-serif;
   --font-lato: 'Lato', system-ui, -apple-system, Arial, sans-serif;
 }