feat: add overseerr version and update availability status to sidebar

sort of experimental so may be kinda broken. :)

src/components/Layout/Sidebar/index.tsx

@@ -5,6 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { Permission, useUser } from '../../../hooks/useUser';
 import Transition from '../../Transition';
+import VersionStatus from '../VersionStatus';
 
 const messages = defineMessages({
   dashboard: 'Discover',
@@ -122,6 +123,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
   const intl = useIntl();
   const { hasPermission } = useUser();
   useClickOutside(navRef, () => setClosed());
+
   return (
     <>
       <div className="md:hidden">
@@ -172,7 +174,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   </div>
                   <div
                     ref={navRef}
-                    className="flex-1 h-0 pt-5 pb-4 overflow-y-auto"
+                    className="flex flex-col flex-1 h-0 pt-5 pb-4 overflow-y-auto"
                   >
                     <div className="flex items-center flex-shrink-0 px-4">
                       <span className="text-xl text-gray-50">
@@ -181,7 +183,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                         </a>
                       </span>
                     </div>
-                    <nav className="px-2 mt-5 space-y-1">
+                    <nav className="flex-1 px-2 mt-5 space-y-1">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission)
@@ -221,6 +223,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                         );
                       })}
                     </nav>
+                    {hasPermission(Permission.ADMIN) && <VersionStatus />}
                   </div>
                 </div>
                 <div className="flex-shrink-0 w-14">
@@ -273,6 +276,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                   );
                 })}
               </nav>
+              {hasPermission(Permission.ADMIN) && <VersionStatus />}
             </div>
           </div>
         </div>

src/components/Layout/VersionStatus/index.tsx

@@ -0,0 +1,122 @@
+import Link from 'next/link';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import { StatusResponse } from '../../../../server/interfaces/api/settingsInterfaces';
+
+const messages = defineMessages({
+  streamdevelop: 'Overseerr Develop',
+  streamstable: 'Overseerr Stable',
+  outofdate: 'Out of date',
+  commitsbehind:
+    '{commitsBehind} {commitsBehind, plural, one {commit} other {commits}} behind',
+});
+
+const VersionStatus: React.FC = () => {
+  const intl = useIntl();
+  const { data } = useSWR<StatusResponse>('/api/v1/status', {
+    refreshInterval: 60 * 1000,
+  });
+
+  if (!data) {
+    return null;
+  }
+
+  const versionStream =
+    data.commitTag === 'local'
+      ? 'Keep it up!'
+      : data.version.startsWith('develop-')
+      ? intl.formatMessage(messages.streamdevelop)
+      : intl.formatMessage(messages.streamstable);
+
+  return (
+    <Link href="/settings/about">
+      <a
+        className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
+          data.updateAvailable
+            ? 'bg-green-500 text-white hover:bg-green-400'
+            : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+        }`}
+      >
+        {data.commitTag === 'local' ? (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+            />
+          </svg>
+        ) : data.version.startsWith('develop-') ? (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
+            />
+          </svg>
+        )}
+        <div className="flex flex-col flex-1 min-w-0 px-2 truncate last:pr-0">
+          <span className="font-bold">{versionStream}</span>
+          <span className="truncate">
+            {data.commitTag === 'local'
+              ? '(⌐■_■)'
+              : data.commitsBehind > 0
+              ? intl.formatMessage(messages.commitsbehind, {
+                  commitsBehind: data.commitsBehind,
+                })
+              : data.commitsBehind === -1
+              ? intl.formatMessage(messages.outofdate)
+              : data.version.replace('develop-', '')}
+          </span>
+        </div>
+        {data.updateAvailable && (
+          <svg
+            className="w-6 h-6"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"
+            />
+          </svg>
+        )}
+      </a>
+    </Link>
+  );
+};
+
+export default VersionStatus;