diff --git a/webui/src/App.tsx b/webui/src/App.tsx index a344a51..cebf80a 100644 --- a/webui/src/App.tsx +++ b/webui/src/App.tsx @@ -1,5 +1,6 @@ import { useState, useEffect, useRef, useMemo } from 'preact/hooks'; import { api, Page } from './mcp'; +import { Logo } from './Logo'; import { marked } from 'marked'; import mermaid from 'mermaid'; @@ -628,6 +629,7 @@ export function App() { ) : current ? ( <> diff --git a/webui/src/Logo.tsx b/webui/src/Logo.tsx new file mode 100644 index 0000000..956762e --- /dev/null +++ b/webui/src/Logo.tsx @@ -0,0 +1,20 @@ +// Brand logo. Uses currentColor so it inherits the surrounding text +// color (var(--fg-dim) in the page header), giving the right look in +// both light and dark themes without per-theme assets. + +export function Logo({ size = 24 }: { size?: number } = {}) { + return ( + + ); +} diff --git a/webui/src/assets/favicon.svg b/webui/src/assets/favicon.svg new file mode 100644 index 0000000..3f4b7f3 --- /dev/null +++ b/webui/src/assets/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/webui/src/styles.css b/webui/src/styles.css index 0e6b55a..a573b1d 100644 --- a/webui/src/styles.css +++ b/webui/src/styles.css @@ -231,6 +231,18 @@ html, body, #root { .page-header { padding: 32px 40px 16px; border-bottom: 1px solid var(--border); + position: relative; +} + +.page-header-logo { + position: absolute; + top: 20px; + right: 32px; + color: var(--fg-dim); + opacity: 0.6; + pointer-events: none; + display: inline-flex; + align-items: center; } .page-title { @@ -592,12 +604,15 @@ mark { .empty { display: flex; + flex-direction: column; align-items: center; justify-content: center; + gap: 16px; flex: 1; color: var(--fg-dim); font-size: 16px; font-weight: 300; + opacity: 0.6; } /* --- Mobile --- */ diff --git a/webui/webpack.config.js b/webui/webpack.config.js index 78844d6..8fdac07 100644 --- a/webui/webpack.config.js +++ b/webui/webpack.config.js @@ -36,6 +36,7 @@ module.exports = { new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', + favicon: path.resolve(__dirname, 'src/assets/favicon.svg'), }), new MiniCssExtractPlugin({ filename: 'index.css' }), ],