feat: show chat pill

package.json

@@ -62,5 +62,8 @@
       "prettier --write"
     ]
   },
-  "packageManager": "pnpm@10.33.2"
+  "packageManager": "pnpm@10.33.2",
+  "dependencies": {
+    "@ayo-run/status-indicator": "^2.1.2"
+  }
 }

pnpm-lock.yaml

@@ -7,6 +7,10 @@ settings:
 importers:
 
   .:
+    dependencies:
+      '@ayo-run/status-indicator':
+        specifier: ^2.1.2
+        version: 2.1.2(web-component-base@4.1.2)
     devDependencies:
       '@astrojs/sitemap':
         specifier: ^3.7.2
@@ -139,6 +143,11 @@ packages:
     peerDependencies:
       astro: ^6
 
+  '@ayo-run/status-indicator@2.1.2':
+    resolution: {integrity: sha512-eXWCXveQBq69Eotizvq5jHawO4gtuQK6ZALZTMysDPrcqUFURu8aIH1aJSxg/hIgxqlghsY/f/rxeCqSxp7hmA==}
+    peerDependencies:
+      web-component-base: ^4.1.2
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -2688,6 +2697,9 @@ packages:
       vite:
         optional: true
 
+  web-component-base@4.1.2:
+    resolution: {integrity: sha512-Jti4FHgCcwtsFWJ+PPwFNhTm5AJVIHrTXDew0rk2Y3b8EChRIE5xr6fmUni43tOhc6w8HatvR3k+qnxjXr/7Mw==}
+
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -2841,6 +2853,10 @@ snapshots:
       astro: 6.3.1(@types/node@25.6.2)(jiti@2.7.0)(rollup@4.60.3)(yaml@2.8.4)
       esbuild: 0.27.7
 
+  '@ayo-run/status-indicator@2.1.2(web-component-base@4.1.2)':
+    dependencies:
+      web-component-base: 4.1.2
+
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-validator-identifier@7.28.5': {}
@@ -5840,6 +5856,8 @@ snapshots:
     optionalDependencies:
       vite: 7.3.3(@types/node@25.6.2)(jiti@2.7.0)(yaml@2.8.4)
 
+  web-component-base@4.1.2: {}
+
   web-namespaces@2.0.1: {}
 
   whatwg-encoding@3.1.1:

src/components/ChatLink.astro

@@ -0,0 +1,23 @@
+---
+import '../layouts/variables.css'
+---
+
+<a href="https://chat.ayo.run/join/7IKG-h3nW-pD1H">
+  <status-indicator id="chat-link" pulse status="positive">
+    Chat
+  </status-indicator>
+</a>
+
+<style>
+  status-indicator#chat-link {
+    display: inline-block;
+    padding: 5px 7px;
+    border: 1px solid var(--pill-border-color);
+    border-radius: var(--pill-border-radius);
+    font-size: var(--font-size-sm);
+
+    a {
+      text-decoration: none;
+    }
+  }
+</style>

src/components/Head.astro

@@ -54,4 +54,7 @@ const baseURL = Astro.site?.toString().slice(0, -1) // ?? 'https://ayo.ayco.io'
   <link rel="icon" href="favicon.svg" />
   <link rel="mask-icon" href="mask-icon.svg" color="#000000" />
   <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+
+  <!-- Web Components -->
+  <script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
 </head>

src/layouts/variables.css

@@ -26,4 +26,8 @@
   --bg-dark: #343a40;
   --bg-darker: #212529;
   --bg-darkest: #000;
+
+  --pill-border-color: rgba(255, 255, 255, 0.2);
+  --pill-border-radius: 40px;
+  --pill-padding: 8px 4px;
 }

src/pages/index.astro

@@ -5,6 +5,7 @@ import Footer from '../components/Footer.astro'
 import now from '../constants/now.json'
 
 import { Picture } from 'astro:assets'
+import ChatLink from '../components/ChatLink.astro'
 
 // fetch mastodon account
 const response = await fetch(
@@ -37,10 +38,13 @@ const avatarSize = 150
           Hi, I'm <span class="heavy-text">Ayo</span>!
         </h1>
         <!--a href="https://forms.ayo.run/form/tnz7FybY" class="now-wrapper"-->
-        <a href="/now" class="now-wrapper">
+
+        <a href="/now" class="now-wrapper pill">
           <span class="now-label">now</span>
           <span class="status">{now.title}</span>
         </a>
+
+        <ChatLink class="pill" />
       </div>
     </div>
   </section>
@@ -86,6 +90,10 @@ const avatarSize = 150
     color: white;
   }
 
+  .pill {
+    margin-right: 0.5rem;
+  }
+
   .now-wrapper {
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 40px;