Update container.jsx

src/components/services/widget/container.jsx

@@ -33,5 +33,5 @@ export default function Container({ error = false, children, service }) {
     }));
   }
 
-  return <div className="relative flex flex-row w-full">{visibleChildren}</div>;
+  return <div className="relative flex flex-row w-full">{visibleChildren.slice(0, 4)}</div>;
 }

src/components/tasklist/group.jsx

@@ -0,0 +1,13 @@
+import ErrorBoundary from "components/errorboundry";
+import List from "components/tasklist/list";
+
+export default function TaskListGroup({ group }) {
+  return (
+    <div key={group.name} className="flex-1">
+      <h2 className="text-theme-800 dark:text-theme-300 text-xl font-medium">{group.name}</h2>
+      <ErrorBoundary>
+        <List tasklist={group.tasklist} />
+      </ErrorBoundary>
+    </div>
+  );
+}

src/components/tasklist/item.jsx

@@ -0,0 +1,14 @@
+export default function Item({ task }) {
+  return (
+    <li key={task.title}>
+      <div className="flex block w-full text-left transition-all h-15 mb-3 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10">
+        <div className="flex-shrink-0 flex items-center justify-center w-11 bg-theme-500/10 dark:bg-theme-900/50 text-theme-700 hover:text-theme-700 dark:text-theme-200 text-sm font-medium rounded-l-md">
+          <input type="checkbox" className="bg-theme-500/10 text-sm font-medium rounded-l-m" id={task.title} checked={task.checked} readOnly/>
+        </div>
+        <div className="flex-1 flex items-center justify-between rounded-r-md ">
+          <div className="flex-1 grow pl-3 py-2 text-xs">{task.title}</div>
+        </div>
+      </div>
+    </li>
+  );
+}

src/components/tasklist/list.jsx

@@ -0,0 +1,11 @@
+import Item from "components/tasklist/item";
+
+export default function List({ tasklist }) {
+  return (
+    <ul className="mt-3 flex flex-col">
+      {tasklist.map((task) => (
+        <Item key={task.title} task={task} />
+      ))}
+    </ul>
+  );
+}

src/pages/api/tasklist.js

@@ -0,0 +1,5 @@
+import { tasklistResponse } from "utils/config/api-response";
+
+export default async function handler(req, res) {
+  res.send(await tasklistResponse());
+}

src/pages/index.jsx

@@ -10,6 +10,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
+import TasklistGroup from "components/tasklist/group";
 import Widget from "components/widgets/widget";
 import Revalidate from "components/toggles/revalidate";
 import createLogger from "utils/logger";
@@ -174,6 +175,7 @@ function Home({ initialSettings }) {
 
   const { data: services } = useSWR("/api/services");
   const { data: bookmarks } = useSWR("/api/bookmarks");
+  const { data: tasklist } = useSWR("/api/tasklist");
   const { data: widgets } = useSWR("/api/widgets");
 
   const servicesAndBookmarks = [...services.map(sg => sg.services).flat(), ...bookmarks.map(bg => bg.bookmarks).flat()]
@@ -294,6 +296,14 @@ function Home({ initialSettings }) {
           </div>
         )}
 
+        {tasklist?.length > 0 && (
+          <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, tasklist.length)}`}>
+            {tasklist.map((group) => (
+              <TasklistGroup key={group.name} group={group} />
+            ))}
+          </div>
+        )}
+
         {bookmarks?.length > 0 && (
           <div className={`grow flex flex-wrap pt-0 p-4 sm:p-8 gap-2 grid-cols-1 lg:grid-cols-2 lg:grid-cols-${Math.min(6, bookmarks.length)}`}>
             {bookmarks.map((group) => (

src/utils/config/api-response.js

@@ -46,6 +46,29 @@ export async function bookmarksResponse() {
   return bookmarksArray;
 }
 
+export async function tasklistResponse() {
+  checkAndCopyConfig("tasklist.yaml");
+
+  const tasklistYaml = path.join(process.cwd(), "config", "tasklist.yaml");
+  const rawFileContents = await fs.readFile(tasklistYaml, "utf8");
+  const fileContents = substituteEnvironmentVars(rawFileContents);
+  const tasklist = yaml.load(fileContents);
+
+  if (!tasklist) return [];
+
+  // map easy to write YAML objects into easy to consume JS arrays
+  const tasklistArray = tasklist.map((group) => ({
+    name: Object.keys(group)[0],
+    tasklist: group[Object.keys(group)[0]].map((entries) => ({
+      // id: Object.values(entries)[0].replaceAll(" ", "_"),
+      title: Object.values(entries)[0],
+      checked: Object.values(entries)[1],
+    })),
+  }));
+
+  return tasklistArray;
+}
+
 export async function widgetsResponse() {
   let configuredWidgets;