fix(ui): increase hit area for sidebar buttons (#1387)

ui/DesignSystem/Component/ConnectionStatusIndicator.svelte

@@ -18,45 +18,60 @@
 </script>
 
 <style>
-  a {
+  .item {
+    width: var(--sidebar-width);
+    height: 32px;
+    margin-bottom: 16px;
+    position: relative;
     display: flex;
-    align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 100%;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .indicator:hover:before {
+    position: absolute;
+    content: "";
+    width: 4px;
+    height: 32px;
+    background-color: var(--color-foreground-level-5);
+    top: 0px;
+    left: 0px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .indicator :global(div:hover svg) {
+    fill: var(--color-secondary);
   }
 </style>
 
 <Remote {store} let:data={status}>
   <div>
     {#if status.type === StatusType.Online}
       <Tooltip value={`You’re connected to ${peerCount(status.connected)}`}>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
+        <div class="item indicator" data-cy="connection-status">
           <Icon.Network />
-        </a>
+        </div>
       </Tooltip>
     {:else if status.type === StatusType.Syncing}
       <Tooltip
         value={`Syncing with ${peerCount(status.syncs)} to get new content from your network`}>
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
+        <div class="item indicator" data-cy="connection-status">
           <Syncing />
-        </a>
+        </div>
       </Tooltip>
     {:else if status.type === StatusType.Offline || status.type === StatusType.Started}
       <Tooltip value="You’re not connected to any peers">
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
+        <div class="item indicator" data-cy="connection-status">
           <Offline />
-        </a>
+        </div>
       </Tooltip>
     {:else if status.type === StatusType.Stopped}
       <Tooltip value="The app couldn't start your peer">
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
+        <div class="item indicator" data-cy="connection-status">
           <Offline style="fill: var(--color-negative);" />
-        </a>
+        </div>
       </Tooltip>
     {/if}
   </div>

ui/DesignSystem/Component/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-  import { location, link } from "svelte-spa-router";
+  import { location, push } from "svelte-spa-router";
 
   import type { Identity } from "../../src/identity";
   import * as modal from "../../src/modal";
@@ -89,64 +89,48 @@
     border-bottom-right-radius: 4px;
   }
 
-  .indicator :global(li:hover svg) {
+  .indicator :global(div:hover svg) {
     fill: var(--color-secondary);
   }
 
   .indicator.active :global(svg) {
     fill: var(--color-secondary);
   }
-
-  a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
 </style>
 
 <div class="wrapper" data-cy="sidebar">
-  <ul class="top">
-    <li
-      class="item indicator"
-      data-cy="profile"
-      class:active={path.active(path.profile(), $location, true)}>
-      <Tooltip value={identity.metadata.handle}>
-        <a href={path.profileProjects()} use:link>
-          <Avatar
-            size="regular"
-            avatarFallback={identity.avatarFallback}
-            variant="circle" />
-        </a>
-      </Tooltip>
-    </li>
-  </ul>
-  <ul class="bottom">
-    <li
-      class="item indicator"
-      data-cy="search"
-      on:click|stopPropagation={() => modal.toggle(path.search())}>
-      <Tooltip value="Navigate to a project">
-        <!-- svelte-ignore a11y-missing-attribute -->
-        <a>
-          <Icon.MagnifyingGlass />
-        </a>
-      </Tooltip>
-    </li>
-    <li class="item indicator" data-cy="search">
-      <!-- svelte-ignore a11y-missing-attribute -->
-      <ConnectionStatusIndicator />
-    </li>
-    <li
-      class="item indicator"
-      data-cy="settings"
-      class:active={path.active(path.settings(), $location)}>
-      <Tooltip value="Settings">
-        <a href={path.settings()} use:link>
-          <Icon.Settings />
-        </a>
-      </Tooltip>
-    </li>
-  </ul>
+  <div class="top">
+    <Tooltip value={identity.metadata.handle}>
+      <div
+        class="item indicator"
+        data-cy="profile"
+        class:active={path.active(path.profile(), $location, true)}
+        on:click|stopPropagation={() => push(path.profileProjects())}>
+        <Avatar
+          size="regular"
+          avatarFallback={identity.avatarFallback}
+          variant="circle" />
+      </div>
+    </Tooltip>
+  </div>
+  <div class="bottom">
+    <Tooltip value="Navigate to a project">
+      <div
+        class="item indicator"
+        data-cy="search"
+        on:click|stopPropagation={() => modal.toggle(path.search())}>
+        <Icon.MagnifyingGlass />
+      </div>
+    </Tooltip>
+    <ConnectionStatusIndicator />
+    <Tooltip value="Settings">
+      <div
+        class="item indicator"
+        data-cy="settings"
+        class:active={path.active(path.settings(), $location)}
+        on:click|stopPropagation={() => push(path.settings())}>
+        <Icon.Settings />
+      </div>
+    </Tooltip>
+  </div>
 </div>