Feature Header

declarations.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite-plugin-lit-css/client" />
+/// <reference types="unplugin-icons/types/web-components" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "source-pane",
-  "version": "3.1.1-4",
+  "version": "3.1.1-5",
   "description": "Solid-compatible Panes: Source editor",
   "main": "dist/index.cjs.js",
   "exports": {
@@ -55,6 +55,7 @@
   },
   "homepage": "https://github.com/SolidOS/source-pane",
   "devDependencies": {
+    "@iconify-json/lucide": "^1.2.116",
     "@types/mime-types": "^3.0.1",
     "@types/node": "^22.20.0",
     "@vitest/coverage-v8": "^4.0.18",

src/StatusSection.css

@@ -6,14 +6,46 @@
 
 .sourcePaneStatus[data-visible='true'] {
   display: block;
+  margin: 0;
+  padding: 12px;
+  background: var(--dialog-error-background, var(--pink-500, #ffdde6));
+  border-radius: 5px;
+  border: 1px solid var(--dialog-error-border, var(--pink-700, #ff98b3));
+}
+
+#statusMessageArea {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .error-text {
   margin: 0;
-  padding: 12px;
-  background-color: #fde8e8;
-  border: 1px solid #f8b4b4;
-  border-radius: 4px;
-  color: #9b1c1c;
+  padding: 10px 12px;
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  color: var(--solid-ui-color-error, #b00020);
   font-weight: 500;
+  flex: 1;
+}
+
+.statusCloseButton {
+  flex: 0 0 auto;
+  margin-top: 0;
+  align-self: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--solid-ui-color-error, #b00020);
+  font-weight: 600;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+}
+
+.statusCloseButton:hover {
+  background: color-mix(in srgb, var(--solid-ui-color-error, #b00020) 10%, transparent);
 }

src/StatusSection.ts

@@ -39,7 +39,7 @@ export function getStatusSection(){
       <section class="sourcePaneStatus" role="alert" data-visible="false">
         <div id="statusMessageArea" hidden>
           <p class="error-text">${statusMessage}</p>
-          <button @click=${() => clearError()}>X</button>
+          <button class="statusCloseButton" aria-label="Dismiss error" @click=${() => clearError()}>X</button>
         </div>
       </section>
     `

src/components/header/SourceHeader.styles.css

@@ -0,0 +1,12 @@
+:host {
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: nowrap;
+    width: 100%;
+    text-align: right;
+    padding: 15px;
+  }
+}

src/components/header/SourceHeader.ts

@@ -0,0 +1,29 @@
+import { WebComponent } from 'solid-ui'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+import 'solid-ui/components/button'
+import { consume } from '@lit/context'
+import { sourceContext, SourceContext } from '../../primitives/context'
+import '~icons/lucide/share-2'
+import '~icons/lucide/pencil'
+import '~icons/lucide/ellipsis-vertical'
+import styles from './SourceHeader.styles.css'
+import './SourceHeaderSummary'
+import './SourceHeaderControls'
+
+@customElement('source-pane-source-header')
+export default class SourceHeader extends WebComponent {
+  static styles = styles
+
+  @consume({ context: sourceContext, subscribe: true })
+  accessor sourceContext: SourceContext = undefined as unknown as SourceContext
+
+  render () {
+    return html`
+      <header>
+        <source-pane-source-header-summary></source-pane-source-header-summary>
+        <source-pane-source-header-controls></source-pane-source-header-controls>
+      </header>
+    `
+  }
+}

src/components/header/SourceHeaderControls.styles.css

@@ -0,0 +1,28 @@
+:host {
+  div {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    text-align: right;
+  }
+
+  /* generative ai */
+  div > * {
+    flex: 0 1 auto;
+  }
+
+  @media (max-width: 900px) {
+    div {
+      padding-right: 3px;
+    }
+  }
+
+  @media (max-width: 600px) {
+    div {
+      justify-content: flex-start;
+      gap: 5px;
+    }
+  }
+}

src/components/header/SourceHeaderControls.ts

@@ -0,0 +1,49 @@
+import { WebComponent } from 'solid-ui'
+import { customElement } from 'lit/decorators.js'
+import { html } from 'lit'
+import 'solid-ui/components/button'
+import { consume } from '@lit/context'
+import { sourceContext, SourceContext } from '../../primitives/context'
+import '~icons/lucide/share-2'
+import '~icons/lucide/pencil'
+import '~icons/lucide/ellipsis-vertical'
+import styles from './SourceHeaderControls.styles.css'
+import './SourceHeaderSummary'
+
+@customElement('source-pane-source-header-controls')
+export default class SourceHeaderControls extends WebComponent {
+  static styles = styles
+
+  @consume({ context: sourceContext, subscribe: true })
+  accessor sourceContext: SourceContext = undefined as unknown as SourceContext
+
+  /* private canEditSource (subject: NamedNode, sourcePaneState: SourcePaneState) {
+    const { allowed } = sourcePaneState
+    return !subject.uri.endsWith('/') && (!allowed || allowed.includes('PUT'))
+  } */
+
+  private setEditable() {
+    const sourcePaneState = this.sourceContext?.sourcePaneState
+    const { canEdit } = this.sourceContext?.headerMetadata ?? { canEdit: false }
+    const subject = this.sourceContext?.subject
+    if (!sourcePaneState || !canEdit || sourcePaneState.broken || (subject && subject.endsWith('/'))) return
+
+    this.sourceContext?.setEditing?.()
+  }
+
+  render () {
+    return html`
+      <div>
+        <solid-ui-button class="sourcePanePrettyButton" variant="ghost" title="Share">
+          <icon-lucide-share-2 slot="icon"></icon-lucide-share-2>
+        </solid-ui-button>
+        <solid-ui-button class="sourcePanePrettyButton" variant="ghost" @click=${() => this.setEditable()}>
+          <icon-lucide-pencil slot="icon"></icon-lucide-pencil>
+        </solid-ui-button>
+        <solid-ui-button class="sourcePanePrettyButton" variant="ghost" title="More options">
+          <icon-lucide-ellipsis-vertical slot="icon"></icon-lucide-ellipsis-vertical>
+        </solid-ui-button>
+      </div>
+    `
+  }
+}