playground: add share button (#356)

Author: hardfist

AGENTS.md

@@ -53,3 +53,11 @@ This document summarizes how to work on rslint effectively and consistently.
 - rslint loads `rslint.json`/`rslint.jsonc`; rules accept ESLint-style levels/options.
 - The linter walks each file once and dispatches to registered listeners; `--singleThreaded` disables parallelism.
 - Use `--format github` in CI to emit GitHub workflow annotations.
+
+## Website UI Guidelines (shadcn/ui)
+
+- Prefer shadcn/ui components from `@components/ui/*` (e.g., `button`, `toggle-group`, `alert`, `card`, `table`) over custom elements.
+- Minimize custom CSS. Use component variants, utility classes, and existing styles instead of adding new selectors when possible.
+- Icons: use `lucide-react` for consistent iconography (e.g., import `{ Share2Icon, CheckIcon } from 'lucide-react'`).
+- Keep layout simple: compose shadcn primitives and flex utilities for alignment instead of bespoke CSS blocks.
+- Only add custom CSS for domain‑specific visuals that primitives can’t express (e.g., AST tree expanders), and keep it scoped.

package.json

@@ -16,7 +16,7 @@
     "build": "pnpm -r --filter=!@typescript/api --filter=!@typescript/ast --filter='@rslint/test-tools...' --filter='rslint...' build",
     "build:npm": "zx scripts/build-npm.mjs",
     "build:website": "./scripts/apply-tsgo-patch.sh && pnpm --filter=!@typescript/api --filter=!@typescript/ast --filter=!@rslint/core --filter @rslint/website... -r build",
-    "check-spell": "pnpx cspell",
+    "check-spell": "pnpx cspell lint --no-progress --show-context",
     "version": "zx scripts/version.mjs",
     "release": "pnpm publish -r --no-git-checks",
     "publish:vsce": "zx scripts/publish-marketplace.mjs",

scripts/dictionary.txt

@@ -144,3 +144,4 @@ Prettier
 ESLint
 colocate
 co-locate
+shadcn

website/theme/components/Playground/ResultPanel.css

@@ -1,36 +1,15 @@
 .result-header {
   background: #f6f8fa;
-}
-
-.result-tabs {
   display: flex;
-  gap: 4px;
-  padding: 4px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px 0 8px;
 }
 
-.result-tab {
-  font-size: 0.8rem;
-  padding: 8px 12px;
-
-  background: transparent;
-  cursor: pointer;
-  border-radius: 6px 6px 0 0;
+/* Actions area pinned to top-right of the header */
+.result-actions {
   display: flex;
   align-items: center;
-  gap: 0.4em;
-}
-.result-tab:hover {
-  color: #24292f;
-  background: #e2e8f0;
-}
-.result-tab.active {
-  background: #fff;
-  color: #0969da;
-  border-bottom: 2px solid #0969da;
-  z-index: 1;
-}
-.tab-icon {
-  font-size: 1.1em;
 }
 
 .spinner {
@@ -69,41 +48,7 @@
   height: calc(100% - 8px);
 }
 
-/* Messages */
-.error-message,
-.success-message {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 6px;
-  margin-bottom: 1rem;
-}
-
-.error-message {
-  background: #ffebe9;
-  border: 1px solid #ff8182;
-  color: #cf222e;
-}
-
-.success-message {
-  background: #ddf4d8;
-  border: 1px solid #4ac26b;
-  color: #116329;
-}
-
-.error-icon,
-.success-icon {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.error-text,
-.success-text {
-  flex: 1;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
+/* Shadcn Alert used for messages */
 
 /* Diagnostics */
 .diagnostics-list {

website/theme/components/Playground/ResultPanel.tsx

@@ -1,4 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import { Button } from '@components/ui/button';
+import { Share2Icon, CheckIcon } from 'lucide-react';
+// Removed ToggleGroup in favor of Button to match Share style
+import { Alert, AlertDescription, AlertTitle } from '@components/ui/alert';
+import { AlertCircleIcon } from 'lucide-react';
 import './ResultPanel.css';
 
 export interface Diagnostic {
@@ -209,47 +214,77 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
     });
   }, [astTree]);
 
+  // Share button state and handler
+  const [shareCopied, setShareCopied] = useState(false);
+  async function copyShareUrl() {
+    try {
+      const url = window.location.href;
+      await copyToClipboard(url);
+      setShareCopied(true);
+      window.setTimeout(() => setShareCopied(false), 1500);
+    } catch (e) {
+      console.warn('Share failed', e);
+    }
+  }
+
   return (
     <div className="result-panel">
       <div className="result-header">
-        <div className="result-tabs">
-          <div
-            className={`result-tab ${activeTab === 'lint' ? 'active' : ''}`}
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant={activeTab === 'lint' ? 'default' : 'outline'}
+            size="sm"
             onClick={() => setActiveTab('lint')}
-            title="Errors"
+            aria-pressed={activeTab === 'lint'}
           >
             Errors
-          </div>
-          <div
-            className={`result-tab ${activeTab === 'ast' ? 'active' : ''}`}
+          </Button>
+          <Button
+            type="button"
+            variant={activeTab === 'ast' ? 'default' : 'outline'}
+            size="sm"
             onClick={() => setActiveTab('ast')}
-            title="AST"
+            aria-pressed={activeTab === 'ast'}
           >
-            AST(tsgo)
-          </div>
+            AST
+          </Button>
+        </div>
+        <div className="result-actions">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => copyShareUrl()}
+            title={shareCopied ? 'Copied link' : 'Copy shareable link'}
+          >
+            {shareCopied ? (
+              <CheckIcon className="size-4" />
+            ) : (
+              <Share2Icon className="size-4" />
+            )}
+            {shareCopied ? 'Copied' : 'Share'}
+          </Button>
         </div>
       </div>
 
       {initialized ? (
         <div className="result-content">
           {error && (
-            <div className="error-message">
-              <div className="error-icon">⚠️</div>
-              <div className="error-text">
-                <strong>Error:</strong> {error}
-              </div>
-            </div>
+            <Alert variant="destructive">
+              <AlertCircleIcon />
+              <AlertTitle>Error</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
           )}
 
           {!error && activeTab === 'lint' && (
             <div className="lint-results">
               {diagnostics.length === 0 ? (
-                <div className="success-message">
-                  <div className="success-icon">✅</div>
-                  <div className="success-text">
-                    <strong>No issues found!</strong> Your code looks good.
-                  </div>
-                </div>
+                <Alert>
+                  <AlertTitle>No issues found!</AlertTitle>
+                  <AlertDescription>Your code looks good.</AlertDescription>
+                </Alert>
               ) : (
                 <div className="diagnostics-list">
                   {diagnostics.map((diagnostic, index) => (
@@ -308,3 +343,24 @@ export const ResultPanel: React.FC<ResultPanelProps> = props => {
     </div>
   );
 };
+
+function copyToClipboard(text: string) {
+  if (navigator.clipboard?.writeText)
+    return navigator.clipboard.writeText(text);
+  return new Promise<void>((resolve, reject) => {
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'absolute';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      resolve();
+    } catch (e) {
+      reject(e);
+    }
+  });
+}