When Openweathermap calls for multiple images, split icon Id and get multiple images

[TomNaughton]

Issue link

iconId is split at comma and then iterated over, producing icons per iconId.

Summary by CodeRabbit

• New Features
  • The weather icon rendering on the clock widget has been enhanced to display multiple weather condition icons simultaneously. When multiple weather conditions are detected, each condition is now shown with its own corresponding icon, allowing users to gain a comprehensive understanding of current atmospheric conditions at a glance, rather than seeing only a single consolidated weather representation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The clock component's weather icon rendering logic has been updated to display multiple icons instead of a single icon. The change splits the weather.iconId field by commas and renders an image for each non-empty icon ID, applying the same alt text to all generated images.

Changes

Cohort / File(s)	Summary
Weather icon rendering update immichFrame.Web/src/lib/components/elements/clock.svelte	Modified weather icon rendering to iterate over comma-separated icon IDs and render multiple images instead of a single icon; each image uses the provided URL template with the icon ID substituted

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file modification with straightforward iteration logic
• String splitting and looping pattern is standard and low-risk
• Verify that the comma-separated format is consistent with the data source
• Confirm alt text behavior is appropriate for multiple rendered images

Poem

🌤️ One icon became many, a weather display so fine,
Split by commas dancing, each icon now does shine,
The clock shows all the storms and sun in cheerful lines! ☀️

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly describes the main change: handling multiple weather icons from OpenWeatherMap by splitting the icon ID and rendering multiple images.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 55dfcf3 and 15e7b56.

📒 Files selected for processing (1)

• immichFrame.Web/src/lib/components/elements/clock.svelte (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Normalize and filter icon IDs to avoid empty/duplicate entries, and consider precomputing the icon list

The multi‑icon rendering logic looks correct overall, but there are a couple of minor robustness concerns:

• weather.iconId?.split(',') can produce empty strings (e.g., trailing comma or accidental double comma). Those will still render an <img> with an empty/invalid {IconId}, which can show as a broken image.
• Using (icon) as the key can collide if the same icon ID appears more than once or differs only by whitespace.

You can tighten this up by normalizing and filtering the icon IDs once in a derived value and then iterating over that, using a stable key:

-				{#if $configStore.weatherIconUrl}
-					{#each weather.iconId?.split(',') ?? [] as icon (icon)}
-						<img
-							src={$configStore.weatherIconUrl.replace('{IconId}', encodeURIComponent(icon.trim()))}
-							class="icon-weather"
-							alt={weather.description}
-						/>
-					{/each}
-				{/if}
+				{#if $configStore.weatherIconUrl}
+					{#each weatherIcons() as icon, index (icon + '-' + index)}
+						<img
+							src={$configStore.weatherIconUrl.replace('{IconId}', encodeURIComponent(icon))}
+							class="icon-weather"
+							alt={weather.description}
+						/>
+					{/each}
+				{/if}

And in the <script> block, add a derived helper for the normalized list:

const weatherIcons = $derived(
	() =>
		weather?.iconId
			?.split(',')
			.map((id) => id.trim())
			.filter((id) => id.length > 0) ?? []
);

This avoids broken images from empty IDs, gives you predictable keys, and keeps the template a bit cleaner.

🤖 Prompt for AI Agents

In immichFrame.Web/src/lib/components/elements/clock.svelte around lines 78–85,
the template splits weather.iconId inline which can yield empty strings and
duplicate keys; add a precomputed helper (e.g., weatherIcons) in the <script>
that: splits on commas, trims each id, filters out empty strings, and optionally
deduplicates, then iterate over that list in the template instead of
weather.iconId?.split(...), using a stable key such as `${icon}-${index}` and
encodeURIComponent(icon.trim()) for the src to avoid broken images and key
collisions.

[3rob3]

Have you tested this and it looks OK? I feel like it would look weird having two weather icons. My vote would be split iconId on comma, and just always use element [0].

[JW-CH]

I was thinking the same. Also, if the weather.iconId would be an empty string, the split would still return a single element (empty) which would request the URL with an empty id.

[TomNaughton]

I considered displaying a single element. This may work fine, but it may result in discounting a weather status that the user would prefer to know about. If the API returns "mist,heavy rain", the second element should probably take priority.