From 2710e4cf26b4c8dc2c08c47e736bf03d50f31ec6 Mon Sep 17 00:00:00 2001
From: Cecilia Sanare <ceci@sanare.dev>
Date: Thu, 12 Sep 2024 16:27:53 -0500
Subject: [PATCH] chore: component restructure

---
 src/App.tsx                                   |  2 +-
 .../{NewAppBadge.tsx => app/AppBadges.tsx}    |  4 ++--
 src/components/{ => app}/AppImage.module.css  |  0
 src/components/{ => app}/AppImage.tsx         |  8 +++----
 src/components/{ => common}/Button.module.css |  0
 src/components/{ => common}/Button.tsx        |  2 +-
 .../{ => common}/ButtonGroup.module.css       |  0
 src/components/{ => common}/ButtonGroup.tsx   |  0
 src/components/{ => common}/Card.tsx          |  2 +-
 src/components/{ => common}/Code.module.css   |  0
 src/components/{ => common}/Code.tsx          |  2 +-
 src/components/{ => common}/Divider.tsx       |  0
 src/components/{ => common}/IconTooltip.tsx   |  0
 src/components/{ => common}/Input.tsx         |  2 +-
 src/components/{ => common}/Label.tsx         |  0
 src/components/common/Modal.tsx               | 12 ++++++++++
 .../{ => common}/PageSpinner.module.css       |  0
 src/components/{ => common}/PageSpinner.tsx   |  0
 src/components/{ => common}/Pill.tsx          |  0
 src/components/{ => common}/Spinner.tsx       |  0
 src/components/layout/AppEditButton.tsx       | 22 +++++++++++++++++++
 src/components/{ => layout}/AppFooter.tsx     |  2 +-
 src/components/{ => layout}/AppHeader.tsx     | 20 +++++------------
 src/pages/SplashPage.tsx                      |  6 ++---
 src/pages/apps/AppPage.tsx                    | 16 +++++++-------
 src/pages/apps/Layout.tsx                     |  2 +-
 src/pages/apps/SearchPage.tsx                 |  8 +++----
 27 files changed, 68 insertions(+), 42 deletions(-)
 rename src/components/{NewAppBadge.tsx => app/AppBadges.tsx} (81%)
 rename src/components/{ => app}/AppImage.module.css (100%)
 rename src/components/{ => app}/AppImage.tsx (87%)
 rename src/components/{ => common}/Button.module.css (100%)
 rename src/components/{ => common}/Button.tsx (98%)
 rename src/components/{ => common}/ButtonGroup.module.css (100%)
 rename src/components/{ => common}/ButtonGroup.tsx (100%)
 rename src/components/{ => common}/Card.tsx (89%)
 rename src/components/{ => common}/Code.module.css (100%)
 rename src/components/{ => common}/Code.tsx (97%)
 rename src/components/{ => common}/Divider.tsx (100%)
 rename src/components/{ => common}/IconTooltip.tsx (100%)
 rename src/components/{ => common}/Input.tsx (97%)
 rename src/components/{ => common}/Label.tsx (100%)
 create mode 100644 src/components/common/Modal.tsx
 rename src/components/{ => common}/PageSpinner.module.css (100%)
 rename src/components/{ => common}/PageSpinner.tsx (100%)
 rename src/components/{ => common}/Pill.tsx (100%)
 rename src/components/{ => common}/Spinner.tsx (100%)
 create mode 100644 src/components/layout/AppEditButton.tsx
 rename src/components/{ => layout}/AppFooter.tsx (96%)
 rename src/components/{ => layout}/AppHeader.tsx (78%)

diff --git a/src/App.tsx b/src/App.tsx
index 7490c38..5469202 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { type FC } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Toaster } from 'sonner';
-import { AppFooter } from './components/AppFooter';
+import { AppFooter } from '@/components/layout/AppFooter';
 import * as styles from './App.module.css';
 
 export const Component: FC = () => {
diff --git a/src/components/NewAppBadge.tsx b/src/components/app/AppBadges.tsx
similarity index 81%
rename from src/components/NewAppBadge.tsx
rename to src/components/app/AppBadges.tsx
index f2faeb7..56b576e 100644
--- a/src/components/NewAppBadge.tsx
+++ b/src/components/app/AppBadges.tsx
@@ -1,14 +1,14 @@
 import { useMemo, type FC } from 'react';
 import type { ComputedApp, ThinApp } from '@/types';
 import { BadgePlus } from 'lucide-react';
-import { IconTooltip } from './IconTooltip';
+import { IconTooltip } from '@/components/common/IconTooltip';
 import { isAfter, parseISO, subWeeks } from 'date-fns';
 
 type Props = {
   app: ComputedApp<ThinApp>;
 };
 
-export const NewAppBadge: FC<Props> = ({ app }) => {
+export const AppBadges: FC<Props> = ({ app }) => {
   const isNew = useMemo(() => isAfter(parseISO(app.created_at), subWeeks(new Date(), 1)), [app.created_at]);
 
   if (!isNew) return null;
diff --git a/src/components/AppImage.module.css b/src/components/app/AppImage.module.css
similarity index 100%
rename from src/components/AppImage.module.css
rename to src/components/app/AppImage.module.css
diff --git a/src/components/AppImage.tsx b/src/components/app/AppImage.tsx
similarity index 87%
rename from src/components/AppImage.tsx
rename to src/components/app/AppImage.tsx
index 0040831..89b994f 100644
--- a/src/components/AppImage.tsx
+++ b/src/components/app/AppImage.tsx
@@ -1,9 +1,9 @@
 import { type FC } from 'react';
 import { Link } from 'react-router-dom';
-import { cn } from '../utils/cn';
+import { cn } from '@/utils/cn';
 import * as styles from './AppImage.module.css';
 import type { ComputedApp, ThinApp } from '@/types';
-import { NewAppBadge } from './NewAppBadge';
+import { AppBadges } from './AppBadges';
 
 type Props = {
   className?: string;
@@ -14,7 +14,7 @@ type Props = {
 export const AppImage: FC<Props> = ({ className, app, to }) => {
   return to ? (
     <Link className={cn(styles.appImage, 'group', className)} to={to}>
-      <NewAppBadge app={app} />
+      <AppBadges app={app} />
       <div className="absolute inset-0 overflow-hidden flex flex-col justify-end">
         <div className={styles.name}>{app.name}</div>
       </div>
@@ -26,7 +26,7 @@ export const AppImage: FC<Props> = ({ className, app, to }) => {
     </Link>
   ) : (
     <div className={cn(styles.appImage, className)}>
-      <NewAppBadge app={app} />
+      <AppBadges app={app} />
       <img src={app.image_url} />
       <img className="blur-sm opacity-80 absolute inset-0 -z-10 transition-all" src={app.image_url} />
     </div>
diff --git a/src/components/Button.module.css b/src/components/common/Button.module.css
similarity index 100%
rename from src/components/Button.module.css
rename to src/components/common/Button.module.css
diff --git a/src/components/Button.tsx b/src/components/common/Button.tsx
similarity index 98%
rename from src/components/Button.tsx
rename to src/components/common/Button.tsx
index be7ed00..8f8bf18 100644
--- a/src/components/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -1,6 +1,6 @@
 import { type ComponentProps, type FC, type ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import { cn } from '../utils/cn';
+import { cn } from '@/utils/cn';
 import * as styles from './Button.module.css';
 
 type SharedProps = {
diff --git a/src/components/ButtonGroup.module.css b/src/components/common/ButtonGroup.module.css
similarity index 100%
rename from src/components/ButtonGroup.module.css
rename to src/components/common/ButtonGroup.module.css
diff --git a/src/components/ButtonGroup.tsx b/src/components/common/ButtonGroup.tsx
similarity index 100%
rename from src/components/ButtonGroup.tsx
rename to src/components/common/ButtonGroup.tsx
diff --git a/src/components/Card.tsx b/src/components/common/Card.tsx
similarity index 89%
rename from src/components/Card.tsx
rename to src/components/common/Card.tsx
index 277a4a7..0077c57 100644
--- a/src/components/Card.tsx
+++ b/src/components/common/Card.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '@/utils/cn';
 
 type Props = {
   className?: string;
diff --git a/src/components/Code.module.css b/src/components/common/Code.module.css
similarity index 100%
rename from src/components/Code.module.css
rename to src/components/common/Code.module.css
diff --git a/src/components/Code.tsx b/src/components/common/Code.tsx
similarity index 97%
rename from src/components/Code.tsx
rename to src/components/common/Code.tsx
index 0726ccd..20689c9 100644
--- a/src/components/Code.tsx
+++ b/src/components/common/Code.tsx
@@ -1,5 +1,5 @@
 import { useState, type FC, type ReactNode } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '@/utils/cn';
 import { toast } from 'sonner';
 import { delay } from '@ribbon-studios/js-utils';
 import { Clipboard } from 'lucide-react';
diff --git a/src/components/Divider.tsx b/src/components/common/Divider.tsx
similarity index 100%
rename from src/components/Divider.tsx
rename to src/components/common/Divider.tsx
diff --git a/src/components/IconTooltip.tsx b/src/components/common/IconTooltip.tsx
similarity index 100%
rename from src/components/IconTooltip.tsx
rename to src/components/common/IconTooltip.tsx
diff --git a/src/components/Input.tsx b/src/components/common/Input.tsx
similarity index 97%
rename from src/components/Input.tsx
rename to src/components/common/Input.tsx
index d90f318..d1fbd27 100644
--- a/src/components/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -1,5 +1,5 @@
 import { type FC, type ComponentProps } from 'react';
-import { cn } from '../utils/cn';
+import { cn } from '@/utils/cn';
 import { X } from 'lucide-react';
 import { useCachedState } from '@ribbon-studios/react-utils';
 
diff --git a/src/components/Label.tsx b/src/components/common/Label.tsx
similarity index 100%
rename from src/components/Label.tsx
rename to src/components/common/Label.tsx
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
new file mode 100644
index 0000000..24522b8
--- /dev/null
+++ b/src/components/common/Modal.tsx
@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+type Props = {
+  children?: ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Modal: FC<Props> = ({ ...props }) => {
+  return createPortal(<div {...props} className=""></div>, document.body);
+};
diff --git a/src/components/PageSpinner.module.css b/src/components/common/PageSpinner.module.css
similarity index 100%
rename from src/components/PageSpinner.module.css
rename to src/components/common/PageSpinner.module.css
diff --git a/src/components/PageSpinner.tsx b/src/components/common/PageSpinner.tsx
similarity index 100%
rename from src/components/PageSpinner.tsx
rename to src/components/common/PageSpinner.tsx
diff --git a/src/components/Pill.tsx b/src/components/common/Pill.tsx
similarity index 100%
rename from src/components/Pill.tsx
rename to src/components/common/Pill.tsx
diff --git a/src/components/Spinner.tsx b/src/components/common/Spinner.tsx
similarity index 100%
rename from src/components/Spinner.tsx
rename to src/components/common/Spinner.tsx
diff --git a/src/components/layout/AppEditButton.tsx b/src/components/layout/AppEditButton.tsx
new file mode 100644
index 0000000..0086195
--- /dev/null
+++ b/src/components/layout/AppEditButton.tsx
@@ -0,0 +1,22 @@
+import { type FC } from 'react';
+import { Edit } from 'lucide-react';
+import { Button } from '../common/Button';
+
+type Props = {
+  id?: string;
+};
+
+export const AppQuickEdit: FC<Props> = ({ id }) => {
+  return (
+    <Button
+      className="flex-shrink-0 bg-accent"
+      to={
+        id
+          ? `https://github.com/ribbon-studios/protontweaks-db/edit/main/apps/${id}.json`
+          : 'https://github.com/ribbon-studios/protontweaks-db/tree/main/apps'
+      }
+    >
+      <Edit />
+    </Button>
+  );
+};
diff --git a/src/components/AppFooter.tsx b/src/components/layout/AppFooter.tsx
similarity index 96%
rename from src/components/AppFooter.tsx
rename to src/components/layout/AppFooter.tsx
index 30416cb..3a54f8b 100644
--- a/src/components/AppFooter.tsx
+++ b/src/components/layout/AppFooter.tsx
@@ -1,7 +1,7 @@
 import { type FC } from 'react';
 import { Link } from 'react-router-dom';
 import { Bug, Code2 } from 'lucide-react';
-import { Button } from './Button';
+import { Button } from '@/components/common/Button';
 
 export const AppFooter: FC = () => {
   return (
diff --git a/src/components/AppHeader.tsx b/src/components/layout/AppHeader.tsx
similarity index 78%
rename from src/components/AppHeader.tsx
rename to src/components/layout/AppHeader.tsx
index 5ee44f5..b347832 100644
--- a/src/components/AppHeader.tsx
+++ b/src/components/layout/AppHeader.tsx
@@ -1,10 +1,11 @@
 import { useEffect, type FC, useState } from 'react';
-import { useSearch } from '../context/search';
+import { useSearch } from '../../context/search';
 import { Link, useParams } from 'react-router-dom';
 import { ArrowUp, Edit } from 'lucide-react';
-import { cn } from '../utils/cn';
-import { Button } from './Button';
-import { Input } from './Input';
+import { cn } from '@/utils/cn';
+import { Button } from '../common/Button';
+import { Input } from '../common/Input';
+import { AppQuickEdit } from './AppEditButton';
 
 type Props = {
   onChange?: (value: string) => void;
@@ -46,16 +47,7 @@ export const AppHeader: FC<Props> = ({ onChange }) => {
         </Link>
         <div className="flex flex-1 gap-4">
           <Input value={search} placeholder="Search" onChange={onChange} />
-          <Button
-            className="flex-shrink-0 bg-accent"
-            to={
-              id
-                ? `https://github.com/ribbon-studios/protontweaks-db/edit/main/apps/${id}.json`
-                : 'https://github.com/ribbon-studios/protontweaks-db/tree/main/apps'
-            }
-          >
-            <Edit />
-          </Button>
+          <AppQuickEdit id={id} />
         </div>
       </div>
       <Button
diff --git a/src/pages/SplashPage.tsx b/src/pages/SplashPage.tsx
index ce45329..426328b 100644
--- a/src/pages/SplashPage.tsx
+++ b/src/pages/SplashPage.tsx
@@ -1,9 +1,9 @@
 import { type FC } from 'react';
 import * as styles from './SplashPage.module.css';
-import { Code } from '@/components/Code';
-import { Button } from '@/components/Button';
+import { Code } from '@/components/common/Code';
+import { Button } from '@/components/common/Button';
 import { CodeIcon, ExternalLink, LibraryBig } from 'lucide-react';
-import { ButtonGroup } from '@/components/ButtonGroup';
+import { ButtonGroup } from '@/components/common/ButtonGroup';
 
 export const Component: FC = () => {
   return (
diff --git a/src/pages/apps/AppPage.tsx b/src/pages/apps/AppPage.tsx
index 9659fde..5a02b39 100644
--- a/src/pages/apps/AppPage.tsx
+++ b/src/pages/apps/AppPage.tsx
@@ -1,15 +1,15 @@
 import { useMemo, type FC } from 'react';
 import type { LoaderFunctionArgs } from 'react-router-dom';
 import { useLoaderData } from '@ribbon-studios/react-utils/react-router';
-import { AppImage } from '../../components/AppImage';
-import { Label } from '../../components/Label';
-import { Pill, appSettingStatustoVariant } from '../../components/Pill';
-import { Card } from '../../components/Card';
-import { Code } from '../../components/Code';
+import { AppImage } from '@/components/app/AppImage';
+import { Label } from '@/components/common/Label';
+import { Pill, appSettingStatustoVariant } from '@/components/common/Pill';
+import { Card } from '@/components/common/Card';
+import { Code } from '@/components/common/Code';
 import { getApp, getAppSettingStatus, toLaunchOptions } from '@/service/protontweaks.service';
 import type { App } from '@/types';
-import { Button } from '@/components/Button';
-import { ButtonGroup } from '@/components/ButtonGroup';
+import { Button } from '@/components/common/Button';
+import { ButtonGroup } from '@/components/common/ButtonGroup';
 import { ExternalLink, Link2 } from 'lucide-react';
 
 export async function loader({ params }: LoaderFunctionArgs) {
@@ -48,7 +48,7 @@ export const Component: FC = () => {
           <Button to={`https://steamdb.info/app/${app.id}`}>
             <svg width="30" height="30" viewBox="0 0 128 128" className="fill-current size-5" aria-hidden="true">
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"
               ></path>
             </svg>
diff --git a/src/pages/apps/Layout.tsx b/src/pages/apps/Layout.tsx
index 95317c2..064f189 100644
--- a/src/pages/apps/Layout.tsx
+++ b/src/pages/apps/Layout.tsx
@@ -1,6 +1,6 @@
 import { useState, type FC } from 'react';
 import { Outlet, createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
-import { AppHeader } from '../../components/AppHeader';
+import { AppHeader } from '@/components/layout/AppHeader';
 import { SearchContext } from '../../context/search';
 
 export const Component: FC = () => {
diff --git a/src/pages/apps/SearchPage.tsx b/src/pages/apps/SearchPage.tsx
index ed5829e..254d9c5 100644
--- a/src/pages/apps/SearchPage.tsx
+++ b/src/pages/apps/SearchPage.tsx
@@ -1,10 +1,10 @@
 import { type FC, useEffect, useState } from 'react';
 import { useSearch } from '../../context/search';
-import { AppImage } from '../../components/AppImage';
-import { Button } from '@/components/Button';
-import { ButtonGroup } from '@/components/ButtonGroup';
+import { AppImage } from '@/components/app/AppImage';
+import { Button } from '@/components/common/Button';
+import { ButtonGroup } from '@/components/common/ButtonGroup';
 import type { ComputedApp, ThinApp } from '@/types';
-import { PageSpinner } from '@/components/PageSpinner';
+import { PageSpinner } from '@/components/common/PageSpinner';
 import { SearchService } from '@/service/search.service';
 import { ImageService } from '@/service/image.service';