hai/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-05-21 20:28:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

3
extension/content.js
View File

@@ -326,6 +326,9 @@ function startBasicPicker() {
document.addEventListener('keydown', onBasicKeydown, true); 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 // Listen for messages from background worker
chrome.runtime.onMessage.addListener((msg) => { chrome.runtime.onMessage.addListener((msg) => {
if (msg.type === 'startBasicPicker') { if (msg.type === 'startBasicPicker') {

25
extension/sidepanel.css
View File

@@ -161,13 +161,14 @@ body::after {
.chat-loading { .chat-loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
text-align: center; text-align: left;
color: var(--text-meta); color: var(--text-meta);
gap: 12px; gap: 12px;
font-size: 13px; font-size: 13px;
padding: 24px;
} }
.chat-loading-spinner { .chat-loading-spinner {
width: 24px; width: 24px;
@@ -183,10 +184,10 @@ body::after {
.chat-welcome { .chat-welcome {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
text-align: center; text-align: left;
color: var(--text-label); color: var(--text-label);
gap: 8px; gap: 8px;
padding: 24px; padding: 24px;
@@ -222,7 +223,7 @@ body::after {
border-bottom-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
} }
.chat-notification { .chat-notification {
text-align: center; text-align: left;
font-size: 11px; font-size: 11px;
color: var(--text-meta); color: var(--text-meta);
padding: 4px 12px; padding: 4px 12px;
@@ -545,10 +546,10 @@ body::after {
.session-placeholder { .session-placeholder {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
text-align: center; text-align: left;
color: var(--text-label); color: var(--text-label);
padding: 24px; padding: 24px;
gap: 8px; gap: 8px;
@@ -559,10 +560,10 @@ body::after {
.empty-state { .empty-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 40px 24px; padding: 40px 24px;
text-align: center; text-align: left;
color: var(--text-label); color: var(--text-label);
gap: 4px; gap: 4px;
} }
@@ -787,7 +788,7 @@ footer {
border-radius: 6px; border-radius: 6px;
font-size: 11px; font-size: 11px;
margin: 6px 12px; margin: 6px 12px;
text-align: center; text-align: left;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -964,10 +965,10 @@ footer {
.inspector-empty { .inspector-empty {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
padding: 40px 24px; padding: 40px 24px;
text-align: center; text-align: left;
gap: 6px; gap: 6px;
} }