Improved Listing Management (#317)

* adding ability to tag listings eg if you have applied to it / adding ability to add notes to a listing * storing the date when a status was set
2026-06-16 12:31:07 +00:00 · 2026-06-02 21:10:08 +02:00
parent 5ceac25aa6
commit 44edf47393
25 changed files with 891 additions and 58 deletions
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -97,6 +97,7 @@ export default function FredyApp() {
            <Route path="/dashboard" element={<Dashboard />} />
            <Route path="/jobs" element={<Jobs />} />
            <Route path="/listings" element={<Listings />} />
+            <Route path="/listings/watchlist" element={<Listings mode="watchlist" />} />
            <Route path="/listings/listing/:listingId" element={<ListingDetail />} />
            <Route path="/map" element={<MapView />} />
            <Route path="/watchlistManagement" element={<WatchlistManagement />} />
--- a/ui/src/components/grid/listings/ListingsGrid.jsx
+++ b/ui/src/components/grid/listings/ListingsGrid.jsx
@@ -16,13 +16,14 @@ import {
 } from '@douyinfe/semi-icons';
 import no_image from '../../../assets/no_image.png';
 import * as timeService from '../../../services/time/timeService.js';
+import StatusControl from '../../listings/StatusControl.jsx';

 import './ListingsGrid.less';

 /**
- * @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function }} props
+ * @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function, onStatusChange: Function }} props
 */
-const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete }) => (
+const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => (
  <div className="listingsGrid__grid">
    {listings.map((item) => (
      <div
@@ -49,14 +50,16 @@ const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete }) => (
              <span>Inactive</span>
            </div>
          )}
-          <button
-            type="button"
-            className="listingsGrid__card__star"
-            onClick={(e) => onWatch(e, item)}
-            aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
-          >
-            {item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
-          </button>
+          <Tooltip content={item.isWatched === 1 ? 'Remove from Watchlist' : 'Add to Watchlist'}>
+            <button
+              type="button"
+              className="listingsGrid__card__star"
+              onClick={(e) => onWatch(e, item)}
+              aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
+            >
+              {item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
+            </button>
+          </Tooltip>
        </div>

        <div className="listingsGrid__card__body">
@@ -83,6 +86,12 @@ const ListingsGrid = ({ listings, onWatch, onNavigate, onDelete }) => (
        </div>

        <div className="listingsGrid__card__actions" onClick={(e) => e.stopPropagation()}>
+          <StatusControl
+            status={item.status?.status ?? null}
+            compact
+            onChange={(next) => onStatusChange?.(item, next)}
+            onTriggerClick={(e) => e.stopPropagation()}
+          />
          <Tooltip content="Original Listing">
            <Button
              size="small"
--- a/ui/src/components/grid/listings/ListingsGrid.less
+++ b/ui/src/components/grid/listings/ListingsGrid.less
@@ -11,12 +11,11 @@
  border: 1px solid @color-border !important;
  border-radius: @radius-card !important;
  overflow: hidden;
-  transition: transform @transition-card, box-shadow @transition-card;
+  transition: box-shadow @transition-card;
  display: flex;
  flex-direction: column;

  &:hover {
-    transform: translateY(-2px);
    box-shadow: 0 6px 24px -4px rgba(0,0,0,0.6);
  }

--- a/ui/src/components/listings/ListingsOverview.jsx
+++ b/ui/src/components/listings/ListingsOverview.jsx
@@ -23,7 +23,8 @@ import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-i

 import './ListingsOverview.less';

-const ListingsOverview = () => {
+const ListingsOverview = ({ mode = 'all' }) => {
+  const isWatchlistMode = mode === 'watchlist';
  const listingsData = useSelector((state) => state.listingsData);
  const providers = useSelector((state) => state.provider);
  const jobs = useSelector((state) => state.jobsData.jobs);
@@ -46,9 +47,13 @@ const ListingsOverview = () => {
  const [jobNameFilter, setJobNameFilter] = useSearchParamState(sp, 'job', null, parseString);
  const [activityFilter, setActivityFilter] = useSearchParamState(sp, 'active', null, parseNullableBoolean);
  const [providerFilter, setProviderFilter] = useSearchParamState(sp, 'provider', null, parseString);
+  const [statusFilter, setStatusFilter] = useSearchParamState(sp, 'status', null, parseString);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [listingToDelete, setListingToDelete] = useState(null);

+  // In watchlist mode the watch filter is forced to "watched only" — regardless of the URL.
+  const effectiveWatchListFilter = isWatchlistMode ? true : watchListFilter;
+
  const loadData = () => {
    actions.listingsData.getListingsData({
      page,
@@ -56,13 +61,30 @@ const ListingsOverview = () => {
      sortfield: sortField,
      sortdir: sortDir,
      freeTextFilter,
-      filter: { watchListFilter, jobNameFilter, activityFilter, providerFilter },
+      filter: {
+        watchListFilter: effectiveWatchListFilter,
+        jobNameFilter,
+        activityFilter,
+        providerFilter,
+        statusFilter,
+      },
    });
  };

  useEffect(() => {
    loadData();
-  }, [page, sortField, sortDir, freeTextFilter, providerFilter, activityFilter, jobNameFilter, watchListFilter]);
+  }, [
+    page,
+    sortField,
+    sortDir,
+    freeTextFilter,
+    providerFilter,
+    activityFilter,
+    jobNameFilter,
+    watchListFilter,
+    statusFilter,
+    isWatchlistMode,
+  ]);

  const handleFilterChange = useMemo(
    () =>
@@ -92,6 +114,17 @@ const ListingsOverview = () => {
    }
  };

+  const handleStatusChange = async (item, nextStatus) => {
+    try {
+      await actions.listingsData.setListingStatus(item.id, nextStatus);
+      Toast.success(nextStatus ? `Marked as ${nextStatus}` : 'Status cleared');
+      loadData();
+    } catch (e) {
+      console.error(e);
+      Toast.error('Failed to update status');
+    }
+  };
+
  const handleDelete = (id) => {
    if (listingDeletionPref?.skipPrompt) {
      confirmDeletion(listingDeletionPref.hardDelete, false, id);
@@ -148,20 +181,38 @@ const ListingsOverview = () => {
          <Radio value="false">Inactive</Radio>
        </RadioGroup>

-        <RadioGroup
-          type="button"
-          buttonSize="middle"
-          value={watchListFilter === null ? 'all' : String(watchListFilter)}
-          onChange={(e) => {
-            const v = e.target.value;
-            setWatchListFilter(v === 'all' ? null : v === 'true');
+        {!isWatchlistMode && (
+          <RadioGroup
+            type="button"
+            buttonSize="middle"
+            value={watchListFilter === null ? 'all' : String(watchListFilter)}
+            onChange={(e) => {
+              const v = e.target.value;
+              setWatchListFilter(v === 'all' ? null : v === 'true');
+              setPage(1);
+            }}
+          >
+            <Radio value="all">All</Radio>
+            <Radio value="true">Watched</Radio>
+            <Radio value="false">Unwatched</Radio>
+          </RadioGroup>
+        )}
+
+        <Select
+          placeholder="Status"
+          showClear
+          onChange={(val) => {
+            setStatusFilter(val ?? null);
            setPage(1);
          }}
+          value={statusFilter}
+          style={{ width: 150 }}
        >
-          <Radio value="all">All</Radio>
-          <Radio value="true">Watched</Radio>
-          <Radio value="false">Unwatched</Radio>
-        </RadioGroup>
+          <Select.Option value="applied">Applied</Select.Option>
+          <Select.Option value="rejected">Rejected</Select.Option>
+          <Select.Option value="accepted">Accepted</Select.Option>
+          <Select.Option value="none">No status</Select.Option>
+        </Select>

        <Select
          placeholder="Provider"
@@ -197,7 +248,13 @@ const ListingsOverview = () => {
          ))}
        </Select>

-        <Select prefix="Sort by" style={{ width: 185 }} value={sortField} onChange={(val) => setSortField(val)}>
+        <Select
+          prefix="Sort by"
+          className="listingsOverview__topbar__sort"
+          style={{ width: 220 }}
+          value={sortField}
+          onChange={(val) => setSortField(val)}
+        >
          <Select.Option value="job_name">Job Name</Select.Option>
          <Select.Option value="created_at">Listing Date</Select.Option>
          <Select.Option value="price">Price</Select.Option>
@@ -241,9 +298,21 @@ const ListingsOverview = () => {
      )}

      {viewMode === 'grid' ? (
-        <ListingsGrid listings={listings} onWatch={handleWatch} onNavigate={handleNavigate} onDelete={handleDelete} />
+        <ListingsGrid
+          listings={listings}
+          onWatch={handleWatch}
+          onNavigate={handleNavigate}
+          onDelete={handleDelete}
+          onStatusChange={handleStatusChange}
+        />
      ) : (
-        <ListingsTable listings={listings} onWatch={handleWatch} onNavigate={handleNavigate} onDelete={handleDelete} />
+        <ListingsTable
+          listings={listings}
+          onWatch={handleWatch}
+          onNavigate={handleNavigate}
+          onDelete={handleDelete}
+          onStatusChange={handleStatusChange}
+        />
      )}

      {listings.length > 0 && (
--- a/ui/src/components/listings/ListingsOverview.less
+++ b/ui/src/components/listings/ListingsOverview.less
@@ -19,6 +19,14 @@
      flex-shrink: 0;
    }

+    &__sort {
+      flex-shrink: 0;
+
+      .semi-select-prefix {
+        white-space: nowrap;
+      }
+    }
+
    @media (max-width: 768px) {
      .listingsOverview__topbar__search {
        width: 100%;
--- a/ui/src/components/listings/StatusControl.jsx
+++ b/ui/src/components/listings/StatusControl.jsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2026 by Christian Kellner.
+ * Licensed under Apache-2.0 with Commons Clause and Attribution/Naming Clause
+ */
+
+import { useState } from 'react';
+import { Dropdown, Button, Tooltip } from '@douyinfe/semi-ui-19';
+import { IconChevronDown } from '@douyinfe/semi-icons';
+
+import './StatusControl.less';
+
+const STATUS_TOOLTIP =
+  'Track where you stand with this listing: Applied once you have reached out, Rejected if it did not work out, or Accepted if you got it.';
+
+/**
+ * @typedef {('applied'|'rejected'|'accepted'|null)} ListingStatus
+ */
+
+const STATUS_OPTIONS = [
+  { value: null, label: 'None' },
+  { value: 'applied', label: 'Applied' },
+  { value: 'rejected', label: 'Rejected' },
+  { value: 'accepted', label: 'Accepted' },
+];
+
+/**
+ * Look up the option metadata for a status value.
+ * @param {ListingStatus} status
+ */
+const optionFor = (status) => STATUS_OPTIONS.find((o) => o.value === status) ?? STATUS_OPTIONS[0];
+
+/**
+ * Shared control for setting a listing's user-decision status
+ * (Applied / Rejected / Accepted).
+ *
+ * Both compact (table/grid rows) and full (listing detail header) modes
+ * render a Button that picks up the project's CI tokens via the
+ * .status-btn classes, with a small size variant for compact contexts.
+ *
+ * @param {Object} props
+ * @param {ListingStatus} props.status - The current status value.
+ * @param {(next: ListingStatus) => void} props.onChange - Called with the new status when the user picks one.
+ * @param {boolean} [props.compact=false] - When true, renders smaller for table/grid rows; full size otherwise.
+ * @param {(e: React.MouseEvent) => void} [props.onTriggerClick] - Optional click handler to stop propagation on the trigger.
+ */
+export default function StatusControl({ status = null, onChange, compact = false, onTriggerClick }) {
+  const [open, setOpen] = useState(false);
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+  const current = optionFor(status);
+
+  const handlePick = (next) => {
+    setOpen(false);
+    if (next === status) return;
+    onChange?.(next);
+  };
+
+  const menu = (
+    <Dropdown.Menu>
+      {STATUS_OPTIONS.map((opt) => (
+        <Dropdown.Item
+          key={opt.value ?? '__none__'}
+          active={opt.value === status}
+          onClick={() => handlePick(opt.value)}
+        >
+          {opt.label}
+        </Dropdown.Item>
+      ))}
+    </Dropdown.Menu>
+  );
+
+  const className = ['status-btn', compact ? 'status-btn--compact' : null, status ? `status-btn--${status}` : null]
+    .filter(Boolean)
+    .join(' ');
+
+  const trigger = (
+    <Tooltip
+      content={STATUS_TOOLTIP}
+      position="top"
+      trigger="custom"
+      visible={tooltipOpen && !open}
+      onVisibleChange={setTooltipOpen}
+    >
+      <Button
+        size={compact ? 'small' : 'default'}
+        theme="borderless"
+        icon={<IconChevronDown />}
+        iconPosition="right"
+        onMouseEnter={() => setTooltipOpen(true)}
+        onMouseLeave={() => setTooltipOpen(false)}
+        onClick={(e) => {
+          onTriggerClick?.(e);
+          setTooltipOpen(false);
+          setOpen((o) => !o);
+        }}
+        className={className}
+      >
+        {status ? current.label : 'Status'}
+      </Button>
+    </Tooltip>
+  );
+
+  return (
+    <Dropdown
+      trigger="custom"
+      visible={open}
+      onVisibleChange={setOpen}
+      onClickOutSide={() => setOpen(false)}
+      position="bottom"
+      render={menu}
+      stopPropagation
+    >
+      <span className="status-btn__anchor">{trigger}</span>
+    </Dropdown>
+  );
+}
--- a/ui/src/components/listings/StatusControl.less
+++ b/ui/src/components/listings/StatusControl.less
@@ -0,0 +1,64 @@
+@import '../../tokens.less';
+
+// Wrapper span used as the Dropdown's positioning anchor so the menu opens
+// directly below the visible button rather than the implicit wrapper of the
+// hover tooltip (which can have a different bounding box).
+.status-btn__anchor {
+  display: inline-block;
+  line-height: 0;
+}
+
+// StatusControl shared base. Matches dimensions and border treatment
+// of the surrounding Watched / Open listing / Delete buttons in the
+// detail view, and shrinks via the --compact modifier for table rows
+// and grid cards.
+.status-btn {
+  color: @color-muted !important;
+  border: 1px solid @color-border-bright !important;
+  border-radius: @radius-btn !important;
+  background: transparent !important;
+  transition: color @transition-fast, border-color @transition-fast, background @transition-fast;
+
+  &:hover {
+    color: @color-text !important;
+    background: rgba(255, 255, 255, 0.06) !important;
+  }
+
+  &--compact {
+    height: 24px !important;
+    padding: 0 8px !important;
+    font-size: @text-sm !important;
+    border-radius: @radius-chip !important;
+
+    .semi-icon {
+      font-size: 12px !important;
+    }
+  }
+
+  &--applied {
+    color: @color-info !important;
+    border-color: rgba(96, 165, 250, 0.4) !important;
+    background: rgba(96, 165, 250, 0.08) !important;
+    &:hover {
+      background: rgba(96, 165, 250, 0.14) !important;
+    }
+  }
+
+  &--rejected {
+    color: @color-error !important;
+    border-color: rgba(251, 113, 133, 0.4) !important;
+    background: rgba(251, 113, 133, 0.08) !important;
+    &:hover {
+      background: rgba(251, 113, 133, 0.14) !important;
+    }
+  }
+
+  &--accepted {
+    color: @color-success !important;
+    border-color: rgba(52, 211, 153, 0.4) !important;
+    background: rgba(52, 211, 153, 0.08) !important;
+    &:hover {
+      background: rgba(52, 211, 153, 0.14) !important;
+    }
+  }
+}
--- a/ui/src/components/navigation/Navigation.jsx
+++ b/ui/src/components/navigation/Navigation.jsx
@@ -37,6 +37,7 @@ export default function Navigation({ isAdmin }) {
      items: [
        { itemKey: '/listings', text: 'Overview' },
        { itemKey: '/map', text: 'Map View' },
+        { itemKey: '/listings/watchlist', text: 'Watchlist' },
      ],
    },
  ];
@@ -61,6 +62,22 @@ export default function Navigation({ isAdmin }) {
  }

  function parsePathName(name) {
+    // Collect every leaf itemKey that looks like a route (starts with '/').
+    // Prefer the longest exact-prefix match so nested routes like
+    // '/listings/watchlist' resolve to themselves instead of being collapsed
+    // to '/listings'.
+    const allKeys = [];
+    const collect = (nodes) => {
+      for (const n of nodes) {
+        if (typeof n.itemKey === 'string' && n.itemKey.startsWith('/')) allKeys.push(n.itemKey);
+        if (Array.isArray(n.items)) collect(n.items);
+      }
+    };
+    collect(items);
+    const longestMatch = allKeys
+      .filter((k) => name === k || name.startsWith(k + '/'))
+      .sort((a, b) => b.length - a.length)[0];
+    if (longestMatch) return longestMatch;
    const split = name.split('/').filter((s) => s.length !== 0);
    return '/' + split[0];
  }
--- a/ui/src/components/table/JobsTable.jsx
+++ b/ui/src/components/table/JobsTable.jsx
@@ -63,7 +63,7 @@ const JobsTable = ({ jobs, onRun, onEdit, onClone, onDeleteListings, onDeleteJob
            </Tag>
          )}
          {job.isOnlyShared && (
-            <Tooltip content="Shared with you — read only">
+            <Tooltip content="Shared with you - read only">
              <span style={{ display: 'flex', alignItems: 'center' }}>
                <IconAlertTriangle style={{ color: 'rgba(var(--semi-yellow-7), 1)' }} />
              </span>
--- a/ui/src/components/table/ListingsTable.jsx
+++ b/ui/src/components/table/ListingsTable.jsx
@@ -16,13 +16,14 @@ import {
 } from '@douyinfe/semi-icons';
 import no_image from '../../assets/no_image.png';
 import * as timeService from '../../services/time/timeService.js';
+import StatusControl from '../listings/StatusControl.jsx';

 import './ListingsTable.less';

 /**
- * @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function }} props
+ * @param {{ listings: object[], onWatch: Function, onNavigate: Function, onDelete: Function, onStatusChange: Function }} props
 */
-const ListingsTable = ({ listings, onWatch, onNavigate, onDelete }) => (
+const ListingsTable = ({ listings, onWatch, onNavigate, onDelete, onStatusChange }) => (
  <div className="listingsTable">
    {listings.map((item) => (
      <div
@@ -56,7 +57,7 @@ const ListingsTable = ({ listings, onWatch, onNavigate, onDelete }) => (
              {item.price}
            </>
          ) : (
-            <span className="listingsTable__row__empty">—</span>
+            <span className="listingsTable__row__empty">---</span>
          )}
        </div>

@@ -67,7 +68,7 @@ const ListingsTable = ({ listings, onWatch, onNavigate, onDelete }) => (
              {item.address}
            </>
          ) : (
-            <span className="listingsTable__row__empty">—</span>
+            <span className="listingsTable__row__empty">---</span>
          )}
        </div>

@@ -79,14 +80,22 @@ const ListingsTable = ({ listings, onWatch, onNavigate, onDelete }) => (
        <div className="listingsTable__row__date">{timeService.format(item.created_at, false)}</div>

        <div className="listingsTable__row__actions" onClick={(e) => e.stopPropagation()}>
-          <button
-            type="button"
-            className="listingsTable__row__star"
-            onClick={(e) => onWatch(e, item)}
-            aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
-          >
-            {item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
-          </button>
+          <StatusControl
+            status={item.status?.status ?? null}
+            compact
+            onChange={(next) => onStatusChange?.(item, next)}
+            onTriggerClick={(e) => e.stopPropagation()}
+          />
+          <Tooltip content={item.isWatched === 1 ? 'Remove from Watchlist' : 'Add to Watchlist'}>
+            <button
+              type="button"
+              className="listingsTable__row__star"
+              onClick={(e) => onWatch(e, item)}
+              aria-label={item.isWatched === 1 ? 'Remove from watchlist' : 'Add to watchlist'}
+            >
+              {item.isWatched === 1 ? <IconStar /> : <IconStarStroked />}
+            </button>
+          </Tooltip>
          <Tooltip content="Original Listing">
            <Button
              size="small"
--- a/ui/src/services/state/store.js
+++ b/ui/src/services/state/store.js
@@ -260,6 +260,22 @@ export const useFredyState = create(
              console.error('Error while trying to get resource for api/listings/map. Error:', Exception);
            }
          },
+          async setListingStatus(listingId, status) {
+            try {
+              await xhrPost(`/api/listings/${listingId}/status`, { status });
+            } catch (Exception) {
+              console.error(`Error while trying to set status for listing ${listingId}. Error:`, Exception);
+              throw Exception;
+            }
+          },
+          async setListingNotes(listingId, notes) {
+            try {
+              await xhrPost(`/api/listings/${listingId}/notes`, { notes });
+            } catch (Exception) {
+              console.error(`Error while trying to set notes for listing ${listingId}. Error:`, Exception);
+              throw Exception;
+            }
+          },
        },
        userSettings: {
          async getUserSettings() {
--- a/ui/src/views/listings/ListingDetail.jsx
+++ b/ui/src/views/listings/ListingDetail.jsx
@@ -20,6 +20,8 @@ import {
  Banner,
  Spin,
  Toast,
+  TextArea,
+  Tooltip,
 } from '@douyinfe/semi-ui-19';
 import {
  IconArrowLeft,
@@ -44,6 +46,7 @@ import { xhrPost, xhrDelete } from '../../services/xhr.js';
 import ListingDeletionModal from '../../components/ListingDeletionModal.jsx';

 import Headline from '../../components/headline/Headline.jsx';
+import StatusControl from '../../components/listings/StatusControl.jsx';
 import './ListingDetail.less';

 const { Title, Text } = Typography;
@@ -65,6 +68,8 @@ export default function ListingDetail() {
  const map = useRef(null);
  const [loading, setLoading] = useState(true);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [notesDraft, setNotesDraft] = useState('');
+  const [notesSaving, setNotesSaving] = useState(false);

  useEffect(() => {
    async function fetchListing() {
@@ -82,6 +87,10 @@ export default function ListingDetail() {
    fetchListing();
  }, [listingId]);

+  useEffect(() => {
+    setNotesDraft(listing?.notes ?? '');
+  }, [listing?.id, listing?.notes]);
+
  const hasGeo =
    listing?.latitude != null && listing?.longitude != null && listing?.latitude !== -1 && listing?.longitude !== -1;

@@ -271,6 +280,32 @@ export default function ListingDetail() {
    }
  };

+  const handleStatusChange = async (next) => {
+    try {
+      await actions.listingsData.setListingStatus(listing.id, next);
+      await actions.listingsData.getListing(listingId);
+      Toast.success(next ? `Marked as ${next}` : 'Status cleared');
+    } catch (e) {
+      console.error('Failed to update status:', e);
+      Toast.error('Failed to update status');
+    }
+  };
+
+  const handleSaveNotes = async () => {
+    if (!listing) return;
+    setNotesSaving(true);
+    try {
+      await actions.listingsData.setListingNotes(listing.id, notesDraft);
+      await actions.listingsData.getListing(listingId);
+      Toast.success('Notes saved');
+    } catch (e) {
+      console.error('Failed to save notes:', e);
+      Toast.error('Failed to save notes');
+    } finally {
+      setNotesSaving(false);
+    }
+  };
+
  if (loading) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
@@ -281,35 +316,58 @@ export default function ListingDetail() {

  if (!listing) return null;

+  const statusLabel = listing.status?.status
+    ? listing.status.status.charAt(0).toUpperCase() + listing.status.status.slice(1)
+    : null;
+
  const data = [
-    { key: 'Price', value: `${listing.price} €`, Icon: <IconCart /> },
+    {
+      key: 'Price',
+      value: `${listing.price} €`,
+      Icon: <IconCart />,
+      helpText: 'The asking price of this listing, as reported by the provider.',
+    },
    {
      key: 'Size',
      value: listing.size ? `${listing.size} m²` : 'N/A',
      Icon: <IconExpand />,
+      helpText: 'Living space of the listing in square meters.',
    },
    {
      key: 'Rooms',
      value: listing.rooms ? `${listing.rooms} Rooms` : 'N/A',
      Icon: <IconGridView />,
+      helpText: 'Number of rooms in the listing.',
    },
    {
      key: 'Job',
      value: listing.job_name,
      Icon: <IconBriefcase />,
+      helpText: 'The Fredy job that found this listing.',
    },
    {
      key: 'Provider',
      value: listing.provider ? listing.provider.charAt(0).toUpperCase() + listing.provider.slice(1) : 'Unknown',
      Icon: <IconBriefcase />,
+      helpText: 'The real estate portal where this listing was scraped from.',
    },
    {
      key: 'Added',
      value: timeService.format(listing.created_at),
      Icon: <IconClock />,
+      helpText: 'When Fredy first added this listing to your database.',
    },
  ];

+  if (statusLabel) {
+    data.push({
+      key: 'Status',
+      value: listing.status?.setAt ? `${statusLabel} (set ${timeService.format(listing.status.setAt)})` : statusLabel,
+      Icon: <IconActivity />,
+      helpText: 'The status you marked for this listing and when you set it.',
+    });
+  }
+
  return (
    <div className="listing-detail">
      <Headline
@@ -347,6 +405,7 @@ export default function ListingDetail() {
            >
              {listing.isWatched === 1 ? 'Watched' : 'Watch'}
            </Button>
+            <StatusControl status={listing.status?.status ?? null} onChange={handleStatusChange} />
            <a href={listing.link} target="_blank" rel="noopener noreferrer" className="listing-detail__open-btn">
              <IconLink style={{ marginRight: 6 }} />
              Open listing
@@ -380,6 +439,32 @@ export default function ListingDetail() {
                preview={!!listing.image_url}
              />
            </div>
+
+            <div className="listing-detail__notes">
+              <Title heading={4} className="listing-detail__notes-title">
+                Notes
+              </Title>
+              <TextArea
+                value={notesDraft}
+                onChange={(val) => setNotesDraft(val)}
+                placeholder="Your private notes about this listing…"
+                rows={5}
+                autosize={{ minRows: 4, maxRows: 12 }}
+                className="listing-detail__notes-textarea"
+                showClear
+              />
+              <Space className="listing-detail__notes-actions">
+                <Button
+                  theme="solid"
+                  type="primary"
+                  loading={notesSaving}
+                  disabled={notesSaving || (notesDraft ?? '') === (listing.notes ?? '')}
+                  onClick={handleSaveNotes}
+                >
+                  Store notes
+                </Button>
+              </Space>
+            </div>
          </Col>
          <Col span={24} lg={12}>
            <div className="listing-detail__info-section">
@@ -389,10 +474,12 @@ export default function ListingDetail() {
              <Descriptions column={1}>
                {data.map((item, index) => (
                  <Descriptions.Item key={index}>
-                    <Space>
-                      {item.Icon}
-                      {item.value}
-                    </Space>
+                    <Tooltip content={item.helpText} position="left">
+                      <span className="listing-detail__details-item">
+                        {item.Icon}
+                        {item.value}
+                      </span>
+                    </Tooltip>
                  </Descriptions.Item>
                ))}
              </Descriptions>
--- a/ui/src/views/listings/ListingDetail.less
+++ b/ui/src/views/listings/ListingDetail.less
@@ -89,6 +89,49 @@
    }
  }

+  &__notes {
+    padding: 1.5rem;
+    border-top: 1px solid var(--semi-color-border);
+  }
+
+  &__notes-title {
+    margin-bottom: 1rem !important;
+  }
+
+  &__notes-actions {
+    margin-top: 0.75rem;
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  &__notes-textarea {
+    background: #2a2a2a !important;
+    border: 1px solid @color-border-bright !important;
+    border-radius: @radius-input !important;
+    box-shadow: none !important;
+    outline: none !important;
+    transition: border-color @transition-fast, background @transition-fast !important;
+
+    textarea {
+      background: transparent !important;
+      border: 0 !important;
+      box-shadow: none !important;
+      outline: none !important;
+      color: @color-text !important;
+      font-family: @font-ui !important;
+      font-size: @text-base !important;
+    }
+
+    &.semi-input-textarea-focus,
+    &:focus,
+    &:focus-within {
+      border-color: @color-accent !important;
+      box-shadow: none !important;
+      outline: none !important;
+      background: #2f2f2f !important;
+    }
+  }
+
  &__watch-btn {
    color: @color-muted !important;
    border: 1px solid @color-border-bright !important;
@@ -128,6 +171,13 @@
    padding: 1.5rem;
  }

+  &__details-item {
+    cursor: help;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
  &__map-container {
    height: 400px;
    width: 100%;
--- a/ui/src/views/listings/Listings.jsx
+++ b/ui/src/views/listings/Listings.jsx
@@ -6,11 +6,15 @@
 import ListingsOverview from '../../components/listings/ListingsOverview.jsx';
 import Headline from '../../components/headline/Headline.jsx';

-export default function Listings() {
+/**
+ * @param {{ mode?: 'all' | 'watchlist' }} props
+ */
+export default function Listings({ mode = 'all' }) {
+  const title = mode === 'watchlist' ? 'Watchlist' : 'Listings';
  return (
    <>
-      <Headline text="Listings" />
-      <ListingsOverview />
+      <Headline text={title} />
+      <ListingsOverview mode={mode} />
    </>
  );
 }