PEMDAS (and making DocumentThumbnail stateless)

package.json

@@ -56,14 +56,14 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/addon-svelte-csf": "^4.0.13",
-    "@storybook/blocks": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-svelte-csf": "^4.1.0",
+    "@storybook/blocks": "^7.6.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/svelte": "^7.6.4",
-    "@storybook/svelte-webpack5": "^7.6.4",
+    "@storybook/svelte": "^7.6.10",
+    "@storybook/svelte-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
     "@types/lucene": "^2.1.7",
     "chromatic": "^9.1.0",
@@ -79,7 +79,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "serve": "^14.2.0",
-    "storybook": "7.6.4",
+    "storybook": "7.6.10",
     "storybook-mock-date-decorator": "^1.0.1",
     "svelte-jester": "^3.0.0",
     "tape": "^5.7.2",

src/common/Loader.svelte

@@ -81,6 +81,7 @@
     z-index: var(--spinnerZ, 8);
     opacity: 0;
   }
+
   .spinner.big {
     border: var(--bigBordersize, 7px) solid transparent;
     border-top: var(--bigBordersize, 7px) solid var(--gray, rgba(0, 0, 0, 0.53));
@@ -95,16 +96,18 @@
 
   .spinner.center {
     top: calc(
-      50% - var(--smallSpinsize, 10px) / 2 + var(--smallBordersize, 4px)
+      50% - (var(--smallSpinsize, 10px) / 2 + var(--smallBordersize, 4px))
     );
     left: calc(
-      50% - var(--smallSpinsize, 10px) / 2 + var(--smallBordersize, 4px)
+      50% - (var(--smallSpinsize, 10px) / 2 + var(--smallBordersize, 4px))
     );
   }
 
   .spinner.center.big {
-    top: calc(50% - var(--bigSpinsize, 17px) / 2 + var(--bigBordersize, 7px));
-    left: calc(50% - var(--bigSpinsize, 17px) / 2 + var(--bigBordersize, 7px));
+    top: calc(50% - (var(--bigSpinsize, 17px) / 2 + var(--bigBordersize, 7px)));
+    left: calc(
+      50% - (var(--bigSpinsize, 17px) / 2 + var(--bigBordersize, 7px))
+    );
   }
 
   .loader .spinner {

src/common/stories/Loader.stories.svelte

@@ -0,0 +1,60 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Loader from "../Loader.svelte";
+
+  const args = {
+    active: true,
+  };
+
+  export const meta = {
+    title: "Common / Loader",
+    component: Loader,
+    tags: ["autodocs"],
+    parameters: {
+      layout: "centered",
+    },
+  };
+
+  /*
+  export const Active: Story = { args };
+  export const Centered: Story = { args: { ...args, center: true } };
+  export const Big: Story = { args: { ...args, big: true } };
+  export const Inline: Story = { args: { ...args, inline: true } };
+  export const Transparent: Story = { args: { ...args, transparent: true } };
+  export const Padded: Story = { args: { ...args, pad: true } };
+  */
+</script>
+
+<Template let:args>
+  <div class="container">
+    <Loader {...args}>
+      <p>Loaded content</p>
+    </Loader>
+  </div>
+</Template>
+
+<Story name="default" {args} />
+
+<Story name="centered" args={{ ...args, centered: true }} />
+
+<Story name="big" args={{ ...args, big: true }}></Story>
+
+<Story name="inline" args={{ ...args, inline: true }}></Story>
+
+<Story name="transparent" args={{ ...args, transparent: true }}></Story>
+
+<Story name="padded" args={{ ...args, padded: true }}></Story>
+
+<style>
+  .container {
+    border: 1px solid gray;
+    height: 120px;
+    width: 80px;
+  }
+
+  .container p {
+    margin: 50% auto;
+    position: relative;
+    text-align: center;
+  }
+</style>

src/pages/FlatPage.svelte

@@ -169,22 +169,22 @@
     document.documentElement.style.scrollBehavior = "auto";
   });
 </script>
 
 <svelte:head>
   <title>{title} | DocumentCloud</title>
 </svelte:head>
 
 <div class="page">
   <header>
     <div class="logo">
       {#if inIframe()}
         <a href={APP_URL} target="_blank" rel="noreferrer noopener"
           >{@html mastLogoSvg}</a
         >
       {:else}
-        <Link to="app">
+        <a href={APP_URL}>
           {@html mastLogoSvg}
-        </Link>
+        </a>
       {/if}
     </div>
   </header>