fix(street-level): SINCE note on the value's line: ANY DATE (by upload date)

The slim-down in #974 dropped --sl-text-small, which .sl-since-note still
used, so with KartaView lit "KartaView: by upload date" rendered on its
own line larger than the value. The note now sits beside the value in the
same mono type and letter spacing, a size smaller (0.5rem), as
"(by upload date)". One source is lit at a time, so the provider name is
dropped. es/ru catalogs, tests, README, CURRENT-STATE and the registry
JSDoc follow.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/i18n/locales/es.json

@@ -945,7 +945,7 @@
   "Image by {creator}": "Imagen de {creator}",
   "zoom in to see KartaView coverage": "acércate para ver la cobertura de KartaView",
   "no KartaView photos in view": "no hay fotos de KartaView a la vista",
-  "{names}: by upload date": "{names}: por fecha de subida",
+  "(by upload date)": "(por fecha de subida)",
   "{n} streets in view · click a line for its nearest photo": {
     "one": "{n} calle a la vista · haz clic en una línea para su foto más cercana",
     "many": "{n} calles a la vista · haz clic en una línea para su foto más cercana",

src/i18n/locales/ru.json

@@ -954,7 +954,7 @@
   "Image by {creator}": "Автор снимка: {creator}",
   "zoom in to see KartaView coverage": "приблизьтесь, чтобы увидеть покрытие KartaView",
   "no KartaView photos in view": "фотографий KartaView в зоне видимости нет",
-  "{names}: by upload date": "{names}: по дате загрузки",
+  "(by upload date)": "(по дате загрузки)",
   "{n} streets in view · click a line for its nearest photo": {
     "one": "{n} улица в кадре · щёлкните линию, чтобы открыть ближайшую фотографию",
     "few": "{n} улицы в кадре · щёлкните линию, чтобы открыть ближайшую фотографию",

src/layers/streetLevel/providers/kartaview/policy.js

@@ -141,7 +141,7 @@ export const FILTERED_OUT_MESSAGE = msg(
   'None of KartaView’s photos here pass the imagery filter',
 );
 /** Under the SINCE slider while KartaView is lit. */
-export const SINCE_NOTE = 'KartaView: by upload date';
+export const SINCE_NOTE = '(by upload date)';
 
 /** The UTC calendar day of `ms`, as KartaView's startDate reads it. */
 function utcDay(ms) {

src/layers/streetLevel/registry.js

@@ -23,7 +23,7 @@ export function filtersOf(provider) {
  * @property {{kind: 'view-cone', color: string}} [marker]   Default: GEV's pin.
  * @property {Array<'pano'|'since'>} [filters]   Filters it honours (default both).
  * @property {{noun: string, action: string}} [coverageLabel]   How the panel counts its lines and says what a click does (default: sequences, "click a line for its photos").
- * @property {'capture'|'upload'} [sinceBasis]   What SINCE compares (default 'capture'); 'upload' puts a note under the slider while the provider is lit.
+ * @property {'capture'|'upload'} [sinceBasis]   What SINCE compares (default 'capture'); 'upload' notes "(by upload date)" beside the SINCE value while the provider is lit.
  * @property {(context: ProviderContext) => ProviderInstance} create
  *
  * @typedef {object} ProviderContext   Handed to `create()` once by the core.

src/layers/streetLevel/uiState.js

@@ -73,16 +73,14 @@ export function filterControls(providers) {
 }
 
 /**
- * The note under SINCE when a lit provider dates its imagery by upload,
- * e.g. "KartaView: by upload date", or null.
+ * The note beside the SINCE value when a lit provider dates its imagery by
+ * upload, "(by upload date)", or null. One source is lit at a time, so the
+ * note needs no provider name.
  * @param {Array<ProviderSnapshot>} providers
  */
 export function sinceNote(providers) {
-  const names = providers
-    .filter((p) => p.on && p.sinceBasis === 'upload')
-    .map((p) => p.name);
-  return names.length
-    ? t('{names}: by upload date', { names: names.join(', ') })
+  return providers.some((p) => p.on && p.sinceBasis === 'upload')
+    ? t('(by upload date)')
     : null;
 }
 

src/layers/streetLevel/uiState.test.mjs

@@ -67,7 +67,7 @@ test('the filter controls show only for a lit provider that honours them', () =>
   );
 });
 
-test('a lit provider that dates by upload puts a note under SINCE', () => {
+test('a lit provider that dates by upload notes it beside the SINCE value', () => {
   const kartaView = provider({
     id: 'kartaview',
     name: 'KartaView',
@@ -75,7 +75,7 @@ test('a lit provider that dates by upload puts a note under SINCE', () => {
   });
   const note = (providers) => composeUIState({ ...base, providers }).sinceNote;
   assert.equal(note([provider()]), null, 'Mapillary: capture date');
-  assert.equal(note([kartaView]), 'KartaView: by upload date');
+  assert.equal(note([kartaView]), '(by upload date)');
   assert.equal(note([{ ...kartaView, on: false }]), null, 'only while lit');
 });
 

src/ui/streetLevelControls.test.mjs

@@ -981,9 +981,9 @@ test('a note under SINCE says what date it compares, only while one is given', (
     const { layer } = stubPanel(dom, state);
     const note = () => dom.root.querySelector('#sl-since-note');
     assert.equal(note().hidden, true, 'none for Mapillary');
-    layer.publish({ ...state, sinceNote: 'KartaView: by upload date' });
+    layer.publish({ ...state, sinceNote: '(by upload date)' });
     assert.equal(note().hidden, false);
-    assert.equal(note().textContent, 'KartaView: by upload date');
+    assert.equal(note().textContent, '(by upload date)');
     layer.publish(state);
     assert.equal(note().hidden, true);
     // The panel's own markup has it, read out with the slider.

src/ui/styles/street-level.css

@@ -291,10 +291,20 @@ html:not([lang='en']) .sl-meta-row .sl-nearest-btn {
   outline-offset: 3px;
 }
 
-.sl-since-note {
+/* The value and its note share a line: ANY DATE (by upload date). */
+.sl-since-value {
   grid-column: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 6px;
+  min-width: 0;
+}
+
+.sl-since-note {
   font-family: var(--font-mono);
-  font-size: var(--sl-text-small);
+  font-size: 0.5rem;
+  letter-spacing: 0.08em;
   color: var(--text-secondary);
 }
 
@@ -303,7 +313,6 @@ html:not([lang='en']) .sl-meta-row .sl-nearest-btn {
 }
 
 .sl-since-label {
-  grid-column: 2;
   font-family: var(--font-mono);
   font-size: var(--sl-text);
   letter-spacing: 0.08em;

src/ui/templates/layer-panels.html

@@ -127,8 +127,10 @@
           <div id="sl-since-row" class="sl-since">
             <label class="cctv-summary-label" for="sl-since" data-i18n>SINCE</label>
             <input id="sl-since" class="sl-range" type="range" min="0" max="8" step="1" value="0" aria-valuetext="ANY DATE" aria-describedby="sl-since-label sl-since-note" />
-            <output id="sl-since-label" class="sl-since-label" for="sl-since" data-i18n>ANY DATE</output>
-            <small id="sl-since-note" class="sl-since-note" hidden></small>
+            <span class="sl-since-value">
+              <output id="sl-since-label" class="sl-since-label" for="sl-since" data-i18n>ANY DATE</output>
+              <small id="sl-since-note" class="sl-since-note" hidden></small>
+            </span>
           </div>
         </fieldset>
         <!-- The hint says how to open imagery; the button does it without a pointer. -->