refactor: dirty styles.

Author: knightedcodemonkey

playwright/workspace-tabs.spec.ts

@@ -282,7 +282,8 @@ test('editing a synced tab marks it dirty', async ({ page }) => {
   const componentTab = page
     .getByRole('listitem', { name: 'Workspace tab App.tsx' })
     .first()
-  await expect(componentTab).toContainText('Dirty')
+  await expect(componentTab.locator('.workspace-tab__dirty-indicator')).toBeVisible()
+  await expect(page.locator('#component-dirty-status')).toHaveText('Edited')
 })
 
 test('removed default styles tab stays removed after reload', async ({ page }) => {

src/app.js

@@ -135,8 +135,14 @@ const componentPrSyncIcon = document.getElementById('component-pr-sync-icon')
 const componentPrSyncIconPath = document.getElementById('component-pr-sync-icon-path')
 const stylesPrSyncIcon = document.getElementById('styles-pr-sync-icon')
 const stylesPrSyncIconPath = document.getElementById('styles-pr-sync-icon-path')
-const componentEditorHeaderLabel = document.querySelector('#editor-header-component span')
-const stylesEditorHeaderLabel = document.querySelector('#editor-header-styles span')
+const componentEditorHeaderLabel = document.querySelector(
+  '#editor-header-component [data-editor-header-label]',
+)
+const stylesEditorHeaderLabel = document.querySelector(
+  '#editor-header-styles [data-editor-header-label]',
+)
+const componentEditorDirtyStatus = document.getElementById('component-dirty-status')
+const stylesEditorDirtyStatus = document.getElementById('styles-dirty-status')
 const aiControlsToggle = document.getElementById('ai-controls-toggle')
 const appThemeButtons = document.querySelectorAll('[data-app-theme]')
 const workspaceTabsShell = document.getElementById('workspace-tabs-shell')
@@ -194,6 +200,10 @@ const editorHeaderLabelByKind = {
   component: componentEditorHeaderLabel,
   styles: stylesEditorHeaderLabel,
 }
+const editorHeaderDirtyStatusByKind = {
+  component: componentEditorDirtyStatus,
+  styles: stylesEditorDirtyStatus,
+}
 const defaultTabNameByKind = {
   component: defaultComponentTabName,
   styles: defaultStylesTabName,
@@ -499,6 +509,7 @@ const {
   editorKinds,
   editorPanelsByKind,
   editorHeaderLabelByKind,
+  editorHeaderDirtyStatusByKind,
   defaultTabNameByKind,
   toNonEmptyWorkspaceText,
   getLoadedStylesTabId: () => loadedStylesTabId,

src/index.html

@@ -376,7 +376,15 @@ <h1>
           >
             <div class="panel-header panel-header--grid">
               <h2 id="editor-header-component" class="panel-header__title-with-status">
-                <span>Component</span>
+                <span data-editor-header-label>Component</span>
+                <span
+                  class="panel-header__status panel-header__status--dirty"
+                  id="component-dirty-status"
+                  aria-hidden="true"
+                  hidden
+                >
+                  Edited
+                </span>
                 <svg
                   class="panel-header__sync-icon"
                   id="component-pr-sync-icon"
@@ -500,7 +508,15 @@ <h2 id="editor-header-component" class="panel-header__title-with-status">
           >
             <div class="panel-header panel-header--grid">
               <h2 id="editor-header-styles" class="panel-header__title-with-status">
-                <span>Styles</span>
+                <span data-editor-header-label>Styles</span>
+                <span
+                  class="panel-header__status panel-header__status--dirty"
+                  id="styles-dirty-status"
+                  aria-hidden="true"
+                  hidden
+                >
+                  Edited
+                </span>
                 <svg
                   class="panel-header__sync-icon"
                   id="styles-pr-sync-icon"

src/modules/app-core/workspace-editor-helpers.js

@@ -4,6 +4,7 @@ const createWorkspaceEditorHelpers = ({
   editorKinds,
   editorPanelsByKind,
   editorHeaderLabelByKind,
+  editorHeaderDirtyStatusByKind,
   defaultTabNameByKind,
   toNonEmptyWorkspaceText,
   getLoadedStylesTabId,
@@ -45,11 +46,22 @@ const createWorkspaceEditorHelpers = ({
           : (workspaceTabsState.getTab(getLoadedComponentTabId()) ??
             getWorkspaceTabByKind('component'))
       const headerLabel = editorHeaderLabelByKind[editorKind]
+      const dirtyStatusLabel = editorHeaderDirtyStatusByKind[editorKind]
 
       if (headerLabel) {
         headerLabel.textContent =
           toNonEmptyWorkspaceText(tab?.name) || defaultTabNameByKind[editorKind]
       }
+
+      if (dirtyStatusLabel instanceof HTMLElement) {
+        const isDirty = Boolean(tab?.isDirty)
+        dirtyStatusLabel.hidden = !isDirty
+        if (isDirty) {
+          dirtyStatusLabel.removeAttribute('aria-hidden')
+        } else {
+          dirtyStatusLabel.setAttribute('aria-hidden', 'true')
+        }
+      }
     }
   }
 

src/modules/app-core/workspace-tabs-renderer.js

@@ -228,8 +228,8 @@ const createWorkspaceTabsRenderer = ({
 
         if (tab.isDirty) {
           const dirtyBadge = document.createElement('span')
-          dirtyBadge.className = 'workspace-tab__meta workspace-tab__meta--dirty'
-          dirtyBadge.textContent = 'Dirty'
+          dirtyBadge.className = 'workspace-tab__dirty-indicator'
+          dirtyBadge.setAttribute('aria-hidden', 'true')
           tabContainer.append(dirtyBadge)
         }
 

src/styles/panels-editor.css

@@ -28,8 +28,8 @@
   font-size: 1rem;
 }
 
-#editor-header-component span,
-#editor-header-styles span {
+#editor-header-component [data-editor-header-label],
+#editor-header-styles [data-editor-header-label] {
   display: inline-block;
   max-width: min(42vw, 420px);
   overflow: hidden;
@@ -40,12 +40,24 @@
 
 .panel-header__title-with-status {
   display: inline-flex;
-  align-items: center;
+  align-items: baseline;
   gap: 8px;
 }
 
+.panel-header__status {
+  flex: none;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.panel-header__status--dirty {
+  color: var(--warning);
+}
+
 .panel-header__sync-icon {
   display: none;
+  align-self: center;
   width: 14px;
   height: 14px;
   fill: color-mix(in srgb, var(--focus-ring) 78%, var(--panel-text));
@@ -390,10 +402,13 @@
   flex: none;
 }
 
-.workspace-tab__meta--dirty {
+.workspace-tab__dirty-indicator {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
   color: var(--warning);
-  font-weight: 600;
-  opacity: 1;
+  background: currentColor;
+  flex: none;
 }
 
 .workspace-tab-add {