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:
@@ -122,6 +122,7 @@ const hardcodedConfig: AppConfig = {
|
||||
"world",
|
||||
"wallet",
|
||||
"agent",
|
||||
"messages",
|
||||
"profile",
|
||||
"notifications",
|
||||
"search",
|
||||
|
||||
@@ -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';
|
||||
@@ -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",
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user