Add conflict resolution

Refactor into a Task provider

Author: alexrecuenco

package-lock.json

@@ -14,7 +14,7 @@ dist-ssr
 
 # Editor directories and files
 .vscode/*
-!.vscode/extensions.json
+!.vscode/*.json
 .idea
 .DS_Store
 *.suo

packages/frontend/.gitignore

@@ -0,0 +1,24 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Vite Dev Server",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": ["run", "dev"],
+            "env": {
+                "PORT": "5175"
+            },
+            "serverReadyAction": {
+                "action": "debugWithChrome",
+                "pattern": "Local:\\s+(https?://\\S+)",
+                "killOnServerStop": true,
+                "webRoot": "${workspaceFolder}"
+            }
+        }
+    ]
+}

packages/frontend/.vscode/launch.json

@@ -0,0 +1,3 @@
+{
+    "eslint.workingDirectories": ["../.."]
+}

packages/frontend/.vscode/settings.json

@@ -14,6 +14,7 @@
         "interface": "^1.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "zod": "^3.23.8"
     },
     "devDependencies": {

packages/frontend/package.json

@@ -41,6 +41,10 @@ p.error {
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  svg.loading {
+    animation: logo-spin infinite 1s linear;
+  }
+
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
@@ -64,142 +68,3 @@ p.error {
     flex-direction: column;
   }
 }
-
-.tasks {
-  .heading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1em;
-    padding: 2em;
-    transition: gap 300ms;
-    button {
-      border: none;
-      padding: 0.5em 1em;
-      font-size: large;
-      font-weight: bolder;
-      cursor: pointer;
-      transition: transform 300ms;
-      box-shadow: 0 0.5em 0.5em #646cff;
-    }
-
-    button.add {
-      background-color: #646cff;
-      color: #ffffff;
-    }
-
-    input {
-      border: none;
-      padding: 0.5em 1em;
-      font-size: large;
-      font-weight: bolder;
-      background-color: whitesmoke;
-      color: #ffffff;
-      transition:
-        transform 300ms,
-        background-color 300ms;
-    }
-
-    &:hover {
-      gap: 2.5em;
-      button {
-        transform: scale(1.05);
-      }
-      button:hover {
-        transform: scale(1.25);
-      }
-      input {
-        transform: scale(1.1);
-        background-color: #4158d0;
-      }
-    }
-  }
-
-  .items {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    padding: 2em;
-    gap: 2em;
-    .task {
-      display: flex;
-      padding: 1em;
-      height: 125px;
-      border-radius: 1.5em / 1em;
-      background: linear-gradient(
-        43deg,
-        #4158d0 0%,
-        #c850c0 30%,
-        #ffcc70 66%,
-        #ffffff 100%
-      );
-      font-weight: bolder;
-      font-size: large;
-      transition: transform 300ms;
-
-      .item {
-        input,
-        p {
-          margin: 0px;
-
-          padding: 1em;
-
-          height: 75%;
-          width: 75%;
-
-          background-color: transparent;
-          border: none;
-          border-radius: 16px;
-
-          color: black;
-          @media (prefers-color-scheme: light) {
-            color: whitesmoke;
-          }
-        }
-        input {
-          box-shadow: 0 0.1em 0.5em #ffffff;
-        }
-
-        p {
-          font-weight: 800;
-          display: table-cell;
-          vertical-align: middle;
-        }
-        justify-content: center;
-        align-items: center;
-
-        flex: 1;
-        padding: 1em;
-        display: flex;
-        transition: transform 300ms;
-      }
-
-      * {
-        /* debug */
-        /* border: 4px solid #4158d0; */
-      }
-
-      button.delete {
-        position: absolute;
-        min-width: 30px;
-        max-width: 30px;
-        width: 100%;
-        height: 30px;
-        max-height: 40px;
-        background-color: #d91010d7;
-        color: #ffffff;
-        padding: 0;
-        margin: 0;
-        z-index: 10;
-        transition: transform 300ms;
-      }
-
-      &:hover,
-      :hover {
-        transform: scale(1.1);
-        button:hover {
-          transform: scale(1.2);
-        }
-      }
-    }
-  }
-}

packages/frontend/src/App.css

@@ -1,6 +1,6 @@
 import './App.css';
 import reactLogo from './assets/react.svg';
-import { TaskWrapper } from './Tasks';
+import { TaskApp } from './tasks/Tasks';
 import viteLogo from '/vite.svg';
 
 function App() {
@@ -15,7 +15,7 @@ function App() {
         </a>
         <h1>Vite + React + Express + Multi-root</h1>
       </div>
-      <TaskWrapper />
+      <TaskApp />
     </>
   );
 }