playground: Add left panel and use brand colors (astral-sh#5838)

playground/index.html

@@ -26,7 +26,6 @@
     <meta property="og:image" content="/Ruff.png" />
     <link rel="canonical" href="https://play.ruff.rs" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <script
       src="https://cdn.usefathom.com/script.js"
       data-site="XWUDIXNB"

playground/package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "check": "npm run lint && npm run tsc",
     "dev": "vite",
+    "dev:wasm": "wasm-pack build ../crates/ruff_wasm --dev --target web --out-dir ../../playground/src/pkg",
     "fmt": "prettier --cache -w .",
     "lint": "eslint --cache --ext .ts,.tsx src",
     "preview": "vite preview",

playground/src/Editor/AstralButton.tsx

@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+import classNames from "classnames";
+
+export default function AstralButton({
+  className,
+  children,
+  ...otherProps
+}: ButtonHTMLAttributes<any>) {
+  return (
+    <button
+      className={classNames(
+        "uppercase",
+        "ease-in-out",
+        "font-heading",
+        "transition-all duration-200",
+        "bg-radiate",
+        "text-black",
+        "hover:text-white",
+        "hover:bg-galaxy",
+        "outline-1",
+        "dark:outline",
+        "dark:hover:outline-white",
+        "rounded-md",
+        "tracking-[.08em]",
+        "text-sm",
+        "font-medium",
+        "enabled:hover:bg-galaxy",
+        className,
+      )}
+      {...otherProps}
+    >
+      {children}
+    </button>
+  );
+}

playground/src/Editor/Editor.tsx

@@ -13,6 +13,7 @@ import { persist, restore, stringify } from "./settings";
 import SettingsEditor from "./SettingsEditor";
 import SourceEditor from "./SourceEditor";
 import MonacoThemes from "./MonacoThemes";
+import SideBar from "./SideBar";
 
 type Tab = "Source" | "Settings";
 
@@ -111,26 +112,21 @@ export default function Editor() {
   }, []);
 
   return (
-    <main
-      className={
-        "h-full w-full flex flex-auto bg-ayu-background dark:bg-ayu-background-dark"
-      }
-    >
+    <main className="flex flex-col h-full bg-ayu-background dark:bg-ayu-background-dark">
       <Header
         edit={source.revision}
-        tab={tab}
         theme={theme}
         version={ruffVersion}
-        onChangeTab={setTab}
         onChangeTheme={setTheme}
         onShare={handleShare}
       />
 
       <MonacoThemes />
 
-      <div className={"mt-12 relative flex-auto"}>
+      <div className="flex flex-grow">
         {initialized ? (
           <>
+            <SideBar onSelectTool={(tool) => setTab(tool)} selected={tab} />
             <SourceEditor
               visible={tab === "Source"}
               source={source.pythonSource}

playground/src/Editor/Header.tsx

@@ -9,18 +9,14 @@ export type Tab = "Source" | "Settings";
 
 export default function Header({
   edit,
-  tab,
   theme,
   version,
-  onChangeTab,
   onChangeTheme,
   onShare,
 }: {
   edit: number;
-  tab: Tab;
   theme: Theme;
   version: string | null;
-  onChangeTab: (tab: Tab) => void;
   onChangeTheme: (theme: Theme) => void;
   onShare?: () => void;
 }) {
@@ -29,77 +25,56 @@ export default function Header({
       className={classNames(
         "w-full",
         "flex",
-        "items-center",
         "justify-between",
-        "flex-none",
         "pl-5",
-        "sm:pl-6",
+        "sm:pl-1",
         "pr-4",
         "lg:pr-6",
-        "absolute",
         "z-10",
         "top-0",
         "left-0",
         "-mb-px",
         "antialiased",
         "border-b",
         "border-gray-200",
-        "dark:border-gray-800",
+        "dark:border-b-radiate",
+        "dark:bg-galaxy",
       )}
     >
-      <div className="flex space-x-5">
-        <button
-          type="button"
-          className={classNames(
-            "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
-            tab === "Source"
-              ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
-          )}
-          onClick={() => onChangeTab("Source")}
+      <div className="py-4 pl-2">
+        <svg
+          width="136"
+          height="32"
+          viewBox="0 0 272 64"
+          className="fill-galaxy dark:fill-radiate"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <span
-            className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Source" ? "opacity-100" : "opacity-0",
-            )}
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.5 0C62.8807 0 64 1.11929 64 2.5V32.06C64 33.4407 62.8807 34.56 61.5 34.56H51.2V39.68H64V64H34.56V44.8H29.44V64H0V0H61.5ZM39.68 29.44V24.32H24.32V29.44H39.68ZM69.12 0H98.56V41.6H103.68V0H133.12V61.5C133.12 62.8807 132.001 64 130.62 64H71.62C70.2393 64 69.12 62.8807 69.12 61.5V0ZM202.24 0H145.86C144.479 0 143.36 1.11929 143.36 2.5V29.44H138.24V53.76H143.36V64H172.8V53.76H199.74C201.121 53.76 202.24 52.6407 202.24 51.26V29.44H172.8V24.32H202.24V0ZM214.98 0H271.36V24.32H241.92V29.44H271.36V51.26C271.36 52.6407 270.241 53.76 268.86 53.76H241.92V64H212.48V53.76H207.36V29.44H212.48V2.5C212.48 1.11929 213.599 0 214.98 0Z"
           />
-          Source
-        </button>
-        <button
-          type="button"
-          className={classNames(
-            "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
-            tab === "Settings"
-              ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
-          )}
-          onClick={() => onChangeTab("Settings")}
-        >
-          <span
-            className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Settings" ? "opacity-100" : "opacity-0",
-            )}
-          />
-          Settings
-        </button>
+        </svg>
       </div>
-      <div className={"flex items-center min-w-0"}>
+      <div className="flex items-center min-w-0">
         {version ? (
-          <div className={"hidden sm:flex items-center"}>
+          <div className="hidden sm:flex items-center">
             <VersionTag>v{version}</VersionTag>
           </div>
         ) : null}
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+        <Divider />
         <RepoButton />
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
-        <div className="hidden sm:block">
-          <ShareButton key={edit} onShare={onShare} />
-        </div>
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+        <Divider />
+        <ShareButton key={edit} onShare={onShare} />
+        <Divider />
         <ThemeButton theme={theme} onChange={onChangeTheme} />
       </div>
     </div>
   );
 }
+
+function Divider() {
+  return (
+    <div className="hidden sm:block mx-6 lg:mx-4 w-px h-8 bg-gray-200 dark:bg-gray-700" />
+  );
+}

playground/src/Editor/Icons.tsx

@@ -0,0 +1,49 @@
+// Icons from the [VS code icon set](https://github.com/microsoft/vscode-icons/).
+//
+// Icon-LICENSE:
+// MIT License
+//
+// Copyright (c) Microsoft Corporation.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE
+
+export function FileIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24">
+      <path d="M17.5 0H8.5L7 1.5V6H2.5L1 7.5V22.5699L2.5 24H14.5699L16 22.5699V18H20.7L22 16.5699V4.5L17.5 0ZM17.5 2.12L19.88 4.5H17.5V2.12ZM14.5 22.5H2.5V7.5H7V16.5699L8.5 18H14.5V22.5ZM20.5 16.5H8.5V1.5H16V6H20.5V16.5Z" />
+    </svg>
+  );
+}
+
+export function SettingsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.85 8.75L24 9.57996V14.42L19.85 15.25L22.2 18.77L18.77 22.2L15.25 19.85L14.42 24H9.57996L8.75 19.85L5.22998 22.2L1.80005 18.77L4.15002 15.25L0 14.42V9.57996L4.15002 8.75L1.80005 5.22998L5.22998 1.80005L8.75 4.15002L9.57996 0H14.42L15.25 4.15002L18.77 1.80005L22.2 5.22998L19.85 8.75ZM18.28 13.8199L22.28 13.01V11.01L18.28 10.2L17.74 8.90002L20.03 5.46997L18.6 4.04004L15.17 6.32996L13.87 5.79004L13.0601 1.79004H11.0601L10.25 5.79004L8.94995 6.32996L5.52002 4.04004L4.08997 5.46997L6.38 8.90002L5.83997 10.2L1.83997 11.01V13.01L5.83997 13.8199L6.38 15.12L4.08997 18.55L5.52002 19.98L8.94995 17.6899L10.25 18.23L11.0601 22.23H13.0601L13.87 18.23L15.17 17.6899L18.6 19.98L20.03 18.55L17.74 15.12L18.28 13.8199ZM10.0943 9.14807C10.6584 8.77118 11.3216 8.56995 12 8.56995C12.9089 8.57258 13.7798 8.93484 14.4225 9.57751C15.0652 10.2202 15.4274 11.0911 15.43 12C15.43 12.6784 15.2288 13.3416 14.8519 13.9056C14.475 14.4697 13.9394 14.9093 13.3126 15.1689C12.6859 15.4286 11.9962 15.4965 11.3308 15.3641C10.6654 15.2318 10.0543 14.9051 9.57457 14.4254C9.09488 13.9457 8.7682 13.3345 8.63585 12.6692C8.50351 12.0038 8.57143 11.3141 8.83104 10.6874C9.09065 10.0606 9.53029 9.52496 10.0943 9.14807ZM11.0499 13.4218C11.3311 13.6097 11.6618 13.71 12 13.71C12.2249 13.7113 12.4479 13.668 12.656 13.5825C12.8641 13.4971 13.0531 13.3712 13.2121 13.2122C13.3712 13.0531 13.497 12.8641 13.5825 12.656C13.668 12.4479 13.7113 12.2249 13.7099 12C13.7099 11.6618 13.6096 11.3311 13.4217 11.0499C13.2338 10.7687 12.9669 10.5496 12.6544 10.4202C12.3419 10.2907 11.9981 10.2569 11.6664 10.3229C11.3347 10.3889 11.03 10.5517 10.7909 10.7909C10.5517 11.03 10.3888 11.3347 10.3229 11.6664C10.2569 11.9981 10.2907 12.342 10.4202 12.6544C10.5496 12.9669 10.7687 13.2339 11.0499 13.4218Z"
+      />
+    </svg>
+  );
+}

playground/src/Editor/RepoButton.tsx

@@ -1,25 +1,24 @@
 export default function RepoButton() {
   return (
     <a
-      className={"hover:text-ayu-accent/70 text-ayu-accent"}
-      href={"https://github.com/astral-sh/ruff"}
-      target={"_blank"}
-      rel={"noreferrer"}
+      className="rounded-full"
+      href="https://github.com/astral-sh/ruff"
+      target="_blank"
+      rel="noreferrer"
     >
       <svg
-        xmlns={"http://www.w3.org/2000/svg"}
-        width={"24"}
-        height={"24"}
-        viewBox={"0 0 16 16"}
-        fill={"none"}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 16 16"
+        className="fill-black dark:fill-white"
       >
         <path
-          fillRule={"evenodd"}
-          clipRule={"evenodd"}
+          fillRule="evenodd"
+          clipRule="evenodd"
           d={
             "M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
           }
-          fill={"currentColor"}
         />
       </svg>
     </a>

playground/src/Editor/ShareButton.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import AstralButton from "./AstralButton";
 
 export default function ShareButton({ onShare }: { onShare?: () => void }) {
   const [copied, setCopied] = useState(false);
@@ -11,9 +12,9 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
   }, [copied]);
 
   return copied ? (
-    <button
+    <AstralButton
       type="button"
-      className="relative flex-none rounded-md text-sm font-semibold leading-6 py-1.5 px-3 cursor-auto text-ayu-accent shadow-copied dark:bg-ayu-accent/10"
+      className="relative flex-none leading-6 py-1.5 px-3 cursor-auto shadow-copied"
     >
       <span
         className="absolute inset-0 flex items-center justify-center invisible"
@@ -24,11 +25,11 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       <span className="" aria-hidden="false">
         Copied!
       </span>
-    </button>
+    </AstralButton>
   ) : (
-    <button
+    <AstralButton
       type="button"
-      className="relative flex-none rounded-md text-sm font-semibold leading-6 py-1.5 px-3 enabled:hover:bg-ayu-accent/70 bg-ayu-accent text-white shadow-sm dark:shadow-highlight/20 disabled:opacity-50"
+      className="relative flex-none leading-6 py-1.5 px-3 shadow-sm disabled:opacity-50"
       disabled={!onShare || copied}
       onClick={
         onShare
@@ -48,6 +49,6 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       <span className="invisible" aria-hidden="true">
         Copied!
       </span>
-    </button>
+    </AstralButton>
   );
 }