use switch for save and clear if off

Author: karussell

src/sidebar/SettingsBox.module.css

@@ -88,29 +88,6 @@ input {
     font-weight: bold;
 }
 
-.clearRecentsButton {
-    border: 1px solid lightgray;
-    border-radius: 8px;
-    background: none;
-    color: inherit;
-    padding: 3px 5px;
-    cursor: pointer;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.clearRecentsButton svg {
-    scale: 1;
-    margin: 0;
-}
-
-.clearRecentsButton:hover {
-    background: #ececec;
-    color: #333;
-}
-
 .title,
 .infoLine,
 .settingsTable,

src/sidebar/SettingsBox.tsx

@@ -52,14 +52,14 @@ export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
                         Dispatcher.dispatch(new UpdateSettings({ showDistanceInMiles: !settings.showDistanceInMiles }))
                     }
                 />
-                <div className={styles.settingsToggle} style={{ cursor: 'default' }}>
-                    <button className={styles.clearRecentsButton} onClick={() => clearRecentLocations()}>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 -960 960 960">
-                            <path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
-                        </svg>
-                    </button>
-                    <div>{tr('clear_recent_locations')}</div>
-                </div>
+                <SettingsToggle
+                    title={tr('save_recent_locations')}
+                    enabled={settings.saveRecentLocations}
+                    onClick={() => {
+                        if (settings.saveRecentLocations) clearRecentLocations()
+                        Dispatcher.dispatch(new UpdateSettings({ saveRecentLocations: !settings.saveRecentLocations }))
+                    }}
+                />
             </div>
             <div className={styles.title}>{tr('settings_gpx_export')}</div>
             <div className={styles.settingsTable}>

src/sidebar/search/RecentLocations.ts

@@ -1,6 +1,7 @@
 import { calcDist, Coordinate } from '@/utils'
 import { tr } from '@/translation/Translation'
 import { textToCoordinate } from '@/Converters'
+import { getSettingsStore } from '@/stores/Stores'
 
 const STORAGE_KEY = 'recentLocations'
 export const MAX_ENTRIES = 15
@@ -47,6 +48,7 @@ export function clearRecentLocations(): void {
 }
 
 export function saveRecentLocation(mainText: string, secondText: string, coordinate: Coordinate, now: number = Date.now()): void {
+    if (!getSettingsStore().state.saveRecentLocations) return
     if (mainText === tr('current_location')) return
     if (textToCoordinate(mainText)) return
 

src/stores/SettingsStore.ts

@@ -5,6 +5,7 @@ import { SetCustomModelEnabled, UpdateSettings } from '@/actions/Actions'
 export interface Settings {
     showDistanceInMiles: boolean
     drawAreasEnabled: boolean
+    saveRecentLocations: boolean
     gpxExportRte: boolean
     gpxExportWpt: boolean
     gpxExportTrk: boolean
@@ -13,6 +14,7 @@ export interface Settings {
 export const defaultSettings: Settings = {
     showDistanceInMiles: false,
     drawAreasEnabled: false,
+    saveRecentLocations: true,
     gpxExportRte: false,
     gpxExportWpt: false,
     gpxExportTrk: true,