ignore: share

packages/web/src/components/Share.tsx

@@ -203,7 +203,7 @@ function stripEnclosingTag(text: string): string {
 function getStatusText(status: [Status, string?]): string {
   switch (status[0]) {
     case "connected":
-      return "Connected"
+      return "Connected, waiting for messages..."
     case "connecting":
       return "Connecting..."
     case "disconnected":
@@ -688,31 +688,6 @@ export default function Share(props: {
       <div class={styles.header}>
         <div data-section="title">
           <h1>{store.info?.title}</h1>
-          <div>
-            <div data-section="date">
-              {data().created ? (
-                <span
-                  title={DateTime.fromMillis(
-                    data().created || 0,
-                  ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
-                >
-                  {DateTime.fromMillis(data().created || 0).toLocaleString(
-                    DateTime.DATE_MED,
-                  )}
-                </span>
-              ) : (
-                <span data-element-label data-placeholder>
-                  Started at &mdash;
-                </span>
-              )}
-            </div>
-            <p data-section="status">
-              <span data-status={connectionStatus()[0]}>&#9679;</span>
-              <span data-element-label>
-                {getStatusText(connectionStatus())}
-              </span>
-            </p>
-          </div>
         </div>
         <div data-section="row">
           <ul data-section="stats">
@@ -786,7 +761,7 @@ export default function Share(props: {
                 ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
               >
                 {DateTime.fromMillis(data().created || 0).toLocaleString(
-                  DateTime.DATE_MED,
+                  DateTime.DATETIME_MED
                 )}
               </span>
             ) : (
@@ -1789,6 +1764,17 @@ export default function Share(props: {
                 </For>
               )}
             </For>
+            <div data-section="part" data-part-type="connection-status">
+              <div data-section="decoration">
+                <span data-status={connectionStatus()[0]}></span>
+                <div></div>
+              </div>
+              <div data-section="content">
+                <span>
+                  {getStatusText(connectionStatus())}
+                </span>
+              </div>
+            </div>
           </div>
         </Show>
       </div>

packages/web/src/components/share.module.css

@@ -55,56 +55,21 @@
   }
 
   [data-section="title"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 3rem;
-
-    & > div {
-      flex: 0 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      align-items: flex-end;
 
-      [data-section="date"] {
-        span {
-          font-size: 0.875rem;
-          color: var(--sl-color-text-secondary);
-
-          &[data-placeholder] {
-            color: var(--sl-color-text-dimmed);
-          }
-        }
-      }
-
-      p[data-section="status"] {
-        flex: 0 0 auto;
-        display: flex;
-        gap: 0.375rem;
-        font-size: 0.75rem;
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 500;
+      line-height: 1.25;
+      letter-spacing: -0.05em;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
 
-        span:first-child {
-          color: var(--sl-color-divider);
-
-          &[data-status="connected"] {
-            color: var(--sl-color-green);
-          }
-          &[data-status="connecting"] {
-            color: var(--sl-color-orange);
-          }
-          &[data-status="disconnected"] {
-            color: var(--sl-color-divider);
-          }
-          &[data-status="reconnecting"] {
-            color: var(--sl-color-orange);
-          }
-          &[data-status="error"] {
-            color: var(--sl-color-red);
-          }
-        }
+      @media (max-width: 30rem) {
+        font-size: 1.25rem;
+        -webkit-line-clamp: 3;
       }
-
     }
   }
 
@@ -114,22 +79,6 @@
     gap: 0.375rem;
   }
 
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 500;
-    line-height: 1.25;
-    letter-spacing: -0.05em;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-
-    @media (max-width: 30rem) {
-      font-size: 1.25rem;
-      -webkit-line-clamp: 3;
-    }
-  }
-
   [data-section="stats"] {
     list-style-type: none;
     padding: 0;
@@ -169,6 +118,13 @@
       }
     }
   }
+
+  [data-section="time"] {
+    span {
+      color: var(--sl-color-text-dimmed);
+      font-size: 0.875rem;
+    }
+  }
 }
 
 .parts {
@@ -347,6 +303,44 @@
       }
     }
   }
+  [data-part-type="connection-status"] {
+    & > [data-section="decoration"] {
+      span:first-child {
+        flex: 0 0 auto;
+        display: block;
+        margin: 1px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: var(--sl-color-divider);
+
+        &[data-status="connected"] {
+          background-color: var(--sl-color-green);
+        }
+        &[data-status="connecting"] {
+          background-color: var(--sl-color-orange);
+        }
+        &[data-status="disconnected"] {
+          background-color: var(--sl-color-divider);
+        }
+        &[data-status="reconnecting"] {
+          background-color: var(--sl-color-orange);
+        }
+        &[data-status="error"] {
+          background-color: var(--sl-color-red);
+        }
+      }
+    }
+
+    & > [data-section="content"] {
+      span {
+        display: block;
+        line-height: 18px;
+        font-size: 0.875rem;
+        color: var(--sl-color-text-dimmed);
+      }
+    }
+  }
 }
 
 .message-text {