From 2536d9cc10a4ebf859167a5b56e0728a33623ccb Mon Sep 17 00:00:00 2001
From: Dan Ditomaso <dan.ditomaso@gmail.com>
Date: Mon, 28 Apr 2025 15:48:10 -0400
Subject: [PATCH] fixed several styling issues

---
 .../PageComponents/Messages/ChannelChat.tsx   | 25 ++++++++++---------
 src/components/PageLayout.tsx                 |  4 +--
 src/components/Sidebar.tsx                    |  8 +++---
 src/components/UI/Sidebar/SidebarSection.tsx  |  2 +-
 src/pages/Messages.tsx                        | 12 ++++++---
 src/pages/Nodes.tsx                           | 13 ----------
 6 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/src/components/PageComponents/Messages/ChannelChat.tsx b/src/components/PageComponents/Messages/ChannelChat.tsx
index 97f2973a..78f0b42b 100644
--- a/src/components/PageComponents/Messages/ChannelChat.tsx
+++ b/src/components/PageComponents/Messages/ChannelChat.tsx
@@ -9,7 +9,7 @@ export interface ChannelChatProps {
 
 const EmptyState = () => (
   <div className="flex flex-1 flex-col place-content-center place-items-center p-8 text-gray-500 dark:text-gray-400">
-    <InboxIcon className="h-8 w-8 mb-2" />
+    <InboxIcon className="mb-2 h-8 w-8" />
     <span className="text-sm">No Messages</span>
   </div>
 );
@@ -24,10 +24,7 @@ export const ChannelChat = ({
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
 
-    const isNearBottom =
-      scrollContainer.scrollHeight -
-      scrollContainer.scrollTop -
-      scrollContainer.clientHeight < 100; // Threshold in pixels
+    const isNearBottom = scrollContainer.scrollTop < 100;
 
     if (isNearBottom || behavior === 'instant') {
       messagesEndRef.current?.scrollIntoView({ behavior });
@@ -35,17 +32,21 @@ export const ChannelChat = ({
   }, []);
 
   useEffect(() => {
-    scrollToBottom('smooth');
+    if (messages.length > 0) {
+      scrollToBottom('smooth');
+    }
   }, [messages, scrollToBottom]);
 
   useEffect(() => {
-    scrollToBottom('instant');
-  }, [scrollToBottom]);
+    if (messages.length > 0) {
+      scrollToBottom('instant');
+    }
+  }, [scrollToBottom, messages.length]);
+
 
   if (!messages?.length) {
     return (
-      <ul ref={scrollContainerRef} className="flex-1 flex flex-col items-center justify-center">
-
+      <ul ref={scrollContainerRef} className="flex flex-1 flex-col items-center justify-center">
         <EmptyState />
       </ul>
     );
@@ -54,8 +55,9 @@ export const ChannelChat = ({
   return (
     <ul
       ref={scrollContainerRef}
-      className="flex-1 overflow-y-auto px-3 py-2"
+      className="flex flex-1 flex-col-reverse overflow-y-auto px-3 py-2"
     >
+      <div ref={messagesEndRef} className="h-px" />
       {messages?.map((message) => {
         return (
           <MessageItem
@@ -64,7 +66,6 @@ export const ChannelChat = ({
           />
         );
       })}
-      <div ref={messagesEndRef} className="h-px" />
     </ul>
   );
 };
\ No newline at end of file
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
index 5217d6d4..71686f56 100644
--- a/src/components/PageLayout.tsx
+++ b/src/components/PageLayout.tsx
@@ -48,7 +48,7 @@ export const PageLayout = ({
         {leftBar && (
           <aside
             className={cn(
-              "p-2 shrink-0 border-r-[0.5px] border-slate-300 dark:border-slate-700",
+              "p-2 shrink-0 border-r-[0.5px] border-slate-300 dark:border-slate-700 ",
               leftBarClassName
             )}
           >
@@ -112,7 +112,7 @@ export const PageLayout = ({
         {rightBar && (
           <aside
             className={cn(
-              "w-[281px] shrink-0 border-l border-slate-300 dark:border-slate-700 p-2",
+              "w-[281px] shrink-0 border-l border-slate-300 dark:border-slate-700 p-2 overflow-hidden",
               rightBarClassName
             )}
           >
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 26b378bd..6464f041 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -47,7 +47,7 @@ const CollapseToggleButton = () => {
       onClick={toggleSidebar}
       className={cn(
         'absolute top-21 -right-2 z-10 p-0.5 rounded-full transform translate-x-1/2',
-        'bg-background-primary border border-slate-300 dark:border-slate-700',
+        'border border-slate-300 dark:border-slate-700',
         'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100',
         'focus:outline-none focus:ring-2 focus:ring-accent transition-transform'
       )}
@@ -92,7 +92,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
   return (
     <div
       className={cn(
-        'relative bg-background-primary border-slate-300 dark:border-slate-700',
+        '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'
       )}
@@ -151,7 +151,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
         {children}
       </div>
 
-      <div className="border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 p-2 flex-shrink-0">
+      <div className="pt-4 border-t-[0.5px] bg-background-primary border-slate-300 dark:border-slate-700 p-2 flex-shrink-0">
         {myNode === undefined ? (
           <div className="flex flex-col items-center justify-center py-6">
             <Spinner />
@@ -221,7 +221,7 @@ export const Sidebar = ({ children }: SidebarProps) => {
             </div>
             <div
               className={cn(
-                'flex items-center flex-shrink-0 ml-14',
+                'flex items-center flex-shrink-0 ml-2',
                 'transition-all duration-300 ease-in-out',
                 isCollapsed
                   ? 'opacity-0 max-w-0 invisible pointer-events-none'
diff --git a/src/components/UI/Sidebar/SidebarSection.tsx b/src/components/UI/Sidebar/SidebarSection.tsx
index cf284f0a..77bdef1c 100644
--- a/src/components/UI/Sidebar/SidebarSection.tsx
+++ b/src/components/UI/Sidebar/SidebarSection.tsx
@@ -34,7 +34,7 @@ export const SidebarSection = ({
         {label}
       </Heading>
 
-      <div className="space-y-1 h-full">
+      <div className="space-y-0.5">
         {children}
       </div>
     </div>
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index b449dc92..5e78f231 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -54,6 +54,11 @@ export const MessagesPage = () => {
 
   const currentChat = { type: chatType, id: activeChat };
 
+  console.log(getMessages(MessageType.Broadcast, {
+    myNodeNum: getNodeNum(),
+    channel: currentChannel?.index
+  }));
+
   const renderChatContent = () => {
     switch (chatType) {
       case MessageType.Broadcast:
@@ -103,8 +108,8 @@ export const MessagesPage = () => {
   ), [filteredChannels, unreadCounts, activeChat, chatType, isCollapsed, setActiveChat, setChatType, resetUnread]);
 
   const rightSidebar = useMemo(() => (
-    <SidebarSection label="" className="px-0 relative">
-      <label className="">
+    <SidebarSection label="" className="px-0 flex flex-col h-full overflow-y-auto">
+      <label className="px-4 pt-4">
         <Input
           type="text"
           placeholder="Search nodes..."
@@ -114,7 +119,7 @@ export const MessagesPage = () => {
         />
       </label>
       <div className={cn(
-        "flex flex-col gap-3 pt-4",
+        "flex flex-col h-full flex-1 overflow-y-auto gap-2.5 pt-1",
       )}>
         {filteredNodes?.map((node) => (
           <SidebarButton
@@ -138,7 +143,6 @@ export const MessagesPage = () => {
       </div>
     </SidebarSection>
   ), [filteredNodes, searchTerm, activeChat, chatType, setActiveChat, setChatType, resetUnread, hasNodeError]);
-
   return (
     <PageLayout
       label={`Messages: ${isBroadcast && currentChannel
diff --git a/src/pages/Nodes.tsx b/src/pages/Nodes.tsx
index 50723361..9aa1adfd 100644
--- a/src/pages/Nodes.tsx
+++ b/src/pages/Nodes.tsx
@@ -21,19 +21,6 @@ export interface DeleteNoteDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
-// function shortNameFromNode(
-//   node: ReturnType<useDevice>["nodes"][number],
-// ): string {
-//   const shortNameOfNode = node.user?.shortName ??
-//     (node.user?.macaddr
-//       ? `${base16
-//         .stringify(node.user?.macaddr.subarray(4, 6) ?? [])
-//         .toLowerCase()
-//       }`
-//       : `${numberToHexUnpadded(node.num).slice(-4)}`);
-//   return String(shortNameOfNode);
-// }
-
 const NodesPage = (): JSX.Element => {
   const { getNodes, hardware, connection } = useDevice();
   const [selectedNode, setSelectedNode] = useState<