Merge branch 'main' into ellyse/ct-580-gmail-and-rss-importers-have-failures-unit-test

Author: ellyxir

deno.lock

@@ -1028,8 +1028,9 @@ export class CharmManager {
       targetInputCell = targetInputCell.key(segment);
     }
 
-    targetInputCell.key(targetKey).set(sourceResultCell);
-
+    const tx = this.runtime.edit();
+    targetInputCell.key(targetKey).withTx(tx).set(sourceResultCell);
+    await tx.commit();
     await this.runtime.idle();
     await this.synced();
   }

packages/charm/src/manager.ts

@@ -25,6 +25,7 @@
 /* CSS Custom Properties */
 :root {
   --font-primary: "JetBrainsMono", monospace;
+  --font-color: #000;
   --bg-primary: #f3f3f3;
   --bg-secondary: #f9fafb;
   --border-color: #000;
@@ -66,6 +67,7 @@ body {
     transparent var(--dot-size)
   );
   background-size: var(--dot-spacing) var(--dot-spacing);
+  color: var(--font-color);
 }
 
 /* Responsive padding */

packages/shell/public/styles/index.css

@@ -7,10 +7,8 @@ export class XBodyElement extends BaseView {
   static override styles = css`
     :host {
       display: block;
-      width: 100%;
-      height: 100%;
-      background-color: white;
       padding: 1rem;
+      overflow: hidden;
     }
   `;
 

packages/shell/src/components/Body.ts

@@ -0,0 +1,95 @@
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
+type ButtonSize = "small" | "medium" | "large";
+type ButtonType = "text" | "submit" | "number";
+type VariantType = "none" | "primary";
+
+export class XButtonElement extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    button {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      font-family: var(--font-primary);
+      background-color: white;
+      border: var(--border-width, 2px) solid var(--border-color, #000);
+      cursor: pointer;
+      transition: all 0.1s ease-in-out;
+    }
+
+    button:hover:not(:disabled) {
+      transform: translateY(-2px);
+      box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.5);
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button[x-variant="primary"] {
+      background-color: black;
+      color: white;
+    }
+
+    button[x-variant="primary"]:hover:not(:disabled) {
+      background-color: #333;
+    }
+
+    button[x-size="small"] {
+      padding: 0.5rem 0.5rem;
+    }
+  `;
+  @property()
+  size: ButtonSize = "medium";
+
+  @property()
+  type: ButtonType = "text";
+
+  @property({ attribute: true })
+  disabled = false;
+
+  @property({ attribute: true })
+  variant: VariantType = "none";
+
+  private onClick(e: Event) {
+    // If this is a "submit" button, then we need
+    // to handle execution as the shadow DOM prevents
+    // default mapping of the button to a parent form.
+    // https://www.hjorthhansen.dev/shadow-dom-and-forms/
+    //
+    // Probably should also handle keyboard events
+    // that can submit forms.
+    if (this.type === "submit") {
+      const form = this.closest("form");
+      if (!form) return;
+      e.preventDefault();
+      const pseudo = document.createElement("button");
+      pseudo.type = "submit";
+      pseudo.style.display = "none";
+      form.appendChild(pseudo);
+      pseudo.click();
+      pseudo.remove();
+    }
+  }
+
+  override render() {
+    return html`
+      <button
+        @click="${this.onClick}"
+        type="${this.type}"
+        ?disabled="${this.disabled}"
+        x-variant="${this.variant}"
+        x-size="${this.size}"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+globalThis.customElements.define("x-button", XButtonElement);

packages/shell/src/components/Button.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, svg } from "lit";
+import { css, html, LitElement } from "lit";
 import { property } from "lit/decorators.js";
 
 export class CTLogo extends LitElement {
@@ -13,29 +13,18 @@ export class CTLogo extends LitElement {
     }
   `;
 
-  @property({ type: Number })
+  @property()
   width = 32;
 
-  @property({ type: Number })
+  @property()
   height = 32;
 
-  @property({ type: String, attribute: "background-color" })
+  @property({ attribute: "background-color" })
   backgroundColor = "white";
 
-  @property({ type: String, attribute: "shape-color" })
+  @property({ attribute: "shape-color" })
   shapeColor = "black";
 
-  override attributeChangedCallback(
-    name: string,
-    old: string | null,
-    value: string | null,
-  ) {
-    super.attributeChangedCallback(name, old, value);
-    if (old !== value) {
-      this.requestUpdate();
-    }
-  }
-
   override render() {
     return html`
       <svg