feat: highlight tag on click

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -6,7 +6,6 @@ import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
 import { useCloseOnBlur } from './utils';
 import { AppState } from '@/ui_models/app_state';
-import { Tag } from './Tag';
 
 type Props = {
   application: WebApplication;
@@ -142,7 +141,12 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                   <span>
                     Create new tag:
                   </span>
-                  <Tag title={searchQuery} className="ml-2" />
+                  <span
+                    className="bg-contrast rounded text-xs color-text p-1 flex ml-2"
+                  >
+                    <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
+                    {searchQuery}
+                  </span>
                 </button>
               </>
             )}

app/assets/javascripts/components/NoteTags.tsx

@@ -1,7 +1,7 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { toDirective } from './utils';
-import { Tag } from './Tag';
+import { Icon } from './Icon';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
 
@@ -14,7 +14,13 @@ const NoteTags = observer(({ application, appState }: Props) => {
   return (
     <div className="flex flex-wrap">
       {appState.notes.activeNoteTags.map((tag) => (
-        <Tag key={tag.uuid} title={tag.title} className="mt-2 mr-2" />
+        <button
+          className={`bg-contrast border-0 rounded text-xs color-text p-1 flex items-center 
+            mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`}
+        >
+          <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
+          {tag.title}
+        </button>
       ))}
       <AutocompleteTagInput application={application} appState={appState} />
     </div>

app/assets/javascripts/components/Tag.tsx

@@ -1,16 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { Icon } from './Icon';
-
-type TagProps = {
-  title: string;
-  className?: string;
-};
-
-export const Tag: FunctionalComponent<TagProps> = ({ title, className }) => (
-  <span
-    className={`bg-contrast rounded text-xs color-text p-1 flex items-center ${className ?? ''}`}
-  >
-    <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
-    {title}
-  </span>
-);

app/assets/stylesheets/_sn.scss

@@ -102,6 +102,14 @@
   @extend .color-text;
 }
 
+.hover\:bg-secondary-contrast:hover {
+  @extend .bg-secondary-contrast;
+}
+
+.focus\:bg-secondary-contrast:focus {
+  @extend .bg-secondary-contrast;
+}
+
 .focus\:inner-ring-info:focus {
   @extend .inner-ring-info;
 }