From 3316acb71f80671249f6168aea1f4a4a229b1b78 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Fri, 30 Aug 2024 11:16:56 -0500
Subject: [PATCH] chore(web): tag creation hint (#12142)

* chore(web): tag creation hint

* use FormatMessage

* use correct format

* use correct css class

* copywriting
---
 web/src/lib/components/forms/tag-asset-form.svelte | 11 +++++++++++
 web/src/lib/i18n/en.json                           |  1 +
 2 files changed, 12 insertions(+)

diff --git a/web/src/lib/components/forms/tag-asset-form.svelte b/web/src/lib/components/forms/tag-asset-form.svelte
index 306d25d3f1..7500a6faac 100644
--- a/web/src/lib/components/forms/tag-asset-form.svelte
+++ b/web/src/lib/components/forms/tag-asset-form.svelte
@@ -7,6 +7,8 @@
   import { onMount } from 'svelte';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { AppRoute } from '$lib/constants';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
   export let onTag: (tagIds: string[]) => void;
   export let onCancel: () => void;
@@ -38,6 +40,15 @@
 </script>
 
 <FullScreenModal title={$t('tag_assets')} icon={mdiTag} onClose={onCancel}>
+  <div class="text-sm">
+    <p>
+      <FormatMessage key="tag_not_found_question" let:message>
+        <a href={AppRoute.TAGS} class="text-immich-primary dark:text-immich-dark-primary underline">
+          {message}
+        </a>
+      </FormatMessage>
+    </p>
+  </div>
   <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
     <div class="my-4 flex flex-col gap-2">
       <Combobox
diff --git a/web/src/lib/i18n/en.json b/web/src/lib/i18n/en.json
index 83efc66e32..d0d330480a 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -1176,6 +1176,7 @@
   "tag_assets": "Tag assets",
   "tag_created": "Created tag: {tag}",
   "tag_feature_description": "Browsing photos and videos grouped by logical tag topics",
+  "tag_not_found_question": "Cannot find a tag? Create one <link>here</link>",
   "tag_updated": "Updated tag: {tag}",
   "tagged_assets": "Tagged {count, plural, one {# asset} other {# assets}}",
   "tags": "Tags",