chore: component restructure

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 = () => {

src/components/NewAppBadge.tsx → 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;

src/components/AppImage.tsx → 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>

src/components/Button.tsx → 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 = {

src/components/Card.tsx → 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;

src/components/Code.tsx → 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';

src/components/Input.tsx → 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';
 

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);
+};

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>
+  );
+};

src/components/AppFooter.tsx → 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 (

src/components/AppHeader.tsx → 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

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 (

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>

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 = () => {

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';