feat: Reduce duplicated photos in timeline.

darkobits · Jul 13, 2024 · 24c0700 · 24c0700
1 parent fb6d987
commit 24c0700
Show file tree

Hide file tree

Showing 12 changed files with 1,879 additions and 1,027 deletions.
diff --git a/nr.config.ts b/nr.config.ts
@@ -1,4 +1,4 @@
-import defineConfig, { type CommandOptions } from '@darkobits/nr';
+import { defineConfig, type CommandOptions } from '@darkobits/nr';
 import { defaultPackageScripts } from '@darkobits/ts';
 
 // TODO: Create a "serverless" template repo for boilerplate.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "help": "nr --scripts"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.596.0",
+    "@aws-sdk/client-s3": "^3.609.0",
     "@darkobits/env": "^2.0.0",
     "@darkobits/log": "2.0.0-beta.16",
     "@darkobits/react-kit": "^0.4.1",
@@ -26,8 +26,9 @@
     "camelcase": "^8.0.0",
     "chance": "^1.1.11",
     "classnames": "^2.5.1",
+    "consola": "^3.2.3",
     "date-fns": "^3.6.0",
-    "jotai": "^2.8.3",
+    "jotai": "^2.8.4",
     "jquery": "^3.7.1",
     "localforage": "^1.10.0",
     "mousetrap": "^1.6.5",
@@ -43,13 +44,13 @@
     "pretty-ms": "^9.0.0",
     "query-string": "^9.0.0",
     "ramda": "^0.30.1",
-    "react-bootstrap": "^2.10.2",
+    "react-bootstrap": "^2.10.4",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
     "style-object-to-css-string": "^1.1.3",
     "swipe-listener": "^1.3.0",
-    "tailwind-merge": "^2.3.0",
-    "throttle-debounce": "^5.0.0",
+    "tailwind-merge": "^2.4.0",
+    "throttle-debounce": "^5.0.2",
     "url-parse-lax": "^4.0.0",
     "use-async-effect": "^2.2.7",
     "use-query-params": "^2.2.1",
@@ -59,33 +60,34 @@
     "@darkobits/env": "^2.0.0",
     "@darkobits/fd-name": "^0.1.7",
     "@darkobits/log": "^2.0.0-beta.16",
-    "@darkobits/ts": "^0.20.9",
+    "@darkobits/ts": "^0.20.10",
     "@darkobits/tsx": "^0.12.13",
     "@darkobits/vite-plugin-favicons": "^0.3.2",
     "@fontsource/josefin-sans": "^5.0.20",
     "@serverless-stack/resources": "^1.18.4",
     "@tailwindcss/vite": "^4.0.0-alpha.16",
-    "@types/aws-lambda": "^8.10.138",
+    "@types/aws-lambda": "^8.10.140",
     "@types/chance": "^1.1.6",
     "@types/is-ci": "^3.0.4",
     "@types/mousetrap": "^1.6.15",
     "@types/ms": "^0.7.34",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.10",
     "@types/object-hash": "^3.0.6",
     "@types/parse-link-header": "^2.0.3",
-    "@types/ramda": "^0.30.0",
+    "@types/ramda": "^0.30.1",
     "@types/react-helmet": "^6.1.11",
     "@types/throttle-debounce": "^5.0.2",
     "@types/url-parse-lax": "^5.0.2",
     "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.4.19",
-    "aws-cdk-lib": "^2.146.0",
+    "aws-cdk-lib": "^2.148.0",
+    "csstype": "^3.1.3",
     "dotenv": "^16.4.5",
     "dotenv-cli": "^7.4.2",
     "node-machine-id": "^1.1.12",
     "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release-chrome": "^3.2.0",
-    "sst": "2.43.1",
+    "sst": "2.43.3",
     "tailwindcss": "4.0.0-alpha.16",
     "vite-plugin-pwa": "^0.20.0"
   }

diff --git a/src/web/components/Splash.tsx b/src/web/components/Splash.tsx
@@ -9,7 +9,6 @@ import SplashLower from 'web/components/SplashLower';
 import InspiratContext from 'web/contexts/Inspirat';
 import { BACKGROUND_TRANSITION_DURATION } from 'web/etc/constants';
 import { Logger } from 'web/lib/log';
-import { capitalizeWords } from 'web/lib/utils';
 
 import classes from './Splash.css';
 
@@ -20,25 +19,20 @@ const log = new Logger({ prefix: '🌅 •' });
 
 const INITIAL_LOAD_TRANSITION_DURATION = '0.5s';
 
-/**
- * TODO: Deprecate usage of maskColor and maskAmount overrides. Use photo
- * palette with a box-shadow around text instead.
- */
 export function Splash(props: ElementProps<HTMLDivElement>) {
   const { className, style, ...restProps } = props;
   const { currentPhoto } = React.useContext(InspiratContext);
   const [aPhoto, setAPhoto] = React.useState<InspiratPhotoResource | void>();
   const [bPhoto, setBPhoto] = React.useState<InspiratPhotoResource | void>();
   const [transitionDuration, setTransitionDuration] = React.useState(INITIAL_LOAD_TRANSITION_DURATION);
-  const [counter, setCounter] = React.useState(0);
-  const activeElement = counter % 2 === 0 ? 'A' : 'B';
+  const [activeElement, setActiveElement] = React.useState<'A' | 'B'>('B');
 
   /**
    * [Effect] Increment `counter` whenever the current photo changes.
    */
   React.useEffect(() => {
     if (!currentPhoto?.id) return;
-    setCounter(prev => prev + 1);
+    setActiveElement(prev => (prev === 'A' ? 'B' : 'A'));
   }, [currentPhoto?.id]);
 
   /**
@@ -61,7 +55,7 @@ export function Splash(props: ElementProps<HTMLDivElement>) {
       clearPhotoTimeoutHandle = setTimeout(() => setAPhoto(), ms(transitionDuration));
     }
 
-    log.debug(`${activeElement} • ${capitalizeWords(weight?.name ?? 'Unknown')} (${Number(weight?.value ?? 0).toFixed(2)}) - ${id}`);
+    log.debug(`${activeElement} • collection: ${weight?.name ?? 'unknown'} • weight: ${Number(weight?.value ?? 0).toFixed(2)} • id: ${id}`);
 
     let transitionDurationTimeoutHandle: NodeJS.Timeout;
 

diff --git a/src/web/components/dev-tools/Progress.tsx b/src/web/components/dev-tools/Progress.tsx
@@ -53,8 +53,8 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const whereTheCursorIs = useWhereTheCursorIs({
     enable: showTooltip,
-    xOffset: '0.46rem',
-    yOffset: '1.64rem'
+    xOffset: '0.32rem',
+    yOffset: '1.32rem'
   });
 
   const fgColor = currentPhoto?.palette?.muted ?? WHITE;
@@ -119,7 +119,14 @@ export function ProgressBar(props: ProgressBarProps) {
       >
         {overlayProps => (
           // eslint-disable-next-line react/jsx-props-no-spreading
-          <Tooltip id={tooltipId} {...overlayProps as any}>
+          <Tooltip
+            id={tooltipId}
+            className="
+              text-slate-100 text-sm font-thin bg-slate-950/90
+              py-1 px-2 rounded-md tracking-wide
+            "
+            {...overlayProps as any}
+          >
             {children}
           </Tooltip>
         )}

diff --git a/src/web/components/dev-tools/Swatch.css.ts b/src/web/components/dev-tools/Swatch.css.ts
@@ -11,24 +11,10 @@ export const vars = {
 
 export default {
   swatch: style({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-
+    backgroundColor: vars.backgroundColor,
     width: BASIS,
     height: BASIS,
-
-    backgroundColor: vars.backgroundColor,
-
-    borderRadius: '4px',
     border: vars.border,
-
-    color: vars.color,
-
-    fontSize: '12px',
-    textTransform: 'capitalize',
-
-    cursor: 'crosshair'
+    color: vars.color
   })
 };
diff --git a/src/web/components/dev-tools/Swatch.tsx b/src/web/components/dev-tools/Swatch.tsx
@@ -1,7 +1,8 @@
-import cx from 'classnames';
+/* eslint-disable react/jsx-props-no-spreading */
 import { darken, readableColor } from 'polished';
 import React from 'react';
 import { Overlay, Tooltip } from 'react-bootstrap';
+import { twMerge } from 'tailwind-merge';
 import { v4 as uuid } from 'uuid';
 
 import { Color } from 'etc/types';
@@ -25,7 +26,12 @@ export const Swatch = ({ color, children, className, style, ...props }: SwatchPr
 
   return (
     <div
-      className={cx(classes.swatch, className)}
+      className={twMerge(
+        'flex items-center justify-center shrink-0',
+        'rounded cursor-crosshair',
+        classes.swatch,
+        className
+      )}
       style={{
         backgroundColor: rgba(color ?? WHITE),
         border: `1px solid ${darken(0.2, rgba(color ?? BLACK, 0.42))}`,
@@ -35,7 +41,6 @@ export const Swatch = ({ color, children, className, style, ...props }: SwatchPr
       ref={tooltipTarget}
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >
       <Overlay
@@ -45,8 +50,14 @@ export const Swatch = ({ color, children, className, style, ...props }: SwatchPr
         flip
       >
         {overlayProps => (
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          <Tooltip id={tooltipId} {...overlayProps as any}>
+          <Tooltip
+            id={tooltipId}
+            className="
+              text-slate-100 text-sm font-mono font-thin bg-slate-950/90
+              py-1 px-2 rounded-md
+            "
+            {...overlayProps as any}
+          >
             {children}
           </Tooltip>
         )}