Various small styling improvements

package.json

@@ -22,6 +22,7 @@
     "@fluffylabs/synctex-store": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
     "@types/jspdf": "^1.3.3",
     "class-variance-authority": "^0.7.1",
     "dompurify": "^3.2.0",

src/App.tsx

@@ -36,7 +36,7 @@ export function App() {
                   left={
                     <div className="h-full w-full flex flex-row items-stretch justify-center">
                       <AppsSidebar activeLink="reader" enableDarkModeToggle={true} />
-                      <div className="box-border h-full w-full relative overflow-hidden bg-[#BBB] dark:bg-[#666]">
+                      <div className="box-border h-full w-full relative overflow-hidden bg-background">
                         <PdfViewer />
                       </div>
                       <div className="controls">

src/components/NoteManager/NoteManager.tsx

@@ -1,5 +1,6 @@
 import { memo, useCallback, useContext, useEffect, useState } from "react";
 import "./NoteManager.css";
+import { twMerge } from "tailwind-merge";
 import { validateMath } from "../../utils/validateMath";
 import { LabelsFilter } from "../LabelsFilter/LabelsFilter";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
@@ -12,9 +13,9 @@ import { NotesList } from "./components/NotesList";
 
 const DEFAULT_AUTHOR = "";
 
-export function NoteManager() {
+export function NoteManager({ className }: { className?: string }) {
   return (
-    <div className="notes-wrapper">
+    <div className={twMerge("notes-wrapper", className)}>
       <Notes />
       <NotesActions />
     </div>

src/components/Outline/Outline.tsx

@@ -1,17 +1,16 @@
 import "./Outline.css";
-import type { PDFDocumentProxy } from "pdfjs-dist";
 import { type FC, type ReactNode, memo, useCallback, useContext, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
 import { PdfContext } from "../PdfProvider/PdfProvider";
 import type { IPdfContext } from "../PdfProvider/PdfProvider";
+import { OutlineLinkSkeleton, outlineForSkeleton } from "./Skeleton";
+import type { TOutlineComplete, TOutlineSingleSlim } from "./types";
 
-export type TOutline = Awaited<ReturnType<PDFDocumentProxy["getOutline"]>>;
-
-export function Outline({ searchIsDone }: { searchIsDone: boolean }) {
+export function Outline({ searchIsDone, className }: { searchIsDone: boolean; className?: string }) {
   const { locationParams } = useContext(LocationContext) as ILocationContext;
   const { pdfDocument, linkService } = useContext(PdfContext) as IPdfContext;
-  const [outline, setOutline] = useState<TOutline | undefined>(undefined);
+  const [outline, setOutline] = useState<TOutlineComplete | undefined>(undefined);
 
   useEffect(() => {
     pdfDocument?.getOutline().then((outline) => setOutline(outline));
@@ -23,7 +22,7 @@ export function Outline({ searchIsDone }: { searchIsDone: boolean }) {
     if (section === undefined || searchIsDone === false) {
       return;
     }
-    const findItem = (outline: TOutline): TOutline[0] | undefined => {
+    const findItem = (outline: TOutlineComplete): TOutlineComplete[0] | undefined => {
       for (const item of outline) {
         if (item.title.toLowerCase().includes(section)) {
           return item;
@@ -43,95 +42,80 @@ export function Outline({ searchIsDone }: { searchIsDone: boolean }) {
   }, [searchIsDone, section, outline, linkService]);
 
   const handleClick = useCallback(
-    (dest: TOutline[0]["dest"]) => {
+    (dest: TOutlineSingleSlim["dest"]) => {
       if (!dest) return;
       linkService?.goToDestination(dest);
     },
     [linkService],
   );
 
-  return <OutlineDumb outline={outline} onClick={handleClick} />;
+  return <OutlineDumb outline={outline} onClick={handleClick} className={className} />;
 }
 
-type IOutline = Pick<TOutline[0], "title" | "dest" | "items">;
-
-const outlineForSkeleton = [
-  ...Array(12)
-    .fill(0)
-    .map((_, index) => ({
-      title: `Skeleton Title ${index + 1}`,
-      dest: "skeleton-destination",
-      items: [
-        ...Array(5)
-          .fill(0)
-          .map((_, index) => ({
-            title: `Skeleton Subitem ${index + 1}`,
-            dest: "skeleton-subitem-destination",
-            items: [],
-          })),
-      ],
-    })),
-] satisfies IOutline[];
-
-const OutlineDumb: FC<{ outline?: IOutline[]; onClick: (item: TOutline[0]["dest"]) => void }> = memo(
-  ({ outline, onClick }) => {
-    const renderOutline = (outline: IOutline[], options: { firstLevel?: boolean; isSkeleton?: boolean } = {}) => {
-      const { firstLevel = false, isSkeleton = false } = options;
-
-      return (
-        <ul className={twMerge(firstLevel ? "mt-0" : "my-3")}>
-          {outline.map((item, index) => (
-            <li key={item.title} className={twMerge(firstLevel ? "pl-0 mt-4" : "pl-4", "mt-0.5 first-of-type:mt-0")}>
-              {isSkeleton && (
-                <OutlineLinkSkeleton
-                  className={twMerge(
-                    "h-4.5",
-                    index % 4 === 0 && "w-52",
-                    index % 4 === 1 && "w-64",
-                    index % 4 === 2 && "w-48",
-                    index % 4 === 3 && "w-24",
-                    !firstLevel && "mt-0.5",
-                    "max-w-10/12",
-                  )}
-                />
-              )}
-              {!isSkeleton && (
-                <Link
-                  dest={item.dest}
-                  onClick={onClick}
-                  className={twMerge(
-                    "underline underline-offset-2",
-                    !firstLevel && "dark:text-[var(--brand-light)] text-[var(--brand-darkest)] mt-0.5",
-                    firstLevel && "dark:text-[var(--brand)] text-[var(--brand-darkest-2)]",
-                  )}
-                >
-                  {firstLevel && item.title.replace(".", " > ")}
-                  {!firstLevel && item.title}
-                </Link>
-              )}
-              {item.items.length > 0 ? renderOutline(item.items, { isSkeleton }) : null}
-            </li>
-          ))}
-        </ul>
-      );
-    };
-
-    const pickedOutline = outline ?? outlineForSkeleton;
+const OutlineDumb: FC<{
+  outline?: TOutlineSingleSlim[];
+  onClick: (item: TOutlineSingleSlim["dest"]) => void;
+  className?: string;
+}> = memo(({ outline, onClick, className }) => {
+  const renderOutline = (
+    outline: TOutlineSingleSlim[],
+    options: { firstLevel?: boolean; isSkeleton?: boolean } = {},
+  ) => {
+    const { firstLevel = false, isSkeleton = false } = options;
 
     return (
-      <div className="rounded-lg min-h-0 w-full py-6 px-6  bg-[#eeeeee] dark:bg-[#323232]  overflow-y-auto">
-        {renderOutline(pickedOutline, { firstLevel: true, isSkeleton: pickedOutline === outlineForSkeleton })}
-      </div>
+      <ul className={twMerge(firstLevel ? "mt-0" : "my-3", className)}>
+        {outline.map((item, index) => (
+          <li key={item.title} className={twMerge(firstLevel ? "pl-0 mt-4" : "pl-4", "mt-0.5 first-of-type:mt-0")}>
+            {isSkeleton && (
+              <OutlineLinkSkeleton
+                className={twMerge(
+                  "h-4.5",
+                  index % 4 === 0 && "w-52",
+                  index % 4 === 1 && "w-64",
+                  index % 4 === 2 && "w-48",
+                  index % 4 === 3 && "w-24",
+                  !firstLevel && "mt-0.5",
+                  "max-w-10/12",
+                )}
+              />
+            )}
+            {!isSkeleton && (
+              <Link
+                dest={item.dest}
+                onClick={onClick}
+                className={twMerge(
+                  "underline underline-offset-2",
+                  !firstLevel && "dark:text-brand-light text-brand-dark mt-0.5",
+                  firstLevel && "dark:text-brand text-brand-darkest",
+                )}
+              >
+                {firstLevel && item.title.replace(".", " > ")}
+                {!firstLevel && item.title}
+              </Link>
+            )}
+            {item.items.length > 0 ? renderOutline(item.items, { isSkeleton }) : null}
+          </li>
+        ))}
+      </ul>
     );
-  },
-);
+  };
+
+  const pickedOutline = outline ?? outlineForSkeleton;
+
+  return (
+    <div className="rounded-lg min-h-0 w-full py-6 px-6  bg-[#eeeeee] dark:bg-[#323232]  overflow-y-auto">
+      {renderOutline(pickedOutline, { firstLevel: true, isSkeleton: pickedOutline === outlineForSkeleton })}
+    </div>
+  );
+});
 
 OutlineDumb.displayName = "OutlineDumb";
 
 type ILinkProps = {
-  dest: TOutline[0]["dest"];
+  dest: TOutlineSingleSlim["dest"];
   children: ReactNode;
-  onClick: (dest: TOutline[0]["dest"]) => void;
+  onClick: (dest: TOutlineSingleSlim["dest"]) => void;
   className?: string;
 };
 
@@ -142,14 +126,3 @@ function Link({ dest, children, className, onClick }: ILinkProps) {
     </a>
   );
 }
-
-const OutlineLinkSkeleton: FC<{ className: string }> = ({ className }) => {
-  return (
-    <div
-      className={twMerge(
-        "h-4 w-24 bg-gray-300/85 dark:bg-[var(--brand-light)] dark:opacity-15 rounded-md animate-pulse",
-        className,
-      )}
-    />
-  );
-};

src/components/Outline/Skeleton.tsx

@@ -0,0 +1,32 @@
+import type { FC } from "react";
+import { twMerge } from "tailwind-merge";
+import type { TOutlineSingleSlim } from "./types";
+
+export const outlineForSkeleton = [
+  ...Array(12)
+    .fill(0)
+    .map((_, index) => ({
+      title: `Skeleton Title ${index + 1}`,
+      dest: "skeleton-destination",
+      items: [
+        ...Array(5)
+          .fill(0)
+          .map((_, index) => ({
+            title: `Skeleton Subitem ${index + 1}`,
+            dest: "skeleton-subitem-destination",
+            items: [],
+          })),
+      ],
+    })),
+] satisfies TOutlineSingleSlim[];
+
+export const OutlineLinkSkeleton: FC<{ className: string }> = ({ className }) => {
+  return (
+    <div
+      className={twMerge(
+        "h-4 w-24 bg-gray-300/85 dark:bg-[var(--brand-light)] dark:opacity-15 rounded-md animate-pulse",
+        className,
+      )}
+    />
+  );
+};

src/components/Outline/types.ts

@@ -0,0 +1,4 @@
+import type { PDFDocumentProxy } from "pdfjs-dist";
+
+export type TOutlineComplete = Awaited<ReturnType<PDFDocumentProxy["getOutline"]>>;
+export type TOutlineSingleSlim = Pick<TOutlineComplete[0], "title" | "dest" | "items">;

src/components/Search/Search.tsx

@@ -4,14 +4,17 @@ import { type ILocationContext, LocationContext } from "../LocationProvider/Loca
 import { type IPdfContext, PdfContext } from "../PdfProvider/PdfProvider";
 
 import "./Search.css";
+import { twMerge } from "tailwind-merge";
 import { useTabsContext } from "../Tabs/Tabs";
 
 export function Search({
   onSearchFinished,
   tabName,
+  className,
 }: {
   tabName: string;
   onSearchFinished: (hasQuery: boolean) => void;
+  className?: string;
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
   const { activeTab } = useTabsContext();
@@ -41,7 +44,7 @@ export function Search({
   });
 
   return (
-    <div className="search-wrapper w-full">
+    <div className={twMerge("search-wrapper w-full", className)}>
       <input
         ref={inputRef}
         autoFocus

src/components/Sidebar/Sidebar.tsx

@@ -48,7 +48,7 @@ export function Sidebar() {
   ];
 
   return (
-    <div className="sidebar">
+    <div className="sidebar bg-sidebar">
       <div className="content">
         <Selection activeTab={tab} switchTab={setTab} />
         <Tabs tabs={tabs} activeTab={tab} switchTab={setTab} alwaysRender />

src/components/Tabs/Tabs.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@fluffylabs/shared-ui";
+import { Slot } from "@radix-ui/react-slot";
 import React, { useEffect } from "react";
 import type { FC, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
@@ -88,7 +89,11 @@ export function Tabs({ tabs, activeTab, switchTab, alwaysRender, shortNameFallba
           }
           return (
             <React.Fragment key={tab.name}>
-              <div className={idx === activeTabIdx ? "min-h-0 flex items-stretch" : "hidden"}>{tab.render()}</div>
+              <div className={idx === activeTabIdx ? "min-h-0 flex" : "hidden"}>
+                <Slot className="w-full">
+                  <div>{tab.render()}</div>
+                </Slot>
+              </div>
             </React.Fragment>
           );
         })}

src/tailwind.css

@@ -1,20 +1,24 @@
 @import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
-
-.text-brand-dark {
-  color: var(--color-brand-dark);
-}
+@source "../node_modules/@fluffylabs/shared-ui/dist/";
 
 :root{
   --brand: rgb(97 237 226);
-  --brand-darkest: rgb(18 152 141);
-  --brand-darkest-2: rgb(14 116 107);
   --brand-light: rgb(200 243 240);
+  --brand-dark: rgb(18 152 141);
+  --brand-darkest: rgb(14 116 107);
 }
 
 .dark{
   --brand: rgb(97 237 226);
   --brand-light: rgb(200 243 240);
+  --brand-dark: rgb(18 152 141);
+  --brand-darkest: rgb(14 116 107);
 }
 
-@source "../node_modules/@fluffylabs/shared-ui/dist/";
+@theme{
+  --color-brand: var(--brand);
+  --color-brand-dark: var(--brand-dark);
+  --color-brand-darkest: var(--brand-darkest);
+  --color-brand-light: var(--brand-light);
+}