client/web: add debug card to details page

Add a new "Debug" card at the bottom of the details page. It's maybe
premature to add a separate card for this, since all it currently lists
is whether the device is using TUN mode and (for Synology) the DSM
version. But I think it may be helpful to add client connectivity data
(like shown on admin console machine page) as well as a bug report
button.  Those can come soon after the 1.56 launch.

Updates #10261

Signed-off-by: Will Norris <will@tailscale.com>

client/web/src/components/views/device-details-view.tsx

@@ -151,6 +151,23 @@ export default function DeviceDetailsView({
             </tbody>
           </table>
         </Card>
+        <Card noPadding className="-mx-5 p-5 details-card">
+          <h2 className="mb-2">Debug</h2>
+          <table>
+            <tbody>
+              <tr>
+                <td>TUN Mode</td>
+                <td>{node.TUNMode ? "Yes" : "No"}</td>
+              </tr>
+              {node.IsSynology && (
+                <tr>
+                  <td>Synology Version</td>
+                  <td>{node.DSMVersion}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </Card>
         <footer className="text-gray-500 text-sm leading-tight text-center">
           <Control.AdminContainer node={node}>
             Want even more details? Visit{" "}