feat: redesign

apps/web/index.html

@@ -12,7 +12,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="preload"
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@300;500;600;700&display=swap" rel="stylesheet"
       as="style"
       onload="this.onload=null;this.rel='stylesheet'"
     />

apps/web/package.json

@@ -23,12 +23,14 @@
     "clsx": "^2.1.1",
     "idb-keyval": "^6.2.1",
     "jotai": "^2.12.0",
+    "jotai-effect": "^2.0.1",
     "jotai-optics": "^0.4.0",
     "lucide-react": "^0.475.0",
     "optics-ts": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2"
+    "react-hook-form": "^7.54.2",
+    "react-hotkeys-hook": "^4.6.1"
   },
   "devDependencies": {
     "@lingui/cli": "^5.2.0",

apps/web/src/App.tsx

@@ -1,34 +1,58 @@
-import { Trans } from '@lingui/react/macro';
-import { TooltipProvider } from '@workspace/ui/components/tooltip';
-import { siteConfig } from '@/config/site';
-import { I18nProvider } from '@/components/I18nProvider';
+import { Suspense } from 'react';
+import { LoaderCircle } from 'lucide-react';
+import { Separator } from '@workspace/ui/components/separator';
+import { AppProvider } from '@/components/AppProvider';
 import { ChangeTheme } from '@/components/ChangeTheme';
-import { Editor } from '@/components/Editor';
+import { ChangeWaveFunction } from '@/components/ChangeWaveFunction';
+import { CopyImage } from '@/components/CopyImage';
+import { ExportImage } from '@/components/ExportImage';
+import { Graphics } from '@/components/Graphics';
+import { ImportImages } from '@/components/ImportImages';
+import { NoImages } from '@/components/NoImages';
+import { OptimizeWaveform } from '@/components/OptimizeWaveform';
+import { RemoveImages } from '@/components/RemoveImages';
+import { ReverseImages } from '@/components/ReverseImages';
+import { Waveform } from '@/components/Waveform';
 
 export function App() {
   return (
-    <I18nProvider>
-      <TooltipProvider>
-        <main className="sm:container">
-          <Editor />
+    <AppProvider>
+      <div className="bg-grid pointer-events-none absolute inset-0 [mask-image:linear-gradient(180deg,#fff_5%,transparent_80%)] select-none"></div>
+      <div className="relative grid h-dvh w-dvw grid-rows-[auto_1fr_auto] overflow-hidden">
+        <header className="grid grid-cols-[1fr_2fr_1fr] items-center p-2.5 sm:p-5">
+          <section className="col-start-2 justify-self-center">
+            <div className="bg-card flex items-center rounded-md border p-1 shadow-xs sm:gap-1">
+              <ImportImages variant="ghost" />
+              <ExportImage />
+              <CopyImage />
+              <Separator orientation="vertical" className="h-4" />
+              <ReverseImages variant="ghost" />
+              <OptimizeWaveform />
+              <ChangeWaveFunction />
+              <Separator orientation="vertical" className="h-4" />
+              <RemoveImages variant="ghost" />
+            </div>
+          </section>
+          <ChangeTheme className="justify-self-end" />
+        </header>
+
+        <main className="grid place-items-center overflow-auto p-20">
+          <Suspense
+            fallback={<LoaderCircle className="size-12 animate-spin" />}
+          >
+            <Graphics
+              className="h-full w-full drop-shadow-2xl"
+              fallback={<NoImages />}
+            />
+          </Suspense>
         </main>
-        <footer className="flex flex-col items-center justify-between gap-4 py-8 sm:container sm:flex-row">
-          <p className="text-muted-foreground text-center text-sm">
-            <Trans>
-              Built by{' '}
-              <a href={siteConfig.links.author} target="_blank">
-                gzukas
-              </a>
-              . The source code is available on{' '}
-              <a href={siteConfig.links.github} target="_blank">
-                GitHub
-              </a>
-              .
-            </Trans>
-          </p>
-          <ChangeTheme />
+
+        <footer className="p-5 pb-8 sm:pb-12">
+          <section className="mx-auto grid max-w-4xl grid-cols-1 gap-12 sm:grid-cols-3">
+            <Waveform />
+          </section>
         </footer>
-      </TooltipProvider>
-    </I18nProvider>
+      </div>
+    </AppProvider>
   );
 }

apps/web/src/atoms/importAtoms.ts

@@ -10,7 +10,7 @@ const importAbortControllerAtom = atom<AbortController | null>(null);
 
 export const importSignalAtom = atom(
   get => get(importAbortControllerAtom)?.signal,
-  (get, set, refresh: boolean) => {
+  (get, set, refresh?: boolean) => {
     get(importAbortControllerAtom)?.abort();
     set(importAbortControllerAtom, refresh ? new AbortController() : null);
   }

apps/web/src/atoms/largestImageAtom.ts

@@ -4,12 +4,10 @@ import { unwrap } from 'jotai/utils';
 
 export const largestImageAtom = atom(async get => {
   const images = await get(imagesAtom);
-  const imagesByArea = [...images].sort(
-    (a, b) => a.width * a.height - b.width * b.height
-  );
-  return imagesByArea.length
-    ? imagesByArea[imagesByArea.length - 1]
-    : undefined;
+  const largestImage = [...images]
+    .sort((a, b) => a.width * a.height - b.width * b.height)
+    .pop();
+  return largestImage;
 });
 
 export const unwrappedLargestImageAtom = unwrap(largestImageAtom);

apps/web/src/atoms/localeAtoms.ts

@@ -0,0 +1,22 @@
+import { atom } from 'jotai';
+import { observe } from 'jotai-effect';
+import { atomWithStorage } from 'jotai/utils';
+import { setupI18n } from '@lingui/core';
+import { messages as enMessages } from '@/locales/en';
+
+export const i18nAtom = atom(
+  setupI18n({
+    messages: {
+      en: enMessages
+    }
+  })
+);
+
+export const localeAtom = atomWithStorage('locale', 'en', undefined, {
+  getOnInit: true
+});
+
+observe(get => {
+  const i18n = get.peek(i18nAtom);
+  i18n.activate(get(localeAtom));
+});

apps/web/src/atoms/waveAtom.ts

@@ -25,14 +25,14 @@ export const waveAtom = atom(get => {
 
   const { width, height } = largestImage;
   const halfHeight = height / 2;
-  const ys = [halfHeight];
-  let py = halfHeight;
+  let prevY = halfHeight;
+  const ys = [prevY];
 
   for (let x = 0; x <= width; x++) {
     const y =
       amplitude * waveFunction((2 * Math.PI * x) / wavelength) + halfHeight;
-    ys.push(round(y - py));
-    py = y;
+    ys.push(round(y - prevY));
+    prevY = y;
   }
 
   return `m0 ${ys.join(' 1 ')} V0H0Z`;

apps/web/src/atoms/waveformAtoms.ts

@@ -1,45 +1,92 @@
 import { atom } from 'jotai';
 import { focusAtom } from 'jotai-optics';
 import { atomWithStorage } from 'jotai/utils';
+import { createCountReducer } from '@/utils/createCountReducer';
+import { reducerAtom } from '@/utils/reducerAtom';
 
+const STEP_PERCENTAGE = 0.01;
+
+export const MIN_ROTATION = 0;
+export const MAX_ROTATION = 360;
 export const MIN_WAVELENGTH = 9;
 export const MIN_AMPLITUDE = 0;
 
 export interface Waveform {
   rotation: number;
   wavelength: number;
-  wavelengthMax?: number;
+  wavelengthMax: number;
   amplitude: number;
-  amplitudeMax?: number;
+  amplitudeMax: number;
 }
 
 export const waveformAtom = atomWithStorage<Waveform>(
   'waveform',
-  { rotation: 0, wavelength: MIN_WAVELENGTH, amplitude: MIN_AMPLITUDE },
+  {
+    rotation: 0,
+    wavelength: MIN_WAVELENGTH,
+    amplitude: MIN_AMPLITUDE,
+    wavelengthMax: MIN_WAVELENGTH + 1,
+    amplitudeMax: MIN_AMPLITUDE + 1
+  },
   undefined,
   { getOnInit: true }
 );
 
-export const rotationAtom = focusAtom(waveformAtom, optic =>
+// Rotation
+
+export const baseRotationAtom = focusAtom(waveformAtom, optic =>
   optic.prop('rotation')
 );
 
-export const wavelengthAtom = focusAtom(waveformAtom, optic =>
-  optic.prop('wavelength')
+export const rotationAtom = reducerAtom(
+  baseRotationAtom,
+  createCountReducer({
+    min: MIN_ROTATION,
+    max: MAX_ROTATION,
+    step: Math.abs(MAX_ROTATION - MIN_ROTATION) * STEP_PERCENTAGE
+  })
 );
 
-export const amplitudeAtom = focusAtom(waveformAtom, optic =>
-  optic.prop('amplitude')
+// Wavelength
+
+export const baseWavelengthAtom = focusAtom(waveformAtom, optic =>
+  optic.prop('wavelength')
 );
 
 export const wavelengthMaxAtom = focusAtom(waveformAtom, optic =>
   optic.prop('wavelengthMax')
 );
 
+export const wavelengthAtom = reducerAtom(
+  baseWavelengthAtom,
+  createCountReducer({
+    min: MIN_WAVELENGTH,
+    max: get => get(wavelengthMaxAtom),
+    step: get =>
+      Math.abs(MIN_WAVELENGTH - get(wavelengthMaxAtom)) * STEP_PERCENTAGE
+  })
+);
+
+// Amplitude
+
+export const baseAmplitudeAtom = focusAtom(waveformAtom, optic =>
+  optic.prop('amplitude')
+);
+
 export const amplitudeMaxAtom = focusAtom(waveformAtom, optic =>
   optic.prop('amplitudeMax')
 );
 
+export const amplitudeAtom = reducerAtom(
+  baseAmplitudeAtom,
+  createCountReducer({
+    min: MIN_AMPLITUDE,
+    max: get => get(amplitudeMaxAtom),
+    step: get =>
+      Math.abs(MIN_AMPLITUDE - get(amplitudeMaxAtom)) * STEP_PERCENTAGE
+  })
+);
+
 export const optimizeWaveformAtom = atom(
   null,
   (_get, set, image?: HTMLImageElement) => {

apps/web/src/components/AppProvider.tsx

@@ -0,0 +1,14 @@
+import { useAtomValue } from 'jotai';
+import { I18nProvider } from '@lingui/react';
+import { TooltipProvider } from '@workspace/ui/components/tooltip';
+import { i18nAtom } from '@/atoms/localeAtoms';
+
+export function AppProvider(props: React.PropsWithChildren<unknown>) {
+  const i18n = useAtomValue(i18nAtom);
+
+  return (
+    <I18nProvider i18n={i18n}>
+      <TooltipProvider>{props.children}</TooltipProvider>
+    </I18nProvider>
+  );
+}

apps/web/src/components/AtomSlider.tsx

@@ -1,32 +1,63 @@
-import { PrimitiveAtom, useAtom } from 'jotai';
+import { useAtom, WritableAtom } from 'jotai';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { LabelProps } from '@radix-ui/react-label';
 import { cn } from '@workspace/ui/lib/utils';
 import { Label } from '@workspace/ui/components/label';
 import { Slider } from '@workspace/ui/components/slider';
+import { CountAction } from '@/utils/createCountReducer';
+import { Shortcut } from '@/components/Shortcut';
 
 export interface AtomSliderProps
-  extends Omit<React.ComponentProps<typeof Slider>, 'value' | 'onValueCHange'> {
-  atom: PrimitiveAtom<number>;
+  extends Omit<React.ComponentProps<typeof Slider>, 'value' | 'onValueChange'> {
+  atom: WritableAtom<number, [CountAction], void>;
   label: React.ReactNode;
-  LabelProps?: Partial<LabelProps>;
-  renderValue?: (value: number) => React.ReactNode;
+  labelProps?: Partial<LabelProps>;
+  hotkeys?: [incrementHotkey: string, decrementHotkey: string];
 }
 
 export function AtomSlider(props: AtomSliderProps) {
-  const { atom, className, label, LabelProps, renderValue, ...other } = props;
-  const [value, setValue] = useAtom(atom);
+  const { atom, className, label, labelProps, hotkeys = [], ...other } = props;
+  const [value, dispatch] = useAtom(atom);
+  const [incrementHotkey] = hotkeys;
 
   const handleValueChange = ([value]: number[]) => {
-    setValue(value);
+    dispatch({ type: 'CHANGE', value });
   };
 
+  useHotkeys(
+    hotkeys,
+    (_, { hotkey }) => {
+      dispatch({
+        type: hotkey === incrementHotkey ? 'INCREMENT' : 'DECREMENT'
+      });
+    },
+    { enabled: !!hotkeys.length && !other.disabled }
+  );
+
   return (
     <div className={cn('grid gap-4', className)}>
       <div className="flex items-center justify-between">
-        <Label {...LabelProps}>{label}</Label>
-        <span className="text-muted-foreground text-right text-sm">
-          {renderValue?.(value)}
-        </span>
+        <Label
+          {...labelProps}
+          className={cn(
+            { 'text-muted-foreground': other.disabled },
+            labelProps?.className
+          )}
+        >
+          {label}
+        </Label>
+        {hotkeys.length > 0 && (
+          <div className="flex gap-1.5 text-right">
+            {hotkeys.map(hotkey => (
+              <Shortcut
+                key={hotkey}
+                keys={hotkey}
+                variant="outline"
+                size="sm"
+              />
+            ))}
+          </div>
+        )}
       </div>
       <Slider value={[value]} onValueChange={handleValueChange} {...other} />
     </div>