Start implementing cockpit design from Figma (#42)

* Implement UI header according to the Figma design

* Update datatable to be closer to the Figma design

* Only show refresh button when a refresh fn is supplied

* Listeners page: use refresh button

* Make eslint happy

* Add search box to listener table

* Embed loading bar into datatable

* Update website title in listener page

* Use table refresh/loading indicators for stacklet list

* Always reserve space for the DT loading bar

* "Add stacklet" button

* Fix eslint warnings

* Replace material symbols with feather icons

* Delete colour definitions that Uno already provides

* Rename stackable brand colours

* Fix non-reactive icon

* Ignore innerhtml false positive

Author: nightkr

pnpm-lock.yaml

@@ -15,6 +15,7 @@
     "dev": "vite"
   },
   "devDependencies": {
+    "@types/feather-icons": "^4.29.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
     "@vitest/coverage-c8": "^0.31.1",
@@ -34,6 +35,7 @@
   "dependencies": {
     "@solidjs/router": "^0.8.2",
     "@unocss/reset": "^0.51.12",
+    "feather-icons": "^4.29.0",
     "openapi-fetch": "^0.2.0",
     "solid-js": "^1.7.4"
   }

web/package.json

@@ -0,0 +1,43 @@
+import { A } from '@solidjs/router';
+import { JSX } from 'solid-js';
+
+/// Special types of buttons that need specific callouts
+export type ButtonRole = 'primary';
+
+export interface VisualButtonProps {
+  children: JSX.Element;
+  role?: ButtonRole;
+}
+
+const buttonProps = (props: VisualButtonProps) => {
+  const roleClasses =
+    // buttonProps is only called within a reactive scope
+    // eslint-disable-next-line solid/reactivity
+    props.role === 'primary'
+      ? 'bg-stackable-blue-light hover-bg-stackable-blue-dark active-stackable-blue-dark border-stackable-blue-dark'
+      : 'bg-gray-700 hover-bg-gray-600 active-bg-gray-500 border-gray-600';
+
+  return {
+    class: `p-2 text-size-4 c-white rounded border-1 border-solid  cursor-pointer decoration-none ${roleClasses}`,
+  };
+};
+
+export interface ButtonProps extends VisualButtonProps {
+  onClick: () => void;
+}
+
+export const Button = (props: ButtonProps) => (
+  <button {...buttonProps(props)} onClick={() => props.onClick()}>
+    {props.children}
+  </button>
+);
+
+export interface ButtonLinkProps extends VisualButtonProps {
+  href: string;
+}
+
+export const ButtonLink = (props: ButtonLinkProps) => (
+  <A {...buttonProps(props)} href={props.href}>
+    {props.children}
+  </A>
+);

web/src/components/button.tsx

@@ -1,4 +1,7 @@
 import { For, JSX, Show, createMemo, createSignal } from 'solid-js';
+import { Button } from './button';
+import { SearchInput } from './form/search';
+import { LoadingBar } from './loading';
 
 export interface DataTableColumn<T> {
   label: string;
@@ -9,6 +12,14 @@ export interface DataTableColumn<T> {
 export interface DataTableProps<T> {
   columns: DataTableColumn<T>[];
   items: T[];
+
+  searchQuery?: string;
+  setSearchQuery?: (query: string) => void;
+
+  extraButtons?: JSX.Element;
+
+  refresh?: () => void;
+  isLoading?: boolean;
 }
 
 export function DataTable<T>(props: DataTableProps<T>): JSX.Element {
@@ -35,7 +46,20 @@ export function DataTable<T>(props: DataTableProps<T>): JSX.Element {
   };
 
   return (
-    <>
+    <div class='bg-gray-800 rounded-2 overflow-clip'>
+      <div class='p-4 flex flex-gap-4'>
+        <Show when={props.searchQuery !== undefined}>
+          <SearchInput
+            query={props.searchQuery || ''}
+            setQuery={(q) => props.setSearchQuery?.(q)}
+          />
+        </Show>
+        <div class='flex-grow' />
+        {props.extraButtons}
+        <Show when={props.refresh}>
+          <Button onClick={() => props.refresh?.()}>Refresh</Button>
+        </Show>
+      </div>
       <table class='font-sans border-collapse text-left w-full'>
         <thead class='text-xs uppercase text-gray-400 bg-gray-700'>
           <tr>
@@ -55,14 +79,21 @@ export function DataTable<T>(props: DataTableProps<T>): JSX.Element {
               )}
             </For>
           </tr>
+          <tr>
+            <th class='line-height-0 m-0 p-0' colspan={props.columns.length}>
+              <div classList={{ invisible: !props.isLoading }}>
+                <LoadingBar />
+              </div>
+            </th>
+          </tr>
         </thead>
         <tbody>
           <For each={sortedItems()}>
             {(item) => (
-              <tr class='bg-gray-800 border-b border-b-style-solid border-gray-700'>
+              <tr class='border-t border-t-style-solid border-gray-700'>
                 <For each={props.columns}>
                   {(col) => (
-                    <td class='px-4 py-3 font-medium text-gray-400'>
+                    <td class='px-4 py-3 font-medium text-white'>
                       {col.get(item)}
                     </td>
                   )}
@@ -72,7 +103,7 @@ export function DataTable<T>(props: DataTableProps<T>): JSX.Element {
           </For>
         </tbody>
       </table>
-    </>
+    </div>
   );
 }
 

web/src/components/datatable.tsx

@@ -0,0 +1,21 @@
+import { SearchSymbol } from '../symbols';
+
+interface SearchInputProps {
+  query: string;
+  setQuery: (query: string) => void;
+}
+export const SearchInput = (props: SearchInputProps) => {
+  return (
+    <label class='bg-gray-600 rounded flex flex-items-center c-gray-200'>
+      <div class='p-1'>
+        <SearchSymbol />
+      </div>
+      <input
+        class='inline flex-grow h-full b-none bg-transparent c-gray-200'
+        placeholder='Search'
+        value={props.query}
+        onInput={(event) => props.setQuery(event.currentTarget.value)}
+      />
+    </label>
+  );
+};

web/src/components/form/search.tsx

@@ -0,0 +1,41 @@
+import { A } from '@solidjs/router';
+import { ParentProps } from 'solid-js';
+import logo from '../resources/logo.png';
+
+interface NavItemProps {
+  href: string;
+}
+
+const NavItem = (props: ParentProps<NavItemProps>) => (
+  <li class='block h-auto ml-4'>
+    <A
+      href={props.href}
+      class='p-4 c-white flex flex-items-center h-full decoration-none bg-gray-900'
+      inactiveClass='bg-opacity-30 hover:bg-opacity-50'
+    >
+      {props.children}
+    </A>
+  </li>
+);
+
+export const Header = () => {
+  return (
+    <nav class='flex bg-gray-600 h-16 px-4'>
+      <h1 class='m-0 c-white'>
+        <A class='flex flex-items-center h-full' href='/'>
+          <img
+            src={logo}
+            elementtiming='logo'
+            fetchpriority='auto'
+            alt='Stackable'
+          />
+        </A>
+      </h1>
+      <ul class='flex-auto m-0 p-0 flex'>
+        <NavItem href='/stacklets'>Stacklets</NavItem>
+        <NavItem href='/listeners'>Listeners</NavItem>
+        <NavItem href='/stacks'>Stacks</NavItem>
+      </ul>
+    </nav>
+  );
+};

web/src/components/header.tsx

@@ -0,0 +1,9 @@
+export const LoadingBar = () => (
+  <svg class='h-1 w-full' viewBox='0 0 10 1' preserveAspectRatio='none'>
+    <title>Loading...</title>
+    <rect width='10' height='1' fill='#9CA3AF' />
+    <rect width='1' height='3' y='-1' fill='#111827'>
+      <animateMotion repeatCount='indefinite' dur='2s' path='M-1,0 L10,0' />
+    </rect>
+  </svg>
+);

web/src/components/loading.tsx

@@ -0,0 +1,14 @@
+import { FeatherIconNames, icons as featherIcons } from 'feather-icons';
+
+interface FeatherSymbolProps {
+  icon: FeatherIconNames;
+}
+const FeatherSymbol = (props: FeatherSymbolProps) => {
+  const icon = () => featherIcons[props.icon];
+  // Icon contents are provided statically by feather, and not influenced by user input
+  // eslint-disable-next-line solid/no-innerhtml
+  return <svg {...icon().attrs} innerHTML={icon().contents} />;
+};
+
+export const SearchSymbol = () => <FeatherSymbol icon='search' />;
+export const AddSymbol = () => <FeatherSymbol icon='plus' />;

web/src/components/symbols.tsx

@@ -0,0 +1,31 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { createMutable } from 'solid-js/store';
+
+const originalTitle = document.title;
+const titleStack = createMutable([() => originalTitle]);
+createEffect(() => {
+  /* console.debug('Updating title stack', titleStack); */
+  document.title = titleStack.map((x) => x()).join(' :: ');
+});
+
+interface TitleProps {
+  children: string;
+}
+export const Title = (props: TitleProps) => {
+  /* console.debug('Adding to title stack', props.children); */
+  const getTitle = () => props.children;
+  // titleStack is consumed in a reactive context, so this is valid
+  // eslint-disable-next-line solid/reactivity
+  titleStack.push(getTitle);
+  onCleanup(() => {
+    /* console.debug(`Removing from title stack`, props.children); */
+    const stackEntryIndex = titleStack.indexOf(getTitle);
+    if (stackEntryIndex === -1) {
+      throw new Error(
+        `Title stack entry for ${props.children} could not be found`,
+      );
+    }
+    titleStack.splice(stackEntryIndex, 1);
+  });
+  return <></>;
+};