Add hover styles to icon when the onclick prop is passed

src/components/AssigneeInput.svelte

@@ -122,19 +122,18 @@
     {#if allowedToEdit}
       <div class="global-flex" style:margin-left="auto">
         {#if showInput}
-          <Icon onclick={addAssignee} name="checkmark" styleCursor="pointer" />
+          <Icon
+            onclick={addAssignee}
+            name="checkmark"
+            disabled={!valid || inputValue === ""} />
           <Icon
             onclick={() => {
               inputValue = "";
               showInput = false;
             }}
-            name="cross"
-            styleCursor="pointer" />
+            name="cross" />
         {:else}
-          <Icon
-            name="plus"
-            onclick={() => (showInput = true)}
-            styleCursor="pointer"></Icon>
+          <Icon name="plus" onclick={() => (showInput = true)}></Icon>
         {/if}
       </div>
     {/if}

src/components/Icon.svelte

@@ -4,7 +4,7 @@
   interface Props {
     size?: "16" | "32";
     onclick?: () => void;
-    styleCursor?: "default" | "pointer" | "inherit";
+    disabled?: boolean;
     name:
       | "arrow-left"
       | "arrow-right"
@@ -46,8 +46,8 @@
   const {
     size = "16",
     onclick = undefined,
-    styleCursor = "inherit",
     name,
+    disabled = false,
   }: Props = $props();
 </script>
 
@@ -59,14 +59,29 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .hoverable {
+    color: var(--color-foreground-dim);
+  }
+  .hoverable:not(.disabled):hover {
+    color: var(--color-foreground-default);
+  }
+  .disabled {
+    color: var(--color-foreground-disabled);
+  }
 </style>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <svg
-  style:cursor={styleCursor}
+  style:cursor={onclick && !disabled ? "pointer" : "inherit"}
+  class:hoverable={onclick}
+  class:disabled
   role="img"
-  {onclick}
+  onclick={() => {
+    if (onclick && !disabled) {
+      onclick();
+    }
+  }}
   aria-label={`icon-${name}`}
   width={size}
   height={size}

src/components/LabelInput.svelte

@@ -109,19 +109,18 @@
     {#if allowedToEdit}
       <div class="global-flex" style:margin-left="auto">
         {#if showInput}
-          <Icon onclick={addLabel} name="checkmark" styleCursor="pointer" />
+          <Icon
+            onclick={addLabel}
+            disabled={!valid || inputValue === ""}
+            name="checkmark" />
           <Icon
             onclick={() => {
               inputValue = "";
               showInput = false;
             }}
-            name="cross"
-            styleCursor="pointer" />
+            name="cross" />
         {:else}
-          <Icon
-            name="plus"
-            onclick={() => (showInput = true)}
-            styleCursor="pointer"></Icon>
+          <Icon name="plus" onclick={() => (showInput = true)}></Icon>
         {/if}
       </div>
     {/if}

src/components/ReactionSelector.svelte

@@ -52,7 +52,7 @@
   {popoverPositionLeft}
   popoverPadding="0">
   {#snippet toggle(onclick)}
-    <Icon name="face" {onclick} styleCursor="pointer" />
+    <Icon name="face" {onclick} />
   {/snippet}
   {#snippet popover()}
     <Border variant="ghost">

src/components/Thread.svelte

@@ -111,7 +111,7 @@
         partial(editComment, root.id)}
       reactOnComment={reactOnComment && partial(reactOnComment, root.id)}>
       {#snippet actions()}
-        <Icon name="reply" onclick={toggleReply} styleCursor="pointer" />
+        <Icon name="reply" onclick={toggleReply} />
       {/snippet}
     </CommentComponent>
   </div>

src/views/repo/Issue.svelte

@@ -420,7 +420,6 @@
             }} />
           <div class="title-icons">
             <Icon
-              styleCursor="pointer"
               name="checkmark"
               onclick={async () => {
                 if (updatedTitle.trim().length > 0) {
@@ -428,7 +427,6 @@
                 }
               }} />
             <Icon
-              styleCursor="pointer"
               name="cross"
               onclick={() => {
                 updatedTitle = issue.title;
@@ -442,10 +440,7 @@
           <InlineTitle content={issue.title} fontSize="medium" />
           {#if roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), issue.body.author.did, )}
             <div class="title-icons">
-              <Icon
-                styleCursor="pointer"
-                name="pen"
-                onclick={() => (editingTitle = !editingTitle)} />
+              <Icon name="pen" onclick={() => (editingTitle = !editingTitle)} />
               <IssueStateButton issueState={issue.state} save={saveState} />
             </div>
           {/if}
@@ -511,7 +506,7 @@
           issue.body.id,
         )}>
         {#snippet actions()}
-          <Icon styleCursor="pointer" name="reply" onclick={toggleReply} />
+          <Icon name="reply" onclick={toggleReply} />
         {/snippet}
       </CommentComponent>
     </div>