feat: bunch of stuff

.github/ISSUE_TEMPLATE/bug.yml

@@ -17,8 +17,9 @@ body:
       label: Version
       description: What version of Zipline are you using?
       options:
-        - upstream
-        - latest
+        - upstream (ghcr.io/diced/zipline:trunk)
+        - latest (ghcr.io/diced/zipline:latest)
+        - other (provide version in additional info)
     validations:
       required: true
   - type: dropdown
@@ -28,18 +29,24 @@ body:
       multiple: true
       options:
         - Firefox
-        - Chrome
+        - Chromium-based (Chrome, Edge, Brave, Opera, mobile chrome/chromium based, etc)
         - Safari
-        - Microsoft Edge
+        - Firefox Mobile
+        - Safari Mobile
   - type: textarea
     id: zipline-logs
     attributes:
       label: Zipline Logs
-      description: Please copy and paste any relevant log output.
+      description: Please copy and paste any relevant log output. Not seeing anything interesting? Try adding the `DEBUG=true` environment variable to see more logs, make sure to review the output and remove any sensitive information as it can be VERY verbose at times.
       render: shell
   - type: textarea
     id: browser-logs
     attributes:
       label: Browser Logs
       description: Please copy and paste any relevant log output.
       render: shell
+  - type: textarea
+    id: additional-info
+    attributes:
+      label: Additional Info
+      description: Anything else that could be used to narrow down the issue, like your config.

.github/ISSUE_TEMPLATE/config.yml

@@ -3,3 +3,6 @@ contact_links:
   - name: Zipline Discord
     url: https://discord.gg/EAhCRfGxCF
     about: Ask for help with anything related to Zipline!
+  - name: Zipline Docs
+    url: https://zipline.diced.tech
+    about: Maybe take a look a the docs?

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "npm-run-all build:server dev:run",
-    "dev:run": "cross-env REACT_EDITOR=code NODE_ENV=development RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false node --enable-source-maps dist/server",
+    "dev:run": "cross-env DEBUG=true REACT_EDITOR=code NODE_ENV=development RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false node --enable-source-maps dist/server",
     "build": "npm-run-all build:server build:schema build:next",
     "build-ci": "cross-env ZIPLINE_DOCKER_BUILD=1 npm-run-all build:server build:schema build:next",
     "build:server": "node esbuild.config.js",

src/components/File.tsx

@@ -1,8 +1,8 @@
 import { Button, Card, Group, LoadingOverlay, Modal, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { relativeTime } from 'lib/utils/client';
 import { useFileDelete, useFileFavorite } from 'lib/queries/files';
+import { relativeTime } from 'lib/utils/client';
 import { useState } from 'react';
 import {
   CalendarIcon,
@@ -11,15 +11,15 @@ import {
   CrossIcon,
   DeleteIcon,
   ExternalLinkIcon,
+  EyeIcon,
   FileIcon,
   HashIcon,
   ImageIcon,
   StarIcon,
-  EyeIcon,
 } from './icons';
+import Link from './Link';
 import MutedText from './MutedText';
 import Type from './Type';
-import Link from './Link';
 
 export function FileMeta({ Icon, title, subtitle, ...other }) {
   return other.tooltip ? (

src/components/Layout.tsx

@@ -1,11 +1,14 @@
 import {
   AppShell,
+  Badge,
   Box,
   Burger,
   Button,
-  Divider,
+  Group,
   Header,
+  Image,
   MediaQuery,
+  Menu,
   Navbar,
   NavLink,
   Paper,
@@ -15,13 +18,9 @@ import {
   Stack,
   Text,
   Title,
+  Tooltip,
   UnstyledButton,
   useMantineTheme,
-  Group,
-  Image,
-  Tooltip,
-  Badge,
-  Menu,
 } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
@@ -30,18 +29,21 @@ import useFetch from 'hooks/useFetch';
 import { useVersion } from 'lib/queries/version';
 import { userSelector } from 'lib/recoil/user';
 import { capitalize } from 'lib/utils/client';
-import { useRecoilState } from 'recoil';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
+import { useRecoilState } from 'recoil';
 import {
-  ExternalLinkIcon,
   ActivityIcon,
   CheckIcon,
   CopyIcon,
   CrossIcon,
   DeleteIcon,
+  DiscordIcon,
+  ExternalLinkIcon,
   FileIcon,
+  GitHubIcon,
+  GoogleIcon,
   HomeIcon,
   LinkIcon,
   LogoutIcon,
@@ -51,9 +53,6 @@ import {
   TypeIcon,
   UploadIcon,
   UserIcon,
-  DiscordIcon,
-  GitHubIcon,
-  GoogleIcon,
 } from './icons';
 import { friendlyThemeName, themes } from './Theming';
 
@@ -136,12 +135,12 @@ const items = [
   {
     icon: <UploadIcon size={18} />,
     text: 'Upload',
-    link: '/dashboard/upload',
+    link: '/dashboard/upload/file',
   },
   {
     icon: <TypeIcon size={18} />,
     text: 'Upload Text',
-    link: '/dashboard/text',
+    link: '/dashboard/upload/text',
   },
 ];
 
@@ -150,7 +149,7 @@ const admin_items = [
     icon: <UserIcon size={18} />,
     text: 'Users',
     link: '/dashboard/users',
-    if: (props) => true,
+    if: () => true,
   },
   {
     icon: <TagIcon size={18} />,

src/components/PasswordStrength.tsx

@@ -1,7 +1,7 @@
 // https://mantine.dev/core/password-input/
 
+import { Box, PasswordInput, Popover, Progress, Text } from '@mantine/core';
 import { useState } from 'react';
-import { PasswordInput, Progress, Text, Popover, Box } from '@mantine/core';
 import { CheckIcon, CrossIcon } from './icons';
 
 function PasswordRequirement({ meets, label }: { meets: boolean; label: string }) {

src/components/Theming.tsx

@@ -12,12 +12,12 @@ import matcha_dark_azul from 'lib/themes/matcha_dark_azul';
 import nord from 'lib/themes/nord';
 import qogir_dark from 'lib/themes/qogir_dark';
 
-import { MantineProvider, MantineThemeOverride } from '@mantine/core';
+import { createEmotionCache, MantineProvider, MantineThemeOverride } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
-import { useRecoilValue } from 'recoil';
 import { userSelector } from 'lib/recoil/user';
+import { useRecoilValue } from 'recoil';
 
 export const themes = {
   system: (colorScheme: 'dark' | 'light') => (colorScheme === 'dark' ? dark_blue : light_blue),
@@ -47,6 +47,8 @@ export const friendlyThemeName = {
   qogir_dark: 'Qogir Dark',
 };
 
+const cache = createEmotionCache({ key: 'zipline' });
+
 export default function ZiplineTheming({ Component, pageProps, ...props }) {
   const user = useRecoilValue(userSelector);
   const colorScheme = useColorScheme();
@@ -65,8 +67,14 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
     <MantineProvider
       withGlobalStyles
       withNormalizeCSS
+      emotionCache={cache}
       theme={{
         ...theme,
+        fontFamily: 'Ubuntu, sans-serif',
+        fontFamilyMonospace: 'Ubuntu Mono, monospace',
+        headings: {
+          fontFamily: 'Ubuntu, sans-serif',
+        },
         components: {
           AppShell: {
             styles: (t) => ({
@@ -92,6 +100,7 @@ export default function ZiplineTheming({ Component, pageProps, ...props }) {
           Popover: {
             defaultProps: {
               transition: 'pop',
+              shadow: 'lg',
             },
           },
           LoadingOverlay: {

src/components/dropzone/Dropzone.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Dropzone as MantineDropzone } from '@mantine/dropzone';
 import { Group, Text, useMantineTheme } from '@mantine/core';
+import { Dropzone as MantineDropzone } from '@mantine/dropzone';
 import { ImageIcon } from 'components/icons';
 
 export default function Dropzone({ loading, onDrop, children }) {

src/components/dropzone/DropzoneFile.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Table, Tooltip, Badge, HoverCard, Text, useMantineTheme, Group } from '@mantine/core';
+import { Badge, Group, HoverCard, Table, useMantineTheme } from '@mantine/core';
 import Type from 'components/Type';
 
 export function FilePreview({ file }: { file: File }) {

src/components/pages/Dashboard/RecentFiles.tsx

@@ -1,4 +1,4 @@
-import { Box, Card as MantineCard, Center, Group, SimpleGrid, Skeleton, Title } from '@mantine/core';
+import { Card as MantineCard, Center, Group, SimpleGrid, Skeleton, Title } from '@mantine/core';
 import { randomId } from '@mantine/hooks';
 import File from 'components/File';
 import MutedText from 'components/MutedText';

src/components/pages/Dashboard/StatCards.tsx

@@ -1,8 +1,8 @@
 import { SimpleGrid } from '@mantine/core';
 import { FileIcon } from 'components/icons';
 import StatCard from 'components/StatCard';
-import { percentChange } from 'lib/utils/client';
 import { useStats } from 'lib/queries/stats';
+import { percentChange } from 'lib/utils/client';
 import { Database, Eye, Users } from 'react-feather';
 
 export function StatCards() {

src/components/pages/Files/FilePagation.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, Checkbox, Group, Pagination, SimpleGrid, Skeleton, Text, Title } from '@mantine/core';
+import { Box, Center, Checkbox, Group, Pagination, SimpleGrid, Skeleton, Title } from '@mantine/core';
 import File from 'components/File';
 import { FileIcon } from 'components/icons';
 import MutedText from 'components/MutedText';

src/components/pages/Invites.tsx

@@ -13,16 +13,16 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core';
-import { useClipboard } from '@mantine/hooks';
 import { useForm } from '@mantine/form';
+import { useClipboard } from '@mantine/hooks';
 import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { CopyIcon, CrossIcon, DeleteIcon, PlusIcon, TagIcon } from 'components/icons';
 import MutedText from 'components/MutedText';
 import useFetch from 'hooks/useFetch';
+import { expireText, relativeTime } from 'lib/utils/client';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { expireText, relativeTime } from 'lib/utils/client';
 
 const expires = ['30m', '1h', '6h', '12h', '1d', '3d', '5d', '7d', 'never'];
 

src/components/pages/Manage/GeneratorModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, Select, NumberInput, Group, Checkbox, Button, Title, Text } from '@mantine/core';
+import { Button, Checkbox, Group, Modal, NumberInput, Select, Text, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { DownloadIcon } from 'components/icons';
 

src/components/pages/Stats/Graphs.tsx

@@ -13,8 +13,8 @@ import {
 } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import ColorHash from 'color-hash';
-import { bytesToHuman } from 'lib/utils/bytes';
 import { useStats } from 'lib/queries/stats';
+import { bytesToHuman } from 'lib/utils/bytes';
 import { useMemo } from 'react';
 import { Chart, Pie } from 'react-chartjs-2';
 

src/components/pages/Stats/Types.tsx

@@ -1,4 +1,4 @@
-import { LoadingOverlay, Card, Box } from '@mantine/core';
+import { Box, Card, LoadingOverlay } from '@mantine/core';
 import { SmallTable } from 'components/SmallTable';
 import { useStats } from 'lib/queries/stats';
 

src/components/pages/Upload.tsx

@@ -2,12 +2,12 @@ import {
   Button,
   Collapse,
   Group,
+  NumberInput,
+  PasswordInput,
   Progress,
   Select,
   Title,
-  PasswordInput,
   Tooltip,
-  NumberInput,
 } from '@mantine/core';
 import { randomId, useClipboard } from '@mantine/hooks';
 import { showNotification, updateNotification } from '@mantine/notifications';

src/components/pages/UploadText.tsx

@@ -1,12 +1,12 @@
 import { Button, Group, NumberInput, PasswordInput, Select, Tabs, Title, Tooltip } from '@mantine/core';
-import { Prism } from '@mantine/prism';
-import { Language } from 'prism-react-renderer';
 import { showNotification, updateNotification } from '@mantine/notifications';
+import { Prism } from '@mantine/prism';
 import CodeInput from 'components/CodeInput';
 import { ClockIcon, ImageIcon, TypeIcon, UploadIcon } from 'components/icons';
 import Link from 'components/Link';
 import exts from 'lib/exts';
 import { userSelector } from 'lib/recoil/user';
+import { Language } from 'prism-react-renderer';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 

src/components/pages/Urls/index.tsx

@@ -1,25 +1,25 @@
 import {
   ActionIcon,
   Button,
+  Card,
+  Center,
   Group,
   Modal,
+  NumberInput,
   SimpleGrid,
   Skeleton,
   TextInput,
   Title,
-  Card,
-  Center,
-  NumberInput,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { showNotification } from '@mantine/notifications';
 import { CrossIcon, LinkIcon, PlusIcon } from 'components/icons';
-import { useEffect, useState } from 'react';
-import { useURLs } from 'lib/queries/url';
-import URLCard from './URLCard';
 import MutedText from 'components/MutedText';
-import { useRecoilValue } from 'recoil';
+import { useURLs } from 'lib/queries/url';
 import { userSelector } from 'lib/recoil/user';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import URLCard from './URLCard';
 
 export default function Urls() {
   const user = useRecoilValue(userSelector);

src/components/pages/Users/CreateUserModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, TextInput, Switch, Group, Button, Title } from '@mantine/core';
+import { Button, Group, Modal, Switch, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { showNotification } from '@mantine/notifications';
 import { DeleteIcon, PlusIcon } from 'components/icons';

src/components/pages/Users/EditUserModal.tsx

@@ -1,4 +1,4 @@
-import { Modal, TextInput, Switch, Group, Button, Title } from '@mantine/core';
+import { Button, Group, Modal, Switch, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { showNotification } from '@mantine/notifications';
 import { DeleteIcon, PlusIcon } from 'components/icons';