refactor: add svgs to sub folder (#687)

packages/web/index.html

@@ -7,7 +7,7 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
 
     <link rel="manifest" href="site.webmanifest" />
-    <link rel="mask-icon" href="Logo_Black.svg" color="#67ea94" />
+    <link rel="mask-icon" href="logo_black.svg" color="#67ea94" />
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <link
       rel="stylesheet"

packages/web/public/logo.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512" height="512" viewBox="0 0 512 512" xml:space="preserve">
+<desc>Created with Fabric.js 4.6.0</desc>
+<defs>
+</defs>
+<g transform="matrix(1 0 0 1 256 256)" id="xYQ9Gk9Jwpgj_HMOXB3F_"  >
+<path style="stroke: rgb(213,130,139); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(103,234,148); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-256, -256)" d="M 0 0 L 512 0 L 512 512 L 0 512 z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1.79 0 0 1.79 313.74 258.36)" id="1xBsk2n9FZp60Rz1O-ceJ"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 2; fill: rgb(44,45,60); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-250.97, -362.41)" d="M 250.908 330.267 L 193.126 415.005 L 180.938 406.694 L 244.802 313.037 C 246.174 311.024 248.453 309.819 250.889 309.816 C 253.326 309.814 255.606 311.015 256.982 313.026 L 320.994 406.536 L 308.821 414.869 L 250.908 330.267 Z" stroke-linecap="round" />
+</g>
+<g transform="matrix(1.81 0 0 1.81 145 256.15)" id="KxN7E9YpbyPgz0S4z4Cl6"  >
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 2; fill: rgb(44,45,60); fill-rule: evenodd; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-115.14, -528.06)" d="M 87.642 581.398 L 154.757 482.977 L 142.638 474.713 L 75.523 573.134 L 87.642 581.398 Z" stroke-linecap="round" />
+</g>
+</svg>

packages/web/public/logo_black.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.802386,0,0,0.460028,-421.748,-122.127)">
+        <g transform="matrix(0.579082,0,0,1.01004,460.975,-39.6867)">
+            <path d="M250.908,330.267L193.126,415.005L180.938,406.694L244.802,313.037C246.174,311.024 248.453,309.819 250.889,309.816C253.326,309.814 255.606,311.015 256.982,313.026L320.994,406.536L308.821,414.869L250.908,330.267Z"/>
+        </g>
+        <g transform="matrix(0.582378,0,0,1.01579,485.019,-211.182)">
+            <path d="M87.642,581.398L154.757,482.977L142.638,474.713L75.523,573.134L87.642,581.398Z"/>
+        </g>
+    </g>
+</svg>

packages/web/public/logo_white.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 100 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.802386,0,0,0.460028,-421.748,-122.127)">
+        <g transform="matrix(0.579082,0,0,1.01004,460.975,-39.6867)">
+            <path d="M250.908,330.267L193.126,415.005L180.938,406.694L244.802,313.037C246.174,311.024 248.453,309.819 250.889,309.816C253.326,309.814 255.606,311.015 256.982,313.026L320.994,406.536L308.821,414.869L250.908,330.267Z" style="fill:white;"/>
+        </g>
+        <g transform="matrix(0.582378,0,0,1.01579,485.019,-211.182)">
+            <path d="M87.642,581.398L154.757,482.977L142.638,474.713L75.523,573.134L87.642,581.398Z" style="fill:white;"/>
+        </g>
+    </g>
+</svg>

packages/web/public/site.webmanifest

@@ -5,7 +5,7 @@
   "description": "Meshtastic Web App",
   "icons": [
     {
-      "src": "/Logo.svg",
+      "src": "/logo.svg",
       "sizes": "any",
       "type": "image/svg+xml"
     }

packages/web/src/components/Sidebar.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useTransition } from "react";
+import type React from "react";
+import { useEffect, useState, useTransition } from "react";
 import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.tsx";
 import { Subtle } from "@components/UI/Typography/Subtle.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
@@ -101,7 +102,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         setDisplayedNodeCount(currentNodeCountValue);
       });
     }
-  }, [currentNodeCountValue, displayedNodeCount, startNodeCountTransition]);
+  }, [currentNodeCountValue, displayedNodeCount]);
 
   const pages: NavLink[] = [
     {
@@ -146,7 +147,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         )}
       >
         <img
-          src="/Logo.svg"
+          src="/logo.svg"
           alt={t("app.logo")}
           className="size-10 flex-shrink-0 rounded-xl"
         />
@@ -163,10 +164,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         </h2>
       </div>
 
-      <SidebarSection
+      <SidebarSection label={t("navigation.title")} className="mt-4 px-0">
-        label={t("navigation.title")}
-        className="mt-4 px-0"
-      >
         {pages.map((link) => {
           return (
             <SidebarButton
@@ -186,12 +184,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         })}
       </SidebarSection>
 
-      <div
+      <div className={cn("flex-1 min-h-0", isCollapsed && "overflow-hidden")}>
-        className={cn(
-          "flex-1 min-h-0",
-          isCollapsed && "overflow-hidden",
-        )}
-      >
         {children}
       </div>
 

packages/web/src/components/generic/DeviceImage.tsx

@@ -47,7 +47,7 @@ const hardwareModelToFilename: { [key: string]: string } = {
 };
 
 export const DeviceImage = ({ deviceType, className }: DeviceImageProps) => {
-  const getPath = (device: string) => `/${device}`;
+  const getPath = (device: string) => `/devices/${device}`;
   const device = hardwareModelToFilename[deviceType] || "unknown.svg";
   return <img className={className} src={getPath(device)} alt={device} />;
 };