fix: make sure all the labels are visible

package.json

@@ -28,43 +28,43 @@
     "test": "find ./ -type f -name '*.spec.ts' -not -path './node_modules/*' -print | xargs npx tsx --no-warnings --test"
   },
   "dependencies": {
-    "@aws-amplify/core": "6.4.2",
-    "@aws-sdk/credential-provider-cognito-identity": "3.658.1",
-    "@aws/amazon-location-utilities-auth-helper": "1.0.7",
-    "@bifravst/rsrp-bar": "8.0.4",
-    "@hello.nrfcloud.com/proto-map": "16.1.9",
-    "@sentry/react": "8.33.1",
+    "@aws-amplify/core": "6.8.0",
+    "@aws-sdk/credential-provider-cognito-identity": "3.716.0",
+    "@aws/amazon-location-utilities-auth-helper": "1.2.1",
+    "@bifravst/rsrp-bar": "8.0.5",
+    "@hello.nrfcloud.com/proto-map": "16.1.33",
+    "@sentry/react": "8.47.0",
     "@sentry/tracing": "7.114.0",
     "compare-versions": "6.1.1",
     "date-fns": "4.1.0",
-    "e118-iin-list": "4.1.4",
+    "e118-iin-list": "4.3.1",
     "lodash-es": "4.17.21",
-    "lucide-preact": "0.446.0",
+    "lucide-preact": "0.469.0",
     "maplibre-gl": "4.7.1",
-    "preact": "10.24.1",
+    "preact": "10.25.3",
     "preact-router": "4.1.2",
     "styled-components": "6.1.13",
     "svg-country-flags": "1.2.10"
   },
   "devDependencies": {
-    "@bifravst/eslint-config-typescript": "6.1.16",
-    "@bifravst/prettier-config": "1.1.1",
-    "@commitlint/config-conventional": "19.5.0",
+    "@bifravst/eslint-config-typescript": "6.1.19",
+    "@bifravst/prettier-config": "1.1.4",
+    "@commitlint/config-conventional": "19.6.0",
     "@nordicsemiconductor/from-env": "3.0.1",
-    "@preact/preset-vite": "2.9.1",
-    "@swc/core": "1.7.26",
+    "@preact/preset-vite": "2.9.3",
+    "@swc/core": "1.10.1",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "22.7.3",
+    "@types/node": "22.10.2",
     "@types/semver": "7.5.8",
     "bootstrap": "5.3.3",
-    "chalk": "5.3.0",
+    "chalk": "5.4.1",
     "handlebars": "4.7.8",
-    "husky": "9.1.6",
+    "husky": "9.1.7",
     "id128": "1.6.6",
-    "lint-staged": "15.2.10",
+    "lint-staged": "15.2.11",
     "prettier-plugin-organize-imports": "4.1.0",
-    "tsx": "4.19.1",
-    "vite": "5.4.8"
+    "tsx": "4.19.2",
+    "vite": "6.0.5"
   },
   "engines": {
     "node": ">=20",

src/DeviceList.tsx

@@ -1,18 +1,18 @@
 import { styled } from 'styled-components'
-import { DisconnectedWarning } from './DisconnectedWarning.js'
-import { HistoryOnly } from './HistoryOnly.js'
-import { Tracker } from './Tracker.js'
 import {
 	isNRPlusGateway,
 	isTracker,
 	isWirepasGateway,
 	type GeoLocation,
 } from './context/Devices.js'
-import { NRPlusGatewayTile } from './NRPlusGatewayTile.js'
-import { WirepasGatewayTile } from './wirepas/WirepasGatewayTile.js'
-import { useVisibleDevices } from './context/VisibleDevices.js'
 import { useMap } from './context/Map.js'
+import { useVisibleDevices } from './context/VisibleDevices.js'
+import { DisconnectedWarning } from './DisconnectedWarning.js'
+import { HistoryOnly } from './HistoryOnly.js'
 import { showDetails } from './hooks/useDetails.js'
+import { NRPlusGatewayTile } from './NRPlusGatewayTile.js'
+import { Tracker } from './Tracker.js'
+import { WirepasGatewayTile } from './wirepas/WirepasGatewayTile.js'
 
 const DeviceState = styled.section`
 	color: var(--color-nordic-light-grey);
@@ -92,7 +92,7 @@ export const LastUpdate = styled.abbr`
 	}
 `
 
-export const Title = styled.button`
+export const Title = styled.div`
 	display: flex;
 	width: 100%;
 	align-items: center;

src/GitHubButton.tsx

@@ -1,5 +1,5 @@
 import { Github } from 'lucide-preact'
-import pjson from '../package.json'
+import pjson from '../package.json' with { type: 'json' }
 
 export const GitHubButton = () => (
 	<a class="btn btn-link" href={pjson.homepage} target="_blank">

src/HistoryOnly.tsx

@@ -10,7 +10,7 @@ export const HistoryOnly = ({
 	device: Device
 	onClick: () => void
 }) => (
-	<Title type={'button'} onClick={onClick}>
+	<Title onClick={onClick}>
 		<LineChart class={'mx-1'} />
 		<span class="info">
 			<DeviceName device={device} />

src/NRPlusGatewayTile.tsx

@@ -1,12 +1,3 @@
-import {
-	useDevices,
-	type NRPlusGateway,
-	type NRPlusNode,
-	type GeoLocation,
-} from './context/Devices.js'
-import { DeviceName } from './DeviceName.js'
-import { LastUpdate, Properties, Title } from './DeviceList.js'
-import { NRPlus } from './icons/NRPlus.js'
 import {
 	Focus,
 	Hexagon,
@@ -20,18 +11,27 @@ import {
 	UploadCloud,
 	X,
 } from 'lucide-preact'
-import { RelativeTime } from './RelativeTime.js'
-import { ShowWhenHot } from './ShowWhenHot.js'
 import { useState } from 'preact/hooks'
-import { useWebsocket } from './context/WebsocketConnection.js'
-import { sortLocations } from './sortLocations.js'
-import { removeOldLocation } from './removeOldLocation.js'
-import { NRPlusTopology } from './nrplus/NRPlusTopology.js'
-import { PinTile } from './PinTile.js'
+import { withCancel } from './cancelEvent.js'
 import { ConfigureCode } from './ConfigureCode.js'
+import {
+	useDevices,
+	type GeoLocation,
+	type NRPlusGateway,
+	type NRPlusNode,
+} from './context/Devices.js'
 import { useSettings } from './context/Settings.js'
-import { withCancel } from './cancelEvent.js'
+import { useWebsocket } from './context/WebsocketConnection.js'
+import { LastUpdate, Properties, Title } from './DeviceList.js'
+import { DeviceName } from './DeviceName.js'
 import { hideDetails } from './hooks/useDetails.js'
+import { NRPlus } from './icons/NRPlus.js'
+import { NRPlusTopology } from './nrplus/NRPlusTopology.js'
+import { PinTile } from './PinTile.js'
+import { RelativeTime } from './RelativeTime.js'
+import { removeOldLocation } from './removeOldLocation.js'
+import { ShowWhenHot } from './ShowWhenHot.js'
+import { sortLocations } from './sortLocations.js'
 
 export const NRPlusGatewayTile = ({
 	gateway,
@@ -56,7 +56,6 @@ export const NRPlusGatewayTile = ({
 	return (
 		<>
 			<Title
-				type={'button'}
 				onClick={withCancel(() => {
 					if (deviceLocation !== undefined) {
 						onCenter(deviceLocation)
@@ -188,7 +187,7 @@ const Node = ({
 				)}
 				{configure && (
 					<span class="p-1">
-						<button type="button me-1" onClick={() => setConfigure(false)}>
+						<button type="button" onClick={() => setConfigure(false)}>
 							<X strokeWidth={1} />
 						</button>
 						<label title={'Use relay'} class="mx-1">
@@ -213,7 +212,7 @@ const Node = ({
 						].map(({ color, name }) => (
 							<>
 								<button
-									type="button me-1"
+									type="button"
 									style={{ color }}
 									onClick={() => {
 										const nrplusCtrl = viaRelay(relay[id] ?? false)(
@@ -230,7 +229,7 @@ const Node = ({
 									<Lightbulb strokeWidth={2} />
 								</button>
 								<button
-									type="button me-1"
+									type="button"
 									style={{ color }}
 									onClick={() => {
 										const nrplusCtrl = viaRelay(relay[id] ?? false)(

src/SignalQuality.tsx

@@ -6,18 +6,14 @@ import {
 	SignalMedium,
 	SignalZero,
 	Slash,
+	type LucideIcon,
 } from 'lucide-preact'
-import type { JSX } from 'preact'
 import { styled } from 'styled-components'
 import { EnergyEstimate, type Device } from './context/Devices.js'
 import { LTEm } from './icons/LTE-m.js'
 import { NBIot } from './icons/NBIot.js'
-import type { LucideProps } from './icons/lucide.js'
 
-const EnergyEstimateIcons: Record<
-	EnergyEstimate,
-	(props: LucideProps) => JSX.Element | null
-> = {
+const EnergyEstimateIcons: Record<EnergyEstimate, LucideIcon> = {
 	[EnergyEstimate.Bad]: SignalZero,
 	[EnergyEstimate.Poor]: SignalLow,
 	[EnergyEstimate.Normal]: SignalMedium,

src/Tracker.tsx

@@ -12,7 +12,9 @@ import {
 } from './DeviceList.js'
 import { DeviceName } from './DeviceName.js'
 import { EnvironmentInfo } from './EnvironmentInfo.js'
+import { FuelGauge } from './FuelGauge.js'
 import { LocationInfo } from './LocationInfo.js'
+import { PinTile } from './PinTile.js'
 import { RelativeTime } from './RelativeTime.js'
 import { SignalQuality } from './SignalQuality.js'
 import { UpdateWarning } from './UpdateWarning.js'
@@ -24,17 +26,15 @@ import {
 	type GeoLocation,
 } from './context/Devices.js'
 import { useSettings } from './context/Settings.js'
+import { showDetails } from './hooks/useDetails.js'
 import { DKIcon } from './icons/DKIcon.js'
 import { SIMIcon } from './icons/SIMIcon.js'
 import { SoftSIMIcon } from './icons/SoftSIMIcon.js'
 import { ThingyIcon } from './icons/ThingyIcon.js'
 import { ThingyXIcon } from './icons/ThingyXIcon.js'
-import { sortLocations } from './sortLocations.js'
-import { FuelGauge } from './FuelGauge.js'
-import { removeOldLocation } from './removeOldLocation.js'
-import { PinTile } from './PinTile.js'
-import { showDetails } from './hooks/useDetails.js'
 import { Reboots } from './memfault/Reboots.js'
+import { removeOldLocation } from './removeOldLocation.js'
+import { sortLocations } from './sortLocations.js'
 
 const StyledSIMIcon = styled(SIMIcon)`
 	width: 20px;
@@ -71,16 +71,15 @@ export const Tracker = ({
 	const lastUpdateTime = lastUpdateTs(device.id) as number
 
 	const BoardIcon =
-		brdV?.includes('nrf9160dk') ?? false
+		(brdV?.includes('nrf9160dk') ?? false)
 			? DKIcon
-			: brdV?.includes('thingy91x') ?? false
+			: (brdV?.includes('thingy91x') ?? false)
 				? ThingyXIcon
 				: ThingyIcon
 
 	return (
 		<>
 			<Title
-				type={'button'}
 				onClick={() => {
 					if (deviceLocation !== undefined) {
 						onCenter(deviceLocation)

src/chart/DeviceHistory.tsx

@@ -1,15 +1,13 @@
 import { format, subSeconds } from 'date-fns'
-import { Battery, Thermometer, X, Zap } from 'lucide-preact'
+import { Battery, Thermometer, X, Zap, type LucideIcon } from 'lucide-preact'
+import type { Ref } from 'preact'
 import { useRef } from 'preact/hooks'
 import { styled } from 'styled-components'
 import { colors } from '../colors.js'
 import { useDevices, type Reading } from '../context/Devices.js'
+import { hideDetails, useDetails } from '../hooks/useDetails.js'
 import { HistoryChart } from './HistoryChart.js'
 import type { Dataset } from './chartMath.js'
-import type { LucideProps } from '../icons/lucide.js'
-import type { Ref } from 'preact'
-import { useDetails, hideDetails } from '../hooks/useDetails.js'
-import type { JSX } from 'preact'
 
 const chartBaseWidth = 0.6 // percent of window width
 const chartBaseHeight = 0.5 // percent of window width
@@ -40,7 +38,7 @@ export const ChartContainer = styled.aside`
 type ChartInfo = {
 	datasets: Dataset[]
 	title: string
-	Icon: (props: LucideProps) => JSX.Element | null
+	Icon: LucideIcon
 	color: string
 }
 
@@ -115,7 +113,7 @@ export const DeviceHistory = () => {
 	if (history?.fgI !== undefined) {
 		fgData.push({
 			min: -450, //-500,
-			max: 100, //1000,
+			max: 150, //1000,
 			values: history.fgI.map(([v, d]) => [v, subSeconds(history.base, d)]),
 			color: colors['nordic-sun'],
 			format: (v) => `${Math.round(v)} mA`,