Show nodes on right sidebar on app load (#892)

* fix: show nodes on right sidebar on app load

* chore: update protobuf version to latest (#890)

* chore(deps-dev): bump happy-dom from 19.0.2 to 20.0.0 (#891)

Bumps [happy-dom](https://github.com/capricorn86/happy-dom) from 19.0.2 to 20.0.0.
- [Release notes](https://github.com/capricorn86/happy-dom/releases)
- [Commits](https://github.com/capricorn86/happy-dom/compare/v19.0.2...v20.0.0)

---
updated-dependencies:
- dependency-name: happy-dom
  dependency-version: 20.0.0
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Update packages/web/src/core/stores/nodeDBStore/index.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/src/pages/Messages.tsx

@@ -247,63 +247,52 @@ export const MessagesPage = () => {
     ],
   );
 
-  const rightSidebar = useMemo(
+  const rightSidebar = (
-    () => (
+    <SidebarSection
-      <SidebarSection
+      label=""
-        label=""
+      className="px-0 flex flex-col h-full overflow-y-auto"
-        className="px-0 flex flex-col h-full overflow-y-auto"
+    >
+      <label className="p-2 block" htmlFor="nodeSearch">
+        <Input
+          type="text"
+          name="nodeSearch"
+          placeholder={t("search.nodes")}
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          showClearButton={!!searchTerm}
+        />
+      </label>
+      <div
+        className={cn(
+          "flex flex-col h-full flex-1 overflow-y-auto gap-2.5 pt-1 ",
+        )}
+        style={{ contentVisibility: "auto", containIntrinsicSize: "100px" }}
       >
-        <label className="p-2 block" htmlFor="nodeSearch">
+        {filteredNodes()?.map((node) => (
-          <Input
+          <SidebarButton
-            type="text"
+            key={node.num}
-            name="nodeSearch"
+            preventCollapse
-            placeholder={t("search.nodes")}
+            label={node.user?.longName ?? t("unknown.shortName")}
-            value={searchTerm}
+            count={node.unreadCount > 0 ? node.unreadCount : undefined}
-            onChange={(e) => setSearchTerm(e.target.value)}
+            active={
-            showClearButton={!!searchTerm}
+              numericChatId === node.num && chatType === MessageType.Direct
-          />
+            }
-        </label>
+            onClick={() => {
-        <div
+              navigateToChat(MessageType.Direct, node.num.toString());
-          className={cn(
+              resetUnread(node.num);
-            "flex flex-col h-full flex-1 overflow-y-auto gap-2.5 pt-1 ",
+            }}
-          )}
+          >
-        >
+            <Avatar
-          {filteredNodes()?.map((node) => (
+              text={node.user?.shortName ?? t("unknown.shortName")}
-            <SidebarButton
+              className={cn(hasNodeError(node.num) && "text-red-500")}
-              key={node.num}
+              showError={hasNodeError(node.num)}
-              preventCollapse
+              showFavorite={node.isFavorite}
-              label={node.user?.longName ?? t("unknown.shortName")}
+              size="sm"
-              count={node.unreadCount > 0 ? node.unreadCount : undefined}
+            />
-              active={
+          </SidebarButton>
-                numericChatId === node.num && chatType === MessageType.Direct
+        ))}
-              }
+      </div>
-              onClick={() => {
+    </SidebarSection>
-                navigateToChat(MessageType.Direct, node.num.toString());
-                resetUnread(node.num);
-              }}
-            >
-              <Avatar
-                text={node.user?.shortName ?? t("unknown.shortName")}
-                className={cn(hasNodeError(node.num) && "text-red-500")}
-                showError={hasNodeError(node.num)}
-                showFavorite={node.isFavorite}
-                size="sm"
-              />
-            </SidebarButton>
-          ))}
-        </div>
-      </SidebarSection>
-    ),
-    [
-      filteredNodes,
-      searchTerm,
-      numericChatId,
-      chatType,
-      navigateToChat,
-      resetUnread,
-      hasNodeError,
-      t,
-    ],
   );
 
   return (