client: AboutTab: display Flood version badges

ABOUT.md

@@ -1,8 +1,10 @@
-# Flood
+# Flood <FloodVersion />
+
+[![Latest release badge](https://img.shields.io/npm/v/flood?label=Latest%20Release)](https://www.npmjs.com/flood) <CommitBadge />
 
 [![Github Actions build status badge](https://github.com/jesec/flood/workflows/Build/badge.svg?branch=master&event=push)](https://github.com/jesec/flood/actions) [![Crowdin](https://badges.crowdin.net/flood/localized.svg)](https://crowdin.com/project/flood) [![Discord server badge](https://img.shields.io/discord/418267176873623553.svg?style=flat-square)](https://discord.gg/Z7yR5Uf)
 
-Flood is a monitoring service for [rTorrent](https://github.com/rakshasa/rtorrent). It's a Node.js service that communicates with rTorrent instances and serves a decent web UI for administration. It's a work-in-progress.
+Flood is a monitoring service for [rTorrent](https://github.com/rakshasa/rtorrent). It's a Node.js service that communicates with rTorrent instances and serves a decent web UI for administration.
 
 #### Feedback
 

client/src/javascript/components/modals/settings-modal/AboutTab.tsx

@@ -1,13 +1,35 @@
 import React from 'react';
 
+import {version} from '../../../../../../package.json';
+
 const AboutMarkdown = React.lazy(() =>
   import('../../../../../../ABOUT.md').then((module) => ({default: module.react})),
 );
 
+const FLOOD_PROJECT_URL = 'https://github.com/jesec/flood';
+
 const AboutTab = () => {
   return (
     <React.Suspense fallback={null}>
-      <AboutMarkdown />
+      <AboutMarkdown
+        FloodVersion={() => version}
+        CommitBadge={() =>
+          version.length > 8 ? (
+            // If user is on a rolling build, display latest version of rolling build.
+            <a href={FLOOD_PROJECT_URL}>
+              <img alt="Latest version of rolling build" src="https://img.shields.io/npm/v/@jesec/flood?label=HEAD" />
+            </a>
+          ) : (
+            // If user is on a released build, display commits to project made since user's version.
+            <a href={FLOOD_PROJECT_URL}>
+              <img
+                alt="Commits since user's version"
+                src={`https://img.shields.io/github/commits-since/jesec/flood/v${version}`}
+              />
+            </a>
+          )
+        }
+      />
     </React.Suspense>
   );
 };