fix: drag n drop like trello in example

examples/waspello/ext/Main.css

@@ -83,7 +83,7 @@ code {
 /* Global stuff */
 
 textarea::placeholder {
-  color: #5e6c84;  
+  color: #5e6c84;
 }
 
 /* input:not([type=file]), textarea { */
@@ -224,11 +224,24 @@ button.open-add-list {
 .list-header {
   display: flex;
   align-items: center;
-
+  position: relative;
   padding: 6px 4px;
 }
 
+.list-header-target {
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
 .list-header-extras {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  z-index: 1;
 }
 
 .list-header-extras-menu {
@@ -416,7 +429,7 @@ textarea.card-composer-textarea {
 
 .board-header-text {
   color: #fff;
-  font-size: 18px; 
+  font-size: 18px;
   font-weight: 700;
 }
 

examples/waspello/ext/MainPage.js

@@ -169,12 +169,16 @@ const Lists = ({ lists, listIdToCardsMap }) => {
 
 const List = ({ list, index, cards }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const [isHeaderTargetShown, setIsHeaderTargetShown] = useState(true);
+  const textAreaRef = useRef(null);
 
   const handleListNameUpdated = async (listId, newName) => {
     try {
       await updateList({ listId, data: { name: newName } })
     } catch (err) {
       window.alert('Error while updating list name: ' + err.message)
+    } finally {
+      setIsHeaderTargetShown(true)
     }
   }
 
@@ -187,6 +191,11 @@ const List = ({ list, index, cards }) => {
     setIsPopoverOpen(false)
   }
 
+  const handleHeadingClicked = (e) => {
+    setIsHeaderTargetShown(false);
+    textAreaRef?.current?.focus();
+  };
+
   const ListMenu = () => {
     return (
       <div className='popover-menu'>
@@ -235,10 +244,19 @@ const List = ({ list, index, cards }) => {
         >
           <div className='list'>
             <div className='list-header'>
+            {isHeaderTargetShown ? (
+                <div
+                  class="list-header-target"
+                  onClick={(e) => handleHeadingClicked(e)}
+                ></div>
+              ) : (
+                <></>
+              )}
               <textarea
                 className='list-header-name mod-list-name'
                 onBlur={(e) => handleListNameUpdated(list.id, e.target.value)}
                 defaultValue={ list.name }
+                ref={textAreaRef}
               />
               <div className='list-header-extras'>
                 <Popover