From b62da321f7980bab8b22dede93d6998f6ff394bb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 17 May 2026 14:41:34 -0500
Subject: [PATCH] Restore Messages sidebar entry, add WhiteNoise logo to
 /messages page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Re-add the Messages item to the left sidebar with its previous
  MessageSquareMore lucide icon. Drop requiresAuth so logged-out users
  also see the entry — the page is a static recommendation.
- Restore 'messages' to the default sidebarOrder in App.tsx.
- Add WhiteNoiseIcon (the logomark from whitenoise.chat, recolored to
  currentColor so it adapts to theme) and use it on the /messages
  install-CTA card in place of the generic Lock glyph.
---
 src/App.tsx                             |  1 +
 src/components/icons/WhiteNoiseIcon.tsx | 35 +++++++++++++++++++++++++
 src/lib/sidebarItems.tsx                |  6 +++++
 src/pages/Messages.tsx                  |  9 +++----
 4 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 src/components/icons/WhiteNoiseIcon.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fc385b83..2018bb24 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -122,6 +122,7 @@ const hardcodedConfig: AppConfig = {
     "world",
     "wallet",
     "agent",
+    "messages",
     "profile",
     "notifications",
     "search",
diff --git a/src/components/icons/WhiteNoiseIcon.tsx b/src/components/icons/WhiteNoiseIcon.tsx
new file mode 100644
index 00000000..ab74c34e
--- /dev/null
+++ b/src/components/icons/WhiteNoiseIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+/**
+ * White Noise brand mark, drawn in `currentColor` so it adapts to theme.
+ *
+ * Source: https://www.whitenoise.chat/images/logomark.svg
+ *
+ * Used as the Messages sidebar icon and on the /messages "Install White Noise"
+ * placeholder card. The original logomark is 58×44; this component preserves
+ * that aspect ratio inside the SVG viewBox while accepting standard lucide-style
+ * width/height/className props.
+ */
+export const WhiteNoiseIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 58 44"
+      fill="currentColor"
+      className={className}
+      aria-label="White Noise"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 44V0H14.7304V13.4775L21.2348 0H35.9652V13.4775L42.4696 0H57.2V44H42.4696V30.5225L35.9652 44H21.2348V30.5225L14.7304 44H0ZM12.4348 2.29565H2.29565V39.2432L12.4348 18.2342V2.29565ZM44.7652 41.7043H54.9044V4.75676L44.7652 25.7658V41.7043ZM34.5241 41.7043L53.5431 2.29565H43.9107L24.8917 41.7043H34.5241ZM32.3083 2.29565H22.6759L3.65691 41.7043H13.2893L32.3083 2.29565ZM33.6696 4.75676L23.5304 25.7658V39.2432L33.6696 18.2342V4.75676Z"
+      />
+    </svg>
+  ),
+);
+
+WhiteNoiseIcon.displayName = 'WhiteNoiseIcon';
diff --git a/src/lib/sidebarItems.tsx b/src/lib/sidebarItems.tsx
index ac8a7349..0598adfe 100644
--- a/src/lib/sidebarItems.tsx
+++ b/src/lib/sidebarItems.tsx
@@ -141,6 +141,12 @@ export const SIDEBAR_ITEMS: SidebarItemDef[] = [
     icon: Bell,
     requiresAuth: true,
   },
+  {
+    id: "messages",
+    label: "Messages",
+    path: "/messages",
+    icon: MessageSquareMore,
+  },
   { id: "search", label: "Search", path: "/search", icon: Search },
   {
     id: "verified",
diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx
index ceb7f72b..fd989341 100644
--- a/src/pages/Messages.tsx
+++ b/src/pages/Messages.tsx
@@ -1,5 +1,6 @@
 import { useSeoMeta } from '@unhead/react';
-import { ArrowUpRight, Lock } from 'lucide-react';
+import { ArrowUpRight } from 'lucide-react';
+import { WhiteNoiseIcon } from '@/components/icons/WhiteNoiseIcon';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { openUrl } from '@/lib/downloadFile';
@@ -15,10 +16,8 @@ const Messages = () => {
   return (
     <div className="flex-1 flex items-center justify-center p-6">
       <Card className="max-w-md w-full border-dashed">
-        <CardContent className="py-10 px-8 text-center space-y-5">
-          <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
-            <Lock className="w-6 h-6 text-primary" />
-          </div>
+        <CardContent className="py-10 px-8 text-center space-y-6">
+          <WhiteNoiseIcon className="mx-auto h-14 w-auto text-foreground" />
           <div className="space-y-2">
             <h2 className="text-xl font-semibold">Private messaging lives elsewhere</h2>
             <p className="text-sm text-muted-foreground leading-relaxed">