feat: integrate PinchChat logo throughout the app

- Use logo.png as favicon (replaces emoji SVG)
- Show logo in header next to title
- Show larger logo on login screen
- Add OG image meta tag
- Add centered logo in README
- Closes feedback item #8
This commit is contained in:
Nicolas Varrot
2026-02-11 16:47:02 +00:00
parent af7d9280fb
commit 97c16be399
5 changed files with 12 additions and 11 deletions

View File

@@ -61,7 +61,7 @@
## Item #8
- **Date:** 2026-02-11
- **Priority:** high
- **Status:** pending
- **Status:** in-progress
- **Description:** Intégrer le logo PinchChat
- Le logo est déjà dans `public/logo.png`
- L'utiliser comme favicon (générer les tailles appropriées ou utiliser le PNG directement)

View File

@@ -1,4 +1,8 @@
# 🦞 PinchChat
<p align="center">
<img src="public/logo.png" alt="PinchChat" width="120" />
</p>
<h1 align="center">PinchChat</h1>
[![CI](https://github.com/MarlBurroW/pinchchat/actions/workflows/ci.yml/badge.svg)](https://github.com/MarlBurroW/pinchchat/actions/workflows/ci.yml)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

View File

@@ -9,8 +9,9 @@
<meta property="og:description" content="A sleek, dark-themed webchat UI for OpenClaw" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://github.com/MarlBurroW/pinchchat" />
<meta property="og:image" content="/logo.png" />
<title>PinchChat</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦞</text></svg>" />
<link rel="icon" type="image/png" href="/logo.png" />
</head>
<body>
<div id="root"></div>

View File

@@ -1,4 +1,4 @@
import { Menu, Bot, Sparkles, LogOut } from 'lucide-react';
import { Menu, Sparkles, LogOut } from 'lucide-react';
import type { ConnectionStatus, Session } from '../types';
import { useT } from '../hooks/useLocale';
import { LanguageSelector } from './LanguageSelector';
@@ -22,9 +22,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
<Menu size={20} />
</button>
<div className="flex items-center gap-3 flex-1 min-w-0">
<div className="flex h-9 w-9 items-center justify-center rounded-2xl border border-white/8 bg-zinc-800/40">
<Bot className="h-4 w-4 text-cyan-200" />
</div>
<img src="/logo.png" alt="PinchChat" className="h-9 w-9 rounded-2xl" />
<div className="min-w-0">
<div className="flex items-center gap-2">
<span className="font-semibold text-zinc-300 text-sm tracking-wide">{t('header.title')}</span>

View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Bot, Sparkles, Eye, EyeOff, Loader2 } from 'lucide-react';
import { Sparkles, Eye, EyeOff, Loader2 } from 'lucide-react';
import { useT } from '../hooks/useLocale';
interface Props {
@@ -54,9 +54,7 @@ export function LoginScreen({ onConnect, error, isConnecting }: Props) {
<div className="w-full max-w-md mx-4">
{/* Logo */}
<div className="flex flex-col items-center gap-3 mb-8">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-zinc-800/60 shadow-lg shadow-cyan-500/5">
<Bot className="h-7 w-7 text-cyan-200" />
</div>
<img src="/logo.png" alt="PinchChat" className="h-20 w-20 drop-shadow-lg" />
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold text-zinc-200 tracking-wide">{t('login.title')}</h1>
<Sparkles className="h-5 w-5 text-cyan-300/60" />