feat: add annotations, user profiles, watchers, stories, search and more

frontend/src/lib/components/Reactions.svelte

@@ -3,23 +3,29 @@
   import CustomEmoji from "$lib/components/CustomEmoji.svelte";
 
   interface Props {
+    onclick?: () => void;
     own: boolean;
     reactions: ReactionCount[];
   }
 
-  let { reactions, own }: Props = $props();
+  let { reactions, own, onclick }: Props = $props();
 </script>
 
 <div class="Reactions" class:own>
   {#each reactions as reaction, index (reaction.custom_emoji_id ?? reaction.emoji ?? index)}
-    <span class="reaction" class:chosen={reaction.chosen}>
+    <button
+      type="button"
+      class="reaction"
+      class:chosen={reaction.chosen}
+      {onclick}
+    >
       {#if reaction.custom_emoji_id}
         <CustomEmoji id={reaction.custom_emoji_id} size={1.25} />
       {:else}
         <span class="emoji">{reaction.emoji ?? "❓"}</span>
       {/if}
       <span class="count">{reaction.count}</span>
-    </span>
+    </button>
   {/each}
 </div>
 
@@ -38,13 +44,16 @@
 
     height: 1.625rem;
     padding: 0 0.4375rem 0 0.375rem;
+    border: 0;
     border-radius: 1rem;
 
+    font-family: inherit;
     font-size: 0.875rem;
     font-weight: var(--font-weight-medium);
     font-variant-numeric: tabular-nums;
     color: var(--color-text);
 
+    cursor: pointer;
     background-color: var(--color-message-reaction);
 
     .own & {