UI fix (#27)

* fix(home): remove dropdown flickering

* refactor(components/tile): move component creation function as
standalone function

* refactor(components/bohr-model): reduce bohr model frame size, increase
model size

* refactor(components/compounds): move compounds filtering as external hook

* test(snapshot): updated all snapshot with new ui for element page

apps/web/pages/elements/[name]/index.tsx

@@ -439,11 +439,10 @@ const listOfProperties = (props: GetStaticPropsType) => {
 				),
 				Interactive: (
 					<Box
-						sx={(theme) => {
-							return {
-								width: 'fit-content',
-								border: `1px solid ${theme.colorSchemes.dark.palette.neutral[700]}`,
-							};
+						sx={{
+							width: 'fit-content',
+							border: '1px solid',
+							borderColor: 'neutral.800',
 						}}
 					>
 						{!element.bohrModel.interactive ? null : (

apps/web/src/web/components/bohr/three-dimensional.tsx

@@ -1,32 +1,30 @@
 import React from 'react';
 
-import useBreakpoint from '../../hooks/break-point';
-
 const BohrThreeDimensional = (
 	props: Readonly<{
 		src: string;
 		name: string;
 	}>
 ) => {
-	const breakpoint = useBreakpoint();
-
-	const isExtraSmall = breakpoint === 'xs';
-
-	const length = isExtraSmall ? 300 : 400;
+	const length = 300;
 
 	return (
 		// @ts-expect-error: model-viewer is injected by Google
 		<model-viewer
 			ar
-			interaction-prompt="auto"
-			interaction-prompt-style="wiggle"
-			interaction-prompt-threshold="0"
+			ar-modes="webxr scene-viewer quick-look"
+			autoplay
+			loading="lazy"
 			alt={`A 3D model of ${props.name}`}
 			src={props.src}
-			auto-rotate
 			shadow-intensity="1"
 			camera-controls
+			tone-mapping="neutral"
 			touch-action="pan-y"
+			min-camera-orbit="auto auto 100%"
+			max-camera-orbit="auto auto 60%"
+			min-field-of-view="0deg"
+			max-field-of-view="110deg"
 			style={{
 				width: length,
 				height: length,

apps/web/src/web/components/compounds/index.tsx

@@ -19,6 +19,7 @@ import {
 	Defined,
 	type Return,
 	formQueryParamStringFromRecord,
+	type Optional,
 } from '@poolofdeath20/util';
 
 import { useDebounce } from 'use-debounce';
@@ -59,6 +60,53 @@ const getMaxFrom = (compounds: Compounds) => {
 	};
 };
 
+const useCompounds = (
+	props: Readonly<{
+		compounds: Compounds;
+		search: Optional<string>;
+	}>
+) => {
+	const [compounds, setCompounds] = React.useState(props.compounds);
+
+	React.useEffect(() => {
+		setCompounds(
+			props.search
+				.map((value) => {
+					return value.toLowerCase();
+				})
+				.map((value) => {
+					return props.compounds.filter((match) => {
+						const molecularFormulaMatch = match.molecularformula
+							.toLowerCase()
+							.includes(value);
+
+						switch (molecularFormulaMatch) {
+							case true: {
+								return true;
+							}
+							case false: {
+								const nameMatches = match.allnames.filter(
+									(name) => {
+										return name
+											.toLowerCase()
+											.includes(value);
+									}
+								);
+
+								return nameMatches.length;
+							}
+						}
+					});
+				})
+				.unwrapOrElse(() => {
+					return props.compounds;
+				})
+		);
+	}, [props.search]);
+
+	return compounds;
+};
+
 const DirectionPaginationButton = (
 	props: Readonly<{
 		direction: 'left' | 'right';
@@ -209,7 +257,10 @@ const ListOfCompounds = (
 
 	const [debounceSearch] = useDebounce(search, 400);
 
-	const [compounds, setCompounds] = React.useState(props.compounds);
+	const compounds = useCompounds({
+		search,
+		compounds: props.compounds,
+	});
 
 	const fromRow = getMaxFrom(compounds);
 
@@ -236,42 +287,6 @@ const ListOfCompounds = (
 
 	const sliced = compounds.slice(range.start, range.end);
 
-	React.useEffect(() => {
-		setCompounds(
-			search
-				.map((value) => {
-					return value.toLowerCase();
-				})
-				.map((value) => {
-					return props.compounds.filter((match) => {
-						const molecularFormulaMatch = match.molecularformula
-							.toLowerCase()
-							.includes(value);
-
-						switch (molecularFormulaMatch) {
-							case true: {
-								return true;
-							}
-							case false: {
-								const nameMatches = match.allnames.filter(
-									(name) => {
-										return name
-											.toLowerCase()
-											.includes(value);
-									}
-								);
-
-								return nameMatches.length;
-							}
-						}
-					});
-				})
-				.unwrapOrElse(() => {
-					return props.compounds;
-				})
-		);
-	}, [search.unwrapOrGet('')]);
-
 	React.useEffect(() => {
 		debounceSearch.ifSome((search) => {
 			if (oldSearch !== search) {