Merge pull request #274 from PRIME-TU-Delft/added-niceties

Added niceties

.prettierrc

@@ -3,7 +3,7 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [
     {
       "files": "*.svelte",

package.json

@@ -41,10 +41,11 @@
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
     "lucide-svelte": "^0.456.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "storybook": "^8.4.2",
-    "svelte": "^5.0.0",
+    "svelte": "^5.3.1",
     "svelte-check": "^4.0.0",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.3.0",
@@ -55,6 +56,7 @@
     "vite": "^5.0.3"
   },
   "dependencies": {
+    "@number-flow/svelte": "^0.2.1",
     "@sveltejs/adapter-netlify": "^4.3.6",
     "@sveltejs/adapter-node": "^5.2.9",
     "@threlte/core": "8.0.0-next.30",

src/app.css

@@ -3,10 +3,14 @@
 @tailwind utilities;
 
 @layer base {
+  * {
+    @apply border-border;
+  }
+
   html,
   body {
     height: 100%;
-    @apply bg-blue-800;
+    @apply bg-blue-100;
   }
 
   .latex .katex-display {
@@ -78,12 +82,3 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

src/lib/components/ActionButtonsAndFormula.svelte

@@ -54,13 +54,13 @@
   );
 </script>
 
-<div class="absolute top-1 right-0 select-none">
+<div class="absolute right-0 top-1 select-none">
   <!-- FORMULAE -->
   {#if formulasShown}
     <div class="flex justify-end">
       {#if formulas && formulas.length >= 1}
         <div
-          class="mr-2 grid gap-1 bg-blue-50/80 backdrop-blur-md p-2 rounded-md shadow-sm text-xs border-blue-500 border-3"
+          class="border-3 mr-2 grid gap-1 rounded-md border-blue-500 bg-blue-50/80 p-2 text-xs shadow-sm backdrop-blur-md"
         >
           {#each formulas as formula}
             {#key formula.stringFormula}
@@ -71,7 +71,7 @@
       {/if}
 
       {#if splitFormulas && splitFormulas.length >= 1}
-        <div class="grid gap-1 bg-blue-50/80 backdrop-blur-md p-2 rounded-md shadow-sm text-xs">
+        <div class="grid gap-1 rounded-md bg-blue-50/80 p-2 text-xs shadow-sm backdrop-blur-md">
           {#each splitFormulas as formula}
             {#key formula.stringFormula}
               <LatexUI latex={formula.stringFormula} />
@@ -83,25 +83,25 @@
   {/if}
 
   <!-- ACTION BUTTON -->
-  <div class="float-end right-0 top-0 p-1 flex">
+  <div class="right-0 top-0 float-end flex p-1">
     {#if !controls || controls.length == 0}
       <Button.Action
         side="bottom"
-        class="!bg-blue-200/80 scale-[0.8] hover:!bg-blue-300/80 backdrop-blur-md rounded-md shadow-sm"
+        class="scale-[0.8] rounded-md !bg-blue-200/80 shadow-sm backdrop-blur-md hover:!bg-blue-300/80"
         onclick={onReset}
         tooltip="Will reset the scene to original camera positions"
       >
-        <RotateCcw class="w-5 h-5" />
+        <RotateCcw class="h-5 w-5" />
       </Button.Action>
     {/if}
 
     <!-- SHARE BUTTON -->
     <Dialog.Root>
       <Dialog.Trigger
-        class="bg-blue-200/80 scale-[0.8] hover:bg-blue-300/80 backdrop-blur-md rounded-md shadow-sm"
+        class="scale-[0.8] rounded-md bg-blue-200/80 shadow-sm backdrop-blur-md hover:bg-blue-300/80"
       >
         <Button.Action side="bottom" tooltip="Share or embed applet">
-          <Share class="w-5 h-5" />
+          <Share class="h-5 w-5" />
         </Button.Action>
       </Dialog.Trigger>
       <ShareWindow />
@@ -111,14 +111,14 @@
     {#if screenfull.isEnabled && document}
       <Button.Action
         side="bottom"
-        class="!bg-blue-200/80 scale-[0.8] hover:!bg-blue-300/80 backdrop-blur-md rounded-md shadow-sm"
+        class="scale-[0.8] rounded-md !bg-blue-200/80 shadow-sm backdrop-blur-md hover:!bg-blue-300/80"
         onclick={toggleFullscreen}
         tooltip="{isFullscreen ? 'Exit' : 'Enter'} fullscreen"
       >
         {#if isFullscreen}
-          <Minimize class="w-5 h-5" />
+          <Minimize class="h-5 w-5" />
         {:else}
-          <Maximize class="w-5 h-5" />
+          <Maximize class="h-5 w-5" />
         {/if}
       </Button.Action>
     {/if}
@@ -129,7 +129,7 @@
         side="bottom"
         class="{!formulasShown
           ? '!bg-blue-200/80 hover:!bg-blue-300/80'
-          : '!bg-blue-400/80 hover:!bg-blue-200/80'} scale-[0.8]  backdrop-blur-md rounded-md shadow-sm border-blue-500 border-0 {showFormulas
+          : '!bg-blue-400/80 hover:!bg-blue-200/80'} scale-[0.8]  rounded-md border-0 border-blue-500 shadow-sm backdrop-blur-md {showFormulas
           ? 'border-2'
           : ''}"
         tooltip="Toggle function"

src/lib/components/ActivityPanel.svelte

@@ -14,28 +14,28 @@
 </script>
 
 <div
-  class="flex gap-1 hover:scale-105 text-blue-900 scale-100 transition-transform backdrop-blur-md bg-blue-200/70 shadow-md rounded-lg absolute bottom-2 left-1/2 -translate-x-1/2 items-center"
+  class="absolute bottom-2 left-1/2 flex -translate-x-1/2 scale-100 items-center gap-1 rounded-lg bg-blue-200/70 text-blue-900 shadow-md backdrop-blur-md transition-transform hover:scale-105"
   class:m-2={globalState.isInset()}
 >
   {#if !activityState.isActive}
-    <div class="px-4 py-1 relative sm:text-nowrap text-balance text-center items-center flex gap-2">
-      <Button.Action class="w-6 h-6" tooltip="Lock scene">
-        <Unlock class="bg-blue-200 hover:bg-blue-300 p-1 w-6 h-6 rounded-sm transition-colors" />
+    <div class="relative flex items-center gap-2 text-balance px-4 py-1 text-center sm:text-nowrap">
+      <Button.Action class="h-6 w-6" tooltip="Lock scene">
+        <Unlock class="h-6 w-6 rounded-sm bg-blue-200 p-1 transition-colors hover:bg-blue-300" />
       </Button.Action>
       Click anywhere in the scene to start interacting
       <span class="absolute -right-1 -top-1 flex h-3 w-3">
         <span
-          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"
+          class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"
         ></span>
-        <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
+        <span class="relative inline-flex h-3 w-3 rounded-full bg-blue-500"></span>
       </span>
     </div>
   {:else}
     <button class="px-1 py-1" onclick={(e) => onLock(e)}>
       <Dialog.Root>
-        <Dialog.Trigger class="rounded-sm bg-blue-200 hover:bg-blue-300 transition-colors">
-          <Button.Action class="w-6 h-6" tooltip="Lock scene">
-            <Lock class="w-4 h-4 pt-0.5" />
+        <Dialog.Trigger class="rounded-sm bg-blue-200 transition-colors hover:bg-blue-300">
+          <Button.Action class="h-6 w-6" tooltip="Lock scene">
+            <Lock class="h-4 w-4 pt-0.5" />
           </Button.Action>
         </Dialog.Trigger>
       </Dialog.Root>

src/lib/components/Button.svelte

@@ -13,7 +13,7 @@
 
 <div class="tooltip tooltip-top" data-tip="Action for applet">
   <ShadCNButton.Action
-    class="text-white text-nowrap w-full p-2"
+    class="w-full text-nowrap p-2 text-white"
     --bg={color}
     --hover-bg={color + PrimeColor.opacity(0.8)}
     tooltip="Action for applet"

src/lib/components/ControllerAndActivityPanel.svelte

@@ -39,7 +39,7 @@
   class:inset={globalState.isInset()}
 >
   <div
-    class="py-2 px-3 rounded-lg flex gap-1 items-center shadow-md bg-blue-50/70 backdrop-blur-md"
+    class="flex items-center gap-1 rounded-lg bg-blue-50/70 px-3 py-2 shadow-md backdrop-blur-md"
   >
     {#each controls.controls as controller, index}
       {#if controller instanceof Slider}
@@ -76,21 +76,21 @@
     translate={activityState.isActive
       ? 'left-1/2 -translate-x-1/2 top-5 scale-0'
       : 'left-1/2 -translate-x-1/2  -top-7 sm:-top-6 scale-100 motion-safe:hover:scale-105'}
-    class="w-full h-full text-nowrap"
+    class="h-full w-full text-nowrap"
     tooltip="Start the scene so you can interact"
   >
     <div
-      class="px-4 py-1 relative sm:text-nowrap text-balance text-center items-center flex gap-2 text-xs min-w-[16rem]"
+      class="relative flex min-w-[16rem] items-center gap-2 text-balance px-4 py-1 text-center text-xs sm:text-nowrap"
     >
-      <ShadCNButton.Action class="w-6 h-6" tooltip="Lock scene">
-        <Unlock class="bg-blue-200 hover:bg-blue-300 p-1 w-6 h-6 rounded-sm transition-colors" />
+      <ShadCNButton.Action class="h-6 w-6" tooltip="Lock scene">
+        <Unlock class="h-6 w-6 rounded-sm bg-blue-200 p-1 transition-colors hover:bg-blue-300" />
       </ShadCNButton.Action>
       Click anywhere in the scene to start interacting
       <span class="absolute -right-1 -top-1 flex h-3 w-3">
         <span
-          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"
+          class="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75"
         ></span>
-        <span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
+        <span class="relative inline-flex h-3 w-3 rounded-full bg-blue-500"></span>
       </span>
     </div>
   </SideButton>
@@ -104,7 +104,7 @@
     tooltip="Lock the scene so you can scroll again"
     class="w-10 sm:w-16"
   >
-    <span class="text-xs mr-0.5 hidden sm:block">Lock</span>
+    <span class="mr-0.5 hidden text-xs sm:block">Lock</span>
     <Lock class="h-4 w-4" />
   </SideButton>
 
@@ -118,7 +118,7 @@
     class="w-10 sm:w-16"
   >
     <RotateCcw class="h-4 w-4" />
-    <span class="ml-0.5 text-xs hidden sm:block">Reset</span>
+    <span class="ml-0.5 hidden text-xs sm:block">Reset</span>
   </SideButton>
 </div>
 

src/lib/components/Embedding.svelte

@@ -68,7 +68,7 @@
   }
 </script>
 
-<div class="flex items-center gap-2 mb-4">
+<div class="mb-4 flex items-center gap-2">
   <Checkbox id="include-state" bind:checked={includeState} />
   <Label
     for="include-state"
@@ -88,20 +88,20 @@
 <div class="relative h-full w-full">
   <Textarea readonly value={stateUrl} />
   {#if showCopySucess}
-    <div class="absolute left-1 bottom-1 text-green-700" in:fly={{ y: 20 }}>
+    <div class="absolute bottom-1 left-1 text-green-700" in:fly={{ y: 20 }}>
       Copied to clipboard!
     </div>
   {/if}
 </div>
 
-<div class="flex gap-2 mt-2 overflow-x-auto">
+<div class="mt-2 flex gap-2 overflow-x-auto">
   <Button onclick={() => copyToClipboard()}>
-    Copy to clipboard <Copy class="size-4 ml-2" />
+    Copy to clipboard <Copy class="ml-2 size-4" />
   </Button>
 
   <a href={stateUrl} target="_blank">
     <Button>
-      Open in new tab <ExternalLink class="size-4 ml-2" />
+      Open in new tab <ExternalLink class="ml-2 size-4" />
     </Button>
   </a>
 
@@ -110,7 +110,7 @@
       Open in GitHub
 
       <svg
-        class="size-4 ml-2"
+        class="ml-2 size-4"
         width="98"
         height="96"
         xmlns="http://www.w3.org/2000/svg"

src/lib/components/Scene.svelte

@@ -86,7 +86,7 @@
 </script>
 
 <div
-  class="outerWrapper overflow-hidden h-full bg-gradient-to-bl transition-all duration-500 from-white to-white p-2"
+  class="outerWrapper h-full overflow-hidden bg-gradient-to-bl from-white to-white p-2 transition-all duration-500"
   class:active={activityState.isActive}
   use:initScene
 >
@@ -107,7 +107,7 @@
     onmouseleave={() => waitThenReset()}
   >
     <!-- MARK: THRELTE/D3 SCENE (centre) -->
-    <div class="flex w-full h-full divide-x-2 divide-slate-400 gap-3 bg-white">
+    <div class="flex h-full w-full gap-3 divide-x-2 divide-slate-400 bg-white">
       {#if sceneChildren && width > 0}
         {@render sceneChildren(width, height)}
       {:else}
@@ -117,7 +117,7 @@
 
     <!-- MARK: TITLE PANEL (top-left) -->
     {#if globalState.title && globalState.isInset()}
-      <div class="absolute left-2 top-2 bg-blue-200 rounded p-2">
+      <div class="absolute left-2 top-2 rounded bg-blue-200 p-2">
         {globalState.title}
       </div>
     {/if}

src/lib/components/ShareWindow.svelte

@@ -6,7 +6,7 @@
   import Embedding from './Embedding.svelte';
 </script>
 
-<Dialog.Content class="sm:max-w-xl block">
+<Dialog.Content class="block sm:max-w-xl">
   <Dialog.Header>
     <Dialog.Title>Share and embed</Dialog.Title>
     <Dialog.Description>
@@ -15,7 +15,7 @@
         class="flex items-center gap-1"
         href="https://prime.pages.ewi.tudelft.nl/openlabook-published/index.html"
       >
-        TU Delft Open Linear Algebra book <ExternalLink class="w-4 h-4" /></a
+        TU Delft Open Linear Algebra book <ExternalLink class="h-4 w-4" /></a
       >
       For more information about these applets, please visit
       <a href="https://openla.ewi.tudelft.nl/applet">https://www.openla.ewi.tudelft.nl/applet</a>
@@ -63,7 +63,7 @@
       </Accordion.Root>
     </Dialog.Description>
   </Dialog.Header>
-  <Dialog.Footer class="bg-slate-300/70 w-full rounded p-2 my-4">
+  <Dialog.Footer class="my-4 w-full rounded bg-slate-300/70 p-2">
     <img
       class="h-24 w-full object-contain"
       alt="prime-tudelft"

src/lib/components/controls/Matrix.svelte

@@ -8,8 +8,8 @@
   const { controller }: { controller: Matrix } = $props();
 </script>
 
-<div class="flex gap-1 items-center">
-  <div class="flex gap-1 flex-col items-center">
+<div class="flex items-center gap-1">
+  <div class="flex flex-col items-center gap-1">
     {#if controller.label}
       <Latex
         latex={controller.label + ':'}
@@ -18,7 +18,7 @@
       />
     {/if}
     <button
-      class="py-1 px-2 text-center bg-gray-200 hover:bg-gray-400 transition-colors rounded-md cursor-pointer"
+      class="cursor-pointer rounded-md bg-gray-200 px-2 py-1 text-center transition-colors hover:bg-gray-400"
       onclick={() => controller.toggleAvailability()}
     >
       {#if controller.disabled}
@@ -33,28 +33,28 @@
     latex="\Bigg["
     color={controller.disabled ? PrimeColor.black + PrimeColor.opacity(0.5) : '#000'}
   />
-  <div class="grid grid-cols-2 gap-2 max-w-28 text-sm" class:disabled={controller.disabled}>
+  <div class="grid max-w-28 grid-cols-2 gap-2 text-sm" class:disabled={controller.disabled}>
     <input
       type="number"
-      class="w-full p-1 text-center bg-gray-200 rounded-md"
+      class="w-full rounded-md bg-gray-200 p-1 text-center"
       disabled={controller.disabled}
       bind:value={controller.value.tl}
     />
     <input
       type="number"
-      class="w-full p-1 text-center bg-gray-200 rounded-md"
+      class="w-full rounded-md bg-gray-200 p-1 text-center"
       disabled={controller.disabled}
       bind:value={controller.value.tr}
     />
     <input
       type="number"
-      class="w-full p-1 text-center bg-gray-200 rounded-md"
+      class="w-full rounded-md bg-gray-200 p-1 text-center"
       disabled={controller.disabled}
       bind:value={controller.value.bl}
     />
     <input
       type="number"
-      class="w-full p-1 text-center bg-gray-200 rounded-md"
+      class="w-full rounded-md bg-gray-200 p-1 text-center"
       disabled={controller.disabled}
       bind:value={controller.value.br}
     />