Restore Messages sidebar entry, add WhiteNoise logo to /messages page

- 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.
This commit is contained in:
Alex Gleason
2026-05-17 14:41:34 -05:00
parent c5b929187a
commit b62da321f7
4 changed files with 46 additions and 5 deletions
+1
View File
@@ -122,6 +122,7 @@ const hardcodedConfig: AppConfig = {
"world",
"wallet",
"agent",
"messages",
"profile",
"notifications",
"search",
+35
View File
@@ -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';
+6
View File
@@ -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",
+4 -5
View File
@@ -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">