refactor(frontend): improve code readability

apps/frontend/src/app/globals.css

@@ -10,7 +10,7 @@
 
   --layout-header-height: 49px; /* var(--space-8) + 1px */
   --layout-content-height: calc(100dvh - var(--layout-header-height) + 1px);
-  --app-footer-height: 64px; /* var(--space-9) */
+  --processing-footer-height: 64px; /* var(--space-9) */
 }
 
 * {

apps/frontend/src/app/page.module.css → apps/frontend/src/app/home/page.module.css

@@ -1,5 +1,5 @@
 .root {
-  --content-height: calc(var(--layout-content-height) - var(--app-footer-height));
+  --content-height: calc(var(--layout-content-height) - var(--processing-footer-height));
 
   height: var(--layout-content-height);
 }

apps/frontend/src/app/home/page.tsx

@@ -0,0 +1,29 @@
+import { Flex, ScrollArea } from '@radix-ui/themes'
+
+import { ImagePreview } from '@widgets/ImagePreview'
+import { SettingsPanel } from '@widgets/SettingsPanel'
+import { ProcessingFooter } from '@widgets/ProcessingFooter'
+import type { FlexDirection } from '@lib/theme'
+import styles from './page.module.css'
+
+const mainDirection: FlexDirection = {
+  initial: 'column',
+  md: 'row'
+} as const
+
+const HomePage = () => (
+  <Flex width='100%' align='center' direction='column' className={styles.root}>
+    <ScrollArea scrollbars='vertical' size='1' className={styles.scrollArea}>
+      <Flex asChild justify='end' direction={mainDirection} width='100%' className={styles.main}>
+        <main>
+          <ImagePreview />
+          <SettingsPanel />
+        </main>
+      </Flex>
+    </ScrollArea>
+
+    <ProcessingFooter />
+  </Flex>
+)
+
+export default HomePage

apps/frontend/src/app/page.tsx

@@ -1,28 +1 @@
-import { Flex, ScrollArea } from '@radix-ui/themes'
-
-import { Preview } from '@widgets/Preview'
-import { SettingsPanel } from '@widgets/SettingsPanel'
-import { AppFooter } from '@widgets/AppFooter'
-import type { FlexDirection } from '@lib/theme'
-import styles from './page.module.css'
-
-const mainDirection: FlexDirection = {
-  initial: 'column',
-  md: 'row'
-} as const
-
-const HomePage = () => (
-  <Flex width='100%' align='center' direction='column' className={styles.root}>
-    <ScrollArea scrollbars='vertical' size='1' className={styles.scrollArea}>
-      <Flex asChild justify='end' direction={mainDirection} width='100%' className={styles.main}>
-        <main>
-          <Preview />
-          <SettingsPanel />
-        </main>
-      </Flex>
-    </ScrollArea>
-    <AppFooter />
-  </Flex>
-)
-
-export default HomePage
+export { default } from './home/page'

apps/frontend/src/components/CookieConsentBanner/CookieConsentBanner.tsx

@@ -53,7 +53,7 @@ const CookieConsentBanner = () => {
     <Card
       size='2'
       style={{
-        bottom: isHomePage ? 'calc(var(--app-footer-height) + 20px)' : '20px'
+        bottom: isHomePage ? 'calc(var(--ProcessingFooter-height) + 20px)' : '20px'
       }}
       className={styles.root}
     >

apps/frontend/src/design-system/Checkbox/Checkbox.tsx

@@ -4,8 +4,8 @@ import { type HTMLAttributes, memo, useId } from 'react'
 import { Checkbox as RadixCheckbox, Flex, Text } from '@radix-ui/themes'
 import { clsx } from 'clsx'
 
-import styles from './Checkbox.module.css'
 import type { JustifyContent } from '@lib/theme'
+import styles from './Checkbox.module.css'
 
 export const rootTestId = 'checkbox-root'
 

apps/frontend/src/hooks/useEscapeAction.ts

@@ -1,20 +1,24 @@
+'use client'
+
 import { useEffect } from 'react'
 
+const ESCAPE_KEY = 'Escape'
+
 export const useEscapeAction = (
   callback: VoidFunction,
   options?: boolean | AddEventListenerOptions
 ) => {
   useEffect(() => {
     const handleEscapeKeydown = (ev: KeyboardEvent) => {
-      if (ev.key !== 'Escape') return
+      if (ev.key !== ESCAPE_KEY) return
 
       callback()
     }
 
-    window.addEventListener('keydown', handleEscapeKeydown, options)
+    document.addEventListener('keydown', handleEscapeKeydown, options)
 
     return () => {
-      window.removeEventListener('keydown', handleEscapeKeydown, options)
+      document.removeEventListener('keydown', handleEscapeKeydown, options)
     }
   }, [callback, options])
 }

apps/frontend/src/hooks/useEscapeBlur.ts

@@ -4,12 +4,12 @@ import type { RefObject } from 'react'
 
 import { useEscapeAction } from './useEscapeAction'
 
-interface Params<T extends HTMLElement> {
-  ref: RefObject<T>
+interface Params<El extends HTMLElement> {
+  ref: RefObject<El>
   options?: boolean | AddEventListenerOptions
 }
 
-export const useEscapeBlur = <T extends HTMLElement>({ ref, options }: Params<T>) => {
+export const useEscapeBlur = <El extends HTMLElement>({ ref, options }: Params<El>) => {
   useEscapeAction(() => {
     if (!ref.current) return
 

apps/frontend/src/lib/ui/ColorField/ColorField.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 // https://github.com/radix-ui/website/blob/67f9736819e5a03f863e8e56f366fa51637845f7/components/ColorField.tsx
 
 import {

apps/frontend/src/stores/__tests__/output.test.ts

@@ -1,9 +1,10 @@
 // vitest-environment jsdom
 
+import pick from 'lodash.pick'
+
 import { IMAGE_FILE_FORMAT } from '@scissors/sharp'
 
 import { createOutputStore, defaultState, type DownloadPayload } from '@stores/output'
-import pick from 'lodash.pick'
 
 describe('@stores/output', () => {
   const store = createOutputStore({

apps/frontend/src/stores/hooks/useExportSettings.ts

@@ -4,6 +4,9 @@ import { useConvertSettings } from './useConvertSettings'
 import { useResizeSettings } from './useResizeSettings'
 import { TOOLBAR_TAB, type ToolbarTab } from '@stores/tabs'
 import { createAndDownloadJSONFile } from '@utility/json-file'
+import { SITE_TITLE } from '@site/config'
+
+const FILE_NAME_PREFIX = `${SITE_TITLE}-settings`
 
 export const useExportSettings = (selectedTab: ToolbarTab) => {
   const convertSettings = useConvertSettings()
@@ -13,12 +16,12 @@ export const useExportSettings = (selectedTab: ToolbarTab) => {
     switch (selectedTab) {
       case TOOLBAR_TAB.CONVERT:
         return {
-          fileName: 'scissors-settings-convert',
+          fileName: `${FILE_NAME_PREFIX}-convert`,
           settings: convertSettings
         }
       case TOOLBAR_TAB.RESIZE:
         return {
-          fileName: 'scissors-settings-resize',
+          fileName: `${FILE_NAME_PREFIX}-resize`,
           settings: resizeSettings
         }
       default:

apps/frontend/src/stores/output.ts

@@ -6,6 +6,7 @@ import type { ImageFileFormat } from '@scissors/sharp'
 import { isValidFileName } from '@helpers/file/isValidFileName'
 import { cropFileName } from '@helpers/file/cropFileName'
 import { cropImageFileType } from '@helpers/file/cropImageFileType'
+import { SITE_TITLE } from '@site/config'
 
 export interface DownloadPayload {
   link: string
@@ -151,12 +152,12 @@ const outputStoreCreator: StateCreator<Store> = (set, get) => ({
 })
 
 export const createOutputStore = ({
-  withPersist
-}: CreateStoreParams): UseBoundStore<StoreApi<Store>> => {
+  withPersist = true
+}: CreateStoreParams | undefined = {}): UseBoundStore<StoreApi<Store>> => {
   if (withPersist) {
     return create(
       persist<Store>(outputStoreCreator, {
-        name: 'scissors-output-store',
+        name: `${SITE_TITLE}-output-store`,
         merge: <State>(persistedState: unknown, currentState: State): State => {
           if (!persistedState || typeof persistedState !== 'object') {
             return currentState
@@ -179,9 +180,7 @@ export const createOutputStore = ({
 }
 
 interface CreateStoreParams {
-  withPersist: boolean
+  withPersist?: boolean
 }
 
-export const useOutputStore = createOutputStore({
-  withPersist: true
-})
+export const useOutputStore = createOutputStore()

apps/frontend/src/utility/SettingsValidator/SettingsValidator.schemas.ts

@@ -32,6 +32,7 @@ import {
   RESIZE_OPERATION,
   RESIZE_POSITION
 } from '@scissors/sharp'
+
 import { hexValidationRegex } from '@helpers/colors'
 
 export const booleanSchema = boolean().defined()

apps/frontend/src/widgets/Preview/Preview.tsx → apps/frontend/src/widgets/ImagePreview/ImagePreview.tsx

@@ -8,7 +8,7 @@ import { UploadedFileLoading } from './UploadedFile/UploadedFileLoading'
 import { ImageUploaderLoading } from '@components/ImageUploader/ImageUploaderLoading'
 import { BackgroundGrid } from '@ui/BackgroundGrid'
 import { useOutputStore } from '@stores/output'
-import styles from './Preview.module.css'
+import styles from './ImagePreview.module.css'
 
 const ImageUploader = dynamic(
   () => import('@components/ImageUploader').then(mod => mod.ImageUploader),
@@ -22,7 +22,7 @@ const UploadedFile = dynamic(() => import('./UploadedFile').then(mod => mod.Uplo
   loading: () => <UploadedFileLoading />
 })
 
-export const Preview = () => {
+export const ImagePreview = () => {
   const file = useOutputStore(state => state.file)
 
   return (

apps/frontend/src/widgets/Preview/UploadedFile/UploadedFilePreview/UploadedFilePreview.module.css → apps/frontend/src/widgets/ImagePreview/UploadedFile/UploadedFilePreview/UploadedFilePreview.module.css

@@ -1,6 +1,6 @@
 .root {
   position: relative;
-  height: calc(var(--layout-content-height) - var(--app-footer-height) - 200px);
+  height: calc(var(--layout-content-height) - var(--processing-footer-height) - 200px);
 }
 
 .image {

apps/frontend/src/widgets/ImagePreview/index.ts

@@ -0,0 +1 @@
+export { ImagePreview } from './ImagePreview'

apps/frontend/src/widgets/ProcessingFooter/ProcessingFooter.tsx

@@ -0,0 +1,18 @@
+import dynamic from 'next/dynamic'
+import { Box } from '@radix-ui/themes'
+
+import { ProcessingFooterContentSkeleton } from './ProcessingFooterContentSkeleton'
+import styles from './ProcessingFooter.module.css'
+
+const ProcessingFooterContent = dynamic(() => import('./ProcessingFooterContent'), {
+  ssr: false,
+  loading: () => <ProcessingFooterContentSkeleton />
+})
+
+export const ProcessingFooter = () => (
+  <Box asChild height='var(--processing-footer-height)' width='100%' px='4' className={styles.root}>
+    <footer>
+      <ProcessingFooterContent />
+    </footer>
+  </Box>
+)

apps/frontend/src/widgets/AppFooter/AppFooterContent/AppFooterContent.tsx → apps/frontend/src/widgets/ProcessingFooter/ProcessingFooterContent/ProcessingFooterContent.tsx

@@ -3,14 +3,14 @@
 import dynamic from 'next/dynamic'
 import { Flex, Separator } from '@radix-ui/themes'
 
-import { ButtonDownloadSkeleton, ButtonRequestSkeleton } from '../AppFooterContentSkeleton'
+import { ButtonDownloadImageSkeleton, ButtonRequestSkeleton } from '../ProcessingFooterContentSkeleton'
 import { TOOLBAR_TAB, useTabsStore } from '@stores/tabs'
 
-const ButtonDownload = dynamic(
-  () => import('./buttons/ButtonDownload').then(mod => mod.ButtonDownload),
+const ButtonDownloadImage = dynamic(
+  () => import('./buttons/ButtonDownloadImage').then(mod => mod.ButtonDownloadImage),
   {
     ssr: false,
-    loading: () => <ButtonDownloadSkeleton />
+    loading: () => <ButtonDownloadImageSkeleton />
   }
 )
 const ButtonConvert = dynamic(
@@ -32,12 +32,12 @@ const ButtonMetadata = dynamic(
   }
 )
 
-const AppFooterContent = () => {
+const ProcessingFooterContent = () => {
   const selectedTab = useTabsStore(state => state.selectedTab)
 
   return (
     <Flex align='center' justify='end' gap='3' height='100%' width='100%'>
-      <ButtonDownload />
+      <ButtonDownloadImage />
 
       <Separator orientation='vertical' size='2' />
 
@@ -51,4 +51,4 @@ const AppFooterContent = () => {
 /*
  * Default export is required to import a client component inside a server component using next/dynamic.
  */
-export default AppFooterContent
+export default ProcessingFooterContent

apps/frontend/src/widgets/AppFooter/AppFooterContent/buttons/ButtonDownload.tsx → apps/frontend/src/widgets/ProcessingFooter/ProcessingFooterContent/buttons/ButtonDownloadImage.tsx

@@ -1,13 +1,13 @@
 import { useRef } from 'react'
-import { Button, Link as RadixLink } from '@radix-ui/themes'
+import { Button } from '@radix-ui/themes'
 import MediaQuery from 'react-responsive'
 
 import { DownloadIcon } from '@scissors/react-icons/DownloadIcon'
 
 import { useOutputStore } from '@stores/output'
 import { TOUR_STEP } from '@lib/tour'
 
-export const ButtonDownload = () => {
+export const ButtonDownloadImage = () => {
   const linkRef = useRef<HTMLAnchorElement>(null)
 
   const downloadPayload = useOutputStore(state => state.downloadPayload)
@@ -36,7 +36,7 @@ export const ButtonDownload = () => {
       </Button>
 
       {downloadPayload && (
-        <RadixLink
+        <a
           ref={linkRef}
           href={downloadPayload.link}
           download={downloadPayload.fileName}

apps/frontend/src/widgets/ProcessingFooter/ProcessingFooterContent/index.ts

@@ -0,0 +1 @@
+export { default } from './ProcessingFooterContent'

apps/frontend/src/widgets/AppFooter/AppFooterContentSkeleton/AppFooterContentSkeleton.tsx → apps/frontend/src/widgets/ProcessingFooter/ProcessingFooterContentSkeleton/ProcessingFooterContentSkeleton.tsx

@@ -1,18 +1,18 @@
 import { Flex, Separator, Skeleton } from '@radix-ui/themes'
 
-import styles from './AppFooterContentSkeleton.module.css'
+import styles from './ProcessingFooterContentSkeleton.module.css'
 
-export const ButtonDownloadSkeleton = () => (
+export const ButtonDownloadImageSkeleton = () => (
   <Skeleton height='40px' className={styles.buttonDownload} />
 )
 
 export const ButtonRequestSkeleton = () => (
   <Skeleton height='40px' className={styles.buttonRequest} />
 )
 
-export const AppFooterContentSkeleton = () => (
+export const ProcessingFooterContentSkeleton = () => (
   <Flex align='center' justify='end' gap='3' height='100%' width='100%'>
-    <ButtonDownloadSkeleton />
+    <ButtonDownloadImageSkeleton />
     <Separator orientation='vertical' size='2' />
     <ButtonRequestSkeleton />
   </Flex>

apps/frontend/src/widgets/ProcessingFooter/ProcessingFooterContentSkeleton/index.ts

@@ -0,0 +1,5 @@
+export {
+  ProcessingFooterContentSkeleton,
+  ButtonDownloadImageSkeleton,
+  ButtonRequestSkeleton
+} from './ProcessingFooterContentSkeleton'