Add commit sha to footer. (#636)

* feat: added commit sha to footer.

* added translation

* added padding

* updated styling

package.json

@@ -11,7 +11,7 @@
     "lint:fix": "deno lint --fix src/",
     "format": "deno fmt src/",
     "dev": "deno task dev:ui",
-    "dev:ui": "deno run -A npm:vite dev",
+    "dev:ui": "VITE_APP_VERSION=development deno run -A npm:vite dev",
     "test": "deno run -A npm:vitest",
     "preview": "deno run -A npm:vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ ."

src/components/DeviceInfoPanel.tsx

@@ -2,7 +2,7 @@ import { cn } from "@core/utils/cn.ts";
 import {
   CpuIcon,
   Languages,
-  LucideIcon,
+  type LucideIcon,
   Palette,
   PenLine,
   Search as SearchIcon,
@@ -11,7 +11,7 @@ import {
 import BatteryStatus from "./BatteryStatus.tsx";
 import { Subtle } from "./UI/Typography/Subtle.tsx";
 import { Avatar } from "./UI/Avatar.tsx";
-import { DeviceMetrics } from "./types.ts";
+import type { DeviceMetrics } from "./types.ts";
 import { Button } from "./UI/Button.tsx";
 import React, { Fragment } from "react";
 import { useTranslation } from "react-i18next";
@@ -110,11 +110,10 @@ export const DeviceInfoPanel = ({
   ];
 
   return (
-    <div className="p-1">
+    <>
-      <div className="flex flex-col">
       <div
         className={cn(
-            "flex items-center gap-3 p-1",
+          "flex items-center gap-3 p-1 flex-shrink-0",
           isCollapsed && "justify-center",
         )}
       >
@@ -127,7 +126,7 @@ export const DeviceInfoPanel = ({
           <p
             className={cn(
               "text-sm font-medium text-gray-800 dark:text-gray-200",
-                "transition-opacity duration-300 ease-in-out",
+              "transition-opacity duration-300 ease-in-out truncate",
             )}
           >
             {user.longName}
@@ -136,7 +135,8 @@ export const DeviceInfoPanel = ({
       </div>
 
       {!isCollapsed && (
-          <div className="my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
+        <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0">
+        </div>
       )}
 
       <div
@@ -173,7 +173,8 @@ export const DeviceInfoPanel = ({
       </div>
 
       {!isCollapsed && (
-          <div className="my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
+        <div className="my-2 h-px bg-gray-200 dark:bg-gray-700 flex-shrink-0">
+        </div>
       )}
 
       <div
@@ -232,9 +233,7 @@ export const DeviceInfoPanel = ({
             </Button>
           );
         })}
-          {/* <Code>{import.meta.env.COMMIT_HASH}</Code> */}
-        </div>
-      </div>
       </div>
+    </>
   );
 };

src/components/PageLayout.tsx

@@ -111,7 +111,7 @@ export const PageLayout = ({
         {rightBar && (
           <aside
             className={cn(
-              "w-48 lg:w-[270px] shrink-0 border-l border-slate-300 dark:border-slate-700 px-2 overflow-hidden",
+              "w-56 lg:w-[270px] text-balance shrink-0 border-l border-slate-300 dark:border-slate-700 px-2 overflow-hidden",
               rightBarClassName,
             )}
           >

src/components/Sidebar.tsx

@@ -128,7 +128,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
       className={cn(
         "relative border-slate-300 dark:border-slate-700",
         "transition-all duration-300 ease-in-out flex-shrink-0",
-        isCollapsed ? "w-24" : "w-46 lg:w-64",
+        isCollapsed ? "w-24" : "w-52 lg:w-64",
       )}
     >
       <CollapseToggleButton />
@@ -188,7 +188,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         {children}
       </div>
 
-      <div className="pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 flex-shrink-0">
+      <div className=" pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 h-full flex-1">
         {myNode === undefined
           ? (
             <div className="flex flex-col items-center justify-center py-6">

src/components/UI/Footer.tsx

@@ -1,11 +1,13 @@
 import { cn } from "@core/utils/cn.ts";
-import { Trans } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 type FooterProps = {
   className?: string;
 };
 
 const Footer = ({ className, ...props }: FooterProps) => {
+  const { t } = useTranslation();
+
   return (
     <footer
       className={cn(
@@ -14,7 +16,14 @@ const Footer = ({ className, ...props }: FooterProps) => {
       )}
       {...props}
     >
-      <p>
+      <div className="justify-start px-2">
+        <span className="font-semibold text-gray-500/40 dark:text-gray-400/40">
+          {t("footer.commitSha", {
+            sha: String(import.meta.env.VITE_COMMIT_HASH)?.toUpperCase(),
+          })}
+        </span>
+      </div>
+      <p className="ml-auto mr-auto text-gray-500 dark:text-gray-400">
         <Trans
           i18nKey="footer.text"
           components={[

src/components/UI/Sidebar/SidebarButton.tsx

@@ -52,13 +52,13 @@ export const SidebarButton = ({
 
       <span
         className={cn(
-          "flex flex-wrap justify-start text-left text-wrap break-all",
+          "flex flex-wrap justify-start text-left text-balance break-all",
           "min-w-0",
           "px-1",
           "transition-all duration-300 ease-in-out",
           isButtonCollapsed
             ? "opacity-0 max-w-0 invisible w-0 overflow-hidden"
-            : "opacity-100 max-w-full visible flex-1 whitespace-normal",
+            : "opacity-100 max-w-full visible whitespace-normal",
         )}
       >
         {label}

src/i18n/locales/en/ui.json

@@ -157,6 +157,7 @@
     "changeTheme": "Change Color Scheme"
   },
   "footer": {
-    "text": "Powered by <0>▲ Vercel</0> | Meshtastic® is a registered trademark of Meshtastic LLC. | <1>Legal Information</1>"
+    "text": "Powered by <0>▲ Vercel</0> | Meshtastic® is a registered trademark of Meshtastic LLC. | <1>Legal Information</1>",
+    "commitSha": "Commit SHA: {{sha}}"
   }
 }