ENH - refine notes header and compose controls

frontend/src/ui/controls.css

@@ -2733,6 +2733,9 @@ label.sky-list-item__row {
 
 .sky-fab--icon-only {
   width: var(--sky-touch-target, 44px);
+  height: var(--sky-touch-target, 44px);
+  flex: none;
+  align-self: center;
   padding: 0;
 }
 
@@ -2741,6 +2744,16 @@ label.sky-list-item__row {
   color: var(--sky-text, #000000);
 }
 
+.sky-glass.sky-fab--glass {
+  border: 1px solid var(--sky-hairline, rgba(0, 0, 0, 0.2));
+  background: var(--sky-glass, rgba(255, 255, 255, 0.75));
+  color: var(--sky-text, #000000);
+  box-shadow: var(--sky-shadow-glass);
+}
+
+.sky-fab--glass .sky-fab__accent-layer,
+.sky-fab--glass .sky-fab__dark-accent-layer,
+.sky-fab--glass .sky-fab__surface-layer,
 .sky-fab--neutral .sky-fab__accent-layer,
 .sky-fab--neutral .sky-fab__dark-accent-layer,
 .sky-fab--neutral .sky-fab__surface-layer {
@@ -2755,6 +2768,10 @@ label.sky-list-item__row {
   background: var(--sky-glass-solid, rgba(247, 247, 248, 0.96));
 }
 
+.sky-glass.sky-fab--glass:active:not(:disabled) {
+  background: var(--sky-glass, rgba(255, 255, 255, 0.75));
+}
+
 .sky-fab--disabled {
   cursor: default;
   opacity: 0.42;

frontend/src/ui/controls/SkyFab.test.ts

@@ -73,4 +73,33 @@ describe('SkyFab', () => {
       /\.sky-glass\.sky-fab--neutral\s*\{[^}]*background:\s*var\(--sky-glass-solid/s,
     )
   })
+
+  it('offers a translucent glass variant for adjacent floating controls', async () => {
+    const html = await renderToString(
+      createSSRApp({
+        render: () => h(SkyFab, { ariaLabel: 'Create', variant: 'glass' }),
+      }),
+    )
+
+    expect(html).toContain('sky-fab--glass')
+
+    const controls = readFileSync(
+      fileURLToPath(new URL('../controls.css', import.meta.url)),
+      'utf8',
+    )
+    expect(controls).toMatch(
+      /\.sky-glass\.sky-fab--glass\s*\{[^}]*border:\s*1px solid var\(--sky-hairline[^}]*background:\s*var\(--sky-glass[^}]*box-shadow:\s*var\(--sky-shadow-glass\)/s,
+    )
+  })
+
+  it('keeps icon-only fabs perfectly square inside stretching toolbars', () => {
+    const controls = readFileSync(
+      fileURLToPath(new URL('../controls.css', import.meta.url)),
+      'utf8',
+    )
+
+    expect(controls).toMatch(
+      /\.sky-fab--icon-only\s*\{[^}]*width:\s*var\(--sky-touch-target, 44px\);[^}]*height:\s*var\(--sky-touch-target, 44px\);[^}]*flex:\s*none;[^}]*align-self:\s*center;/s,
+    )
+  })
 })

frontend/src/ui/controls/SkyFab.vue

@@ -14,7 +14,7 @@ const props = withDefaults(
     text?: string
     textPosition?: 'after' | 'before'
     type?: 'button' | 'reset' | 'submit'
-    variant?: 'neutral' | 'primary'
+    variant?: 'glass' | 'neutral' | 'primary'
   }>(),
   {
     ariaLabel: '',
@@ -72,6 +72,7 @@ function handleClick(event: MouseEvent): void {
     class="sky-fab"
     :class="{
       'sky-fab--disabled': disabled,
+      'sky-fab--glass': variant === 'glass',
       'sky-fab--icon-only': !hasText,
       'sky-fab--neutral': variant === 'neutral',
       'sky-fab--with-text': hasText,

frontend/src/views/apps/NotesApp.menu.contract.test.ts

@@ -10,10 +10,11 @@ const menuSource = source.slice(
   source.indexOf('<SkyActionSheet'),
   source.indexOf('</SkyActionSheet>') + '</SkyActionSheet>'.length,
 )
-const listStart = source.search(
-  /<sky-app-page\r?\n\s+v-if="!editorOpened"/,
+const listStart = source.search(/<sky-app-page\r?\n\s+v-if="!editorOpened"/)
+const listSource = source.slice(
+  listStart,
+  source.indexOf('<sky-app-page v-else'),
 )
-const listSource = source.slice(listStart, source.indexOf('<sky-app-page v-else'))
 
 describe('NotesApp list controls', () => {
   it('places the Sky searchbar and create action together at the bottom', () => {
@@ -27,7 +28,7 @@ describe('NotesApp list controls', () => {
     expect(composerSource).toContain('<SkySearchbar')
     expect(composerSource).toContain('v-model="searchQuery"')
     expect(composerSource).toContain('<SkyFab')
-    expect(composerSource).toContain('variant="neutral"')
+    expect(composerSource).toContain('variant="glass"')
     expect(composerSource).toContain('@click="createNote"')
     expect(composerSource).not.toContain('notes-search')
     expect(composerSource).not.toContain('notes-create-fab')
@@ -37,6 +38,20 @@ describe('NotesApp list controls', () => {
   })
 })
 
+describe('NotesApp headers', () => {
+  it('keeps list and editor headers at the shared app height', () => {
+    expect(source).toContain('class="notes-list-navbar"')
+    expect(source).toContain(
+      '.notes-list-navbar.sky-navbar--large.sky-navbar--no-navigation',
+    )
+    expect(source).toContain(
+      'padding-top: calc(var(--sky-navbar-safe-area-top) + var(--sky-space-3))',
+    )
+    expect(source).toContain('class="notes-editor-page !pb-0"')
+    expect(source).not.toContain('notes-editor-page !pt-[44px]')
+  })
+})
+
 describe('NotesApp more menu', () => {
   it('uses the shared Feather-style action sheet', () => {
     expect(menuSource).toContain(

frontend/src/views/apps/NotesApp.vue

@@ -206,6 +206,7 @@ function shareNote(): void {
     :aria-label="phone.t('Apps.notes.name')"
   >
     <sky-navbar
+      class="notes-list-navbar"
       variant="large"
       transparent
       :title="phone.t('Apps.notes.name')"
@@ -273,7 +274,7 @@ function shareNote(): void {
       />
       <SkyFab
         :aria-label="phone.t('Apps.notes.newNote')"
-        variant="neutral"
+        variant="glass"
         @click="createNote"
       >
         <template #icon>
@@ -305,7 +306,7 @@ function shareNote(): void {
     </SkyDialog>
   </sky-app-page>
 
-  <sky-app-page v-else class="notes-editor-page !pt-[44px] !pb-0">
+  <sky-app-page v-else class="notes-editor-page !pb-0">
     <sky-navbar :title="phone.t('Apps.notes.note')">
       <template #left>
         <sky-navbar-back-link
@@ -386,6 +387,16 @@ function shareNote(): void {
   overflow: hidden;
 }
 
+:deep(.notes-list-navbar.sky-navbar--large) {
+  min-height: calc(
+    var(--sky-navbar-safe-area-top) + var(--sky-navbar-large-title-height)
+  );
+}
+
+:deep(.notes-list-navbar.sky-navbar--large.sky-navbar--no-navigation) {
+  padding-top: calc(var(--sky-navbar-safe-area-top) + var(--sky-space-3));
+}
+
 .notes-delete-confirm {
   color: var(--sky-danger);
   background: var(--sky-danger-soft);