ref : moved files around

src/app/(pages)/(protected)/contribute/page.tsx

@@ -13,9 +13,9 @@ import { useHotkeys, useOs, usePrevious, useViewportSize } from '@mantine/hooks'
 import { Resolution, Status } from '@prisma/client';
 
 import ForkInfo from '~/components/fork';
-import { SmallTile } from '~/components/small-tile';
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { SmallTile } from '~/components/base/small-tile';
+import { TextureImage } from '~/components/textures/texture-img';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, COLORS, gitBlobUrl, gitCommitUrl, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';

src/app/(pages)/(protected)/council/layout.tsx

@@ -2,8 +2,8 @@
 
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
-import { TabsLayout } from '~/components/tabs';
+import { RoleGate } from '~/components/base/role-gate';
+import { TabsLayout } from '~/components/base/tabs-layout';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;

src/app/(pages)/(protected)/council/modpacks/modal/modpack-general.tsx

@@ -2,7 +2,7 @@
 import { Group, FileInput, TextInput, Badge, Stack, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
 import type { ModpackModalFormValues } from './modpack-modal';

src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version-modal.tsx

@@ -7,7 +7,7 @@ import { Dropzone } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';
 import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { useWebsocket } from '~/hooks/use-websocket';

src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Button, Group, Table, Text } from '@mantine/core';
 import { useDisclosure, useViewportSize } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
+import { Modal } from '~/components/base/modal';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 import { notify } from '~/lib/utils';

src/app/(pages)/(protected)/council/modpacks/page.tsx

@@ -7,7 +7,7 @@ import { useDisclosure, usePrevious } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 
 import { DashboardItem } from '~/components/dashboard-item/dashboard-item';
-import { Modal } from '~/components/modal';
+import { Modal } from '~/components/base/modal';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, GRADIENT_DANGER, ITEMS_PER_PAGE, ITEMS_PER_PAGE_DEFAULT } from '~/lib/constants';

src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version-modal.tsx

@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react';
 import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { extractSemver } from '~/lib/utils';

src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { Group, Table, Text } from '@mantine/core';
 import { useDisclosure, useViewportSize } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
+import { Modal } from '~/components/base/modal';
 import { ModUpload } from '~/components/mods-upload';
 import { WarningIcon } from '~/components/warning-icon';
 import { useEffectOnce } from '~/hooks/use-effect-once';

src/app/(pages)/(protected)/council/mods/modal/mods-general.tsx

@@ -2,7 +2,7 @@
 import { Badge, FileInput, Group, MultiSelect, Stack, TextInput, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { BREAKPOINT_MOBILE_LARGE, MODS_LOADERS } from '~/lib/constants';
 
 import type { ModModalFormValues } from './mods-modal';

src/app/(pages)/(protected)/council/mods/page.tsx

@@ -7,7 +7,7 @@ import { useDisclosure, usePrevious, useViewportSize } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 
 import { DashboardItem } from '~/components/dashboard-item/dashboard-item';
-import { Modal } from '~/components/modal';
+import { Modal } from '~/components/base/modal';
 import { ModUpload } from '~/components/mods-upload';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';

src/app/(pages)/(protected)/council/submissions/contribution-item.tsx

@@ -7,8 +7,8 @@ import { Button, Group, Stack, Text, Tooltip } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { ReactCompareSlider } from 'react-compare-slider';
 
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { TextureImage } from '~/components/textures/texture-img';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { BREAKPOINT_DESKTOP_MEDIUM, BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET } from '~/lib/constants';
 import { checkContributionStatus } from '~/server/data/contributions';

src/app/(pages)/(protected)/council/submissions/page.tsx

@@ -7,7 +7,7 @@ import { GoAlert, GoCheckCircle, GoCircleSlash } from 'react-icons/go';
 import { Accordion, Badge, Group, Select, Stack, Switch, Text } from '@mantine/core';
 import { Resolution, UserRole } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { getPendingContributions } from '~/server/data/contributions';

src/app/(pages)/(protected)/council/textures/modal/texture-general.tsx

@@ -7,8 +7,8 @@ import { useForm } from '@mantine/form';
 import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { FakeInputLabel } from '~/components/fakeInputLabel';
-import { TextureImage } from '~/components/texture-img';
+import { FakeInputLabel } from '~/components/base/fake-input-label';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT } from '~/lib/constants';
 import { getVanillaTextures } from '~/server/actions/faithful-pack';

src/app/(pages)/(protected)/council/textures/modal/texture-modal.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { Stack, Tabs } from '@mantine/core';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 
 import { TextureGeneral } from './texture-general';
 import { TextureMCMETAEdition } from './texture-mcmeta';

src/app/(pages)/(protected)/council/textures/modal/texture-relations.tsx

@@ -6,7 +6,7 @@ import { TbPlus } from 'react-icons/tb';
 import { Button, Group, MultiSelect, Stack, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { sortByName } from '~/lib/utils';

src/app/(pages)/(protected)/council/textures/modal/texture-uses.tsx

@@ -9,8 +9,8 @@ import { TbHttpDelete } from 'react-icons/tb';
 import { Stack, Group, Divider, Code, Image, Text, Button } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
-import { Tile } from '~/components/tile';
+import { Modal } from '~/components/base/modal';
+import { Tile } from '~/components/base/tile';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { extractSemver } from '~/lib/utils';

src/app/(pages)/(protected)/council/textures/page.tsx

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useRef, useState, useTransition } from 'react';
 import { Badge, Group, Loader, Pagination, Select, Stack, Text, TextInput } from '@mantine/core';
 import { useDisclosure, useViewportSize, usePrevious } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
-import { GalleryTexture } from '~/components/texture';
+import { Modal } from '~/components/base/modal';
+import { GalleryTexture } from '~/components/textures/texture-gallery';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, ITEMS_PER_PAGE, ITEMS_PER_ROW } from '~/lib/constants';
 import { notify, searchFilter, sortByName } from '~/lib/utils';

src/app/(pages)/(protected)/dashboard/layout.tsx

@@ -2,8 +2,8 @@
 
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
-import { TabsLayout } from '~/components/tabs';
+import { RoleGate } from '~/components/base/role-gate';
+import { TabsLayout } from '~/components/base/tabs-layout';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;

src/app/(pages)/(protected)/dashboard/users/page.tsx

@@ -10,7 +10,7 @@ import { Avatar, Badge, Button, Group, Select, Stack, Text, TextInput } from '@m
 import { useForm } from '@mantine/form';
 import { UserRole } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, MINIMUM_CARD_WIDTH } from '~/lib/constants';

src/app/(pages)/(protected)/layout.tsx

@@ -1,6 +1,6 @@
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
+import { RoleGate } from '~/components/base/role-gate';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;
@@ -13,5 +13,5 @@ const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
 		</RoleGate>
 	);
 };
- 
-export default ProtectedLayout;
+
+export default ProtectedLayout;

src/app/(pages)/(protected)/user/[userId]/page.tsx

@@ -12,8 +12,8 @@ import { signOut } from 'next-auth/react';
 import { useSession } from 'next-auth/react';
 
 import ForkInfo from '~/components/fork';
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { TextureImage } from '~/components/textures/texture-img';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT, MAX_NAME_LENGTH, MIN_NAME_LENGTH } from '~/lib/constants';

src/app/(pages)/docs/tos/page.tsx

@@ -2,7 +2,7 @@
 
 import { List, Text } from '@mantine/core';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 
 export default function RulesPage() {
 

src/app/(pages)/mods/[modId]/gallery/page.tsx

@@ -9,7 +9,7 @@ import { usePrevious } from '@mantine/hooks';
 import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { GalleryTextureWithContribution } from '~/components/texture-contribution';
+import { GalleryTextureWithContribution } from '~/components/textures/texture-gallery-contribution';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, ITEMS_PER_PAGE, ITEMS_PER_ROW } from '~/lib/constants';
 import { searchFilter } from '~/lib/utils';

src/app/(pages)/mods/[modId]/layout.tsx

@@ -12,8 +12,8 @@ import { TfiWorld } from 'react-icons/tfi';
 import { Button, Group, Loader, Stack, Text, Title } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 
-import { TabsLayout } from '~/components/tabs';
-import { TextureImage } from '~/components/texture-img';
+import { TabsLayout } from '~/components/base/tabs-layout';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 import { getModDownloads, getModFromForgeId } from '~/server/data/mods';

src/app/(pages)/mods/[modId]/page.tsx

@@ -11,7 +11,7 @@ import { usePrevious } from '@mantine/hooks';
 import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, ITEMS_PER_PAGE, RESOLUTIONS_COLORS, EMPTY_PROGRESSION, ITEMS_PER_PAGE_DEFAULT } from '~/lib/constants';
 import { getModFromForgeId } from '~/server/data/mods';

src/app/(pages)/mods/page.tsx

@@ -13,8 +13,8 @@ import { TfiWorld } from 'react-icons/tfi';
 import { ActionIcon, Button, Checkbox, Group, InputLabel, MultiSelect, Pagination, Radio, Select, Stack, Text, TextInput } from '@mantine/core';
 import { useViewportSize, usePrevious } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, ITEMS_PER_PAGE, ITEMS_PER_PAGE_DEFAULT, MODS_LOADERS } from '~/lib/constants';
 import { searchFilter, sortByName, sortBySemver } from '~/lib/utils';

src/components/fakeInputLabel.tsx → src/components/base/fake-input-label.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react';
+
 import { Stack, Text } from '@mantine/core';
 
 interface Props {
@@ -7,7 +9,7 @@ interface Props {
 	gap?: number | string;
 }
 
-export function FakeInputLabel({ gap, label, description, children }: Props) {
+export const FakeInputLabel: FC<Props> = ({ gap, label, description, children }) => {
 	return (
 		<Stack gap={0} mt={2}>
 			<Stack gap={0}>
@@ -36,4 +38,4 @@ export function FakeInputLabel({ gap, label, description, children }: Props) {
 			</div>
 		</Stack>
 	);
-}
+};

src/components/modal.tsx → src/components/base/modal.tsx

@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import { Modal as MantineModal, Title } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
-interface ModalProps {
+interface Props {
 	opened: boolean;
 	onClose: () => void;
 	title?: React.ReactNode;
@@ -13,7 +15,7 @@ interface ModalProps {
 	children?: React.ReactNode;
 }
 
-export function Modal({ opened, onClose, title, children, popup, forceFullScreen }: ModalProps) {
+export const Modal: FC<Props> = ({ opened, onClose, title, children, popup, forceFullScreen }) => {
 	const { width } = useViewportSize();
 
 	return (
@@ -31,4 +33,4 @@ export function Modal({ opened, onClose, title, children, popup, forceFullScreen
 			{children}
 		</MantineModal>
 	);
-}
+};

src/components/role-gate.tsx → src/components/base/role-gate.tsx

@@ -1,19 +1,21 @@
 'use client';
 
+import type { FC } from 'react';
+
 import { Stack, Title, Text } from '@mantine/core';
 import { UserRole } from '@prisma/client';
 
 import { useCurrentUser } from '~/hooks/use-current-user';
 
-interface RoleGateProps {
+interface Props {
   children: React.ReactNode;
   allowedRoles: UserRole[];
 };
 
-export const RoleGate = ({
-	children,
-	allowedRoles,
-}: RoleGateProps) => {
+/**
+ * A component that gates access to children based on the logged user's role.
+ */
+export const RoleGate: FC<Props> = ({ children, allowedRoles }) => {
 	const user = useCurrentUser();
 	const role = user?.role;
 

src/components/small-tile.tsx → src/components/base/small-tile.tsx

@@ -1,8 +1,10 @@
+import type { FC } from 'react';
+
 import { Tile } from './tile';
 
 import type { CardProps, PolymorphicComponentProps } from '@mantine/core';
 
-export function SmallTile({ children, style, ...props }: PolymorphicComponentProps<'div', CardProps>) {
+export const SmallTile: FC<PolymorphicComponentProps<'div', CardProps>> = ({ children, style, ...props }) => {
 	return (
 		<Tile
 			w="100%"
@@ -17,4 +19,4 @@ export function SmallTile({ children, style, ...props }: PolymorphicComponentPro
 			{children}
 		</Tile>
 	);
-}
+};

src/components/tabs.tsx → src/components/base/tabs-layout.tsx

@@ -7,7 +7,7 @@ import { useViewportSize } from '@mantine/hooks';
 
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
-interface TabsLayoutProps<T extends string[]> {
+interface Props<T extends string[]> {
 	noMargin?: boolean;
 	children: React.ReactNode;
 	defaultValue?: T[number];
@@ -20,7 +20,7 @@ interface TabsLayoutProps<T extends string[]> {
 	}[];
 };
 
-export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, isLayout, variant, noMargin }: TabsLayoutProps<T>) => {
+export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, isLayout, variant, noMargin }: Props<T>) => {
 	const { width } = useViewportSize();
 	const router = useRouter();
 	const pathname = usePathname();

src/components/theme-switch.tsx → src/components/base/theme-switch.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import type { FC } from 'react';
 
 import { TbSun, TbMoon, TbSunMoon, TbCloud } from 'react-icons/tb';
 
 import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 
 import type { MantineColorScheme } from '@mantine/core';
 
-export const ThemeSwitch = () => {
+export const ThemeSwitch: FC = () => {
 	const colorSchemes: MantineColorScheme[] = ['light', 'dark', 'auto'];
 
 	const [icon, setIcon] = useState<React.ReactNode>(<TbCloud className="w-5 h-5"/>);