Add issue and support links to the popup

Author: thetarnav

extension/src/popup.css

@@ -58,6 +58,7 @@ p[data-detected='true']::before {
 
 .details {
     margin-top: 0.4rem;
+    color:      var(--lighter-dark);
 }
 
 .versions {
@@ -67,6 +68,7 @@ p[data-detected='true']::before {
 ul {
     margin:      0;
     margin-left: 2ch;
+    margin-top:  0.4rem;
     color:       var(--lighter-dark);
     padding:     0;
     list-style:  none;
@@ -75,3 +77,37 @@ li::before {
     content:    '- ';
     margin-left: -2ch;
 }
+
+.external-links {
+    display:        flex;
+    flex-direction: column;
+    gap:            0.4rem;
+}
+.external-links a {
+    margin:        0 -0.4rem;
+    padding:       0.2rem 0.4rem;
+    transition:    background-color 0.2s;
+    display:       flex;
+    align-items:   center;
+    gap:           0.4rem;
+}
+
+.external-links .icon {
+    width:         0.8rem;
+    height:        0.8rem;
+    margin-bottom: 2px;
+}
+.external-links .icon path {
+    stroke-width:  12;
+}
+
+.issue-link:hover {
+    background-color: #fb923c20;
+    color:            #f97316;
+    text-decoration:  none;
+}
+.support-link:hover {
+    background-color: #ec489920;
+    color:            #ec4899;
+    text-decoration:  none;
+}

extension/src/popup.tsx

@@ -82,7 +82,59 @@ const App: s.Component = () => {
             </div>
         )}
         </s.Show>
+        <div class="external-links">
+            <a
+                href="https://github.com/thetarnav/solid-devtools/issues"
+                target="_blank"
+                class="issue-link"
+            >
+                <Icon_Bug />
+                Report an Issue
+            </a>
+            <a
+                href="https://github.com/sponsors/thetarnav"
+                target="_blank"
+                class="support-link"
+            >
+                <Icon_Heart />
+                Support the Project
+            </a>
+        </div>
     </>
 }
 
+function Icon_Heart() {
+    return <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 256 256"
+        fill="none">
+        <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="16"
+            d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"
+        />
+    </svg>
+}
+
+function Icon_Bug() {
+    return <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 256 256"
+        fill="none">
+        <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="16"
+            d="M144,92a12,12,0,1,1,12,12A12,12,0,0,1,144,92ZM100,80a12,12,0,1,0,12,12A12,12,0,0,0,100,80Zm116,64A87.76,87.76,0,0,1,213,167l22.24,9.72A8,8,0,0,1,232,192a7.89,7.89,0,0,1-3.2-.67L207.38,182a88,88,0,0,1-158.76,0L27.2,191.33A7.89,7.89,0,0,1,24,192a8,8,0,0,1-3.2-15.33L43,167A87.76,87.76,0,0,1,40,144v-8H16a8,8,0,0,1,0-16H40v-8a87.76,87.76,0,0,1,3-23L20.8,79.33a8,8,0,1,1,6.4-14.66L48.62,74a88,88,0,0,1,158.76,0l21.42-9.36a8,8,0,0,1,6.4,14.66L213,89.05a87.76,87.76,0,0,1,3,23v8h24a8,8,0,0,1,0,16H216ZM56,120H200v-8a72,72,0,0,0-144,0Zm64,95.54V136H56v8A72.08,72.08,0,0,0,120,215.54ZM200,144v-8H136v79.54A72.08,72.08,0,0,0,200,144Z"
+        />
+    </svg>
+}
+
 render(() => <App />, document.getElementById('root')!)