Slight redesign of Shortcuts form

Yeah, still no Edit

src/components/shortcuts-settings.css

@@ -40,39 +40,20 @@
   cursor: pointer;
 }
 
-#shortcuts-settings-container form {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 16px;
-  background-color: var(--bg-faded-color);
-  border-radius: 16px;
+#shortcut-settings-form form > * {
 }
 
-#shortcuts-settings-container form header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-#shortcuts-settings-container form > * {
-  flex-basis: max(320px, 100%);
-  margin: 0;
-  padding: 0;
-}
-
-#shortcuts-settings-container form label {
+#shortcut-settings-form label {
   display: flex;
   flex-direction: row;
   gap: 8px;
   align-items: center;
 }
-#shortcuts-settings-container form label > span:first-child {
+#shortcut-settings-form label > span:first-child {
   flex-basis: 5em;
   text-align: right;
 }
-#shortcuts-settings-container form :is(input[type='text'], select) {
+#shortcut-settings-form :is(input[type='text'], select) {
   flex-grow: 1;
   flex-basis: 70%;
   flex-shrink: 1;

src/components/shortcuts-settings.jsx

@@ -9,6 +9,7 @@ import states from '../utils/states';
 
 import AsyncText from './AsyncText';
 import Icon from './icon';
+import Modal from './modal';
 
 const SHORTCUTS_LIMIT = 9;
 
@@ -161,6 +162,7 @@ function ShortcutsSettings() {
 
   const [lists, setLists] = useState([]);
   const [followedHashtags, setFollowedHashtags] = useState([]);
+  const [showForm, setShowForm] = useState(false);
 
   useEffect(() => {
     (async () => {
@@ -308,7 +310,35 @@ function ShortcutsSettings() {
             No shortcuts yet. Add one from the form below.
           </p>
         )}
-        <hr />
+        <p
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <span class="insignificant">
+            {shortcuts.length >= SHORTCUTS_LIMIT &&
+              `Max ${SHORTCUTS_LIMIT} shortcuts`}
+          </span>
+          <button
+            type="button"
+            disabled={shortcuts.length >= SHORTCUTS_LIMIT}
+            onClick={() => setShowForm(true)}
+          >
+            <Icon icon="plus" /> <span>Add shortcut</span>
+          </button>
+        </p>
+      </main>
+      {showForm && (
+        <Modal
+          class="light"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setShowForm(false);
+            }
+          }}
+        >
           <ShortcutForm
             disabled={shortcuts.length >= SHORTCUTS_LIMIT}
             lists={lists}
@@ -317,17 +347,29 @@ function ShortcutsSettings() {
               console.log('onSubmit', data);
               states.shortcuts.push(data);
             }}
+            onClose={() => setShowForm(false)}
           />
-      </main>
+        </Modal>
+      )}
     </div>
   );
 }
 
-export default ShortcutsSettings;
-function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
+function ShortcutForm({
+  type,
+  lists,
+  followedHashtags,
+  onSubmit,
+  disabled,
+  onClose = () => {},
+}) {
   const [currentType, setCurrentType] = useState(type);
   return (
-    <>
+    <div id="shortcut-settings-form" class="sheet">
+      <header>
+        <h2>Add shortcut</h2>
+      </header>
+      <main tabindex="-1">
         <form
           onSubmit={(e) => {
             // Construct a nice object from form
@@ -342,14 +384,9 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
             // Reset
             e.target.reset();
             setCurrentType(null);
+            onClose();
           }}
         >
-        <header>
-          <h3>Add a shortcut</h3>
-          <button type="submit" disabled={disabled}>
-            Add
-          </button>
-        </header>
           <p>
             <label>
               <span>Timeline</span>
@@ -405,7 +442,8 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
                       spellcheck={false}
                       pattern={pattern}
                     />
-                  {currentType === 'hashtag' && followedHashtags.length > 0 && (
+                    {currentType === 'hashtag' &&
+                      followedHashtags.length > 0 && (
                         <datalist id="followed-hashtags-datalist">
                           {followedHashtags.map((tag) => (
                             <option value={tag.name} />
@@ -417,7 +455,13 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
               );
             },
           )}
+          <button type="submit" class="block" disabled={disabled}>
+            Add
+          </button>
         </form>
-    </>
+      </main>
+    </div>
   );
 }
+
+export default ShortcutsSettings;