feat: left-align sidebar UI + extension-ready event for welcome page

- Left-align all sidebar text (chat welcome, loading, empty states,
  notifications, inspector empty, session placeholder)
- Dispatch 'gstack-extension-ready' CustomEvent from content.js so
  the welcome page can detect when the sidebar is active
This commit is contained in:
Garry Tan
2026-03-31 10:46:38 -07:00
parent 3924471251
commit f064cffe0f
2 changed files with 16 additions and 12 deletions
+3
View File
@@ -326,6 +326,9 @@ function startBasicPicker() {
document.addEventListener('keydown', onBasicKeydown, true);
}
// Notify the page that the gstack extension is active (used by welcome page)
document.dispatchEvent(new CustomEvent('gstack-extension-ready'));
// Listen for messages from background worker
chrome.runtime.onMessage.addListener((msg) => {
if (msg.type === 'startBasicPicker') {
+13 -12
View File
@@ -161,13 +161,14 @@ body::after {
.chat-loading {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
height: 100%;
text-align: center;
text-align: left;
color: var(--text-meta);
gap: 12px;
font-size: 13px;
padding: 24px;
}
.chat-loading-spinner {
width: 24px;
@@ -183,10 +184,10 @@ body::after {
.chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
height: 100%;
text-align: center;
text-align: left;
color: var(--text-label);
gap: 8px;
padding: 24px;
@@ -222,7 +223,7 @@ body::after {
border-bottom-right-radius: var(--radius-sm);
}
.chat-notification {
text-align: center;
text-align: left;
font-size: 11px;
color: var(--text-meta);
padding: 4px 12px;
@@ -545,10 +546,10 @@ body::after {
.session-placeholder {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
height: 100%;
text-align: center;
text-align: left;
color: var(--text-label);
padding: 24px;
gap: 8px;
@@ -559,10 +560,10 @@ body::after {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
padding: 40px 24px;
text-align: center;
text-align: left;
color: var(--text-label);
gap: 4px;
}
@@ -787,7 +788,7 @@ footer {
border-radius: 6px;
font-size: 11px;
margin: 6px 12px;
text-align: center;
text-align: left;
flex-shrink: 0;
}
@@ -964,10 +965,10 @@ footer {
.inspector-empty {
display: flex;
flex-direction: column;
align-items: center;
align-items: flex-start;
justify-content: center;
padding: 40px 24px;
text-align: center;
text-align: left;
gap: 6px;
}