[pa] rearrange ui

apps/palette/web/src/components/actions/DeleteColorAction.tsx

@@ -0,0 +1,32 @@
+import { ActionButton } from '@a-type/ui/components/actions';
+import { Icon } from '@a-type/ui/components/icon';
+import { useColorSelection } from '../projects/hooks.js';
+import { Project } from '@palette.biscuits/verdant';
+import { hooks } from '@/hooks.js';
+
+export function DeleteColorAction({ project }: { project: Project }) {
+	const { colors } = hooks.useWatch(project);
+
+	const [selectedId, selectId] = useColorSelection();
+
+	const deleteSelectedColor = () => {
+		if (selectedId) {
+			const val = colors.find((c) => c.get('id') === selectedId);
+			if (val) {
+				colors.removeAll(val);
+			}
+			selectId(null);
+		}
+	};
+
+	return (
+		<ActionButton
+			color="destructive"
+			onClick={deleteSelectedColor}
+			icon={<Icon name="trash" />}
+			visible={!!selectedId}
+		>
+			Delete color
+		</ActionButton>
+	);
+}

apps/palette/web/src/components/actions/SortAction.tsx

@@ -0,0 +1,25 @@
+import { ActionButton } from '@a-type/ui/components/actions';
+import { ColorSort, useSort } from '../projects/hooks.js';
+import { Icon } from '@a-type/ui/components/icon';
+
+export function SortAction() {
+	const [sort, setSort] = useSort();
+
+	const goNext = () => {
+		const currentIndex = orderedOptions.indexOf(sort);
+		const nextIndex = (currentIndex + 1) % orderedOptions.length;
+		setSort(orderedOptions[nextIndex]);
+	};
+
+	return (
+		<ActionButton
+			onClick={goNext}
+			icon={<Icon name="drag_vertical" />}
+			className="capitalize"
+		>
+			{sort}
+		</ActionButton>
+	);
+}
+
+const orderedOptions: ColorSort[] = ['hue', 'saturation', 'lightness'];

apps/palette/web/src/components/actions/ToggleBubblesAction.tsx

@@ -0,0 +1,21 @@
+import { useSnapshot } from 'valtio';
+import { toolState } from '../projects/state.js';
+import { ActionButton } from '@a-type/ui/components/actions';
+import { Icon } from '@a-type/ui/components/icon';
+
+export interface ToggleBubblesActionProps {}
+
+export function ToggleBubblesAction({}: ToggleBubblesActionProps) {
+	const showBubbles = useSnapshot(toolState).showBubbles;
+
+	return (
+		<ActionButton
+			icon={<Icon name={showBubbles ? 'eye' : 'eyeClosed'} />}
+			toggled={showBubbles}
+			toggleMode="state-only"
+			onClick={() => (toolState.showBubbles = !showBubbles)}
+		>
+			Dots
+		</ActionButton>
+	);
+}

apps/palette/web/src/components/projects/ColorBreakdown.tsx

@@ -1,43 +1,20 @@
-import { hooks } from '@/hooks.js';
-import { Project, ProjectColorsItem } from '@palette.biscuits/verdant';
 // @ts-ignore
 import { Color } from '@dynamize/color-utilities';
-import { useColorSelection } from './hooks.js';
 import { clsx } from '@a-type/ui';
 import { useBoundsCssVars } from '@a-type/ui/hooks';
 
 export interface ColorBreakdownProps {
-	project: Project;
+	color: { r: number; g: number; b: number };
 	className?: string;
 }
 
-// shows r/y/b distribution of a color
-export function ColorBreakdown({ project, className }: ColorBreakdownProps) {
-	const [selectedId] = useColorSelection();
-	const { colors } = hooks.useWatch(project);
-	hooks.useWatch(colors);
-	const matchingColor = colors.find((c) => c.get('id') === selectedId);
-
-	if (!matchingColor) {
-		return null;
-	}
-
-	return <ColorBreakdownVisuals color={matchingColor} className={className} />;
-}
-
 const yellow = 'rgb(255,255,0)';
 const red = 'rgb(255,0,0)';
 const blue = 'rgb(0,0,255)';
 
-function ColorBreakdownVisuals({
-	color,
-	className,
-}: {
-	color: ProjectColorsItem;
-	className?: string;
-}) {
-	const { value } = hooks.useWatch(color);
-	const { r, g, b } = value.getSnapshot();
+// shows r/y/b distribution of a color
+export function ColorBreakdown({ color, className }: ColorBreakdownProps) {
+	const { r, g, b } = color;
 	const convertible = new Color('rgb', { red: r, green: g, blue: b }, [
 		'ryb',
 		'cmyk',
@@ -48,47 +25,34 @@ function ColorBreakdownVisuals({
 	const hsl = convertible.hsl;
 
 	return (
-		<div
-			className={clsx(
-				'flex flex-col gap-3 md:(flex-row items-stretch)',
-				className,
-			)}
-		>
-			<div
-				className="h-15vh w-full md:(h-auto [flex:1_0_80px]) rounded-lg"
-				style={{
-					background: `rgb(${r},${g},${b})`,
-				}}
+		<div className={clsx('flex flex-row gap-3 justify-around', className)}>
+			<PieChart
+				segments={[
+					{
+						label: 'R',
+						color: red,
+						percent: (100 * ryb.red) / rybTotal,
+					},
+					{
+						label: 'Y',
+						color: yellow,
+						percent: (100 * ryb.yellow) / rybTotal,
+					},
+					{
+						label: 'B',
+						color: blue,
+						percent: (100 * ryb.blue) / rybTotal,
+					},
+				]}
 			/>
-			<div className="flex flex-col gap-3 [flex:2_0_80px]">
-				<PieChart
-					segments={[
-						{
-							label: 'R',
-							color: red,
-							percent: (100 * ryb.red) / rybTotal,
-						},
-						{
-							label: 'Y',
-							color: yellow,
-							percent: (100 * ryb.yellow) / rybTotal,
-						},
-						{
-							label: 'B',
-							color: blue,
-							percent: (100 * ryb.blue) / rybTotal,
-						},
-					]}
+			<div className="h-100% w-32px flex-shrink-0 bg-gradient-to-b from-#000000 to-#ffffff relative">
+				<div
+					className="w-full h-5px absolute"
+					style={{
+						top: `${hsl.lightness}%`,
+						background: hsl.lightness > 50 ? 'black' : 'white',
+					}}
 				/>
-				<div className="w-100% h-32px flex-shrink-0 bg-gradient-to-r from-#000000 to-#ffffff relative mt-3">
-					<div
-						className="h-full w-5px absolute"
-						style={{
-							left: `${hsl.lightness}%`,
-							background: hsl.lightness > 50 ? 'black' : 'white',
-						}}
-					/>
-				</div>
 			</div>
 		</div>
 	);
@@ -131,7 +95,10 @@ function PieChart({
 			style={{
 				backgroundImage: gradient,
 			}}
-			className={clsx('rounded-full aspect-1 w-full relative', className)}
+			className={clsx(
+				'rounded-full aspect-1 relative transition-all',
+				className,
+			)}
 		>
 			<div className="left-1/2 top-1/2 absolute overflow-visible">
 				{/* Render percentage values in the correct positions */}

apps/palette/web/src/components/projects/CreateProject.tsx

@@ -5,26 +5,26 @@ import { H2 } from '@a-type/ui/components/typography';
 
 export interface CreateProjectProps {}
 export function CreateProject(props: CreateProjectProps) {
-  const client = hooks.useClient();
-  const navigate = useNavigate();
+	const client = hooks.useClient();
+	const navigate = useNavigate();
 
-  return (
-    <div className="col">
-      <H2>Start a new project</H2>
-      <ImageUploader
-        className="h-400px w-full"
-        onChange={async (value) => {
-          if (value) {
-            const project = await client.projects.put({
-              image: value,
-            });
-            navigate(`/projects/${project.get('id')}`, {
-              skipTransition: true,
-            });
-          }
-        }}
-        value={null}
-      />
-    </div>
-  );
+	return (
+		<div className="col">
+			<H2>Start a new project</H2>
+			<ImageUploader
+				className="h-400px w-full max-w-600px"
+				onChange={async (value) => {
+					if (value) {
+						const project = await client.projects.put({
+							image: value,
+						});
+						navigate(`/projects/${project.get('id')}`, {
+							skipTransition: true,
+						});
+					}
+				}}
+				value={null}
+			/>
+		</div>
+	);
 }