docs: Soft overhaul of the example page look

apps/typegpu-docs/src/components/ControlPanel.tsx

@@ -1,5 +1,7 @@
 import cs from 'classnames';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import DiscordIconSvg from '../assets/discord-icon.svg';
+import GithubIconSvg from '../assets/github-icon.svg';
 import { useId, useState } from 'react';
 import { runWithCatchAtom } from '../utils/examples/currentSnackbarAtom.ts';
 import {
@@ -328,6 +330,18 @@ export function ControlPanel() {
           </div>
         </>
       )}
+
+      <div className="mt-auto hidden items-center justify-between pt-2 text-tameplum-800 text-xs md:flex">
+        <div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
+        <div className="flex items-center gap-3">
+          <a href="https://discord.gg/8jpfgDqPcM" target="_blank" rel="noreferrer">
+            <img src={DiscordIconSvg.src} className="opacity-75" alt="discord logo" />
+          </a>
+          <a href="https://github.com/software-mansion/TypeGPU" target="_blank" rel="noreferrer">
+            <img src={GithubIconSvg.src} className="opacity-75" alt="github logo" />
+          </a>
+        </div>
+      </div>
     </div>
   );
 }

apps/typegpu-docs/src/components/ExampleCard.tsx

@@ -2,6 +2,8 @@ import type { Example } from '../utils/examples/types.ts';
 import { ExampleLink } from './ExampleLink.tsx';
 
 export function ExampleCard({ example }: { example: Example }) {
+  const isDev = example.metadata.dev;
+
   return (
     <ExampleLink exampleKey={example.key} key={example.key}>
       <div className="flex h-36 items-center justify-center overflow-hidden bg-gray-100">
@@ -20,22 +22,12 @@ export function ExampleCard({ example }: { example: Example }) {
           <span className="font-semibold text-gray-400 text-lg">No thumbnail</span>
         )}
       </div>
-      <div className="p-3">
-        <h3 className="mb-2 font-semibold text-black text-lg">{example.metadata.title}</h3>
-        {((example.metadata.tags && example.metadata.tags.length > 0) || example.metadata.dev) && (
-          <div className="flex flex-wrap gap-1">
-            {example.metadata.dev && (
-              <span className="rounded-full bg-rose-700 px-2 py-1 text-white text-xs">DEV</span>
-            )}
-            {(example.metadata.tags ?? []).map((tag: string) => (
-              <span
-                key={tag}
-                className="rounded-full bg-indigo-100 px-2 py-1 text-indigo-800 text-xs"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
+      <div className="flex items-center justify-center gap-2 p-3">
+        <h3 className="font-semibold text-black text-lg">{example.metadata.title}</h3>
+        {isDev && (
+          <span className="shrink-0 rounded-full bg-red-600 px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest text-white">
+            dev
+          </span>
         )}
       </div>
     </ExampleLink>

apps/typegpu-docs/src/components/ExampleLayout.tsx

@@ -2,12 +2,11 @@ import { useSetAtom } from 'jotai';
 import type { ReactNode } from 'react';
 import { useId, useRef } from 'react';
 import CrossSvg from '../assets/cross.svg';
-import DiscordIconSvg from '../assets/discord-icon.svg';
-import GithubIconSvg from '../assets/github-icon.svg';
 import HamburgerSvg from '../assets/hamburger.svg';
 import {
   codeEditorShownAtom,
   experimentalExamplesShownAtom,
+  groupExamplesByCategoryAtom,
   menuShownAtom,
 } from '../utils/examples/exampleViewStateAtoms.ts';
 import { SearchableExampleList } from './SearchableExampleList.tsx';
@@ -52,14 +51,16 @@ function SideMenu() {
     experimentalExamplesShownAtom,
     true,
   );
+  const [groupByCategory, setGroupByCategory] = useHydratedAtom(groupExamplesByCategoryAtom, false);
   const scrollRef = useRef<HTMLDivElement>(null);
   const experimentalExamplesToggleId = useId();
+  const groupByCategoryToggleId = useId();
 
   return (
     <aside className="absolute inset-0 z-50 box-border flex w-full flex-col bg-white md:static md:w-75 md:rounded-2xl">
-      <header className="p-5">
+      <header className="px-5 py-3">
         <div className="grid place-items-center">
-          <a href="/TypeGPU" className="box-border grid h-20 cursor-pointer place-content-center">
+          <a href="/TypeGPU" className="box-border grid h-12 cursor-pointer place-content-center">
             <img className="w-40" src="/TypeGPU/typegpu-logo-light.svg" alt="TypeGPU Logo" />
           </a>
         </div>
@@ -74,22 +75,9 @@ function SideMenu() {
         <hr className="my-0 box-border w-full border-tameplum-100 border-t" />
       </div>
 
-      <div className="my-5 min-h-0 flex-1 overflow-y-auto px-5" ref={scrollRef}>
-        <section className="mb-5 space-y-2 border-tameplum-100 border-b pb-5">
-          <h1 className="font-medium text-lg">Welcome to examples page</h1>
-          <p className="text-sm">
-            Test out the power of our TypeScript library and get to know TypeGPU.
-          </p>
-          <a
-            href="/TypeGPU/why-typegpu"
-            className="bg-gradient-to-r from-gradient-purple-dark to-gradient-blue-dark bg-clip-text text-sm text-transparent underline"
-          >
-            Learn more about TypeGPU here
-          </a>
-        </section>
-
+      <div className="my-3 min-h-0 flex-1 overflow-y-auto px-5" ref={scrollRef}>
         <SearchableExampleList
-          excludeTags={experimentalShowing ? [] : ['experimental']}
+          excludeApis={experimentalShowing ? [] : ['~unstable']}
           scrollContainerRef={scrollRef}
         />
       </div>
@@ -98,28 +86,30 @@ function SideMenu() {
         <hr className="my-0 box-border w-full border-tameplum-100 border-t" />
       </div>
 
-      <label
-        htmlFor={experimentalExamplesToggleId}
-        className="flex cursor-pointer items-center justify-between gap-3 p-5 text-sm"
-      >
-        <span>Experimental examples</span>
-        <Toggle
-          id={experimentalExamplesToggleId}
-          checked={experimentalShowing}
-          onChange={(e) => setExperimentalShowing(e.target.checked)}
-        />
-      </label>
-
-      <div className="flex justify-between px-5 pb-5 text-tameplum-800 text-xs">
-        <div>&copy; {new Date().getFullYear()} Software Mansion S.A.</div>
-        <div className="flex items-center gap-3">
-          <a href="https://discord.gg/8jpfgDqPcM" target="_blank" rel="noreferrer">
-            <img src={DiscordIconSvg.src} className="opacity-75" alt="github logo" />
-          </a>
-          <a href="https://github.com/software-mansion/TypeGPU" target="_blank" rel="noreferrer">
-            <img src={GithubIconSvg.src} className="opacity-75" alt="discord logo" />
-          </a>
-        </div>
+      <div className="flex items-center gap-2 px-5 py-3 text-xs text-gray-600">
+        <label
+          htmlFor={experimentalExamplesToggleId}
+          className="flex flex-1 cursor-pointer items-center justify-between gap-2"
+        >
+          <span className="whitespace-nowrap">Experimental</span>
+          <Toggle
+            id={experimentalExamplesToggleId}
+            checked={experimentalShowing}
+            onChange={(e) => setExperimentalShowing(e.target.checked)}
+          />
+        </label>
+        <div className="h-4 w-px shrink-0 bg-tameplum-100" />
+        <label
+          htmlFor={groupByCategoryToggleId}
+          className="flex flex-1 cursor-pointer items-center justify-between gap-2"
+        >
+          <span className="whitespace-nowrap">Grouped</span>
+          <Toggle
+            id={groupByCategoryToggleId}
+            checked={groupByCategory}
+            onChange={(e) => setGroupByCategory(e.target.checked)}
+          />
+        </label>
       </div>
     </aside>
   );

apps/typegpu-docs/src/components/ExampleView.tsx

@@ -118,20 +118,20 @@ export function ExampleView({ example, common }: Props) {
           )}
 
           {codeEditorShown && (
-            <div className="absolute z-20 h-[calc(100%-2rem)] w-[calc(100%-2rem)] bg-tameplum-50 md:relative md:h-full md:w-full">
+            <div className="absolute z-20 h-[calc(100%-2rem)] w-[calc(100%-2rem)] overflow-hidden rounded-tl-xl bg-tameplum-50 md:relative md:h-full md:w-full">
               <div className="absolute inset-0 flex flex-col justify-between">
                 <div className="h-12 pt-16 md:pt-0">
-                  <div className="flex h-full overflow-x-auto border-gray-300">
+                  <div className="flex h-full gap-1 overflow-x-auto border-b border-tameplum-100 px-1">
                     {editorTabsList.map((fileName) => (
                       <button
                         key={fileName}
                         type="button"
                         onClick={() => setCurrentFilePath(fileName)}
                         className={cs(
-                          'text-nowrap rounded-t-lg rounded-b-none px-4 text-sm',
+                          'shrink-0 -mb-px h-full rounded-t-lg border-b-2 px-4 text-sm font-medium transition-colors',
                           currentFilePath === fileName
-                            ? 'bg-gradient-to-br from-gradient-purple to-gradient-blue text-white hover:from-gradient-purple-dark hover:to-gradient-blue-dark'
-                            : 'border-2 border-tameplum-100 bg-white hover:bg-tameplum-20',
+                            ? 'border-purple-500 bg-white text-purple-700 shadow-sm'
+                            : 'border-transparent bg-tameplum-100 text-tameplum-600 hover:border-tameplum-300 hover:bg-tameplum-200 hover:text-tameplum-900',
                         )}
                       >
                         {fileName}