From 505b7ece5cdaed6165478a899681351dfc365a80 Mon Sep 17 00:00:00 2001
From: Roman Mazur <roman.mazur@hotmail.com>
Date: Fri, 22 Mar 2024 14:10:18 +0100
Subject: [PATCH] Editor controls UX improvements

---
 components/Editor/EditorControls.tsx | 160 ++++++++++++++++-----------
 components/KBar/Button.tsx           |  10 +-
 2 files changed, 106 insertions(+), 64 deletions(-)

diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
index 5159018..b6abaf3 100644
--- a/components/Editor/EditorControls.tsx
+++ b/components/Editor/EditorControls.tsx
@@ -1,11 +1,11 @@
-import { useMemo, useRef, useId } from 'react'
+import { useMemo, useRef, useState } from 'react'
 
-import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
+import { RiLinksLine, RiQuestionLine, RiFileCodeLine } from '@remixicon/react'
 import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
-import Select, { OnChangeValue } from 'react-select'
-import examples from 'components/Editor/examples'
+import { OnChangeValue } from 'react-select'
 
+import examples from 'components/Editor/examples'
 import { Button, Input } from 'components/ui'
 
 type SelectOption = {
@@ -39,6 +39,7 @@ const EditorControls = ({
   onShowArgumentsHelper,
 }: EditorControlsProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [isExampleSelectorOpen, setIsExampleSelectorOpen] = useState(false)
 
   const actions = [
     {
@@ -71,7 +72,7 @@ const EditorControls = ({
 
   const CairoNameExamples = useMemo(
     () => [
-      'Default',
+      'Simple',
       'Variables & mutability',
       'Type casting',
       'Control flow',
@@ -88,75 +89,110 @@ const EditorControls = ({
     label: CairoNameExamples[i],
   }))
 
-  const exampleNameValue = useMemo(
-    () => ({
-      value: exampleName,
-      label: CairoNameExamples[exampleName],
-    }),
-    [CairoNameExamples, exampleName],
-  )
+  const onExampleSelectorItemClick = (option: SelectOption) => {
+    setIsExampleSelectorOpen(false)
+    handleChangeExampleOption(option)
+  }
 
   return (
-    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
-      <div className="flex flex-col md:flex-row md:gap-x-4 gap-y-2 md:gap-y-0 mb-4 md:mb-0">
+    <div className="flex flex-row items-center justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
+      <div className="flex flex-row">
         <Button
           onClick={onCopyPermalink}
           transparent
           padded={false}
           tooltip="Share permalink [p]"
           tooltipId="share-permalink"
+          className="p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none"
         >
-          <span className="inline-block mr-4 select-all">
-            <RiLinksLine size={16} className="text-indigo-500 mr-1" />
-          </span>
+          <RiLinksLine size={16} />
         </Button>
+
+        <div className="relative">
+          <Button
+            onClick={() => setIsExampleSelectorOpen((prev) => !prev)}
+            transparent
+            padded={false}
+            tooltip="Change Cairo code example"
+            tooltipId="change-cairo-example"
+            className={`p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none ${cn(
+              {
+                'bg-indigo-100': isExampleSelectorOpen,
+              },
+            )}`}
+          >
+            <RiFileCodeLine size={16} />
+          </Button>
+
+          {isExampleSelectorOpen && (
+            <ul
+              className="absolute left-0 bottom-0 z-20 mb-10 w-72 border-0 border-slate-200 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-gray-200 focus:outline-none"
+              tabIndex={-1}
+              role="listbox"
+              aria-labelledby="listbox-label"
+              aria-activedescendant="listbox-option-0"
+            >
+              <li className="p-4 border-l-2 border-white text-2xs text-gray-400 uppercase dark:text-gray-600">
+                Cairo Examples
+              </li>
+              {examplesOptions.map((option, idx) => (
+                <li
+                  key={option.value}
+                  className="text-gray-900 dark:text-gray-200 border-l-2 border-white cursor-pointer select-none p-4 text-sm hover:bg-gray-50 dark:hover:bg-black-50 hover:border-indigo-500"
+                  id={`listbox-option-${idx}`}
+                  role="option"
+                  aria-selected={option.value === exampleName}
+                  onKeyDown={(e) =>
+                    e.key === 'Enter' && onExampleSelectorItemClick(option)
+                  }
+                  onClick={() => onExampleSelectorItemClick(option)}
+                >
+                  <div className="flex flex-col">
+                    <p>{option.label}</p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
       </div>
-      <div className="w-full md:w-60 lg:mr-20">
-        <Select
-          isSearchable={false}
-          classNamePrefix="select"
-          menuPlacement="auto"
-          value={exampleNameValue}
-          options={examplesOptions}
-          instanceId={useId()}
-          onChange={handleChangeExampleOption}
-          isDisabled={isCompileDisabled}
+
+      <div className="flex flex-row grow gap-x-2 items-center justify-end">
+        <Input
+          ref={inputRef}
+          rightIcon={
+            <button onClick={onShowArgumentsHelper}>
+              <RiQuestionLine
+                size={20}
+                className="text-gray-400 hover:text-gray-500"
+              />
+            </button>
+          }
+          onChange={(e) => {
+            onProgramArgumentsUpdate(e.target.value)
+          }}
+          readOnly={isCompileDisabled}
+          value={programArguments}
+          placeholder={`Program arguments`}
+          className={cn('max-w-64 border bg-gray-200 dark:bg-gray-800 ', {
+            'dark:border-gray-800 border-gray-200': areProgramArgumentsValid,
+            'border-red-500': !areProgramArgumentsValid,
+          })}
+          inputClassName={cn({
+            'text-red-500': !areProgramArgumentsValid,
+          })}
         />
-      </div>
-      <Input
-        ref={inputRef}
-        rightIcon={
-          <button onClick={onShowArgumentsHelper}>
-            <RiQuestionLine
-              size={20}
-              className="text-gray-400 hover:text-gray-500"
-            />
-          </button>
-        }
-        onChange={(e) => {
-          onProgramArgumentsUpdate(e.target.value)
-        }}
-        readOnly={isCompileDisabled}
-        value={programArguments}
-        placeholder={`Program arguments`}
-        className={cn('grow border bg-gray-200 dark:bg-gray-800 ', {
-          'dark:border-gray-800 border-gray-200': areProgramArgumentsValid,
-          'border-red-500': !areProgramArgumentsValid,
-        })}
-        inputClassName={cn({
-          'text-red-500': !areProgramArgumentsValid,
-        })}
-      />
-
-      <div>
-        <Button
-          onClick={onCompileRun}
-          disabled={isCompileDisabled || !areProgramArgumentsValid}
-          size="sm"
-          contentClassName="justify-center"
-        >
-          Run
-        </Button>
+
+        <div>
+          <Button
+            onClick={onCompileRun}
+            disabled={isCompileDisabled || !areProgramArgumentsValid}
+            size="sm"
+            contentClassName="justify-center"
+          >
+            Run
+          </Button>
+        </div>
       </div>
     </div>
   )
diff --git a/components/KBar/Button.tsx b/components/KBar/Button.tsx
index 7e216b8..ee6fac1 100644
--- a/components/KBar/Button.tsx
+++ b/components/KBar/Button.tsx
@@ -5,6 +5,7 @@ import { useKBar } from 'kbar'
 import { isMac } from 'util/browser'
 
 import { Button } from 'components/ui'
+import { RiCommandLine } from '@remixicon/react'
 
 const KBarButton = () => {
   const { query } = useKBar()
@@ -27,8 +28,13 @@ const KBarButton = () => {
       outline
       padded={false}
     >
-      {/* {isMac && <Icon name="command-line" className="mr-1" />} */}
-      {isMacUser ? <span>Cmd + K</span> : <span>Ctrl + K</span>}
+      {isMacUser ? (
+        <span className="flex flex-row">
+          <RiCommandLine size={16} className="mr-0.5" />K
+        </span>
+      ) : (
+        <span>Ctrl + K</span>
+      )}
     </Button>
   )
 }