Feature/kleinanzeigen new (#292)

* Feature/Kleinanzeigen addresses (#289)

* upgrade dependencies

* immoscout_details -> provider_details

* fetching details more generic

* removing claude action

* fixing sparkassen selector

* improvements

* fixing immobilienDE test

* upgrading dependencies

* settings for many provider

---------

Co-authored-by: Adrian Bach <65734063+realDayaa@users.noreply.github.com>

ui/src/components/grid/jobs/JobGrid.jsx

@@ -41,7 +41,7 @@ import { useNavigate } from 'react-router-dom';
 import ListingDeletionModal from '../../ListingDeletionModal.jsx';
 import { useActions, useSelector } from '../../../services/state/store.js';
 import { xhrDelete, xhrPut, xhrPost } from '../../../services/xhr.js';
-import debounce from 'lodash/debounce';
+import { debounce } from '../../../utils';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
 
 import './JobGrid.less';

ui/src/components/grid/listings/ListingsGrid.jsx

@@ -47,7 +47,7 @@ import no_image from '../../../assets/no_image.jpg';
 import * as timeService from '../../../services/time/timeService.js';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
 import { useActions, useSelector } from '../../../services/state/store.js';
-import debounce from 'lodash/debounce';
+import { debounce } from '../../../utils';
 
 import './ListingsGrid.less';
 import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';

ui/src/services/state/store.js

@@ -307,17 +307,17 @@ export const useFredyState = create(
               throw Exception;
             }
           },
-          async setImmoscoutDetails(enabled) {
+          async setProviderDetails(providers) {
             try {
-              await xhrPost('/api/user/settings/immoscout-details', { immoscout_details: enabled });
+              await xhrPost('/api/user/settings/provider-details', { provider_details: providers });
               set((state) => ({
                 userSettings: {
                   ...state.userSettings,
-                  settings: { ...state.userSettings.settings, immoscout_details: enabled },
+                  settings: { ...state.userSettings.settings, provider_details: providers },
                 },
               }));
             } catch (Exception) {
-              console.error('Error while trying to update immoscout details setting. Error:', Exception);
+              console.error('Error while trying to update provider details setting. Error:', Exception);
               throw Exception;
             }
           },

ui/src/utils.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+export function debounce(fn, delay) {
+  let timer;
+
+  function debounced(...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  }
+
+  debounced.cancel = () => clearTimeout(timer);
+
+  return debounced;
+}

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -15,9 +15,8 @@ import {
   Checkbox,
   Input,
   Modal,
-  Typography,
   AutoComplete,
-  Switch,
+  Select,
   Banner,
 } from '@douyinfe/semi-ui-19';
 import { InputNumber } from '@douyinfe/semi-ui-19';
@@ -30,11 +29,9 @@ import {
   restore as clientRestore,
 } from '../../services/backupRestoreClient';
 import { IconSave, IconRefresh, IconSignal, IconHome, IconFolder } from '@douyinfe/semi-icons';
-import debounce from 'lodash/debounce';
+import { debounce } from '../../utils';
 import './GeneralSettings.less';
 
-const { Text } = Typography;
-
 function formatFromTimestamp(ts) {
   const date = new Date(ts);
   return `${date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
@@ -72,7 +69,8 @@ const GeneralSettings = function GeneralSettings() {
 
   // User settings state
   const homeAddress = useSelector((state) => state.userSettings.settings.home_address);
-  const immoscoutDetails = useSelector((state) => state.userSettings.settings.immoscout_details);
+  const providerDetails = useSelector((state) => state.userSettings.settings.provider_details);
+  const allProviders = useSelector((state) => state.provider);
   const [address, setAddress] = useState(homeAddress?.address || '');
   const [coords, setCoords] = useState(homeAddress?.coords || null);
   const saving = useIsLoading(actions.userSettings.setHomeAddress);
@@ -373,39 +371,6 @@ const GeneralSettings = function GeneralSettings() {
               </div>
             </TabPane>
 
-            <TabPane
-              tab={
-                <span>
-                  <IconFolder size="small" style={{ marginRight: 6 }} />
-                  Backup & Restore
-                </span>
-              }
-              itemKey="backup"
-            >
-              <div className="generalSettings__tab-content">
-                <SegmentPart
-                  name="Backup & Restore"
-                  helpText="Download a zipped backup of your database or restore from a backup zip."
-                >
-                  <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
-                    <Button theme="solid" icon={<IconSave />} onClick={handleDownloadBackup}>
-                      Download Backup
-                    </Button>
-                    <input
-                      type="file"
-                      accept=".zip,application/zip"
-                      ref={fileInputRef}
-                      style={{ display: 'none' }}
-                      onChange={handleSelectRestoreFile}
-                    />
-                    <Button onClick={handleOpenFilePicker} theme="light" icon={<IconFolder />}>
-                      Restore from Zip
-                    </Button>
-                  </div>
-                </SegmentPart>
-              </div>
-            </TabPane>
-
             <TabPane
               tab={
                 <span>
@@ -440,29 +405,30 @@ const GeneralSettings = function GeneralSettings() {
                 </SegmentPart>
 
                 <SegmentPart
-                  name="ImmoScout Details"
-                  helpText="Fetch additional details (description, attributes, agent info) for ImmoScout listings. Makes an extra API call per listing."
+                  name="Provider Details"
+                  helpText="Fetch additional details (description, attributes, agent info) for listings. Needs an extra API call per listing."
                 >
                   <Banner
                     type="warning"
-                    description="Enabling this significantly increases API requests to ImmoScout, raising the chance of rate limiting or blocking. Use at your own risk."
+                    description="Enabling this significantly increases API requests to providers that have implemented this feature, raising the chance of rate limiting or blocking. Use at your own risk."
                     closeIcon={null}
                     style={{ marginBottom: 12 }}
                   />
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <Switch
-                      checked={!!immoscoutDetails}
-                      onChange={async (checked) => {
-                        try {
-                          await actions.userSettings.setImmoscoutDetails(checked);
-                          Toast.success('ImmoScout details setting updated.');
-                        } catch {
-                          Toast.error('Failed to update setting.');
-                        }
-                      }}
-                    />
-                    <Text>Fetch detailed ImmoScout listings</Text>
-                  </div>
+                  <Select
+                    multiple
+                    style={{ width: '100%' }}
+                    value={Array.isArray(providerDetails) ? providerDetails : []}
+                    optionList={(allProviders ?? []).map((p) => ({ label: p.name, value: p.id }))}
+                    placeholder="Select providers to fetch details from..."
+                    onChange={async (selected) => {
+                      try {
+                        await actions.userSettings.setProviderDetails(selected);
+                        Toast.success('Provider details setting updated.');
+                      } catch {
+                        Toast.error('Failed to update setting.');
+                      }
+                    }}
+                  />
                 </SegmentPart>
 
                 <div className="generalSettings__save-row">
@@ -478,6 +444,39 @@ const GeneralSettings = function GeneralSettings() {
                 </div>
               </div>
             </TabPane>
+
+            <TabPane
+              tab={
+                <span>
+                  <IconFolder size="small" style={{ marginRight: 6 }} />
+                  Backup & Restore
+                </span>
+              }
+              itemKey="backup"
+            >
+              <div className="generalSettings__tab-content">
+                <SegmentPart
+                  name="Backup & Restore"
+                  helpText="Download a zipped backup of your database or restore from a backup zip."
+                >
+                  <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <Button theme="solid" icon={<IconSave />} onClick={handleDownloadBackup}>
+                      Download Backup
+                    </Button>
+                    <input
+                      type="file"
+                      accept=".zip,application/zip"
+                      ref={fileInputRef}
+                      style={{ display: 'none' }}
+                      onChange={handleSelectRestoreFile}
+                    />
+                    <Button onClick={handleOpenFilePicker} theme="light" icon={<IconFolder />}>
+                      Restore from Zip
+                    </Button>
+                  </div>
+                </SegmentPart>
+              </div>
+            </TabPane>
           </Tabs>
         </>
       )}

ui/src/views/userSettings/UserSettings.jsx

@@ -1,124 +0,0 @@
-/*
- * Copyright (c) 2026 by Christian Kellner.
- * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
- */
-
-import { useEffect, useState, useMemo } from 'react';
-import { Divider, Button, AutoComplete, Toast, Banner, Switch } from '@douyinfe/semi-ui-19';
-import { IconSave, IconHome, IconSearch } from '@douyinfe/semi-icons';
-import { useSelector, useActions, useIsLoading } from '../../services/state/store';
-import { xhrGet } from '../../services/xhr';
-import { SegmentPart } from '../../components/segment/SegmentPart';
-import debounce from 'lodash/debounce';
-
-const UserSettings = () => {
-  const actions = useActions();
-  const homeAddress = useSelector((state) => state.userSettings.settings.home_address);
-  const immoscoutDetails = useSelector((state) => state.userSettings.settings.immoscout_details);
-  const [address, setAddress] = useState(homeAddress?.address || '');
-  const [coords, setCoords] = useState(homeAddress?.coords || null);
-  const saving = useIsLoading(actions.userSettings.setHomeAddress);
-  const [dataSource, setDataSource] = useState([]);
-
-  useEffect(() => {
-    setAddress(homeAddress?.address || '');
-    setCoords(homeAddress?.coords || null);
-  }, [homeAddress]);
-
-  const handleSave = async () => {
-    try {
-      const responseJson = await actions.userSettings.setHomeAddress(address);
-      setCoords(responseJson.coords);
-      await actions.userSettings.getUserSettings();
-      Toast.success(
-        'Settings saved successfully. We will now start calculating distances for you. This may take a while and runs in the background.',
-      );
-    } catch (error) {
-      Toast.error(error.json?.error || 'Error while saving settings');
-    }
-  };
-
-  const debouncedSearch = useMemo(
-    () =>
-      debounce((value) => {
-        xhrGet(`/api/user/settings/autocomplete?q=${encodeURIComponent(value)}`)
-          .then((response) => {
-            if (response.status === 200) {
-              setDataSource(response.json);
-            }
-          })
-          .catch(() => {
-            // Silently fail for autocomplete
-          });
-      }, 300),
-    [],
-  );
-
-  const searchAddress = (value) => {
-    if (!value) {
-      setDataSource([]);
-      return;
-    }
-    debouncedSearch(value);
-  };
-
-  return (
-    <div className="user-settings">
-      <SegmentPart
-        name="Distance claculation"
-        Icon={IconHome}
-        helpText="The address you enter is used to calculate the distance between your chosen location and each listing. The distance is computed using an approximate mathematical method and is intended to give you a rough indication of commute time. If you update your address, we will recalculate the distance for all active listings."
-      >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', maxWidth: '600px' }}>
-          <AutoComplete
-            data={dataSource}
-            value={address}
-            showClear
-            onChange={(v) => setAddress(v)}
-            onSearch={searchAddress}
-            placeholder="Enter your home address"
-            style={{ width: '100%' }}
-          />
-          {coords && coords.lat === -1 && (
-            <Banner type="danger" description="Address found but could not be geocoded accurately." closeIcon={null} />
-          )}
-        </div>
-      </SegmentPart>
-      <Divider />
-      <SegmentPart
-        name="ImmoScout Details"
-        Icon={IconSearch}
-        helpText="When enabled, Fredy will fetch additional details (description, attributes, agent info) for each listing from ImmoScout. This provides richer notifications but makes an extra API call per listing."
-      >
-        <Banner
-          type="warning"
-          description="Enabling this feature significantly increases the number of API requests to ImmoScout. This raises the likelihood of being detected and rate-limited or blocked. Use at your own risk."
-          closeIcon={null}
-          style={{ marginBottom: '12px', maxWidth: '600px' }}
-        />
-        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-          <Switch
-            checked={!!immoscoutDetails}
-            onChange={async (checked) => {
-              try {
-                await actions.userSettings.setImmoscoutDetails(checked);
-                Toast.success('ImmoScout details setting updated.');
-              } catch {
-                Toast.error('Failed to update setting.');
-              }
-            }}
-          />
-          <span>Fetch detailed ImmoScout listings</span>
-        </div>
-      </SegmentPart>
-      <Divider />
-      <div style={{ marginTop: '20px' }}>
-        <Button icon={<IconSave />} theme="solid" type="primary" onClick={handleSave} loading={saving}>
-          Save Settings
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default UserSettings;