Add and display tags

src/components/CTypeDetails/CTypeDetails.astro

@@ -33,8 +33,11 @@ const {
   extrinsicHash,
   schema,
   attestationsCount,
+  tags,
 } = Astro.props.cTypeData;
 
+const tagNames = tags?.map(({ dataValues }) => dataValues.tagName);
+
 const web3Name = await getWeb3NameForDid(creator);
 
 const schemaV1 = CType.fromProperties('', {}).$schema;
@@ -95,6 +98,25 @@ const { subscan } = configuration;
       {createdAt.toLocaleString()}
     </dd>
 
+    {
+      tagNames && tagNames.length > 0 && (
+        <Fragment>
+          <dt class={propertyStyles.term}>Tags</dt>
+          <dd class={propertyStyles.definition}>
+            <ul>
+              {tagNames.map((tagName) => (
+                <li>
+                  <a href={`/?query=${tagName}`} class={propertyStyles.anchor}>
+                    #{tagName}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </dd>
+        </Fragment>
+      )
+    }
+
     <dt class={propertyStyles.term}>Extrinsic:</dt>
     <dd class={propertyStyles.definition}>
       <a
@@ -154,4 +176,15 @@ const { subscan } = configuration;
     padding: 0.75rem;
     margin-block-start: 0.5rem;
   }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: inline;
+    margin-inline-end: 0.25rem;
+  }
 </style>

src/components/CTypeDetails/__snapshots__/CTypeDetails.test.ts.snap

@@ -340,6 +340,15 @@ exports[`CTypeDetails > should match snapshot 1`] = `
     <dt class="_term">Creation date:</dt>
     <dd class="_definition3">5/1/2023, 12:00:00 PM</dd>
 
+    <dt class="_term">Tags</dt>
+    <dd class="_definition3">
+      <ul>
+        <li>
+          <a href="/?query=example" class="_anchor"> #example </a>
+        </li>
+      </ul>
+    </dd>
+
     <dt class="_term">Extrinsic:</dt>
     <dd class="_definition3">
       <a class="_anchor" href="https://example.subscan.io/extrinsic/0xexamplehash">

src/components/CreateForm/CreateForm.module.css

@@ -29,6 +29,7 @@
   inline-size: 100%;
   block-size: 6rem;
   font-family: inherit;
+  padding: 0.5rem 0.75rem;
 }
 
 .fieldset {
@@ -42,6 +43,59 @@
   cursor: pointer;
 }
 
+.tags {
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
+  font-family: inherit;
+  padding: 0.5rem 0.75rem;
+  background: white;
+  margin: 0;
+  list-style: none;
+  min-block-size: 2.5rem;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  block-size: 1.5rem;
+  align-items: center;
+  background: var(--color-tag);
+  color: white;
+  border-radius: var(--border-radius);
+  padding-inline-start: 0.5rem;
+  gap: 0.25rem;
+}
+
+.removeTag {
+  border: 0;
+  padding: 0;
+  inline-size: 1.5rem;
+  block-size: 100%;
+  background: url('./xmark-solid.svg') no-repeat center/50%;
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.tagInputContainer {
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.tagInput {
+  border: none;
+  inline-size: 100%;
+}
+
+.tagInputDescription {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
 .submit {
   composes: primary from '../Button.module.css';
 }

src/components/CreateForm/CreateForm.test.tsx

@@ -14,13 +14,18 @@ vi.mocked(useSupportedExtensions).mockReturnValue([
 
 describe('CreateForm', () => {
   it('should render', async () => {
-    const { container, queryAllByLabelText, getByText } = render(
-      <CreateForm />,
-    );
+    const { container, queryAllByLabelText, getByText, getByLabelText } =
+      render(<CreateForm />);
     expect(container).toMatchSnapshot();
 
     await userEvent.click(getByText(/Add Property/));
     await waitFor(() => queryAllByLabelText('Type:').length === 1);
-    expect(container).toMatchSnapshot();
+    expect(container).toMatchSnapshot('adding property');
+
+    await userEvent.type(
+      getByLabelText('Tags (Optional)'),
+      'tag1  ,tag2, x, tag3,',
+    );
+    expect(container).toMatchSnapshot('with tags');
   });
 });

src/components/CreateForm/CreateForm.tsx

@@ -1,4 +1,11 @@
-import { FormEvent, useCallback, useState } from 'react';
+import {
+  FocusEvent,
+  FormEvent,
+  KeyboardEvent,
+  MouseEvent,
+  useCallback,
+  useState,
+} from 'react';
 import { web3FromSource } from '@polkadot/extension-dapp';
 import {
   Blockchain,
@@ -28,6 +35,56 @@ export function CreateForm() {
     [propertiesCount],
   );
 
+  const [tags, setTags] = useState<string[]>([]);
+
+  const addTag = useCallback(
+    (tag: string) => {
+      const trimmed = tag.trim().replace(/,/g, '').toLowerCase();
+      if (!trimmed || trimmed.length < 2 || tags.includes(trimmed)) {
+        return;
+      }
+      setTags([...tags, trimmed]);
+    },
+    [tags],
+  );
+
+  const handleTagInputKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      const { key, currentTarget } = event;
+
+      if (![',', 'Backspace'].includes(key)) {
+        return;
+      }
+
+      if (key === ',' && currentTarget.value) {
+        addTag(currentTarget.value);
+        currentTarget.value = '';
+      }
+      if (key === 'Backspace' && !currentTarget.value && tags.length > 0) {
+        const lastTag = tags.slice(-1)[0];
+        setTags(tags.slice(0, -1));
+        currentTarget.value = lastTag;
+      }
+    },
+    [addTag, tags],
+  );
+
+  const handleTagInputBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      addTag(event.currentTarget.value);
+      event.currentTarget.value = '';
+    },
+    [addTag],
+  );
+
+  const handleRemoveTag = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      setTags(tags.filter((tag) => tag !== event.currentTarget.value));
+    },
+    [tags],
+  );
+
   const [account, setAccount] = useState<InjectedAccount>();
   const [progress, setProgress] = useState(false);
   const [error, setError] = useState(false);
@@ -85,7 +142,13 @@ export function CreateForm() {
         const extrinsicHash = signed.hash.toHex();
         const response = await fetch(paths.ctypes, {
           method: 'POST',
-          body: JSON.stringify({ cType, extrinsicHash, creator, description }),
+          body: JSON.stringify({
+            cType,
+            extrinsicHash,
+            creator,
+            description,
+            tags,
+          }),
           headers: { 'Content-Type': 'application/json' },
         });
         if (response.ok) {
@@ -100,7 +163,7 @@ export function CreateForm() {
         await disconnect();
       }
     },
-    [account, propertiesCount],
+    [account, propertiesCount, tags],
   );
 
   const extensions = useSupportedExtensions();
@@ -165,6 +228,38 @@ export function CreateForm() {
         </p>
       </fieldset>
 
+      <div className={styles.label}>
+        <label htmlFor="tagInput">Tags (Optional)</label>
+        <ul className={styles.tags}>
+          {tags.map((tag) => (
+            <li key={tag} className={styles.tag}>
+              {tag}
+              <button
+                type="button"
+                aria-label="remove tag"
+                className={styles.removeTag}
+                value={tag}
+                onClick={handleRemoveTag}
+              />
+            </li>
+          ))}
+
+          <li className={styles.tagInputContainer}>
+            <input
+              id="tagInput"
+              className={styles.tagInput}
+              onKeyUp={handleTagInputKeyUp}
+              onBlur={handleTagInputBlur}
+              maxLength={50}
+              aria-describedby="tagInputDescription"
+            />
+          </li>
+        </ul>
+        <p id="tagInputDescription" className={styles.tagInputDescription}>
+          Enter a comma after each tag
+        </p>
+      </div>
+
       <SelectAccount onSelect={setAccount} />
 
       {extensions.length === 0 && <p>No wallets detected</p>}