adam/meshstream
1
0
Fork 0
mirror of https://github.com/dpup/meshstream.git synced 2026-08-08 09:42:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Further work on web design

Browse Source
This commit is contained in:
Daniel Pupius
2025-04-22 17:04:14 -07:00
parent 095ff560b0
commit 648a5c601e
8 changed files with 110 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+4
View File
@@ -6,6 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="ERSN Mesh :: Meshtastic activity in the Ebbett's Pass region of Highway 4, CA." />
<title>ERSN Mesh</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap"
rel="stylesheet">
</head>
<body>
web/package.json
+3 -1
View File
@@ -28,12 +28,14 @@
"@tanstack/react-router": "^1.116.0",
"@tanstack/router-devtools": "^1.116.0",
"@tanstack/router-vite-plugin": "^1.116.1",
"clsx": "^2.1.1",
"leaflet": "^1.9.4",
"lucide-react": "^0.503.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-leaflet": "^5.0.0",
"react-redux": "^9.2.0"
"react-redux": "^9.2.0",
"tailwind-merge": "^3.2.0"
},
"devDependencies": {
"@tailwindcss/vite": "^4.1.4",
web/pnpm-lock.yaml
Generated
+10
View File
@@ -26,6 +26,9 @@ dependencies:
'@tanstack/router-vite-plugin':
specifier: ^1.116.1
version: 1.116.1(@tanstack/react-router@1.116.0)(vite@6.3.2)
clsx:
specifier: ^2.1.1
version: 2.1.1
leaflet:
specifier: ^1.9.4
version: 1.9.4
@@ -44,6 +47,9 @@ dependencies:
react-redux:
specifier: ^9.2.0
version: 9.2.0(@types/react@19.1.2)(react@19.1.0)(redux@5.0.1)
tailwind-merge:
specifier: ^3.2.0
version: 3.2.0
devDependencies:
'@tailwindcss/vite':
@@ -3866,6 +3872,10 @@ packages:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
dev: true
/tailwind-merge@3.2.0:
resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
dev: false
/tailwindcss@4.1.4:
resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
web/src/components/ConnectionStatus.tsx
+8 -5
View File
@@ -1,5 +1,6 @@
import React from "react";
import { WifiOff, Wifi, WifiLow, Activity, AlertCircle } from "lucide-react";
import { cn } from "@/lib/cn";
interface ConnectionStatusProps {
status: string;
@@ -12,19 +13,19 @@ export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
const getStatusInfo = () => {
if (status.includes("error") || status.includes("Error")) {
return {
icon: <AlertCircle className="h-5 w-5 text-red-400" />,
icon: <AlertCircle className="h-5 w-5 text-red-400 animate-pulse " />,
text: "Connection Error",
colorClass: "text-red-400",
};
} else if (status.includes("Reconnecting")) {
return {
icon: <WifiLow className="h-5 w-5 text-amber-400" />,
icon: <WifiLow className="h-5 w-5 text-amber-400 animate-pulse" />,
text: "Reconnecting",
colorClass: "text-amber-400",
};
} else if (status.includes("Connecting")) {
return {
icon: <Activity className="h-5 w-5 text-blue-400" />,
icon: <Activity className="h-5 w-5 text-blue-400 animate-pulse" />,
text: "Connecting",
colorClass: "text-blue-400",
};
@@ -47,9 +48,11 @@ export const ConnectionStatus: React.FC<ConnectionStatusProps> = ({
const { icon, text, colorClass } = getStatusInfo();
return (
<div className="flex items-center space-x-2 bg-neutral-800 p-4 border-1 border-b-neutral-700 border-r-neutral-700 border-t-neutral-950 border-l-neutral-950 rounded-sm">
<div className="flex items-center space-x-2 bg-neutral-800 p-4 border-inset">
{icon}
<span className={`text-sm font-medium ${colorClass}`}>{text}</span>
<span className={cn("text-sm tracking-wide font-thin", colorClass)}>
{text}
</span>
</div>
);
};
web/src/components/Nav.tsx
+42 -14
View File
@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
import { ConnectionStatus } from "./ConnectionStatus";
import { Separator } from "./Separator";
import { SITE_TITLE } from "../lib/config";
import { Info, Layers, LayoutDashboard, Radio } from "lucide-react";
interface NavProps {
connectionStatus: string;
@@ -11,37 +12,64 @@ interface NavProps {
export const Nav: React.FC<NavProps> = ({ connectionStatus }) => {
return (
<aside className="w-64 text-neutral-100 h-screen fixed left-0 top-0 flex flex-col">
{/* Logo section */}
<div className="p-4 mb-2">
<h1 className="text-xl font-bold">{SITE_TITLE}</h1>
{/* Logo and title section */}
<div className="p-4 flex items-center">
<div className="bg-pink-400 rounded-md mr-3 p-1.5 flex items-center justify-center">
<Layers className="h-5 w-5 text-neutral-800" />
</div>
<h1 className="text-xl font-thin tracking-wide">{SITE_TITLE}</h1>
</div>
<Separator />
<Separator className="mt-1" />
<nav className="flex-1 pt-4">
<ul className="space-y-2">
<nav className="flex-1">
<ul className="space-y-1">
<li>
<Link
to="/"
className="block px-4 py-2 hover:bg-neutral-800 transition-colors"
className="flex items-center px-4 py-2.5 transition-colors"
inactiveProps={{
className: "text-neutral-400 hover:text-neutral-200 font-thin",
}}
activeProps={{
className:
"block px-4 py-2 bg-neutral-800 border-l-4 border-neutral-500",
exact: true,
className: "text-neutral-200 font-normal",
}}
>
Home
<LayoutDashboard className="h-4 w-4 mr-3" />
Dashboard
</Link>
</li>
<li>
<Link
to="/packets"
className="block px-4 py-2 hover:bg-neutral-800 transition-colors"
className="flex items-center px-4 py-2.5 transition-colors "
inactiveProps={{
className: "text-neutral-400 hover:text-neutral-200 font-thin",
}}
activeProps={{
className:
"block px-4 py-2 bg-neutral-800 border-l-4 border-neutral-500",
exact: true,
className: "text-neutral-200 font-normal",
}}
>
Packets
<Radio className="h-4 w-4 mr-3" />
Stream
</Link>
</li>
<li>
<Link
to="/info"
className="flex items-center px-4 py-2.5 transition-colors "
inactiveProps={{
className: "text-neutral-400 hover:text-neutral-200 font-thin",
}}
activeProps={{
exact: true,
className: "text-neutral-200 font-normal",
}}
>
<Info className="h-4 w-4 mr-3" />
Information
</Link>
</li>
</ul>
web/src/lib/cn.ts
+6
View File
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
web/src/styles/index.css
+19 -1
View File
@@ -4,10 +4,28 @@
@tailwind components;
@tailwind utilities;
/* Set default background and text colors */
/* Set default background and text colors and font family */
@layer base {
html, body {
@apply bg-neutral-800;
@apply text-neutral-200;
@apply font-sans;
}
/* Apply the custom fonts to headings for better visibility */
h1, h2, h3, h4, h5, h6 {
@apply font-sans;
@apply font-medium;
}
}
@layer utilities {
.border-inset {
@apply border-1;
@apply border-b-neutral-700;
@apply border-r-neutral-700;
@apply border-t-neutral-950;
@apply border-l-neutral-950;
@apply rounded-sm;
}
}
web/tailwind.config.js
+18 -2
View File
@@ -4,8 +4,24 @@ const colors = require("tailwindcss/colors");
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: { colors: { ...colors } },
extend: {
colors: { ...colors },
fontFamily: {
sans: [
'"Helvetica Neue"',
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'Arial',
'sans-serif',
],
}
},
},
darkMode: "class",
plugins: [],
};
};