Update HotkeysModal

src/components/IconSmall.svelte

@@ -18,6 +18,7 @@
     | "collapse"
     | "commit"
     | "cross"
+    | "cursor"
     | "delegate"
     | "device"
     | "diff"
@@ -189,6 +190,11 @@
       d="M3.163 3.163a.556.556 0 01.785 0L8 7.214l4.052-4.051a.556.556 0 01.785.785L8.786 8l4.051 4.052a.556.556 0 01-.785.785L8 8.786l-4.052 4.051a.556.556 0 01-.785-.785L7.214 8 3.163 3.948a.556.556 0 010-.785z"
       clip-rule="evenodd">
     </path>
+  {:else if name === "cursor"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.62672 2.32908C5.22095 2.00257 5.94947 2.15788 6.60157 2.60621C6.61264 2.61382 6.62339 2.62186 6.6338 2.63034L12.6308 7.50811C13.4117 8.14331 13.0756 9.40302 12.082 9.56471L10.5513 9.8138L11.7818 12.1598C12.0808 12.7299 11.8615 13.4344 11.2919 13.7341C11.2915 13.7344 11.291 13.7346 11.2905 13.7349L10.3375 14.2411L10.3352 14.2424C9.76458 14.5417 9.05939 14.3217 8.7601 13.7511L7.53168 11.4091L6.48794 12.5074C5.79339 13.2383 4.56132 12.8035 4.47941 11.7986L3.85193 4.09987C3.85193 4.09991 3.85192 4.09982 3.85193 4.09987C3.79086 3.35282 4.02701 2.6586 4.62672 2.32908ZM5.10827 3.2055C4.98313 3.27426 4.8056 3.49265 4.8486 4.01834L5.47611 11.7173C5.48781 11.8609 5.66382 11.923 5.76304 11.8186L7.28772 10.2141C7.39881 10.0972 7.55945 10.0411 7.71916 10.0633C7.87888 10.0856 8.01806 10.1835 8.09296 10.3263L9.64568 13.2866C9.68829 13.3679 9.78851 13.3993 9.86988 13.3572C9.8696 13.3574 9.87015 13.3571 9.86988 13.3572L10.8237 12.8505L10.826 12.8493C10.9075 12.8065 10.939 12.7058 10.8962 12.6243L9.34349 9.66396C9.26883 9.52163 9.26715 9.35209 9.33896 9.2083C9.41078 9.06452 9.54733 8.96402 9.70597 8.9382L11.9214 8.57769C12.0633 8.55459 12.1114 8.37463 11.9998 8.28389L6.01914 3.41941C5.5398 3.09522 5.2375 3.13449 5.10827 3.2055Z" />
   {:else if name === "device"}
     <path
       fill-rule="evenodd"

src/modals/HotkeysModal.svelte

@@ -1,31 +1,28 @@
 <script lang="ts">
-  import Modal from "@app/components/Modal.svelte";
   import Icon from "@app/components/Icon.svelte";
+  import IconSmall from "@app/components/IconSmall.svelte";
   import KeyHint from "@app/components/KeyHint.svelte";
+  import Modal from "@app/components/Modal.svelte";
 </script>
 
 <style>
   .hotkeys {
-    gap: 3rem;
     justify-content: center;
+    gap: 1rem;
     display: flex;
-    font-size: var(--font-size-small);
-  }
-
-  .description {
-    text-align: left;
+    flex-direction: column;
+    font-size: var(--font-size-regular);
   }
 
   .pair {
     display: flex;
-    width: 8rem;
+    width: 24rem;
     justify-content: space-between;
   }
-
-  .group {
+  .keys {
     display: flex;
-    gap: 1rem;
-    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
   }
 </style>
 
@@ -34,29 +31,30 @@
 
   <div slot="body">
     <div class="hotkeys">
-      <div class="group">
-        <div class="pair">
-          <div class="description">Shortcuts</div>
-          <KeyHint>?</KeyHint>
-        </div>
-
-        {#if import.meta.env.DEV}
-          <div class="pair">
-            <div class="description">Color palette</div>
-            <KeyHint>d</KeyHint>
-          </div>
-        {/if}
+      <div class="pair">
+        <span>Submit</span>
+        <KeyHint>⏎</KeyHint>
       </div>
 
-      <div class="group">
-        <div class="pair">
-          <div class="description">Submit</div>
+      <div class="pair">
+        <span>Post comment</span>
+        <div class="keys">
+          <KeyHint>⌘</KeyHint> +
           <KeyHint>⏎</KeyHint>
         </div>
+      </div>
 
-        <div class="pair">
-          <div class="description">Close</div>
-          <KeyHint>esc</KeyHint>
+      <div class="pair">
+        <span>Close</span>
+        <KeyHint>ESC</KeyHint>
+      </div>
+
+      <div class="pair">
+        <span>Select multiple lines</span>
+        <div class="keys">
+          <KeyHint>Shift</KeyHint>
+          +
+          <IconSmall name="cursor" />
         </div>
       </div>
     </div>