V2.2

backend/server.js

@@ -144,8 +144,9 @@ async function getCards(ctx) {
     )
   );
   const files = lanesFiles.flat();
+  const mdFiles = files.filter(file => file.name.endsWith('.md'));
   const filesContents = await Promise.all(
-    files.map(async (file) => {
+    mdFiles.map(async (file) => {
       const content = await getContent(
         `${process.env.TASKS_DIR}/${file.lane}/${file.name}`
       );

frontend/package.json

@@ -11,14 +11,16 @@
   "license": "MIT",
   "devDependencies": {
     "vite": "^4.1.1",
-    "vite-plugin-solid": "^2.5.0",
-    "vite-plugin-pwa": "^0.17.5"
+    "vite-plugin-pwa": "^0.17.5",
+    "vite-plugin-solid": "^2.5.0"
   },
   "dependencies": {
     "@solid-primitives/scheduled": "^1.3.0",
+    "@solid-primitives/storage": "^2.1.2",
     "@stackoverflow/stacks-editor": "^0.8.7",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "serve-static": "^1.15.0",
+    "solid-icons": "^1.1.0",
     "solid-js": "^1.6.10"
   }
 }

frontend/public/stylesheets/index.css

@@ -1,4 +1,5 @@
-@import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
+/* Reset preset taken from https://keithjgrant.com/posts/2024/01/my-css-resets/ */
+@import url('./reset.css');
 @import url(./color-themes/adwaita.css);
 
 html,
@@ -49,15 +50,26 @@ strong {
   margin: 0;
 }
 
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+}
+
 .lanes {
   background: var(--app-background-color);
-  height: calc(100dvh - 57px);
   padding: 20px;
   box-sizing: border-box;
   display: flex;
   gap: 40px;
   overflow-x: auto;
-  scroll-snap-type: x mandatory;
+  flex-grow: 1;
+}
+
+@media (pointer: coarse) {
+  .lanes {
+    scroll-snap-type: x mandatory;
+  }
 }
 
 .lanes--has-title {
@@ -132,8 +144,8 @@ button.small {
 }
 
 .search-input {
-  display: flex;
-  flex-direction: column;
+  max-width: 232px;
+  width: 100%;
 }
 
 .app-header__group-item {
@@ -177,6 +189,13 @@ button.small {
   display: flex;
   align-items: center;
   gap: 6px;
+  overflow: hidden;
+}
+
+.lane__header-name {
+  min-width: 0;
+  word-wrap: break-word;
+  text-wrap: balance;
 }
 
 .lane__header-buttons {
@@ -305,33 +324,42 @@ button.small {
   width: 100dvw;
   height: 100dvh;
   background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.modal-bg--maximized {
+  padding: 0;
 }
 
 .modal {
   z-index: 2;
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 90%;
-  height: 90%;
-  max-width: 960px;
-  max-height: 819px;
+  width: 100%;
+  height: 100%;
   background: var(--modal-background-color);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   box-sizing: border-box;
   border-radius: 5px;
   padding: 12px;
   text-align: left;
 }
 
+.modal:not(.modal--maximized) {
+  max-width: 960px;
+  max-height: 819px;
+}
+
 .modal__toolbar {
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 12px;
+  /* flex-direction: column; */
 }
 
 .modal__toolbar-name-input {
@@ -341,18 +369,29 @@ button.small {
 }
 
 .modal__toolbar-name {
-  flex-grow: 1;
+  /* https://stackoverflow.com/a/36247448 */
+  min-width: 0;
+  word-wrap: break-word;
+  text-wrap: balance;
   display: inline-block;
-  width: calc(100% - 50px);
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.modal__toolbar-close-btn {
+.modal__toolbar-btns {
+  flex-grow: 0;
+  display: flex;
+  gap: 8px;
+}
+
+.modal__toolbar-btn {
   width: 35px;
   height: 35px;
   padding: 0;
   font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .editor-toolbar a::before {

frontend/public/stylesheets/reset.css

@@ -0,0 +1,36 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+body {
+	margin: unset;
+}
+
+button,
+input,
+textarea,
+select {
+	font: inherit;
+}
+
+img,
+picture,
+svg,
+canvas {
+	display: block;
+	max-inline-size: 100%;
+	block-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}

frontend/src/App.jsx

@@ -21,6 +21,7 @@ import { CardName } from "./components/card-name";
 function App() {
   const [lanes, setLanes] = createSignal([]);
   const [cards, setCards] = createSignal([]);
+  // TODO Use makePersisted for sort and sortDirection 
   const [sort, setSort] = createSignal(getDefaultFromLocalStorage("sort"));
   const [sortDirection, setSortDirection] = createSignal(
     getDefaultFromLocalStorage("sortDirection")

frontend/src/components/expanded-card.jsx

@@ -3,14 +3,18 @@ import {
   createSignal,
   onMount,
   createMemo,
+  onCleanup,
 } from "solid-js";
 import { api } from "../api";
 import { StacksEditor } from "@stackoverflow/stacks-editor";
 import "@stackoverflow/stacks-editor/dist/styles.css";
 import "@stackoverflow/stacks";
 import "@stackoverflow/stacks/dist/css/stacks.css";
-import { Menu } from './menu';
+import { Menu } from "./menu";
 import { getButtonCoordinates, handleKeyDown } from "../utils";
+import { makePersisted } from "@solid-primitives/storage";
+import { AiOutlineExpand } from "solid-icons/ai";
+import { IoClose } from "solid-icons/io";
 
 /**
  *
@@ -37,6 +41,18 @@ function ExpandedCard(props) {
   const [clickedTag, setClickedTag] = createSignal(null);
   const [showTagPopup, setShowTagPopup] = createSignal(false);
   const [showColorPopup, setShowColorPopup] = createSignal(false);
+  const [isMaximized, setIsMaximized] = makePersisted(createSignal("false"), {
+    storage: localStorage,
+    name: "isExpandedCardMaximized",
+  });
+  const [modeBtns, setModeBtns] = createSignal([]);
+  const [lastEditorModeUsed, setLastEditorModeUsed] = makePersisted(
+    createSignal("Markdown mode"),
+    {
+      storage: localStorage,
+      name: "lastEditorModeUsed",
+    }
+  );
 
   function focusOutOnEnter(e) {
     if (e.key === "Enter") {
@@ -265,26 +281,62 @@ function ExpandedCard(props) {
       editorClasses.push("disable-image-upload");
     }
     const editorEl = document.getElementById("editor-container");
-    const newEditor = new StacksEditor(
-      editorEl,
-      props.content || "",
-      {
-        classList: ["theme-system"],
-        targetClassList: editorClasses,
-        editorHelpLink: "https://github.com/BaldissaraMatheus/Tasks.md/issues",
-        imageUpload: { handler: uploadImage },
-      }
-    );
+    const newEditor = new StacksEditor(editorEl, props.content || "", {
+      classList: ["theme-system"],
+      targetClassList: editorClasses,
+      editorHelpLink: "https://github.com/BaldissaraMatheus/Tasks.md/issues",
+      imageUpload: { handler: uploadImage },
+    });
     setEditor(newEditor);
-    const editorTextArea = editorEl.childNodes[0].childNodes[2];
+    const toolbarEndGroupNodes = [
+      ...editorEl.childNodes[0].childNodes[1].childNodes[0].childNodes[1]
+        .childNodes[0].childNodes,
+    ];
+    const modeBtns = toolbarEndGroupNodes.filter((node) => node.title);
+    setModeBtns(modeBtns);
+  });
+
+  function handleClickEditorMode(e) {
+    setLastEditorModeUsed(e.currentTarget.title);
+  }
+
+  createEffect(() => {
+    if (!editor) {
+      return;
+    }
+    modeBtns().forEach((btn) =>
+      btn.addEventListener("click", handleClickEditorMode)
+    );
+    const modeBtn = modeBtns().find(
+      (node) => node.title === lastEditorModeUsed()
+    );
+    modeBtn.click();
+    const editorTextArea =
+      document.getElementById("editor-container").childNodes[0].childNodes[2];
     editorTextArea.focus();
   });
 
+  onCleanup(() => {
+    modeBtns().forEach((btn) =>
+      btn.removeEventListener("click", handleClickEditorMode)
+    );
+  });
+
   return (
     <>
-      <div className="modal-bg" onClick={props.onClose}>
-        <div className="modal" onClick={(event) => event.stopPropagation()}>
-          <div className="modal__toolbar">
+      <div
+        class={`modal-bg ${
+          isMaximized() === "true" ? "modal-bg--maximized" : ""
+        }`}
+        onClick={props.onClose}
+      >
+        <div
+          class={`modal ${
+            isMaximized() === "true" ? "modal--maximized" : ""
+          }`}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div class="modal__toolbar">
             {nameInputValue() !== null ? (
               <div class="input-and-error-msg">
                 <input
@@ -305,18 +357,28 @@ function ExpandedCard(props) {
               <h1
                 class="modal__toolbar-name"
                 onClick={startRenamingCard}
-                onKeyDown={e => handleKeyDown(e, startRenamingCard)}
+                onKeyDown={(e) => handleKeyDown(e, startRenamingCard)}
                 title="Click to rename card"
                 tabIndex="0"
               >
                 {props.name || "NO NAME"}
               </h1>
             )}
-            <button class="modal__toolbar-close-btn" onClick={props.onClose}>
-              X
-            </button>
+            <div class="modal__toolbar-btns">
+              <button
+                class="modal__toolbar-btn"
+                onClick={() =>
+                  setIsMaximized(isMaximized() === "true" ? "false" : "true")
+                }
+              >
+                <AiOutlineExpand size="25px" />
+              </button>
+              <button class="modal__toolbar-btn" onClick={props.onClose}>
+                <IoClose size="25px" />
+              </button>
+            </div>
           </div>
-          <div className="modal__tags">
+          <div class="modal__tags">
             {isCreatingNewTag() ? (
               <>
                 <input
@@ -340,13 +402,15 @@ function ExpandedCard(props) {
             <For each={props.tags || []}>
               {(tag) => (
                 <div
-                  className="tag tag--clicable"
+                  class="tag tag--clicable"
                   style={{
                     "background-color": tag.backgroundColor,
                     "border-color": tag.backgroundColor,
                   }}
                   onClick={(e) => handleTagClick(e, tag)}
-                  onKeyDown={e => handleKeyDown(e, () => handleTagClick(e, tag, true))}
+                  onKeyDown={(e) =>
+                    handleKeyDown(e, () => handleTagClick(e, tag, true))
+                  }
                   tabIndex={0}
                 >
                   <h5>{tag.name}</h5>
@@ -390,4 +454,4 @@ function ExpandedCard(props) {
   );
 }
 
-export default ExpandedCard;
+export default ExpandedCard;