feat: visual changes from mantine@v7.12

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   postgresql:
-    image: postgres:15
+    image: postgres:16
     restart: unless-stopped
     env_file:
       - .env

src/components/file/DashboardFile/FileModal.tsx

@@ -18,6 +18,7 @@ import {
   Modal,
   Pill,
   PillsInput,
+  ScrollArea,
   SimpleGrid,
   Text,
   Title,
@@ -188,11 +189,8 @@ export default function FileModal({
         }
         size='auto'
         centered
-        overlayProps={{
-          blur: 3,
-          opacity: 0.5,
-        }}
         zIndex={200}
+        scrollAreaComponent={ScrollArea.Autosize}
       >
         {file ? (
           <>

src/components/pages/settings/parts/SettingsDashboard.tsx

@@ -3,6 +3,21 @@ import { useSettingsStore } from '@/lib/store/settings';
 import { Group, NumberInput, Paper, Select, Stack, Switch, Text, Title } from '@mantine/core';
 import { IconMoonFilled, IconPaintFilled, IconPercentage, IconSunFilled } from '@tabler/icons-react';
 
+const renderThemeOption =
+  (themes: ReturnType<typeof useThemes>) =>
+  ({ option }: { option: { value: string; label: string } }) => (
+    <Group gap='xs'>
+      {option.value === 'system' ? (
+        <IconPaintFilled size='1rem' />
+      ) : themes.find((theme) => theme.id === option.value)?.colorScheme === 'dark' ? (
+        <IconMoonFilled size='1rem' />
+      ) : (
+        <IconSunFilled size='1rem' />
+      )}
+      {option.label}
+    </Group>
+  );
+
 export default function SettingsDashboard() {
   const [settings, update] = useSettingsStore((state) => [state.settings, state.update]);
   const themes = useThemes();
@@ -52,6 +67,7 @@ export default function SettingsDashboard() {
           value={settings.theme}
           onChange={(value) => update('theme', value ?? 'builtin:dark_gray')}
           leftSection={<IconPaintFilled size='1rem' />}
+          renderOption={renderThemeOption(themes)}
         />
 
         {settings.theme === 'system' && (

src/components/pages/settings/parts/SettingsFileView.tsx

@@ -18,9 +18,22 @@ import {
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
-import { IconCheck, IconDeviceFloppy, IconFileX } from '@tabler/icons-react';
+import {
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
+  IconCheck,
+  IconDeviceFloppy,
+  IconFileX,
+} from '@tabler/icons-react';
 import { mutate } from 'swr';
 
+const alignIcons: Record<string, React.ReactNode> = {
+  left: <IconAlignLeft size='1rem' />,
+  center: <IconAlignCenter size='1rem' />,
+  right: <IconAlignRight size='1rem' />,
+};
+
 export default function SettingsFileView() {
   const [user, setUser] = useUserStore((state) => [state.user, state.setUser]);
 
@@ -116,6 +129,12 @@ export default function SettingsFileView() {
               { value: 'center', label: 'Center' },
               { value: 'right', label: 'Right' },
             ]}
+            renderOption={({ option }) => (
+              <Group gap='xs'>
+                {alignIcons[option.value]}
+                {option.label}
+              </Group>
+            )}
             disabled={!form.values.enabled}
             {...form.getInputProps('align')}
           />

src/components/pages/settings/parts/SettingsUser.tsx

@@ -103,7 +103,7 @@ export default function SettingsUser() {
             <CopyButton value={token} timeout={1000}>
               {({ copied, copy }) => (
                 <Tooltip label='Click to copy token'>
-                  <ActionIcon onClick={copy} variant='transparent' color='white'>
+                  <ActionIcon onClick={copy} variant='subtle' color='gray'>
                     {copied ? <IconCheck color='green' size='1rem' /> : <IconCopy size='1rem' />}
                   </ActionIcon>
                 </Tooltip>

src/pages/dashboard/admin/invites.tsx

@@ -1,11 +1,16 @@
 import Layout from '@/components/Layout';
 import DashboardInvites from '@/components/pages/invites';
+import { prisma } from '@/lib/db';
 import useLogin from '@/lib/hooks/useLogin';
 import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
+import { isAdministrator } from '@/lib/role';
+import { getSession } from '@/server/session';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardAdminInvites({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin(true);
   if (loading) return <LoadingOverlay visible />;
 
@@ -16,4 +21,30 @@ export default function DashboardIndex({ config }: InferGetServerSidePropsType<t
   );
 }
 
-export const getServerSideProps = withSafeConfig();
+export const getServerSideProps = withSafeConfig(async (ctx) => {
+  const session = await getSession(ctx.req, ctx.res);
+  if (!session.id || !session.sessionId)
+    return {
+      notFound: true,
+    };
+
+  const currentUser = await prisma.user.findFirst({
+    where: {
+      sessions: {
+        has: session.sessionId,
+      },
+    },
+  });
+
+  if (!currentUser)
+    return {
+      notFound: true,
+    };
+
+  if (!isAdministrator(currentUser.role))
+    return {
+      notFound: true,
+    };
+
+  return {};
+});

src/pages/dashboard/admin/settings.tsx

@@ -1,17 +1,18 @@
 import Layout from '@/components/Layout';
 import DashboardServerSettings from '@/components/pages/serverSettings';
+import { prisma } from '@/lib/db';
 import useLogin from '@/lib/hooks/useLogin';
 import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
-import { isAdministrator } from '@/lib/role';
+import { getSession } from '@/server/session';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
-  const { loading, user } = useLogin(true);
+export default function DashboardAdminSettings({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { loading } = useLogin(true);
   if (loading) return <LoadingOverlay visible />;
 
-  if (!isAdministrator(user?.role)) return null;
-
   return (
     <Layout config={config}>
       <DashboardServerSettings />
@@ -19,4 +20,30 @@ export default function DashboardIndex({ config }: InferGetServerSidePropsType<t
   );
 }
 
-export const getServerSideProps = withSafeConfig();
+export const getServerSideProps = withSafeConfig(async (ctx) => {
+  const session = await getSession(ctx.req, ctx.res);
+  if (!session.id || !session.sessionId)
+    return {
+      notFound: true,
+    };
+
+  const currentUser = await prisma.user.findFirst({
+    where: {
+      sessions: {
+        has: session.sessionId,
+      },
+    },
+  });
+
+  if (!currentUser)
+    return {
+      notFound: true,
+    };
+
+  if (currentUser.role !== 'SUPERADMIN')
+    return {
+      notFound: true,
+    };
+
+  return {};
+});

src/pages/dashboard/admin/users/[id]/files.tsx

@@ -1,15 +1,15 @@
 import Layout from '@/components/Layout';
 import ViewFiles from '@/components/pages/users/ViewUserFiles';
 import { prisma } from '@/lib/db';
-import { User } from '@/lib/db/models/user';
+import { User, userSelect } from '@/lib/db/models/user';
 import useLogin from '@/lib/hooks/useLogin';
 import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
-import { parseUserToken } from '@/lib/middleware/ziplineAuth';
 import { canInteract } from '@/lib/role';
+import { getSession } from '@/server/session';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({
+export default function DashboardAdminUsersId({
   user,
   config,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
@@ -36,24 +36,24 @@ export const getServerSideProps = withSafeConfig(async (ctx) => {
     },
   });
 
-  try {
-    // eslint-disable-next-line no-var
-    var currentUserToken = parseUserToken(ctx.req.cookies['zipline_token']);
-  } catch (e) {
+  if (!user)
     return {
       notFound: true,
     };
-  }
 
-  const currentUser = await prisma.user.findUnique({
+  const session = await getSession(ctx.req, ctx.res);
+  if (!session.id || !session.sessionId)
+    return {
+      notFound: true,
+    };
+
+  const currentUser = await prisma.user.findFirst({
     where: {
-      token: currentUserToken,
-    },
-    select: {
-      id: true,
-      username: true,
-      role: true,
+      sessions: {
+        has: session.sessionId,
+      },
     },
+    select: userSelect,
   });
 
   if (!currentUser)

src/pages/dashboard/admin/users/index.tsx

@@ -1,11 +1,16 @@
 import Layout from '@/components/Layout';
 import DashboardUsers from '@/components/pages/users';
+import { prisma } from '@/lib/db';
 import useLogin from '@/lib/hooks/useLogin';
 import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
+import { isAdministrator } from '@/lib/role';
+import { getSession } from '@/server/session';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardAdminUsers({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin(true);
   if (loading) return <LoadingOverlay visible />;
 
@@ -16,4 +21,30 @@ export default function DashboardIndex({ config }: InferGetServerSidePropsType<t
   );
 }
 
-export const getServerSideProps = withSafeConfig();
+export const getServerSideProps = withSafeConfig(async (ctx) => {
+  const session = await getSession(ctx.req, ctx.res);
+  if (!session.id || !session.sessionId)
+    return {
+      notFound: true,
+    };
+
+  const currentUser = await prisma.user.findFirst({
+    where: {
+      sessions: {
+        has: session.sessionId,
+      },
+    },
+  });
+
+  if (!currentUser)
+    return {
+      notFound: true,
+    };
+
+  if (!isAdministrator(currentUser.role))
+    return {
+      notFound: true,
+    };
+
+  return {};
+});

src/pages/dashboard/files.tsx

@@ -5,7 +5,9 @@ import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardFilesPage({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin();
   if (loading) return <LoadingOverlay visible />;
 

src/pages/dashboard/folders.tsx

@@ -5,7 +5,9 @@ import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardFoldersPage({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin();
   if (loading) return <LoadingOverlay visible />;
 

src/pages/dashboard/metrics.tsx

@@ -7,7 +7,9 @@ import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 import { useRouter } from 'next/router';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardMetricsPage({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
   const { loading, user } = useLogin();
   if (loading) return <LoadingOverlay visible />;

src/pages/dashboard/settings.tsx

@@ -5,7 +5,9 @@ import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardUserSettings({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin();
   if (loading) return <LoadingOverlay visible />;
 

src/pages/dashboard/urls.tsx

@@ -5,7 +5,9 @@ import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
 import { LoadingOverlay } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function DashboardIndex({ config }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function DashboardUrlsPage({
+  config,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { loading } = useLogin();
   if (loading) return <LoadingOverlay visible />;
 

src/pages/folder/[id].tsx

@@ -6,7 +6,7 @@ import { withSafeConfig } from '@/lib/middleware/next/withSafeConfig';
 import { Container, SimpleGrid, Title } from '@mantine/core';
 import { InferGetServerSidePropsType } from 'next';
 
-export default function ViewFolder({ folder }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function ViewFolderId({ folder }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   if (!folder) return null;
 
   return (

src/pages/index.tsx

@@ -2,7 +2,7 @@ import { getZipline } from '@/lib/db/models/zipline';
 import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 
-export default function Home() {
+export default function Index() {
   return (
     <>
       <Head>

src/pages/view/[id].tsx

@@ -32,7 +32,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-export default function ViewFile({
+export default function ViewFileId({
   file,
   password,
   pw,

src/pages/view/url/[id].tsx

@@ -6,7 +6,7 @@ import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-export default function ViewUrl({ url, password }: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function ViewUrlId({ url, password }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
 
   const [passwordValue, setPassword] = useState<string>('');