mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-04-19 13:27:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into fix/improve-styling-of-chat

Browse Source
This commit is contained in:
Dan Ditomaso
2025-02-07 10:25:15 -05:00
committed by GitHub
parent 1c7b466e64 d53acf204c
commit d552dcd137
8 changed files with 60 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -6,6 +6,7 @@
"license": "GPL-3.0-only",
"scripts": {
"build": "pnpm check && rsbuild build",
"build:analyze": "BUNDLE_ANALYZE=true rsbuild build",
"check": "biome check src/",
"check:fix": "pnpm check --write src/",
"format": "biome format --write src/",
@@ -17,6 +18,9 @@
"simple-git-hooks": {
"pre-commit": "npm run check:fix && npm run format"
},
"lint-staged": {
"*.{ts,tsx}": ["npm run check:fix", "npm run format"]
},
"repository": {
"type": "git",
"url": "git+https://github.com/meshtastic/web.git"

2
src/components/PageComponents/Config/Device.tsx
View File

@@ -46,7 +46,7 @@ export const Device = (): JSX.Element => {
"Lost and Found":
Protobuf.Config.Config_DeviceConfig_Role.LOST_AND_FOUND,
"TAK Tracker":
Protobuf.Config.Config_DeviceConfig_Role.SENSOR,
Protobuf.Config.Config_DeviceConfig_Role.TAK_TRACKER,
},
formatEnumName: true,
},

2
src/components/PageComponents/Messages/ChannelChat.tsx
View File

@@ -80,7 +80,7 @@ export const ChannelChat = ({
</div>
</div>
<div className="flex-shrink-0 mt-2 p-4 w-full bg-gray-900">
<MessageInput to={to} channel={channel} />
<MessageInput to={to} channel={channel} maxBytes={200} />
</div>
</div>
);

14
src/components/PageComponents/Messages/MessageInput.tsx
View File

@@ -9,11 +9,13 @@ import { type JSX, useCallback, useMemo, useState } from "react";
export interface MessageInputProps {
to: Types.Destination;
channel: Types.ChannelNumber;
maxBytes: number;
}
export const MessageInput = ({
to,
channel,
maxBytes,
}: MessageInputProps): JSX.Element => {
const {
connection,
@@ -24,6 +26,7 @@ export const MessageInput = ({
} = useDevice();
const myNodeNum = hardware.myNodeNum;
const [localDraft, setLocalDraft] = useState(messageDraft);
const [messageBytes, setMessageBytes] = useState(maxBytes);
const debouncedSetMessageDraft = useMemo(
() => debounce(setMessageDraft, 300),
@@ -60,8 +63,12 @@ export const MessageInput = ({
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
setLocalDraft(newValue);
debouncedSetMessageDraft(newValue);
const byteLength = new Blob([newValue]).size;
if (byteLength <= maxBytes) {
setLocalDraft(newValue);
debouncedSetMessageDraft(newValue);
setMessageBytes(maxBytes - byteLength);
}
};
return (
@@ -85,6 +92,9 @@ export const MessageInput = ({
onChange={handleInputChange}
/>
</span>
<div className="flex items-center">
{messageBytes}/{maxBytes}
</div>
<Button type="submit">
<SendIcon size={16} />
</Button>

2
src/components/PageLayout.tsx
View File

@@ -35,7 +35,7 @@ export const PageLayout = ({
<div className="flex justify-end space-x-4">
{actions?.map((action, index) => (
<button
key={action.icon.name}
key={action.icon.displayName}
type="button"
className="transition-all hover:text-accent"
onClick={action.onClick}

13
src/pages/Dashboard/index.tsx
View File

@@ -15,8 +15,9 @@ import {
import { useMemo } from "react";
export const Dashboard = () => {
const { setConnectDialogOpen } = useAppStore();
const { setConnectDialogOpen, setSelectedDevice } = useAppStore();
const { getDevices } = useDeviceStore();
const { darkMode } = useAppStore();
const devices = useMemo(() => getDevices(), [getDevices]);
@@ -38,7 +39,13 @@ export const Dashboard = () => {
{devices.map((device) => {
return (
<li key={device.id}>
<div className="px-4 py-4 sm:px-6">
<button
type="button"
className={`w-full px-4 py-4 sm:px-6 ${darkMode ? "hover:bg-slate-800 focus:bg-slate-400 active:bg-slate-600" : "hover:bg-slate-50 focus:bg-slate-50 active:bg-slate-100"}`}
onClick={() => {
setSelectedDevice(device.id);
}}
>
<div className="flex items-center justify-between">
<p className="truncate text-sm font-medium text-accent">
{device.nodes.get(device.hardware.myNodeNum)?.user
@@ -75,7 +82,7 @@ export const Dashboard = () => {
{device.nodes.size === 0 ? 0 : device.nodes.size - 1}
</div>
</div>
</div>
</button>
</li>
);
})}

18
src/pages/Messages.tsx
View File

@@ -20,9 +20,12 @@ const MessagesPage = () => {
const [activeChat, setActiveChat] = useState<number>(
Types.ChannelNumber.Primary,
);
const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum,
);
const [searchTerm, setSearchTerm] = useState<string>("");
const filteredNodes = Array.from(nodes.values()).filter((node) => {
if (node.num === hardware.myNodeNum) return false;
const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
});
const allChannels = Array.from(channels.values());
const filteredChannels = allChannels.filter(
(ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
@@ -56,6 +59,15 @@ const MessagesPage = () => {
))}
</SidebarSection>
<SidebarSection label="Nodes">
<div className="p-4">
<input
type="text"
placeholder="Search nodes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full p-2 border border-gray-300 rounded bg-white text-black"
/>
</div>
<div className="flex flex-col gap-4">
{filteredNodes.map((node) => (
<SidebarButton

19
src/pages/Nodes.tsx
View File

@@ -9,6 +9,7 @@ import { useDevice } from "@core/stores/deviceStore.ts";
import { Protobuf } from "@meshtastic/js";
import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
import { LockIcon, LockOpenIcon, TrashIcon } from "lucide-react";
import { useState } from "react";
import { Fragment, type JSX } from "react";
import { base16 } from "rfc4648";
@@ -20,15 +21,27 @@ export interface DeleteNoteDialogProps {
const NodesPage = (): JSX.Element => {
const { nodes, hardware, setDialogOpen } = useDevice();
const { setNodeNumToBeRemoved } = useAppStore();
const [searchTerm, setSearchTerm] = useState<string>("");
const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum,
);
const filteredNodes = Array.from(nodes.values()).filter((node) => {
if (node.num === hardware.myNodeNum) return false;
const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
});
return (
<>
<Sidebar />
<div className="flex flex-col w-full">
<div className="p-4">
<input
type="text"
placeholder="Search nodes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full p-2 border border-gray-300 rounded bg-white text-black"
/>
</div>
<div className="overflow-y-auto h-full">
<Table
headings={[