moving from restana to fastify

ui/src/Index.jsx

@@ -12,7 +12,7 @@ import './Index.less';
 
 // Semi UI uses react-dom (not react-dom/client) internally for imperative renders
 // like Toast, Notification, etc. In React 19, createRoot was removed from react-dom
-// and lives only in react-dom/client — inject it so Toast can create its own root.
+// and lives only in react-dom/client - inject it so Toast can create its own root.
 semiGlobal.config.createRoot = createRoot;
 
 const container = document.getElementById('fredy');

ui/src/Index.less

@@ -71,7 +71,7 @@ body {
   vertical-align: middle;
 }
 
-// Suppress focus outlines — Semi uses --semi-color-primary (our red) for all rings
+// Suppress focus outlines - Semi uses --semi-color-primary (our red) for all rings
 button:focus,
 button:focus-visible,
 .semi-button:focus,

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

@@ -26,7 +26,7 @@ import {
 } from '@douyinfe/semi-icons';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import ListingDeletionModal from '../../ListingDeletionModal.jsx';
-import no_image from '../../../assets/no_image.jpg';
+import no_image from '../../../assets/no_image.png';
 import * as timeService from '../../../services/time/timeService.js';
 import { xhrDelete, xhrPost } from '../../../services/xhr.js';
 import { useActions, useSelector } from '../../../services/state/store.js';

ui/src/components/navigation/Navigate.less

@@ -136,9 +136,9 @@
   color: @color-muted !important;
 }
 
-// Collapsed state — icons perfectly centered
+// Collapsed state - icons perfectly centered
 .semi-navigation-collapsed {
-  // Text span is display:block and takes up flex space — must be removed so justify-content:center works
+  // Text span is display:block and takes up flex space - must be removed so justify-content:center works
   .semi-navigation-item-text {
     display: none !important;
   }
@@ -165,7 +165,7 @@
     min-width: 0 !important;
   }
 
-  // Semi adds margin-right to icons for text spacing — remove it when collapsed
+  // Semi adds margin-right to icons for text spacing - remove it when collapsed
   .semi-navigation-item-icon,
   .semi-navigation-sub-title-icon {
     display: flex !important;
@@ -179,13 +179,13 @@
   }
 }
 
-// Semi Nav.Footer — full width, no extra padding (our BEM class controls it)
+// Semi Nav.Footer - full width, no extra padding (our BEM class controls it)
 .semi-navigation-footer {
   width: 100% !important;
   box-sizing: border-box !important;
 }
 
-// Collapsed submenu popup — actual class used by Semi UI is .semi-navigation-popover
+// Collapsed submenu popup - actual class used by Semi UI is .semi-navigation-popover
 .semi-navigation-popover {
   background: @color-elevated !important;
   border: 1px solid @color-border !important;

ui/src/components/segment/SegmentParts.less

@@ -32,7 +32,7 @@
     padding: 16px 20px !important;
   }
 
-  // Semi input focus — subtle, not accent
+  // Semi input focus - subtle, not accent
   .semi-input-wrapper:focus-within,
   .semi-select:focus-within {
     border-color: @color-border-bright !important;

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -299,7 +299,7 @@ const GeneralSettings = function GeneralSettings() {
 
                 <SegmentPart
                   name="Analytics"
-                  helpText="Anonymous usage data to help improve Fredy — provider names, adapter names, OS, Node version, and architecture."
+                  helpText="Anonymous usage data to help improve Fredy - provider names, adapter names, OS, Node version, and architecture."
                 >
                   <Checkbox checked={analyticsEnabled} onChange={(e) => setAnalyticsEnabled(e.target.checked)}>
                     Enable analytics

ui/src/views/generalSettings/GeneralSettings.less

@@ -43,7 +43,7 @@
   }
 }
 
-// TimePicker fix — scoped so it doesn't pollute modal headers
+// TimePicker fix - scoped so it doesn't pollute modal headers
 .semi-timepicker .semi-input-wrapper,
 .semi-timepicker .semi-input-inset-label-wrapper {
   background: @color-elevated !important;

ui/src/views/listings/ListingDetail.jsx

@@ -36,7 +36,7 @@ import {
 } from '@douyinfe/semi-icons';
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import no_image from '../../assets/no_image.jpg';
+import no_image from '../../assets/no_image.png';
 import * as timeService from '../../services/time/timeService.js';
 import { distanceMeters, getBoundsFromCoords } from './mapUtils.js';
 import { xhrPost } from '../../services/xhr.js';
@@ -337,10 +337,16 @@ export default function ListingDetail() {
           <Col span={24} lg={12}>
             <div className="listing-detail__image-container">
               <Image
-                src={listing.image_url}
-                fallback={no_image}
+                src={listing.image_url ?? no_image}
+                fallback={
+                  <img
+                    src={no_image}
+                    alt="No image available"
+                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                  />
+                }
                 style={{ width: '100%', height: '100%' }}
-                preview={true}
+                preview={!!listing.image_url}
               />
             </div>
           </Col>

ui/src/views/listings/Map.jsx

@@ -13,7 +13,7 @@ import { distanceMeters, generateCircleCoords, getBoundsFromCenter, getBoundsFro
 import { Banner, Select, Switch, Toast, Typography } from '@douyinfe/semi-ui-19';
 import { IconDelete, IconEyeOpened, IconLink } from '@douyinfe/semi-icons';
 
-import no_image from '../../assets/no_image.jpg';
+import no_image from '../../assets/no_image.png';
 import _RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
 import './Map.less';