merge dev into stable (#81)

biome.json

@@ -1,7 +1,8 @@
 {
 	"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
 	"files": {
-		"ignoreUnknown": true
+		"ignoreUnknown": true,
+		"ignore": [".next/", "**/node_modules/"]
 	},
 	"formatter": {
 		"enabled": true,

src/components/modals/SettingsPopover.tsx

@@ -1,16 +1,22 @@
 import useLanguage from '@/hooks/useLanguage';
+import useServerURL from '@/hooks/useServerURL';
 import useTheme from '@/hooks/useTheme';
 import useThemeValues from '@/hooks/useThemeValues';
 import useLanguageStore from '@/store/language';
 import type { SettingPopoverProps } from '@/types/Components.ts';
 import {
 	Box,
 	Button,
+	Center,
+	CloseButton,
 	Flex,
 	FormControl,
 	FormLabel,
 	Heading,
 	Icon,
+	Input,
+	InputGroup,
+	InputRightElement,
 	Popover,
 	PopoverBody,
 	PopoverCloseButton,
@@ -23,19 +29,41 @@ import {
 	Spacer,
 	Stack,
 	Text,
+	useBreakpointValue,
 	useDisclosure
 } from '@chakra-ui/react';
-import type { ReactElement } from 'react';
-import { MdCheckCircle, MdFlag, MdKeyboardArrowDown } from 'react-icons/md';
+import { type ReactElement, useState } from 'react';
+import { MdAdd, MdCheckCircle, MdFlag, MdKeyboardArrowDown, MdPalette } from 'react-icons/md';
 import SelectModal from './SelectModal';
 
 const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 	const { getThemeValue } = useThemeValues();
 	const [languageId, languages] = useLanguage();
 	const { setLanguageId } = useLanguageStore();
 	const [themeId, setThemeId, themes] = useTheme();
+	const [serverURL, setServerURL] = useServerURL();
+
 	const { isOpen: isLangOpen, onClose: onLangClose, onOpen: onLangOpen } = useDisclosure();
 
+	const { isOpen: isThemeOpen, onClose: onThemeClose, onOpen: onThemeOpen } = useDisclosure();
+
+	const [serverURLInput, setServerURLInput] = useState(serverURL ?? '');
+	const [isServerURLInputFocused, setIsServerURLInputFocused] = useState(false);
+
+	let serverInputError: string | null = null;
+
+	if (serverURLInput) {
+		try {
+			const u = new URL(serverURLInput);
+
+			if (u.protocol !== 'http:' && u.protocol !== 'https:') {
+				serverInputError = 'Please provide a valid server URL';
+			}
+		} catch {}
+	}
+
+	const quickThemeLimit = useBreakpointValue([3, 4]) ?? 4;
+
 	return (
 		<>
 			<SelectModal
@@ -52,6 +80,19 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 				onPreview={setLanguageId}
 				onSelect={setLanguageId}
 			/>
+			<SelectModal
+				isOpen={isThemeOpen}
+				onClose={onThemeClose}
+				listItems={themes.map(({ id, name }) => ({
+					id,
+					name,
+					details: themeId === id ? 'Recently used' : 'Set theme',
+					icon: <MdPalette />
+				}))}
+				initialSelectedId={themeId}
+				onPreview={setThemeId}
+				onSelect={setThemeId}
+			/>
 			<Popover isLazy>
 				<PopoverTrigger>{trigger}</PopoverTrigger>
 				<Portal>
@@ -64,24 +105,33 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 									<FormLabel htmlFor='language'>
 										<Heading size='sm'>Language</Heading>
 									</FormLabel>
-									<Button id='language' rightIcon={<MdKeyboardArrowDown />} onClick={onLangOpen}>
+									<Button
+										size='sm'
+										id='language'
+										rightIcon={<MdKeyboardArrowDown />}
+										onClick={onLangOpen}
+									>
 										{languages.find((lang) => lang.id === languageId)?.name ?? languages[0]?.name}
 									</Button>
 								</FormControl>
 								<FormControl gap='5px' display='flex' flexDirection='column'>
 									<FormLabel htmlFor='theme'>
 										<Heading size='sm'>Theme selector</Heading>
 									</FormLabel>
-									<SimpleGrid gap='20px' id='theme' minChildWidth={['100px', '85px']}>
-										{themes.map((theme, i) => (
-											<Box
-												key={theme.id}
+									<SimpleGrid gap='10px' id='theme' minChildWidth={['100px', '70px']}>
+										{themes.slice(0, quickThemeLimit + 1).map((theme, i) => (
+											<Center
+												key={i === quickThemeLimit ? 'more-themes' : theme.id}
 												w='100%'
 												h={['70px', '70px']}
-												bg={theme.values.primaryDisplay}
+												bg={
+													i === quickThemeLimit
+														? getThemeValue('midTransparency')
+														: theme.values.primaryDisplay
+												}
 												borderRadius='10px'
 												style={
-													theme.id === themeId
+													theme.id === themeId && i !== quickThemeLimit
 														? {
 																outline: '3px solid',
 																outlineOffset: '-3px',
@@ -92,9 +142,14 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 												_hover={{
 													outline: '3px solid',
 													outlineOffset: '-3px',
-													outlineColor: theme.values.lowTransparency
+													outlineColor:
+														i === quickThemeLimit
+															? getThemeValue('lowTransparency')
+															: theme.values.lowTransparency
 												}}
-												onClick={() => setThemeId(theme.id)}
+												onClick={() =>
+													i === quickThemeLimit ? onThemeOpen() : setThemeId(theme.id)
+												}
 											>
 												<Flex
 													h='100%'
@@ -107,7 +162,11 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 													<Box
 														w='100%'
 														borderBottomRadius='10px'
-														bg={theme.values.lowAltTransparency}
+														bg={
+															i === quickThemeLimit
+																? getThemeValue('lowAltTransparency')
+																: theme.values.lowAltTransparency
+														}
 													>
 														<Flex
 															w='100%'
@@ -119,16 +178,31 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 															<Text
 																paddingX='5px'
 																fontSize='12px'
-																color={theme.values.text}
+																color={
+																	i === quickThemeLimit
+																		? getThemeValue('text')
+																		: theme.values.text
+																}
 																noOfLines={1}
 															>
-																{theme.name}
+																{i === quickThemeLimit ? (
+																	<Flex gap='5px'>
+																		More
+																		<MdAdd fontSize='20px' />
+																	</Flex>
+																) : (
+																	theme.name
+																)}
 															</Text>
 															<Spacer />
 															<SlideFade
-																in={theme.id === themeId || (!themeId && i === 0)}
+																in={
+																	(theme.id === themeId && i !== quickThemeLimit) ||
+																	(!themeId && i === 0)
+																}
 															>
-																{(theme.id === themeId || (!themeId && i === 0)) && (
+																{((theme.id === themeId && i !== quickThemeLimit) ||
+																	(!themeId && i === 0)) && (
 																	<Icon
 																		as={MdCheckCircle}
 																		zIndex={40}
@@ -139,10 +213,54 @@ const SettingsPopover = ({ trigger }: SettingPopoverProps): ReactElement => {
 														</Flex>
 													</Box>
 												</Flex>
-											</Box>
+											</Center>
 										))}
 									</SimpleGrid>
 								</FormControl>
+								<FormControl gap='5px' display='flex' flexDirection='column'>
+									<FormLabel htmlFor='serverURL'>
+										<Flex gap='10px' alignItems='center'>
+											<Heading size='sm'>Server URL</Heading>
+											{!serverInputError && isServerURLInputFocused && (
+												<SlideFade in={true} offsetY={-8} unmountOnExit>
+													<Text fontSize='xs'>
+														Make sure you trust the server you are adding.
+													</Text>
+												</SlideFade>
+											)}
+											{serverInputError && (
+												<SlideFade in={true} offsetY={-8} delay={0.1} unmountOnExit>
+													<Text fontSize='xs' color='red.300'>
+														{serverInputError}
+													</Text>
+												</SlideFade>
+											)}
+										</Flex>
+									</FormLabel>
+									<InputGroup>
+										<Input
+											id='serverURL'
+											isInvalid={!!serverInputError}
+											value={serverURLInput}
+											onChange={(e) => {
+												setServerURLInput(e.target.value);
+											}}
+											focusBorderColor={getThemeValue('primary')}
+											placeholder='https://jspaste.eu/api/v2/documents'
+											onBlur={() => {
+												setIsServerURLInputFocused(false);
+
+												if (!serverInputError) setServerURL(serverURLInput);
+											}}
+											onFocus={() => setIsServerURLInputFocused(true)}
+										/>
+										<SlideFade in={!!serverURLInput} offsetX={8} offsetY={0} unmountOnExit>
+											<InputRightElement>
+												<CloseButton size='md' onClick={() => setServerURLInput('')} />
+											</InputRightElement>
+										</SlideFade>
+									</InputGroup>
+								</FormControl>
 							</Stack>
 						</PopoverBody>
 					</PopoverContent>

src/hooks/useServerURL.ts

@@ -0,0 +1,7 @@
+import useServerURLStore from '@/store/serverURL';
+
+export default function useServerURL() {
+	const { serverURL, setServerURL } = useServerURLStore();
+
+	return [serverURL, setServerURL] as const;
+}

src/hooks/useTheme.ts

@@ -8,7 +8,7 @@ export default function useTheme() {
 
 	return [
 		themeId,
-		(themeId: string) => {
+		(themeId?: string) => {
 			const selectedTheme = themes.find((theme) => theme.id === themeId);
 
 			if (!selectedTheme) return;

src/store/serverURL.ts

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+const serverURLStore = create(
+	persist<{
+		serverURL: string | undefined;
+		setServerURL: (serverURL: string) => void;
+	}>(
+		(set) => ({
+			serverURL: undefined,
+			setServerURL: (serverURL) => set({ serverURL })
+		}),
+		{
+			name: 'server-store'
+		}
+	)
+);
+
+export default serverURLStore;

src/themes/monaco/amoled.json

@@ -0,0 +1,8 @@
+{
+	"base": "vs-dark",
+	"inherit": true,
+	"rules": [],
+	"colors": {
+		"editor.background": "#000000"
+	}
+}

src/themes/monaco/midnight.json

@@ -3,6 +3,6 @@
 	"inherit": true,
 	"rules": [],
 	"colors": {
-		"editor.background": "#1C082E00"
+		"editor.background": "#04010700"
 	}
 }

src/themes/ui/themes.ts

@@ -15,8 +15,8 @@ export const themes: Theme[] = [
 			editor: '#2E2E2E',
 			tooltip: '#202020',
 			popup: '#292929',
-			text: '#CCC',
-			textMuted: '#AAA',
+			text: '#D6D6D6',
+			textMuted: '#BBBBBB',
 			highTransparency: '#FFFFFF20',
 			midTransparency: '#FFFFFF30',
 			lowTransparency: '#FFFFFF40',
@@ -33,8 +33,8 @@ export const themes: Theme[] = [
 		isCustomMonacoTheme: false,
 		values: {
 			primary: '#D3D3D3',
-			primaryDisplay: '#2E2E2E',
-			information: '#2E2E2E',
+			primaryDisplay: '#222222',
+			information: '#181818',
 			controls: '#222222',
 			editor: '#2E2E2E',
 			tooltip: '#464646',
@@ -82,11 +82,35 @@ export const themes: Theme[] = [
 		values: {
 			primary: '#7D76DD',
 			primaryDisplay: '#5C51F7',
-			information: '#180827',
-			controls: '#180827',
-			editor: '#0D031D',
+			information: '#05010C',
+			controls: '#05010C',
+			editor: '#0A0216',
 			tooltip: '#18082C',
-			popup: '#18082C',
+			popup: '#140922',
+			text: '#EBEBEB',
+			textMuted: '#949494',
+			highTransparency: '#ffffff20',
+			midTransparency: '#ffffff30',
+			lowTransparency: '#ffffff40',
+			highAltTransparency: '#00000020',
+			midAltTransparency: '#00000030',
+			lowAltTransparency: '#00000040'
+		}
+	},
+	{
+		id: 'amoled',
+		name: 'Amoled',
+		baseTheme: 'dark',
+		monacoTheme: 'amoled',
+		isCustomMonacoTheme: true,
+		values: {
+			primary: '#D3D3D3',
+			primaryDisplay: '#1B1B1B',
+			information: '#070707',
+			controls: '#070707',
+			editor: '#1A1A1A',
+			tooltip: '#161616',
+			popup: '#070707',
 			text: '#EBEBEB',
 			textMuted: '#949494',
 			highTransparency: '#ffffff20',