feat: rewrite codebase for better responsiveness

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import { Provider } from 'react-redux';
 import './i18next/i18next';
 import store from './store/store';
 import { MapWrapper } from './components/Map/MapWrapper';
-import { AppActions } from './components/Settings/AppActions';
+import { AppActions } from './components/Settings/AppActions/AppActions';
 import { MantineProviders } from './providers/MantineProvider';
 import { HotkeysProvider } from './providers/HotkeysProvider';
 import InitStoreProvider from './providers/InitStoreProvider';

frontend/src/components/Common/AffixBtn.tsx → frontend/src/components/Common/AffixBtn/AffixBtn.tsx

@@ -1,5 +1,6 @@
-import { Affix, Flex } from "@mantine/core";
-import { useViewportSize } from "@mantine/hooks";
+import { Affix } from "@mantine/core";
+import { useSmallScreen } from "../../../hooks/useSmallScreen";
+import { SmallScreen } from "./SmallScreen";
 
 export function AffixBtn({
   children,
@@ -16,21 +17,13 @@ export function AffixBtn({
   leftSection?: React.ReactNode;
   rightSection?: React.ReactNode;
 }) {
-  const { width } = useViewportSize();
+  const isSmallScreen = useSmallScreen();
 
   return (
     <>
     {
-      width < 768
-        ? <Affix position={position}>
-          <Flex gap="sm" className="w-screen" justify={
-            position.right ? "end" : "start"
-          }>
-            { leftSection }
-            { children }
-            { rightSection }
-          </Flex>
-        </Affix>
+      isSmallScreen
+        ? <SmallScreen position={position} leftSection={leftSection} rightSection={rightSection}>{ children }</SmallScreen>
         : defaultToPlain
           ? children
           : <Affix position={widePosition}>

frontend/src/components/Common/AffixBtn/SmallScreen.tsx

@@ -0,0 +1,22 @@
+import { Flex, Affix } from "@mantine/core";
+
+export function SmallScreen(props: {
+  children: React.ReactNode;
+  leftSection?: React.ReactNode;
+  rightSection?: React.ReactNode;
+  position: { bottom?: number; right?: number; top?: number; left?: number; };
+}) {
+  const { children, leftSection, rightSection, position } = props;
+
+  return (
+    <Affix position={position}>
+      <Flex gap="sm" className="w-screen" justify={
+        position.right ? "end" : "start"
+      }>
+        { leftSection }
+        { children }
+        { rightSection }
+      </Flex>
+    </Affix>
+  )
+}

frontend/src/components/Filtering/PropertyOccupations.tsx

@@ -1,12 +1,12 @@
 import { NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { useMediaQuery } from "@mantine/hooks";
 import { selectPropertyOccupations } from "../../store/filtering/filteringSelector";
 import { useAppDispatch, useAppSelector } from "../../hooks/useInitStore";
 import { setPropertyOccupations } from "../../store/filtering/filteringReducer";
+import { useSmallScreen } from "../../hooks/useSmallScreen";
 
 export function PropertyOccupations() {
-  const mediaQuerySize = useMediaQuery('(max-width: 768px)') ? 'xl' : 'md';
+  const isSmallScreen = useSmallScreen();
   const { t } = useTranslation('common', { keyPrefix: 'filtering' });
 
   const dispatch = useAppDispatch();
@@ -28,7 +28,7 @@ export function PropertyOccupations() {
       min={0}
       max={propertyOccupations.max}
       allowDecimal={false}
-      size={mediaQuerySize}
+      size={isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyOccupations(e as number)}
     />
     <NumberInput
@@ -38,7 +38,7 @@ export function PropertyOccupations() {
       min={propertyOccupations.min}
       max={100}
       allowDecimal={false}
-      size={mediaQuerySize}
+      size={isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyOccupations(undefined, e as number)}
     />
   </>

frontend/src/components/Filtering/PropertyType.tsx

@@ -1,15 +1,15 @@
-import { useAppSelector } from "../../hooks/useInitStore";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { ComboboxData, MultiSelect } from "@mantine/core";
+import { useAppSelector } from "../../hooks/useInitStore";
 import { analyticsEvent } from "../../services/analytics";
 import { useAppDispatch } from "../../hooks/useInitStore";
 import { selectPropertyTypes } from "../../store/filtering/filteringSelector";
-import { ComboboxData, MultiSelect } from "@mantine/core";
 import { setPropertyTypes } from "../../store/filtering/filteringReducer";
-import { useMemo } from "react";
-import { useMediaQuery } from "@mantine/hooks";
+import { useSmallScreen } from "../../hooks/useSmallScreen";
 
 export function PropertyType() {
-  const mediaQuerySize = useMediaQuery('(max-width: 768px)') ? 'xl' : 'md';
+  const isSmallScreen = useSmallScreen();
   const { t } = useTranslation('common', { keyPrefix: 'filtering' });
   const { t: tPropertyType } = useTranslation('common', { keyPrefix: 'propertyType' });
   const dispatch = useAppDispatch();
@@ -35,7 +35,7 @@ export function PropertyType() {
       label={t('propertyTypes')}
       data={data}
       value={propertyTypes}
-      size={mediaQuerySize}
+      size={isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyTypes(e)} />
   )
 }

frontend/src/components/Filtering/PropertyYields.tsx

@@ -1,12 +1,12 @@
 import { NumberInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { useMediaQuery } from "@mantine/hooks";
+import { useSmallScreen } from "../../hooks/useSmallScreen";
 import { selectPropertyYields } from "../../store/filtering/filteringSelector";
 import { useAppDispatch, useAppSelector } from "../../hooks/useInitStore";
 import { setPropertyYields } from "../../store/filtering/filteringReducer";
 
 export function PropertyYields() {
-  const mediaQuerySize = useMediaQuery('(max-width: 768px)') ? 'xl' : 'md';
+  const isSmallScreen = useSmallScreen();
   const { t } = useTranslation('common', { keyPrefix: 'filtering' });
 
   const dispatch = useAppDispatch();
@@ -30,7 +30,7 @@ export function PropertyYields() {
       min={0}
       max={propertyYields.max ?? undefined}
       allowDecimal={false}
-      size={mediaQuerySize}
+      size={isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyYields(e as number)}
     />
     <NumberInput
@@ -40,7 +40,7 @@ export function PropertyYields() {
       min={propertyYields.min}
       max={100}
       allowDecimal={false}
-      size={mediaQuerySize}
+      size={isSmallScreen ? 'md' : 'xl'}
       onChange={(e) => onPropertyYields(undefined, e as number)}
     />
   </>

frontend/src/components/PropertyPanel/PropertyPanelActions.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
-import Env from "../../utils/env";
 import { ActionIcon, Button, Flex, Grid } from "@mantine/core";
 import GoogleIcon from '@mui/icons-material/Google';
 import XIcon from '@mui/icons-material/X';
 import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
-import { AffixBtn } from "../Common/AffixBtn";
+import Env from "../../utils/env";
+import { AffixBtn } from "../Common/AffixBtn/AffixBtn";
 import { useCopyUrl } from "../../hooks/useCopyUrl";
-import { useViewportSize } from "@mantine/hooks";
 import { Property } from "../../types/property";
+import { useSmallScreen } from "../../hooks/useSmallScreen";
 
 function encodeUrlUsingPercentEncoding(url: string) {
   return encodeURI(url);
@@ -24,7 +24,7 @@ export function PropertyPanelActions({
   coordinates: Property['coordinates'];
   onClose: () => void;
 }) {
-  const { width } = useViewportSize();
+  const isSmallScreen = useSmallScreen();
   const { t } = useTranslation('common');
   const { copied, onCopyUrl } = useCopyUrl();
 
@@ -115,7 +115,7 @@ export function PropertyPanelActions({
             </Button>
           }>
           <Button
-            fullWidth={width > 768}
+            fullWidth={isSmallScreen}
             onClick={onClose}>
             {t('actions.close')}
           </Button>

frontend/src/components/Settings/AppActions/Actions/ActionsWrapper.tsx

@@ -0,0 +1,61 @@
+import { useState, useRef } from "react";
+import { Flex } from "@mantine/core";
+import { CopyUrlAction } from "./CopyUrlAction";
+import { HelpPanelAction } from "./HelpPanelAction";
+import { FilteringPanelAction } from "./FilteringPanelAction";
+import { SettingsPanelAction } from "./SettingsPanelAction";
+import { WalletPanelAction } from "./WalletPanelAction";
+import { SearchBar } from "../../SearchBar";
+import { StartTooltip } from "../../StartTooltip";
+import { SearchAction } from "./SearchAction";
+import { useSmallScreen } from "../../../../hooks/useSmallScreen";
+
+export function ActionsWrapper(props: {
+  onOpenWallets: () => void;
+  onOpenMapOptions: () => void;
+  onOpenFiltering: () => void;
+  onOpenHelp: () => void;
+}) {
+  const isSmallScreen = useSmallScreen();
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const searchBarRef = useRef<{ focus: () => void }>(null);
+
+  const onToggleSearch = () => {
+    setIsSearchOpen((prev) => {
+      if (!prev) {
+        setTimeout(() => searchBarRef.current?.focus(), 0);
+      }
+      return !prev;
+    });
+  }
+
+  return (
+    <Flex
+      direction={isSmallScreen ? 'column' : 'row'}
+      align={isSmallScreen ? 'baseline' : 'end'}
+      gap="xs"
+      className="w-screen md:w-auto pt-2 md:pt-0">
+      {
+        isSmallScreen
+        ? isSearchOpen && <SearchBar ref={searchBarRef} />
+        : <SearchBar ref={searchBarRef} />
+      }
+      { isSmallScreen && <StartTooltip onClick={props.onOpenWallets} /> }
+      <Flex
+        className="w-full md:w-auto"
+        direction="row"
+        align="end"
+        justify={isSmallScreen ? 'space-around' : 'end'}
+        gap="xs">
+        <CopyUrlAction />
+        <WalletPanelAction onOpenWallets={props.onOpenWallets} />
+        <SettingsPanelAction onOpenMapOptions={props.onOpenMapOptions} />
+        <FilteringPanelAction onOpenFiltering={props.onOpenFiltering} />
+        <HelpPanelAction onOpenHelp={props.onOpenHelp} />
+        {
+          isSmallScreen && <SearchAction onToggleSearch={onToggleSearch} />
+        }
+      </Flex>
+    </Flex>
+  )
+}

frontend/src/components/Settings/AppActions/Actions/CopyUrlAction.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import LinkIcon from '@mui/icons-material/Link';
+import CheckIcon from '@mui/icons-material/Check';
+import { AppActionsButton } from "../AppActionsButton";
+import { useCopyUrl } from "../../../../hooks/useCopyUrl";
+
+export function CopyUrlAction() {
+  const { t } = useTranslation('common');
+  const { copied, onCopyUrl } = useCopyUrl();
+
+  return (
+    <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
+      {
+        !copied
+          ? <LinkIcon fontSize="large" />
+          : <CheckIcon fontSize="large" />
+      }
+    </AppActionsButton>
+  )
+}