feat: Add "Open Guide" buttons to <search-results>

Upon clicking, this button emits a `guide-open` event with the guide ID
as the argument.

Author: pastelmind

css/search-results.css

@@ -36,6 +36,21 @@
   padding: 0 0.5em;
 }
 
+.search-result-item__open-button {
+  align-self: flex-start;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+  margin-left: auto; /* Push the button to the right end */
+}
+
+.search-result-item__open-button:hover {
+  background-color: #fff;
+  border-color: black;
+}
+
 .search-result-item__tier--type-iron {
   background-color: var(--tier-bgcolor-iron);
   color: var(--tier-text-color-iron);

index.html

@@ -159,6 +159,13 @@ <h2 class="page-guide__title">{{guide.title}}</h2>
                 >
                   {{ item.tier }}
                 </div>
+                <button
+                  class="search-result-item__open-button"
+                  title="View guide"
+                  @click="$emit('guide-open', item.id)"
+                >
+                  <i class="fas fa-arrow-right"></i>
+                </button>
               </div>
               <div class="search-result-item__stats">
                 <div class="search-result-item__stats-entry">