From c9b103ae0f4276217789de0400d6290276d0b004 Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Wed, 4 Jan 2023 11:51:27 -0500
Subject: [PATCH 1/5] various client adjustments

- Temporarily disable `Save to Scanner` button so Pliny doesn't break his stuff anymore
- Rename `components/drawer/geofence` folder to `components/drawer/drawing`
- Make input components have less tedious props
- Fancier types for those input components
- Change `BtnGroup` to `MultiOptions` and add a prop that specifies Select or Buttons
- Put line string arrows on their own pane and add a toggle for them
- Don't scale arrows with zoom
- Use less hacky svg for easy button
---
 client/src/assets/types.ts                    |  6 ++
 client/src/components/dialogs/Manager.tsx     |  1 +
 client/src/components/dialogs/Polygon.tsx     | 15 +++--
 .../src/components/drawer/drawing/index.tsx   | 26 ++++++++
 .../src/components/drawer/geofence/index.tsx  | 44 -------------
 client/src/components/drawer/index.tsx        |  4 +-
 .../src/components/drawer/inputs/BtnGroup.tsx | 39 ------------
 .../src/components/drawer/inputs/DateTime.tsx | 22 +++----
 .../components/drawer/inputs/MultiOptions.tsx | 62 +++++++++++++++++++
 .../src/components/drawer/inputs/NumInput.tsx | 34 +++++-----
 .../src/components/drawer/inputs/Toggle.tsx   | 24 ++++---
 client/src/components/drawer/manage/index.tsx |  8 +--
 .../src/components/drawer/routing/index.tsx   | 56 ++++-------------
 .../src/components/drawer/settings/index.tsx  | 39 +++---------
 client/src/hooks/useLayers.ts                 |  5 ++
 client/src/hooks/usePersist.ts                |  2 +
 client/src/pages/map/index.tsx                |  5 +-
 client/src/pages/map/interface/index.tsx      | 22 +++----
 client/src/pages/map/markers/LineString.tsx   |  5 +-
 19 files changed, 184 insertions(+), 235 deletions(-)
 create mode 100644 client/src/components/drawer/drawing/index.tsx
 delete mode 100644 client/src/components/drawer/geofence/index.tsx
 delete mode 100644 client/src/components/drawer/inputs/BtnGroup.tsx
 create mode 100644 client/src/components/drawer/inputs/MultiOptions.tsx

diff --git a/client/src/assets/types.ts b/client/src/assets/types.ts
index 705996e0..c2613c79 100644
--- a/client/src/assets/types.ts
+++ b/client/src/assets/types.ts
@@ -7,6 +7,12 @@ import * as L from 'leaflet'
 import type { UsePersist } from '@hooks/usePersist'
 import type { UseStatic } from '@hooks/useStatic'
 
+export type SpecificValueType<T, U> = {
+  [k in keyof T]: T[k] extends U ? k : never
+}[keyof T]
+
+export type OnlyType<T, U> = { [k in SpecificValueType<T, U>]: U }
+
 export interface Data {
   gyms: PixiMarker[]
   pokestops: PixiMarker[]
diff --git a/client/src/components/dialogs/Manager.tsx b/client/src/components/dialogs/Manager.tsx
index 4c2941a0..0ba4c906 100644
--- a/client/src/components/dialogs/Manager.tsx
+++ b/client/src/components/dialogs/Manager.tsx
@@ -73,6 +73,7 @@ export default function Manager({ open, setOpen, geojson }: Props) {
           Save to Koji
         </Button>
         <Button
+          disabled
           onClick={() =>
             save('/api/v1/geofence/save-scanner', code).then((res) =>
               console.log(res),
diff --git a/client/src/components/dialogs/Polygon.tsx b/client/src/components/dialogs/Polygon.tsx
index aae4f797..68f91196 100644
--- a/client/src/components/dialogs/Polygon.tsx
+++ b/client/src/components/dialogs/Polygon.tsx
@@ -7,10 +7,10 @@ import type { ToConvert } from '@assets/types'
 import { usePersist } from '@hooks/usePersist'
 import { useShapes } from '@hooks/useShapes'
 import { convert } from '@services/fetches'
+import MultiOptions from '@components/drawer/inputs/MultiOptions'
 
 import DialogHeader from './Header'
 import { Code } from '../Code'
-import BtnGroup from '../drawer/inputs/BtnGroup'
 
 interface Props {
   open: string
@@ -40,7 +40,6 @@ export default function ExportPolygon({
 }: Import | Export | ExportAll): JSX.Element {
   const polygonExportMode = usePersist((s) => s.polygonExportMode)
   const simplifyPolygons = usePersist((s) => s.simplifyPolygons)
-  const setStore = usePersist((s) => s.setStore)
 
   const add = useShapes((s) => s.setters.add)
 
@@ -147,22 +146,22 @@ export default function ExportPolygon({
       </DialogContent>
       <DialogActions>
         {(mode === 'export' || mode === 'exportAll') && (
-          <BtnGroup
+          <MultiOptions
             field="polygonExportMode"
-            value={polygonExportMode}
-            setValue={setStore}
             buttons={[
-              'featureCollection',
-              'feature',
               'array',
+              'multiArray',
+              'feature',
+              'featureCollection',
               'struct',
+              'multiStruct',
               'text',
               'altText',
               'poracle',
             ]}
           />
         )}
-        <Button onClick={() => navigator.clipboard.writeText(code)}>
+        <Button onPointerDown={() => navigator.clipboard.writeText(code)}>
           Copy to Clipboard
         </Button>
         <Button
diff --git a/client/src/components/drawer/drawing/index.tsx b/client/src/components/drawer/drawing/index.tsx
new file mode 100644
index 00000000..387b6c61
--- /dev/null
+++ b/client/src/components/drawer/drawing/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { List, Divider, ListItem } from '@mui/material'
+
+import ListSubheader from '../../styled/Subheader'
+import Toggle from '../inputs/Toggle'
+import MultiOptions from '../inputs/MultiOptions'
+
+export default function DrawingTab() {
+  return (
+    <List dense>
+      <ListSubheader disableGutters>Drawing Options</ListSubheader>
+      <Toggle field="snappable" />
+      <Toggle field="continueDrawing" />
+      <ListItem>
+        Activate:
+        <MultiOptions field="setActiveMode" buttons={['hover', 'click']} />
+      </ListItem>
+      <Divider sx={{ my: 2 }} />
+      <ListSubheader disableGutters>Vectors</ListSubheader>
+      <Toggle field="showCircles" />
+      <Toggle field="showLines" />
+      <Toggle field="showPolygons" />
+      <Toggle field="showArrows" />
+    </List>
+  )
+}
diff --git a/client/src/components/drawer/geofence/index.tsx b/client/src/components/drawer/geofence/index.tsx
deleted file mode 100644
index 5f76faa3..00000000
--- a/client/src/components/drawer/geofence/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { List, Divider, ListItem } from '@mui/material'
-
-import { usePersist } from '@hooks/usePersist'
-
-import ListSubheader from '../../styled/Subheader'
-import Toggle from '../inputs/Toggle'
-import BtnGroup from '../inputs/BtnGroup'
-
-export default function GeofenceTab() {
-  const setStore = usePersist((s) => s.setStore)
-  const showCircles = usePersist((s) => s.showCircles)
-  const showLines = usePersist((s) => s.showLines)
-  const showPolygon = usePersist((s) => s.showPolygons)
-  const snappable = usePersist((s) => s.snappable)
-  const continueDrawing = usePersist((s) => s.continueDrawing)
-  const setActiveMode = usePersist((s) => s.setActiveMode)
-
-  return (
-    <List dense>
-      <ListSubheader disableGutters>Drawing Options</ListSubheader>
-      <Toggle field="snappable" value={snappable} setValue={setStore} />
-      <Toggle
-        field="continueDrawing"
-        value={continueDrawing}
-        setValue={setStore}
-      />
-      <ListItem>
-        Activate:
-        <BtnGroup
-          field="setActiveMode"
-          value={setActiveMode}
-          setValue={setStore}
-          buttons={['hover', 'click']}
-        />
-      </ListItem>
-      <Divider sx={{ my: 2 }} />
-      <ListSubheader disableGutters>Vectors</ListSubheader>
-      <Toggle field="showCircles" value={showCircles} setValue={setStore} />
-      <Toggle field="showLines" value={showLines} setValue={setStore} />
-      <Toggle field="showPolygons" value={showPolygon} setValue={setStore} />
-    </List>
-  )
-}
diff --git a/client/src/components/drawer/index.tsx b/client/src/components/drawer/index.tsx
index 0b053280..ca505421 100644
--- a/client/src/components/drawer/index.tsx
+++ b/client/src/components/drawer/index.tsx
@@ -12,7 +12,7 @@ import { safeParse } from '@services/utils'
 
 import { Drawer } from '../styled/Drawer'
 import DrawerHeader from '../styled/DrawerHeader'
-import GeofenceTab from './geofence'
+import DrawingTab from './drawing'
 import RoutingTab from './routing'
 import MenuAccordion from './MenuItem'
 import ImportExport from './manage'
@@ -72,7 +72,7 @@ export default function DrawerIndex({ drawerWidth }: Props) {
                 {!!i && <Divider />}
                 <MenuAccordion name={text}>
                   {{
-                    Drawing: <GeofenceTab />,
+                    Drawing: <DrawingTab />,
                     Clustering: <RoutingTab />,
                     Manage: <ImportExport />,
                     Settings: <Settings />,
diff --git a/client/src/components/drawer/inputs/BtnGroup.tsx b/client/src/components/drawer/inputs/BtnGroup.tsx
deleted file mode 100644
index e7a43d76..00000000
--- a/client/src/components/drawer/inputs/BtnGroup.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { ToggleButtonGroup, ToggleButton } from '@mui/material'
-
-import { type UsePersist } from '@hooks/usePersist'
-import { fromCamelCase, fromSnakeCase } from '@services/utils'
-
-interface Props<T extends keyof UsePersist, K extends string> {
-  field: T
-  value: K
-  setValue: (field: Props<T, K>['field'], value: Props<T, K>['value']) => void
-  buttons: K[]
-  disabled?: boolean
-}
-
-export default function BtnGroup<T extends keyof UsePersist, K extends string>({
-  field,
-  value,
-  setValue,
-  buttons,
-  disabled = false,
-}: Props<T, K>) {
-  return (
-    <ToggleButtonGroup
-      size="small"
-      color="primary"
-      value={value}
-      exclusive
-      onChange={(_e, v) => setValue(field, v)}
-      sx={{ mx: 'auto' }}
-      disabled={disabled}
-    >
-      {buttons.map((m) => (
-        <ToggleButton key={m} value={m} disabled={disabled}>
-          {m.includes('_') ? fromSnakeCase(m) : fromCamelCase(m)}
-        </ToggleButton>
-      ))}
-    </ToggleButtonGroup>
-  )
-}
diff --git a/client/src/components/drawer/inputs/DateTime.tsx b/client/src/components/drawer/inputs/DateTime.tsx
index 9c6f1963..f0558097 100644
--- a/client/src/components/drawer/inputs/DateTime.tsx
+++ b/client/src/components/drawer/inputs/DateTime.tsx
@@ -3,23 +3,21 @@ import dayjs from 'dayjs'
 import TextField from '@mui/material/TextField'
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'
 
-import { type UsePersist } from '@hooks/usePersist'
+import { usePersist, type UsePersist } from '@hooks/usePersist'
 import { fromCamelCase, fromSnakeCase } from '@services/utils'
 import { ListItem } from '@mui/material'
+import { OnlyType } from '@assets/types'
 
-interface Props<T extends keyof UsePersist> {
+export default function DateTime<T extends keyof OnlyType<UsePersist, Date>>({
+  field,
+  disabled,
+}: {
   field: T
-  value: Date
-  setValue: (field: Props<T>['field'], value: Props<T>['value']) => void
   disabled?: boolean
-}
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
 
-export default function DateTime<T extends keyof UsePersist>({
-  field,
-  value,
-  setValue,
-  disabled,
-}: Props<T>) {
   return (
     <ListItem>
       <DateTimePicker
@@ -35,7 +33,7 @@ export default function DateTime<T extends keyof UsePersist>({
         value={dayjs(value)}
         onChange={(newValue) => {
           if (newValue) {
-            setValue(field, newValue.set('second', 0).set('minute', 0).toDate())
+            setStore(field, newValue.set('second', 0).set('minute', 0).toDate())
           }
         }}
       />
diff --git a/client/src/components/drawer/inputs/MultiOptions.tsx b/client/src/components/drawer/inputs/MultiOptions.tsx
new file mode 100644
index 00000000..6703b4aa
--- /dev/null
+++ b/client/src/components/drawer/inputs/MultiOptions.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react'
+import {
+  ToggleButtonGroup,
+  ToggleButton,
+  Select,
+  MenuItem,
+} from '@mui/material'
+
+import { usePersist, type UsePersist } from '@hooks/usePersist'
+import { fromCamelCase, fromSnakeCase } from '@services/utils'
+import { OnlyType } from '@assets/types'
+
+export default function MultiOptions<
+  T extends keyof OnlyType<UsePersist, string>,
+  K extends UsePersist[T],
+>({
+  field,
+  buttons,
+  disabled = false,
+  type = 'button',
+}: {
+  field: T
+  buttons: K[]
+  disabled?: boolean
+  type?: 'button' | 'select'
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
+
+  return type === 'button' ? (
+    <ToggleButtonGroup
+      size="small"
+      color="primary"
+      value={value}
+      exclusive
+      onChange={(_e, v) => setStore(field, v)}
+      sx={{ mx: 'auto' }}
+      disabled={disabled}
+    >
+      {buttons.map((m) => (
+        <ToggleButton key={m} value={m} disabled={disabled}>
+          {m.includes('_') ? fromSnakeCase(m) : fromCamelCase(m)}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  ) : (
+    <Select
+      size="small"
+      color="primary"
+      value={value}
+      onChange={({ target }) => setStore(field, target.value as K)} // Mui y u like this
+      sx={{ mx: 'auto' }}
+      disabled={disabled}
+    >
+      {buttons.map((m) => (
+        <MenuItem key={m} value={m}>
+          {m.includes('_') ? fromSnakeCase(m) : fromCamelCase(m)}
+        </MenuItem>
+      ))}
+    </Select>
+  )
+}
diff --git a/client/src/components/drawer/inputs/NumInput.tsx b/client/src/components/drawer/inputs/NumInput.tsx
index 51e8042c..6c4cd799 100644
--- a/client/src/components/drawer/inputs/NumInput.tsx
+++ b/client/src/components/drawer/inputs/NumInput.tsx
@@ -3,22 +3,23 @@ import * as React from 'react'
 import { ListItem, ListItemText, TextField } from '@mui/material'
 
 import { fromCamelCase, fromSnakeCase } from '@services/utils'
+import { UsePersist, usePersist } from '@hooks/usePersist'
+import { OnlyType } from '@assets/types'
 
-interface Props<T> {
+export default function NumInput<
+  T extends keyof OnlyType<UsePersist, number | ''>,
+>({
+  field,
+  endAdornment,
+  disabled = false,
+}: {
   field: T
-  value: number | ''
-  setValue: (field: T, value: number | '') => void
   disabled?: boolean
   endAdornment?: string
-}
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
 
-export default function NumInput<T extends string>({
-  field,
-  value,
-  setValue,
-  endAdornment,
-  disabled = false,
-}: Props<T>) {
   return (
     <ListItem disabled={disabled}>
       <ListItemText
@@ -28,17 +29,10 @@ export default function NumInput<T extends string>({
       />
       <TextField
         name={field}
-        value={value}
+        value={value || ''}
         type="number"
         size="small"
-        onChange={({ target }) => {
-          setValue(
-            field,
-            target.value && (+target.value || target.value === '0')
-              ? +target.value
-              : '',
-          )
-        }}
+        onChange={({ target }) => setStore(field, +target.value)}
         sx={{ width: '35%' }}
         inputProps={{ min: 0, max: 9999 }}
         InputProps={{ endAdornment }}
diff --git a/client/src/components/drawer/inputs/Toggle.tsx b/client/src/components/drawer/inputs/Toggle.tsx
index 93f5ccbb..a0fde70a 100644
--- a/client/src/components/drawer/inputs/Toggle.tsx
+++ b/client/src/components/drawer/inputs/Toggle.tsx
@@ -1,22 +1,20 @@
 import * as React from 'react'
 import { ListItem, ListItemText, Switch } from '@mui/material'
 
-import { type UsePersist } from '@hooks/usePersist'
+import { usePersist, type UsePersist } from '@hooks/usePersist'
 import { fromCamelCase, fromSnakeCase } from '@services/utils'
+import { OnlyType } from '@assets/types'
 
-interface Props<T extends keyof UsePersist> {
+export default function Toggle<T extends keyof OnlyType<UsePersist, boolean>>({
+  field,
+  disabled = false,
+}: {
   field: T
-  value: boolean
-  setValue: (field: Props<T>['field'], value: Props<T>['value']) => void
   disabled?: boolean
-}
+}) {
+  const value = usePersist((s) => s[field])
+  const setStore = usePersist((s) => s.setStore)
 
-export default function Toggle<T extends keyof UsePersist>({
-  field,
-  value,
-  setValue,
-  disabled = false,
-}: Props<T>) {
   return (
     <ListItem disabled={disabled}>
       <ListItemText
@@ -26,8 +24,8 @@ export default function Toggle<T extends keyof UsePersist>({
       />
       <Switch
         edge="end"
-        onChange={(_e, v) => setValue(field, v)}
-        checked={value}
+        onChange={(_e, v) => setStore(field, v)}
+        checked={!!value}
         disabled={disabled}
       />
     </ListItem>
diff --git a/client/src/components/drawer/manage/index.tsx b/client/src/components/drawer/manage/index.tsx
index 0d035f83..133c8a17 100644
--- a/client/src/components/drawer/manage/index.tsx
+++ b/client/src/components/drawer/manage/index.tsx
@@ -56,15 +56,9 @@ export default function ImportExport() {
         <ListItemIcon>
           <Upload />
         </ListItemIcon>
-        Export Route
+        Export All Routes
       </ListItemButton>
       <Divider sx={{ my: 2 }} />
-      <ListItemButton onClick={() => setOpen('manager')}>
-        <ListItemIcon>
-          <Save />
-        </ListItemIcon>
-        <ListItemText primary="Admin Panel" />
-      </ListItemButton>
       <ListItemButton onClick={() => setOpen('rawManager')}>
         <ListItemIcon>
           <Save />
diff --git a/client/src/components/drawer/routing/index.tsx b/client/src/components/drawer/routing/index.tsx
index 8a441084..73af5a50 100644
--- a/client/src/components/drawer/routing/index.tsx
+++ b/client/src/components/drawer/routing/index.tsx
@@ -6,23 +6,12 @@ import { usePersist } from '@hooks/usePersist'
 
 import ListSubheader from '../../styled/Subheader'
 import NumInput from '../inputs/NumInput'
-import BtnGroup from '../inputs/BtnGroup'
+import MultiOptions from '../inputs/MultiOptions'
 import Toggle from '../inputs/Toggle'
 
 export default function EditTab() {
-  const radius = usePersist((s) => s.radius)
   const mode = usePersist((s) => s.mode)
-  const category = usePersist((s) => s.category)
-  const only_unique = usePersist((s) => s.only_unique)
-  // const generations = useStore((s) => s.generations)
-  const setStore = usePersist((s) => s.setStore)
-  // const devices = useStore((s) => s.devices)
-  const min_points = usePersist((s) => s.min_points)
-  const fast = usePersist((s) => s.fast)
   const autoMode = usePersist((s) => s.autoMode)
-  const routing_time = usePersist((s) => s.routing_time)
-  const save_to_db = usePersist((s) => s.save_to_db)
-  const route_chunk_size = usePersist((s) => s.route_chunk_size)
 
   const layerEditing = useStatic((s) => s.layerEditing)
   const setStatic = useStatic((s) => s.setStatic)
@@ -30,54 +19,33 @@ export default function EditTab() {
   return (
     <List dense>
       <ListSubheader disableGutters>Routing</ListSubheader>
-      <Toggle field="autoMode" value={autoMode} setValue={setStore} />
-      <NumInput field="radius" value={radius} setValue={setStore} />
-      <NumInput field="min_points" value={min_points} setValue={setStore} />
-      {/* <NumInput field="generations" value={generations} setValue={setStore} /> */}
+      <Toggle field="autoMode" />
+      <NumInput field="radius" />
+      <NumInput field="min_points" />
+      {/* <NumInput field="generations" /> */}
       <NumInput
         field="routing_time"
-        value={routing_time}
-        setValue={setStore}
         endAdornment="s"
         disabled={mode !== 'route'}
       />
-      <NumInput
-        field="route_chunk_size"
-        value={route_chunk_size}
-        setValue={setStore}
-        disabled={mode !== 'route'}
-      />
-      {/* <NumInput
-        field="devices"
-        value={devices}
-        setValue={setStore}
-        disabled={mode !== 'route'}
-      /> */}
-      <Toggle field="fast" value={fast} setValue={setStore} />
-      <Toggle field="only_unique" value={only_unique} setValue={setStore} />
+      <NumInput field="route_chunk_size" disabled={mode !== 'route'} />
+      {/* <NumInput field="devices" disabled={mode !== 'route'} /> */}
+      <Toggle field="fast" />
+      <Toggle field="only_unique" />
       <ListItem disabled={mode === 'bootstrap'}>
-        <BtnGroup
+        <MultiOptions
           field="category"
-          value={category}
-          setValue={setStore}
           buttons={['pokestop', 'gym', 'spawnpoint']}
           disabled={mode === 'bootstrap'}
         />
       </ListItem>
       <ListItem>
-        <BtnGroup
+        <MultiOptions
           field="mode"
-          value={mode}
-          setValue={setStore}
           buttons={['cluster', 'route', 'bootstrap']}
         />
       </ListItem>
-      <Toggle
-        field="save_to_db"
-        value={save_to_db}
-        setValue={setStore}
-        disabled
-      />
+      <Toggle field="save_to_db" disabled />
       {!autoMode && (
         <ListItemButton
           color="primary"
diff --git a/client/src/components/drawer/settings/index.tsx b/client/src/components/drawer/settings/index.tsx
index e4490797..af84070c 100644
--- a/client/src/components/drawer/settings/index.tsx
+++ b/client/src/components/drawer/settings/index.tsx
@@ -1,44 +1,23 @@
 import * as React from 'react'
 import { List, ListItem, ListItemButton, ListSubheader } from '@mui/material'
 
-import { usePersist } from '@hooks/usePersist'
-
 import Toggle from '../inputs/Toggle'
-import BtnGroup from '../inputs/BtnGroup'
+import MultiOptions from '../inputs/MultiOptions'
 import DateTime from '../inputs/DateTime'
 
 export default function Settings() {
-  const pokestop = usePersist((s) => s.pokestop)
-  const gym = usePersist((s) => s.gym)
-  const spawnpoint = usePersist((s) => s.spawnpoint)
-  const data = usePersist((s) => s.data)
-  const nativeLeaflet = usePersist((s) => s.nativeLeaflet)
-  const last_seen = usePersist((s) => s.last_seen)
-  const loadingScreen = usePersist((s) => s.loadingScreen)
-  const simplifyPolygons = usePersist((s) => s.simplifyPolygons)
-  const setStore = usePersist((s) => s.setStore)
-
   return (
     <List>
       <ListSubheader disableGutters>Markers</ListSubheader>
-      <DateTime field="last_seen" value={last_seen} setValue={setStore} />
-      <Toggle field="pokestop" value={pokestop} setValue={setStore} />
-      <Toggle field="gym" value={gym} setValue={setStore} />
-      <Toggle field="spawnpoint" value={spawnpoint} setValue={setStore} />
-      <Toggle field="nativeLeaflet" value={nativeLeaflet} setValue={setStore} />
-      <Toggle field="loadingScreen" value={loadingScreen} setValue={setStore} />
-      <Toggle
-        field="simplifyPolygons"
-        value={simplifyPolygons}
-        setValue={setStore}
-      />
+      <DateTime field="last_seen" />
+      <Toggle field="pokestop" />
+      <Toggle field="gym" />
+      <Toggle field="spawnpoint" />
+      <Toggle field="nativeLeaflet" />
+      <Toggle field="loadingScreen" />
+      <Toggle field="simplifyPolygons" />
       <ListItem>
-        <BtnGroup
-          field="data"
-          value={data}
-          setValue={setStore}
-          buttons={['all', 'bound', 'area']}
-        />
+        <MultiOptions field="data" buttons={['all', 'area', 'bound']} />
       </ListItem>
       <ListItemButton href="/config/logout">Logout</ListItemButton>
     </List>
diff --git a/client/src/hooks/useLayers.ts b/client/src/hooks/useLayers.ts
index aa6e9480..e255d71c 100644
--- a/client/src/hooks/useLayers.ts
+++ b/client/src/hooks/useLayers.ts
@@ -6,6 +6,7 @@ export default function useLayers() {
   const showCircles = usePersist((s) => s.showCircles)
   const showLines = usePersist((s) => s.showLines)
   const showPolygons = usePersist((s) => s.showPolygons)
+  const showArrows = usePersist((s) => s.showArrows)
 
   const map = useMap()
 
@@ -31,4 +32,8 @@ export default function useLayers() {
   useEffect(() => {
     setPane('polygons', showPolygons)
   }, [showPolygons])
+
+  useEffect(() => {
+    setPane('arrows', showArrows)
+  }, [showArrows])
 }
diff --git a/client/src/hooks/usePersist.ts b/client/src/hooks/usePersist.ts
index 897fd08c..4fcabd50 100644
--- a/client/src/hooks/usePersist.ts
+++ b/client/src/hooks/usePersist.ts
@@ -22,6 +22,7 @@ export interface UsePersist {
   showCircles: boolean
   showLines: boolean
   showPolygons: boolean
+  showArrows: boolean
   nativeLeaflet: boolean
   last_seen: Date
   devices: number | ''
@@ -78,6 +79,7 @@ export const usePersist = create(
       showCircles: true,
       showLines: true,
       showPolygons: true,
+      showArrows: true,
       nativeLeaflet: false,
       devices: 1,
       polygonExportMode: 'feature',
diff --git a/client/src/pages/map/index.tsx b/client/src/pages/map/index.tsx
index 75289594..d8c2eb9b 100644
--- a/client/src/pages/map/index.tsx
+++ b/client/src/pages/map/index.tsx
@@ -45,8 +45,9 @@ export default function MapWrapper() {
             right: 0,
           }}
         >
-          <Pane name="circles" style={{ zIndex: 600 }} />
-          <Pane name="lines" style={{ zIndex: 550 }} />
+          <Pane name="circles" style={{ zIndex: 503 }} />
+          <Pane name="lines" style={{ zIndex: 502 }} />
+          <Pane name="arrows" style={{ zIndex: 501 }} />
           <Pane name="polygons" style={{ zIndex: 500 }} />
           <Markers />
           <Interface />
diff --git a/client/src/pages/map/interface/index.tsx b/client/src/pages/map/interface/index.tsx
index 233a7540..52dc44e3 100644
--- a/client/src/pages/map/interface/index.tsx
+++ b/client/src/pages/map/interface/index.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react'
 import { ZoomControl, useMapEvents } from 'react-leaflet'
-import { renderToString } from 'react-dom/server'
-import AdminPanelSettings from '@mui/icons-material/AdminPanelSettings'
 import { useNavigate } from 'react-router'
 
+import { useStatic } from '@hooks/useStatic'
 import useCluster from '@hooks/useCluster'
 import useLayers from '@hooks/useLayers'
 import usePopupStyle from '@hooks/usePopupStyle'
 import useSyncGeojson from '@hooks/useSyncGeojson'
-import { useStatic } from '@hooks/useStatic'
 
 import Locate from './Locate'
 import MemoizedDrawing from './Drawing'
@@ -17,11 +15,6 @@ import EasyButton from './EasyButton'
 export default function Interface() {
   const navigate = useNavigate()
 
-  useCluster()
-  useLayers()
-  usePopupStyle()
-  useSyncGeojson()
-
   useMapEvents({
     popupopen(e) {
       const isEditing = Object.values(useStatic.getState().layerEditing).some(
@@ -33,6 +26,11 @@ export default function Interface() {
     },
   })
 
+  useCluster()
+  useLayers()
+  usePopupStyle()
+  useSyncGeojson()
+
   return (
     <>
       <Locate />
@@ -44,9 +42,11 @@ export default function Interface() {
           {
             stateName: 'default',
             title: 'Admin Panel',
-            icon: renderToString(
-              <AdminPanelSettings sx={{ height: '100%', width: '100%' }} />,
-            ),
+            icon: `
+            <svg>
+              <path d="M17 11c.34 0 .67.04 1 .09V6.27L10.5 3 3 6.27v4.91c0 4.54 3.2 8.79 7.5 9.82.55-.13 1.08-.32 1.6-.55-.69-.98-1.1-2.17-1.1-3.45 0-3.31 2.69-6 6-6z"></path>
+              <path d="M17 13c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 1.38c.62 0 1.12.51 1.12 1.12s-.51 1.12-1.12 1.12-1.12-.51-1.12-1.12.5-1.12 1.12-1.12zm0 5.37c-.93 0-1.74-.46-2.24-1.17.05-.72 1.51-1.08 2.24-1.08s2.19.36 2.24 1.08c-.5.71-1.31 1.17-2.24 1.17z"></path>
+            </svg>`,
             onClick() {
               navigate('/admin')
             },
diff --git a/client/src/pages/map/markers/LineString.tsx b/client/src/pages/map/markers/LineString.tsx
index f87e4f60..dfeab8d9 100644
--- a/client/src/pages/map/markers/LineString.tsx
+++ b/client/src/pages/map/markers/LineString.tsx
@@ -36,14 +36,13 @@ export function KojiLineString({
             color,
             fill: true,
             fillOpacity,
-            pane: 'lines',
+            pane: 'arrows',
             opacity,
             pmIgnore: true,
             snapIgnore: true,
-            size: '8px',
+            size: '50m',
             offsets: { end: `${dis / 2}m` },
           })
-          line.redraw()
         }
       }}
       positions={[

From 6f24e736ca341ed2c72778b9f3ef6e586ec93b1f Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Wed, 4 Jan 2023 11:58:01 -0500
Subject: [PATCH 2/5] Update docker.yml

---
 .github/workflows/docker.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 94729a70..f8184a41 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -40,5 +40,7 @@ jobs:
         with:
           context: .
           push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

From b6d907ed0996d71c4d9099bde39ee3f5e04045ce Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Wed, 4 Jan 2023 12:03:49 -0500
Subject: [PATCH 3/5] Update docker.yml

---
 .github/workflows/docker.yml | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index f8184a41..3d5e106c 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -1,9 +1,5 @@
 name: Docker
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
+on: [push]
 
 env:
   REGISTRY: ghcr.io
@@ -34,6 +30,8 @@ jobs:
         uses: docker/metadata-action@v4
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v3

From 15971c42179152f37dad0e1a27e4228df3e99ffc Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Wed, 4 Jan 2023 12:24:10 -0500
Subject: [PATCH 4/5] test

---
 client/src/pages/map/popups/Polygon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/map/popups/Polygon.tsx b/client/src/pages/map/popups/Polygon.tsx
index 2eb5df90..e557fcb8 100644
--- a/client/src/pages/map/popups/Polygon.tsx
+++ b/client/src/pages/map/popups/Polygon.tsx
@@ -43,7 +43,7 @@ export function PolygonPopup({
       case 'object':
         return <CircularProgress size={10} />
       default:
-        return ''
+        return 'Loading'
     }
   }
 

From 357bff5b2721c8ae5aa20f617c9f191911e8eb8a Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Wed, 4 Jan 2023 12:33:33 -0500
Subject: [PATCH 5/5] version bump

---
 client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index de5934f4..226d55c6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "koji",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Tool to make RDM routes",
   "main": "server/dist/index.js",
   "author": "TurtIeSocks <58572875+TurtIeSocks@users.noreply.github.com>",