From 065490bd5ba01433843011376041bfa6fd19ea3a Mon Sep 17 00:00:00 2001
From: nukeop <12746779+nukeop@users.noreply.github.com>
Date: Sun, 17 Mar 2024 00:14:12 +0100
Subject: [PATCH] Hover to see version

---
 .env                                          |  3 ++-
 packages/app/app/App.js                       |  7 ++---
 packages/app/app/compact.scss                 |  7 +----
 .../app/app/components/SidebarBrand/index.tsx | 14 ++++++++++
 .../app/components/SidebarBrand/styles.scss   | 11 ++++++++
 packages/app/app/styles.scss                  | 26 +++++++------------
 6 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 packages/app/app/components/SidebarBrand/index.tsx
 create mode 100644 packages/app/app/components/SidebarBrand/styles.scss

diff --git a/.env b/.env
index dc0dadcbc6..85db8964d2 100644
--- a/.env
+++ b/.env
@@ -9,4 +9,5 @@ LAST_FM_API_SECRET=2ee49e35f08b837d43b2824198171fc8
 SOUNDCLOUD_API_KEY=22e8f71d7ca75e156d6b2f0e0a5172b3
 NUCLEAR_SERVICES_URL=https://qjrujsisccsvyvjnqtnq.supabase.co
 NUCLEAR_SERVICES_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFqcnVqc2lzY2Nzdnl2am5xdG5xIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTY1OTY0NjEsImV4cCI6MTk3MjE3MjQ2MX0.WQWcwBAQFNE259f2o8ruFln_UMLTFEn5aUD7KHrs9Aw
-NUCLEAR_VERIFICATION_SERVICE_URL=https://nuclear-verification-service.fly.dev
\ No newline at end of file
+NUCLEAR_VERIFICATION_SERVICE_URL=https://nuclear-verification-service.fly.dev
+NUCLEAR_VERSION="0.6.30"
\ No newline at end of file
diff --git a/packages/app/app/App.js b/packages/app/app/App.js
index b0dc95a25e..6bde3e5f31 100644
--- a/packages/app/app/App.js
+++ b/packages/app/app/App.js
@@ -24,8 +24,6 @@ import './app.global.scss';
 import styles from './styles.scss';
 import compact from './compact.scss';
 
-import logoIcon from '../resources/media/512x512.png';
-
 import Navbar from './components/Navbar';
 import VerticalPanel from './components/VerticalPanel';
 import Spacer from './components/Spacer';
@@ -48,6 +46,7 @@ import WindowControls from './components/WindowControls';
 import SidebarMenuContainer from './containers/SidebarMenuContainer';
 import { CommandPaletteContainer } from './containers/CommandPaletteContainer';
 import { hot } from 'react-hot-loader';
+import SidebarBrand from './components/SidebarBrand';
 
 @withTranslation('app')
 class App extends React.PureComponent {
@@ -132,9 +131,7 @@ class App extends React.PureComponent {
         <div className={styles.app_container}>
           <MiniPlayerContainer />
           <Navbar>
-            <div className={styles.sidebar_brand}>
-              <img src={logoIcon} />
-            </div>
+            <SidebarBrand />
             <NavButtons />
             <SearchBoxContainer />
             <Spacer className={styles.navbar_spacer} />
diff --git a/packages/app/app/compact.scss b/packages/app/app/compact.scss
index b24d1b0838..b792c3981d 100644
--- a/packages/app/app/compact.scss
+++ b/packages/app/app/compact.scss
@@ -1,12 +1,8 @@
-@import './vars';
+@import "./vars";
 
 .compact_panel {
   width: 3rem;
 
-  .sidebar_brand {
-    padding: 1rem 0;
-  }
-
   .sidebar_menu_item_container {
     display: flex;
     justify-content: center;
@@ -21,5 +17,4 @@
   span {
     margin: 0 !important;
   }
-
 }
diff --git a/packages/app/app/components/SidebarBrand/index.tsx b/packages/app/app/components/SidebarBrand/index.tsx
new file mode 100644
index 0000000000..40252a04dd
--- /dev/null
+++ b/packages/app/app/components/SidebarBrand/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './styles.scss';
+
+import logoIcon from '../../../resources/media/512x512.png';
+import { Tooltip } from '@nuclear/ui';
+
+const SidebarBrand = () => <div className={styles.sidebar_brand}>
+  <Tooltip 
+    content={process.env.NUCLEAR_VERSION}trigger={
+      <img src={logoIcon} />
+    } />
+</div>;
+
+export default SidebarBrand;
diff --git a/packages/app/app/components/SidebarBrand/styles.scss b/packages/app/app/components/SidebarBrand/styles.scss
new file mode 100644
index 0000000000..bab3150acb
--- /dev/null
+++ b/packages/app/app/components/SidebarBrand/styles.scss
@@ -0,0 +1,11 @@
+.sidebar_brand {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin-left: 1em;
+
+    img {
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/packages/app/app/styles.scss b/packages/app/app/styles.scss
index 9cf25c6e04..67fa5411fc 100644
--- a/packages/app/app/styles.scss
+++ b/packages/app/app/styles.scss
@@ -1,4 +1,4 @@
-@import 'vars';
+@import "vars";
 
 .app_container {
   position: absolute;
@@ -44,7 +44,8 @@
   height: 50px;
 
   background-color: $background;
-  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    0px 5px 5px 0px rgba(0, 0, 0, 0.18),
     0px 5px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -64,7 +65,8 @@
   width: 300px;
 
   background-color: $background;
-  box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    5px 0px 5px 0px rgba(0, 0, 0, 0.18),
     5px 0px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -85,7 +87,8 @@
   width: 300px;
 
   background-color: $background;
-  box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    -5px 0px 5px 0px rgba(0, 0, 0, 0.18),
     -5px 0px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -101,7 +104,8 @@
   max-width: 100%;
 
   background-color: $background3;
-  box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 0.18),
+  box-shadow:
+    0px -5px 5px 0px rgba(0, 0, 0, 0.18),
     0px -10px 20px 0px rgba(0, 0, 0, 0.09);
 }
 
@@ -141,18 +145,6 @@
   height: 0;
 }
 
-.sidebar_brand {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  margin-left: 1em;
-
-  img {
-    width: 30px;
-    height: 30px;
-  }
-}
-
 .sidebar_footer {
   display: flex;
   flex-flow: row;