BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: remove animated logo from idle and loading surfaces

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-04-03 16:44:31 +03:00
parent 5045d21821
commit 246464a325
7 changed files with 8 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/noop-dist/index.html
+1 -14
View File
@@ -61,19 +61,6 @@
font-family: system-ui, -apple-system, sans-serif; font-family: system-ui, -apple-system, sans-serif;
} }
@keyframes logo-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
.logo-pulse {
animation: logo-pulse 3s ease-in-out infinite;
}
</style> </style>
</head> </head>
<body> <body>
@@ -114,7 +101,7 @@
<path d="M70.784 74 L81.176 68 L81.176 80 L70.784 86 Z" fill="var(--splash-cell-fill)" opacity="0.4"/> <path d="M70.784 74 L81.176 68 L81.176 80 L70.784 86 Z" fill="var(--splash-cell-fill)" opacity="0.4"/>
<path d="M81.176 68 L91.568 62 L91.568 74 L81.176 80 Z" fill="var(--splash-cell-fill)" opacity="0.2"/> <path d="M81.176 68 L91.568 62 L91.568 74 L81.176 80 Z" fill="var(--splash-cell-fill)" opacity="0.2"/>
<path d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/> <path d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/>
<g class="logo-pulse" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)"> <g transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z" fill="var(--splash-logo-fill)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z" fill="var(--splash-logo-fill)"/>
<path d="M-8 -4 L8 -4 L8 12 L-8 12 Z" fill="var(--splash-logo-fill)" fill-opacity="0.4"/> <path d="M-8 -4 L8 -4 L8 12 L-8 12 Z" fill="var(--splash-logo-fill)" fill-opacity="0.4"/>
</g> </g>
packages/ui/src/components/auth/SessionAuthGate.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const AuthShell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
const LoadingScreen: React.FC = () => ( const LoadingScreen: React.FC = () => (
<div className="flex min-h-screen items-center justify-center bg-background text-foreground"> <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
<OpenChamberLogo width={120} height={120} isAnimated /> <OpenChamberLogo width={120} height={120} />
</div> </div>
); );
packages/ui/src/components/chat/ChatEmptyState.tsx
+2 -31
View File
@@ -1,45 +1,16 @@
import React from 'react'; import React from 'react';
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo'; import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
import { TextLoop } from '@/components/ui/TextLoop';
import { useThemeSystem } from '@/contexts/useThemeSystem'; import { useThemeSystem } from '@/contexts/useThemeSystem';
const phrases = [
"Fix the failing tests",
"Refactor this to be more readable",
"Add form validation",
"Optimize this function",
"Write tests for this",
"Explain how this works",
"Add a new feature",
"Help me debug this",
"Review my code",
"Simplify this logic",
"Add error handling",
"Create a new component",
"Update the documentation",
"Find the bug here",
"Improve performance",
"Add type definitions",
];
const ChatEmptyState: React.FC = () => { const ChatEmptyState: React.FC = () => {
const { currentTheme } = useThemeSystem(); const { currentTheme } = useThemeSystem();
// Use theme's muted foreground for secondary text
const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)'; const textColor = currentTheme?.colors?.surface?.mutedForeground || 'var(--muted-foreground)';
return ( return (
<div className="flex flex-col items-center justify-center min-h-full w-full gap-6"> <div className="flex flex-col items-center justify-center min-h-full w-full gap-6">
<OpenChamberLogo width={140} height={140} className="opacity-20" isAnimated /> <OpenChamberLogo width={140} height={140} className="opacity-20" />
<TextLoop <span className="text-body-md" style={{ color: textColor }}>Start a new chat</span>
className="text-body-md"
interval={4}
transition={{ duration: 0.5 }}
>
{phrases.map((phrase) => (
<span key={phrase} style={{ color: textColor }}>"{phrase}…"</span>
))}
</TextLoop>
</div> </div>
); );
}; };
packages/ui/src/components/ui/ConfigUpdateOverlay.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export const ConfigUpdateOverlay: React.FC = () => {
return ( return (
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md"> <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md">
<OpenChamberLogo width={80} height={80} isAnimated /> <OpenChamberLogo width={80} height={80} />
<p className="typography-body text-muted-foreground"> <p className="typography-body text-muted-foreground">
{message} {message}
</p> </p>
packages/ui/src/components/ui/OpenChamberLogo.tsx
+1 -19
View File
@@ -81,7 +81,6 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
className = '', className = '',
width = 70, width = 70,
height = 70, height = 70,
isAnimated = false,
}) => { }) => {
const themeContext = useOptionalThemeSystem(); const themeContext = useOptionalThemeSystem();
@@ -192,23 +191,6 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
role="img" role="img"
aria-label="OpenChamber logo" aria-label="OpenChamber logo"
> >
<style>{`
@keyframes openchamber-logo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.openchamber-logo-pulse {
animation: openchamber-logo-pulse 3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.openchamber-logo-pulse {
animation: none;
}
}
`}</style>
{/* Left face - base fill */} {/* Left face - base fill */}
<path <path
d={`M${center.x} ${center.y} L${left.x} ${left.y} L${bottomLeft.x} ${bottomLeft.y} L${bottom.x} ${bottom.y} Z`} d={`M${center.x} ${center.y} L${left.x} ${left.y} L${bottomLeft.x} ${bottomLeft.y} L${bottom.x} ${bottom.y} Z`}
@@ -257,7 +239,7 @@ export const OpenChamberLogo: React.FC<OpenChamberLogoProps> = ({
/> />
{/* OpenCode logo on top face */} {/* OpenCode logo on top face */}
<g className={isAnimated ? 'openchamber-logo-pulse' : undefined} opacity={1}> <g opacity={1}>
{/* {/*
Isometric transform for top face: Isometric transform for top face:
OpenCode logo (32x40 viewBox) centered and projected to isometric plane OpenCode logo (32x40 viewBox) centered and projected to isometric plane
packages/vscode/src/webviewHtml.ts
+1 -9
View File
@@ -119,10 +119,6 @@ export function getWebviewHtml(options: WebviewHtmlOptions): string {
fill: var(--vscode-foreground); fill: var(--vscode-foreground);
opacity: 0.4; opacity: 0.4;
} }
/* Animation on inner logo only, like OpenChamberLogo.tsx */
#initial-loading .logo-inner {
animation: logoPulse 3s ease-in-out infinite;
}
#initial-loading .status-text { #initial-loading .status-text {
font-size: 13px; font-size: 13px;
color: var(--vscode-descriptionForeground, var(--vscode-foreground)); color: var(--vscode-descriptionForeground, var(--vscode-foreground));
@@ -134,10 +130,6 @@ export function getWebviewHtml(options: WebviewHtmlOptions): string {
text-align: center; text-align: center;
max-width: 280px; max-width: 280px;
} }
@keyframes logoPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
</style> </style>
<title>OpenChamber</title> <title>OpenChamber</title>
</head> </head>
@@ -152,7 +144,7 @@ export function getWebviewHtml(options: WebviewHtmlOptions): string {
<!-- Top face (no fill, stroke only) --> <!-- Top face (no fill, stroke only) -->
<path class="logo-stroke" d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke-width="2" stroke-linejoin="round"/> <path class="logo-stroke" d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke-width="2" stroke-linejoin="round"/>
<!-- OpenCode logo on top face with pulse animation --> <!-- OpenCode logo on top face -->
<g class="logo-inner" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)"> <g class="logo-inner" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)">
<path class="logo-fill-solid" fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z"/> <path class="logo-fill-solid" fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z"/>
<path class="logo-fill-dim" d="M-8 -4 L8 -4 L8 12 L-8 12 Z"/> <path class="logo-fill-dim" d="M-8 -4 L8 -4 L8 12 L-8 12 Z"/>
packages/web/index.html
+1 -8
View File
@@ -417,13 +417,6 @@
--splash-cell-fill: color-mix(in srgb, var(--splash-stroke) 35%, transparent); --splash-cell-fill: color-mix(in srgb, var(--splash-stroke) 35%, transparent);
} }
} }
@keyframes logo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.logo-pulse {
animation: logo-pulse 3s ease-in-out infinite;
}
#initial-loading { #initial-loading {
background-color: var(--splash-background); background-color: var(--splash-background);
color: var(--splash-foreground); color: var(--splash-foreground);
@@ -498,7 +491,7 @@
<path d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/> <path d="M50 2 L8.432 26 L50 50 L91.568 26 Z" fill="none" stroke="var(--splash-stroke)" stroke-width="2" stroke-linejoin="round"/>
<!-- OpenCode logo on top face --> <!-- OpenCode logo on top face -->
<g class="logo-pulse" transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)"> <g transform="matrix(0.866, 0.5, -0.866, 0.5, 50, 26) scale(0.75)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z" fill="var(--splash-logo-fill)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M-16 -20 L16 -20 L16 20 L-16 20 Z M-8 -12 L-8 12 L8 12 L8 -12 Z" fill="var(--splash-logo-fill)"/>
<path d="M-8 -4 L8 -4 L8 12 L-8 12 Z" fill="var(--splash-logo-fill)" fill-opacity="0.4"/> <path d="M-8 -4 L8 -4 L8 12 L-8 12 Z" fill="var(--splash-logo-fill)" fill-opacity="0.4"/>
</g> </g>