From d9f2fcc7331683a41ccdcedbddc1170d221a4676 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Tue, 20 May 2025 19:52:59 +0200
Subject: [PATCH 01/10] Installed npm, material UI

---
 package.json | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index caf6289..3fcbd01 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/roboto": "^5.2.5",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@mui/styled-engine-sc": "^7.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "styled-components": "^6.1.18",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

From bcaf957622365911d29e4d6c1050ef3a2bd55d6a Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Wed, 21 May 2025 14:05:05 +0200
Subject: [PATCH 02/10] Global state and toggel for completed task added

---
 src/App.jsx                 | 11 +++--
 src/components/TodoList.jsx | 97 +++++++++++++++++++++++++++++++++++++
 src/stores/useTodoStore.jsx | 33 +++++++++++++
 vite.config.js              | 15 ++++--
 4 files changed, 148 insertions(+), 8 deletions(-)
 create mode 100644 src/components/TodoList.jsx
 create mode 100644 src/stores/useTodoStore.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 5427540..d7af095 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,10 @@
+import { TodoList } from "./components/TodoList";
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
-  )
-}
+    <>
+      <TodoList />
+      <h1>React Boilerplate</h1>;
+    </>
+  );
+};
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
new file mode 100644
index 0000000..f753f4b
--- /dev/null
+++ b/src/components/TodoList.jsx
@@ -0,0 +1,97 @@
+import { useTodoStore } from "../stores/useTodoStore";
+
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Checkbox from "@mui/material/Checkbox";
+import IconButton from "@mui/material/IconButton";
+import CommentIcon from "@mui/icons-material/Comment";
+
+export const TodoList = () => {
+  const todos = useTodoStore((state) => state.tasks);
+  const toggleTaskCompletion = useTodoStore(
+    (state) => state.toggleTaskCompletion
+  );
+
+  return (
+    <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+      {todos.map((todo) => {
+        const labelId = `checkbox-list-label-${todo.id}`;
+
+        return (
+          <ListItem key={todo.id} disablePadding>
+            <ListItemButton role={undefined} dense>
+              <ListItemIcon>
+                <Checkbox
+                  edge='start'
+                  checked={todo.completed}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{ "aria-labelledby": labelId }}
+                  onChange={() => toggleTaskCompletion(todo.id)}
+                />
+              </ListItemIcon>
+              <ListItemText id={labelId} primary={todo.text} />
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+  );
+};
+
+// export default function CheckboxList() {
+//   const [checked, setChecked] = React.useState([0]);
+
+//   const handleToggle = (value) => () => {
+//     const currentIndex = checked.indexOf(value);
+//     const newChecked = [...checked];
+
+//     if (currentIndex === -1) {
+//       newChecked.push(value);
+//     } else {
+//       newChecked.splice(currentIndex, 1);
+//     }
+
+//     setChecked(newChecked);
+//   };
+
+//   return (
+//     <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+//       {[0, 1, 2, 3].map((value) => {
+//         const labelId = `checkbox-list-label-${value}`;
+
+//         return (
+//           <ListItem
+//             key={value}
+//             secondaryAction={
+//               <IconButton edge='end' aria-label='comments'>
+//                 <CommentIcon />
+//               </IconButton>
+//             }
+//             disablePadding
+//           >
+//             <ListItemButton
+//               role={undefined}
+//               onClick={handleToggle(value)}
+//               dense
+//             >
+//               <ListItemIcon>
+//                 <Checkbox
+//                   edge='start'
+//                   checked={checked.includes(value)}
+//                   tabIndex={-1}
+//                   disableRipple
+//                   inputProps={{ "aria-labelledby": labelId }}
+//                 />
+//               </ListItemIcon>
+//               <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
+//             </ListItemButton>
+//           </ListItem>
+//         );
+//       })}
+//     </List>
+//   );
+// }
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
new file mode 100644
index 0000000..894a059
--- /dev/null
+++ b/src/stores/useTodoStore.jsx
@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+const initialState = {
+  tasks: [
+    {
+      id: 1,
+      text: "My first message",
+      completed: false,
+    },
+  ],
+};
+
+export const useTodoStore = create((set) => ({
+  ...initialState,
+
+  createTask: (text) =>
+    set((state) => {
+      const newTask = {
+        id: Date.now(),
+        text,
+        completed: false,
+      };
+      return { tasks: [newTask, ...state.tasks] };
+    }),
+
+  toggleTaskCompletion: (id) => {
+    set((state) => ({
+      tasks: state.tasks.map((task) =>
+        task.id === id ? { ...task, completed: !task.completed } : task
+      ),
+    }));
+  },
+}));
diff --git a/vite.config.js b/vite.config.js
index ba24244..ecad9c9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,12 @@
-import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
+// <https://vitejs.dev/config/>
 export default defineConfig({
-  plugins: [react()]
-})
+  resolve: {
+    alias: {
+      "@mui/styled-engine": "@mui/styled-engine-sc",
+    },
+  },
+  plugins: [react()],
+});

From f0a4a45f40711a90845a4a8010f7798ff527beab Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Wed, 21 May 2025 15:19:38 +0200
Subject: [PATCH 03/10] Form and connection to TodoList

---
 src/App.jsx                 |  3 ++-
 src/components/TodoForm.jsx | 35 +++++++++++++++++++++++++++++++++++
 src/components/TodoList.jsx | 11 ++++++++++-
 3 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TodoForm.jsx

diff --git a/src/App.jsx b/src/App.jsx
index d7af095..e13b40d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,11 @@
 import { TodoList } from "./components/TodoList";
+import { TodoForm } from "./components/TodoForm";
 
 export const App = () => {
   return (
     <>
+      <TodoForm></TodoForm>
       <TodoList />
-      <h1>React Boilerplate</h1>;
     </>
   );
 };
diff --git a/src/components/TodoForm.jsx b/src/components/TodoForm.jsx
new file mode 100644
index 0000000..b2f9fd5
--- /dev/null
+++ b/src/components/TodoForm.jsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { useTodoStore } from "../stores/useTodoStore";
+
+import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+
+export const TodoForm = () => {
+  const [text, setText] = useState("");
+  const createTask = useTodoStore((state) => state.createTask);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!text.trim()) return; // hindrar tomma inputs
+    createTask(text.trim());
+    setText("");
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack direction='row' spacing={2}>
+        <TextField
+          label='New Task'
+          variant='outlined'
+          fullWidth
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+        <Button type='submit' variant='contained'>
+          Add
+        </Button>
+      </Stack>
+    </form>
+  );
+};
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index f753f4b..b6461f0 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -21,7 +21,16 @@ export const TodoList = () => {
         const labelId = `checkbox-list-label-${todo.id}`;
 
         return (
-          <ListItem key={todo.id} disablePadding>
+          <ListItem
+            key={todo.id}
+            secondaryAction={
+              // här kan vi göra en redigeringsknapp alt delete
+              <IconButton edge='end' aria-label='comments'>
+                <CommentIcon />
+              </IconButton>
+            }
+            disablePadding
+          >
             <ListItemButton role={undefined} dense>
               <ListItemIcon>
                 <Checkbox

From aef8e412399848f43c9fb7cbc0f592ef8a7bb4b3 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Wed, 21 May 2025 15:29:48 +0200
Subject: [PATCH 04/10] Delete task function added

---
 src/components/TodoForm.jsx |  2 +-
 src/components/TodoList.jsx | 61 ++++---------------------------------
 src/stores/useTodoStore.jsx |  6 ++++
 3 files changed, 13 insertions(+), 56 deletions(-)

diff --git a/src/components/TodoForm.jsx b/src/components/TodoForm.jsx
index b2f9fd5..83c60f6 100644
--- a/src/components/TodoForm.jsx
+++ b/src/components/TodoForm.jsx
@@ -27,7 +27,7 @@ export const TodoForm = () => {
           onChange={(e) => setText(e.target.value)}
         />
         <Button type='submit' variant='contained'>
-          Add
+          +
         </Button>
       </Stack>
     </form>
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index b6461f0..adc9910 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -14,6 +14,7 @@ export const TodoList = () => {
   const toggleTaskCompletion = useTodoStore(
     (state) => state.toggleTaskCompletion
   );
+  const deleteTask = useTodoStore((state) => state.deleteTask);
 
   return (
     <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
@@ -25,7 +26,11 @@ export const TodoList = () => {
             key={todo.id}
             secondaryAction={
               // här kan vi göra en redigeringsknapp alt delete
-              <IconButton edge='end' aria-label='comments'>
+              <IconButton
+                edge='end'
+                aria-label='comments'
+                onClick={() => deleteTask(todo.id)}
+              >
                 <CommentIcon />
               </IconButton>
             }
@@ -50,57 +55,3 @@ export const TodoList = () => {
     </List>
   );
 };
-
-// export default function CheckboxList() {
-//   const [checked, setChecked] = React.useState([0]);
-
-//   const handleToggle = (value) => () => {
-//     const currentIndex = checked.indexOf(value);
-//     const newChecked = [...checked];
-
-//     if (currentIndex === -1) {
-//       newChecked.push(value);
-//     } else {
-//       newChecked.splice(currentIndex, 1);
-//     }
-
-//     setChecked(newChecked);
-//   };
-
-//   return (
-//     <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
-//       {[0, 1, 2, 3].map((value) => {
-//         const labelId = `checkbox-list-label-${value}`;
-
-//         return (
-//           <ListItem
-//             key={value}
-//             secondaryAction={
-//               <IconButton edge='end' aria-label='comments'>
-//                 <CommentIcon />
-//               </IconButton>
-//             }
-//             disablePadding
-//           >
-//             <ListItemButton
-//               role={undefined}
-//               onClick={handleToggle(value)}
-//               dense
-//             >
-//               <ListItemIcon>
-//                 <Checkbox
-//                   edge='start'
-//                   checked={checked.includes(value)}
-//                   tabIndex={-1}
-//                   disableRipple
-//                   inputProps={{ "aria-labelledby": labelId }}
-//                 />
-//               </ListItemIcon>
-//               <ListItemText id={labelId} primary={`Line item ${value + 1}`} />
-//             </ListItemButton>
-//           </ListItem>
-//         );
-//       })}
-//     </List>
-//   );
-// }
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index 894a059..d06eeee 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -30,4 +30,10 @@ export const useTodoStore = create((set) => ({
       ),
     }));
   },
+
+  deleteTask: (id) => {
+    set((state) => ({
+      tasks: state.tasks.filter((task) => task.id !== id),
+    }));
+  },
 }));

From 9886b941e725382b7f5f45b15e31cbb2b5793555 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Sun, 1 Jun 2025 09:10:36 +0200
Subject: [PATCH 05/10] changed icon from comment to delete

---
 src/App.jsx                 |  4 +++-
 src/components/Header.jsx   | 28 ++++++++++++++++++++++++++++
 src/components/TodoForm.jsx |  8 ++++++--
 src/components/TodoList.jsx |  8 ++++----
 4 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Header.jsx

diff --git a/src/App.jsx b/src/App.jsx
index e13b40d..727d03a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,13 @@
+import { Header } from "./components/Header";
 import { TodoList } from "./components/TodoList";
 import { TodoForm } from "./components/TodoForm";
 
 export const App = () => {
   return (
     <>
-      <TodoForm></TodoForm>
+      <Header></Header>
       <TodoList />
+      <TodoForm></TodoForm>
     </>
   );
 };
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..13f68b5
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,28 @@
+import { useTodoStore } from "../stores/useTodoStore";
+import { Box, Typography } from "@mui/material";
+
+export const Header = () => {
+  const total = useTodoStore((state) => state.tasks.length);
+  const completed = useTodoStore(
+    (state) => state.tasks.filter((task) => task.completed).length
+  );
+
+  return (
+    <Box
+      component='header'
+      sx={{
+        textAlign: "center",
+        maxWidth: 600,
+        mx: "auto",
+        my: 4, // marginal ovan/under
+      }}
+    >
+      <Typography variant='h4' component='h1' gutterBottom>
+        To do app
+      </Typography>
+      <Typography variant='subtitle1'>
+        {completed} of {total} tasks completed
+      </Typography>
+    </Box>
+  );
+};
diff --git a/src/components/TodoForm.jsx b/src/components/TodoForm.jsx
index 83c60f6..e8d1895 100644
--- a/src/components/TodoForm.jsx
+++ b/src/components/TodoForm.jsx
@@ -18,9 +18,13 @@ export const TodoForm = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <Stack direction='row' spacing={2}>
+      <Stack
+        direction='row'
+        spacing={2}
+        sx={{ maxWidth: 600, width: "100%", mx: "auto" }}
+      >
         <TextField
-          label='New Task'
+          label='Add a task'
           variant='outlined'
           fullWidth
           value={text}
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index adc9910..1f5953a 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -7,7 +7,7 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Checkbox from "@mui/material/Checkbox";
 import IconButton from "@mui/material/IconButton";
-import CommentIcon from "@mui/icons-material/Comment";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 export const TodoList = () => {
   const todos = useTodoStore((state) => state.tasks);
@@ -17,7 +17,7 @@ export const TodoList = () => {
   const deleteTask = useTodoStore((state) => state.deleteTask);
 
   return (
-    <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}>
+    <List sx={{ maxWidth: 600, width: "100%", mx: "auto" }}>
       {todos.map((todo) => {
         const labelId = `checkbox-list-label-${todo.id}`;
 
@@ -28,10 +28,10 @@ export const TodoList = () => {
               // här kan vi göra en redigeringsknapp alt delete
               <IconButton
                 edge='end'
-                aria-label='comments'
+                aria-label='delete task'
                 onClick={() => deleteTask(todo.id)}
               >
-                <CommentIcon />
+                <DeleteIcon />
               </IconButton>
             }
             disablePadding

From dad1c25845b69208052faf89a08fab72169c929f Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Sun, 1 Jun 2025 09:22:30 +0200
Subject: [PATCH 06/10] added some styling

---
 src/App.jsx                 |   6 ++-
 src/components/Header.jsx   |  18 ++++---
 src/components/TodoForm.jsx |  35 +++++++-----
 src/components/TodoList.jsx | 105 ++++++++++++++++++++++--------------
 src/index.css               |   7 +++
 5 files changed, 110 insertions(+), 61 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 727d03a..1473c71 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,12 +2,14 @@ import { Header } from "./components/Header";
 import { TodoList } from "./components/TodoList";
 import { TodoForm } from "./components/TodoForm";
 
+import { Box } from "@mui/material";
+
 export const App = () => {
   return (
-    <>
+    <Box sx={{ minHeight: "100vh", bgcolor: "#f5f5f5", py: 4, px: 2 }}>
       <Header></Header>
       <TodoList />
       <TodoForm></TodoForm>
-    </>
+    </Box>
   );
 };
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 13f68b5..5d6ae49 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,5 +1,5 @@
 import { useTodoStore } from "../stores/useTodoStore";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Paper } from "@mui/material";
 
 export const Header = () => {
   const total = useTodoStore((state) => state.tasks.length);
@@ -8,21 +8,27 @@ export const Header = () => {
   );
 
   return (
-    <Box
+    <Paper
       component='header'
+      elevation={3}
       sx={{
-        textAlign: "center",
         maxWidth: 600,
         mx: "auto",
-        my: 4, // marginal ovan/under
+        my: 4,
+        p: 3,
+        borderRadius: 2,
+        textAlign: "center",
+        backgroundColor: "background.paper",
+        borderBottom: "2px solid",
+        borderColor: "divider",
       }}
     >
       <Typography variant='h4' component='h1' gutterBottom>
         To do app
       </Typography>
-      <Typography variant='subtitle1'>
+      <Typography variant='subtitle1' color='text.secondary'>
         {completed} of {total} tasks completed
       </Typography>
-    </Box>
+    </Paper>
   );
 };
diff --git a/src/components/TodoForm.jsx b/src/components/TodoForm.jsx
index e8d1895..cfd169b 100644
--- a/src/components/TodoForm.jsx
+++ b/src/components/TodoForm.jsx
@@ -1,9 +1,7 @@
 import { useState } from "react";
 import { useTodoStore } from "../stores/useTodoStore";
 
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
+import { TextField, Button, Stack, Paper } from "@mui/material";
 
 export const TodoForm = () => {
   const [text, setText] = useState("");
@@ -11,18 +9,26 @@ export const TodoForm = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!text.trim()) return; // hindrar tomma inputs
+    if (!text.trim()) return;
     createTask(text.trim());
     setText("");
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <Stack
-        direction='row'
-        spacing={2}
-        sx={{ maxWidth: 600, width: "100%", mx: "auto" }}
-      >
+    <Paper
+      component='form'
+      onSubmit={handleSubmit}
+      elevation={3}
+      sx={{
+        maxWidth: 600,
+        mx: "auto",
+        my: 2,
+        p: 2,
+        borderRadius: 2,
+        backgroundColor: "background.paper",
+      }}
+    >
+      <Stack direction='row' spacing={2}>
         <TextField
           label='Add a task'
           variant='outlined'
@@ -30,10 +36,15 @@ export const TodoForm = () => {
           value={text}
           onChange={(e) => setText(e.target.value)}
         />
-        <Button type='submit' variant='contained'>
+        <Button
+          type='submit'
+          variant='contained'
+          color='primary'
+          sx={{ px: 3 }}
+        >
           +
         </Button>
       </Stack>
-    </form>
+    </Paper>
   );
 };
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 1f5953a..da3d01f 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,12 +1,16 @@
 import { useTodoStore } from "../stores/useTodoStore";
 
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Checkbox from "@mui/material/Checkbox";
-import IconButton from "@mui/material/IconButton";
+import {
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Checkbox,
+  IconButton,
+  Paper,
+  Box,
+} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 
 export const TodoList = () => {
@@ -17,41 +21,60 @@ export const TodoList = () => {
   const deleteTask = useTodoStore((state) => state.deleteTask);
 
   return (
-    <List sx={{ maxWidth: 600, width: "100%", mx: "auto" }}>
-      {todos.map((todo) => {
-        const labelId = `checkbox-list-label-${todo.id}`;
+    <Paper
+      elevation={3}
+      sx={{
+        maxWidth: 600,
+        mx: "auto",
+        my: 2,
+        p: 2,
+        borderRadius: 2,
+        backgroundColor: "background.paper",
+      }}
+    >
+      <List>
+        {todos.map((todo) => {
+          const labelId = `checkbox-list-label-${todo.id}`;
 
-        return (
-          <ListItem
-            key={todo.id}
-            secondaryAction={
-              // här kan vi göra en redigeringsknapp alt delete
-              <IconButton
-                edge='end'
-                aria-label='delete task'
-                onClick={() => deleteTask(todo.id)}
-              >
-                <DeleteIcon />
-              </IconButton>
-            }
-            disablePadding
-          >
-            <ListItemButton role={undefined} dense>
-              <ListItemIcon>
-                <Checkbox
-                  edge='start'
-                  checked={todo.completed}
-                  tabIndex={-1}
-                  disableRipple
-                  inputProps={{ "aria-labelledby": labelId }}
-                  onChange={() => toggleTaskCompletion(todo.id)}
+          return (
+            <ListItem
+              key={todo.id}
+              sx={{ width: "100%" }}
+              disablePadding
+              secondaryAction={
+                <IconButton
+                  edge='end'
+                  aria-label='delete'
+                  onClick={() => deleteTask(todo.id)}
+                >
+                  <DeleteIcon />
+                </IconButton>
+              }
+            >
+              <ListItemButton role={undefined} dense sx={{ width: "100%" }}>
+                <ListItemIcon>
+                  <Checkbox
+                    edge='start'
+                    checked={todo.completed}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{ "aria-labelledby": labelId }}
+                    onChange={() => toggleTaskCompletion(todo.id)}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={labelId}
+                  primary={todo.text}
+                  sx={{
+                    textDecoration: todo.completed ? "line-through" : "none",
+                    color: todo.completed ? "text.disabled" : "text.primary",
+                  }}
                 />
-              </ListItemIcon>
-              <ListItemText id={labelId} primary={todo.text} />
-            </ListItemButton>
-          </ListItem>
-        );
-      })}
-    </List>
+              </ListItemButton>
+            </ListItem>
+          );
+        })}
+      </List>
+    </Paper>
   );
 };
diff --git a/src/index.css b/src/index.css
index f7c0aef..2335fa8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,10 @@
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 }
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

From d5767a6873c8ba8aca636eb84939e1de90b208f1 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Sun, 1 Jun 2025 10:02:35 +0200
Subject: [PATCH 07/10] local storage added

---
 src/components/Header.jsx   |  2 +-
 src/components/TodoList.jsx | 34 +++++++++++++++++++-
 src/stores/useTodoStore.jsx | 64 +++++++++++++++++--------------------
 3 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 5d6ae49..8b21d77 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -23,7 +23,7 @@ export const Header = () => {
         borderColor: "divider",
       }}
     >
-      <Typography variant='h4' component='h1' gutterBottom>
+      <Typography variant='h2' component='h1' gutterBottom>
         To do app
       </Typography>
       <Typography variant='subtitle1' color='text.secondary'>
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index da3d01f..f37e2be 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,5 +1,4 @@
 import { useTodoStore } from "../stores/useTodoStore";
-
 import {
   List,
   ListItem,
@@ -10,8 +9,10 @@ import {
   IconButton,
   Paper,
   Box,
+  Typography,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
+import InboxIcon from "@mui/icons-material/Inbox";
 
 export const TodoList = () => {
   const todos = useTodoStore((state) => state.tasks);
@@ -20,6 +21,36 @@ export const TodoList = () => {
   );
   const deleteTask = useTodoStore((state) => state.deleteTask);
 
+  if (todos.length === 0) {
+    return (
+      <Paper
+        elevation={3}
+        sx={{
+          maxWidth: 600,
+          mx: "auto",
+          my: 2,
+          p: 2,
+          borderRadius: 2,
+          backgroundColor: "background.paper",
+          textAlign: "center",
+          color: "text.secondary",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+        }}
+      >
+        <InboxIcon sx={{ fontSize: 60, color: "primary.main" }} />
+        <Typography variant='h6' component='p'>
+          There's nothing here...
+        </Typography>
+        <Typography variant='body2'>
+          Add your first task to get started.
+        </Typography>
+      </Paper>
+    );
+  }
+
   return (
     <Paper
       elevation={3}
@@ -60,6 +91,7 @@ export const TodoList = () => {
                     disableRipple
                     inputProps={{ "aria-labelledby": labelId }}
                     onChange={() => toggleTaskCompletion(todo.id)}
+                    aria-label='delete'
                   />
                 </ListItemIcon>
                 <ListItemText
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index d06eeee..25ce5c7 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -1,39 +1,35 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
-const initialState = {
-  tasks: [
-    {
-      id: 1,
-      text: "My first message",
-      completed: false,
-    },
-  ],
-};
-
-export const useTodoStore = create((set) => ({
-  ...initialState,
+export const useTodoStore = create(
+  persist(
+    (set) => ({
+      tasks: [],
 
-  createTask: (text) =>
-    set((state) => {
-      const newTask = {
-        id: Date.now(),
-        text,
-        completed: false,
-      };
-      return { tasks: [newTask, ...state.tasks] };
-    }),
+      createTask: (text) =>
+        set((state) => {
+          const newTask = {
+            id: Date.now(),
+            text,
+            completed: false,
+          };
+          return { tasks: [newTask, ...state.tasks] };
+        }),
 
-  toggleTaskCompletion: (id) => {
-    set((state) => ({
-      tasks: state.tasks.map((task) =>
-        task.id === id ? { ...task, completed: !task.completed } : task
-      ),
-    }));
-  },
+      toggleTaskCompletion: (id) =>
+        set((state) => ({
+          tasks: state.tasks.map((task) =>
+            task.id === id ? { ...task, completed: !task.completed } : task
+          ),
+        })),
 
-  deleteTask: (id) => {
-    set((state) => ({
-      tasks: state.tasks.filter((task) => task.id !== id),
-    }));
-  },
-}));
+      deleteTask: (id) =>
+        set((state) => ({
+          tasks: state.tasks.filter((task) => task.id !== id),
+        })),
+    }),
+    {
+      name: "todo-storage", // nyckeln i localStorage
+    }
+  )
+);

From f4d44d0406dd222ffc67e57d6dd3575a52e3b36b Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Sun, 1 Jun 2025 10:18:16 +0200
Subject: [PATCH 08/10] added a button to clear all completed task

---
 src/components/TodoList.jsx | 175 +++++++++++++++++++++---------------
 src/stores/useTodoStore.jsx |   7 +-
 2 files changed, 109 insertions(+), 73 deletions(-)

diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index f37e2be..34c1cd3 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -10,6 +10,7 @@ import {
   Paper,
   Box,
   Typography,
+  Button,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import InboxIcon from "@mui/icons-material/Inbox";
@@ -20,36 +21,54 @@ export const TodoList = () => {
     (state) => state.toggleTaskCompletion
   );
   const deleteTask = useTodoStore((state) => state.deleteTask);
+  const clearCompletedTasks = useTodoStore(
+    (state) => state.clearCompletedTasks
+  );
+  const uncompleted = todos.filter((t) => !t.completed);
+  const completed = todos.filter((t) => t.completed);
 
-  if (todos.length === 0) {
-    return (
-      <Paper
-        elevation={3}
-        sx={{
-          maxWidth: 600,
-          mx: "auto",
-          my: 2,
-          p: 2,
-          borderRadius: 2,
-          backgroundColor: "background.paper",
-          textAlign: "center",
-          color: "text.secondary",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 2,
-        }}
-      >
-        <InboxIcon sx={{ fontSize: 60, color: "primary.main" }} />
-        <Typography variant='h6' component='p'>
-          There's nothing here...
-        </Typography>
-        <Typography variant='body2'>
-          Add your first task to get started.
-        </Typography>
-      </Paper>
-    );
-  }
+  const renderTasks = (taskList) =>
+    taskList.map((todo) => {
+      const labelId = `checkbox-list-label-${todo.id}`;
+      return (
+        <ListItem
+          key={todo.id}
+          sx={{ width: "100%" }}
+          disablePadding
+          secondaryAction={
+            <IconButton
+              edge='end'
+              aria-label='delete task'
+              onClick={() => deleteTask(todo.id)}
+            >
+              <DeleteIcon />
+            </IconButton>
+          }
+        >
+          <ListItemButton role={undefined} dense sx={{ width: "100%" }}>
+            <ListItemIcon>
+              <Checkbox
+                edge='start'
+                checked={todo.completed}
+                tabIndex={-1}
+                disableRipple
+                inputProps={{ "aria-labelledby": labelId }}
+                onChange={() => toggleTaskCompletion(todo.id)}
+                aria-label='task completed'
+              />
+            </ListItemIcon>
+            <ListItemText
+              id={labelId}
+              primary={todo.text}
+              sx={{
+                textDecoration: todo.completed ? "line-through" : "none",
+                color: todo.completed ? "text.disabled" : "text.primary",
+              }}
+            />
+          </ListItemButton>
+        </ListItem>
+      );
+    });
 
   return (
     <Paper
@@ -58,55 +77,67 @@ export const TodoList = () => {
         maxWidth: 600,
         mx: "auto",
         my: 2,
-        p: 2,
+        p: todos.length === 0 ? 2 : 2,
         borderRadius: 2,
         backgroundColor: "background.paper",
+        minHeight: 150,
       }}
     >
-      <List>
-        {todos.map((todo) => {
-          const labelId = `checkbox-list-label-${todo.id}`;
+      {todos.length === 0 ? (
+        <Box
+          sx={{
+            textAlign: "center",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          <InboxIcon sx={{ fontSize: 60, color: "primary.main" }} />
+          <Typography variant='h6'>There's nothing here...</Typography>
+          <Typography variant='body2'>
+            Add your first task to get started.
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          {uncompleted.length > 0 && (
+            <>
+              <Typography variant='h6' sx={{ mb: 1 }}>
+                Tasks
+              </Typography>
+              <List>{renderTasks(uncompleted)}</List>
+            </>
+          )}
 
-          return (
-            <ListItem
-              key={todo.id}
-              sx={{ width: "100%" }}
-              disablePadding
-              secondaryAction={
-                <IconButton
-                  edge='end'
-                  aria-label='delete'
-                  onClick={() => deleteTask(todo.id)}
+          {completed.length > 0 && (
+            <>
+              <Box
+                sx={{
+                  mt: 3,
+                  mb: 1,
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <Typography variant='h6' sx={{ mt: 3, mb: 1 }}>
+                  Completed
+                </Typography>
+                <Button
+                  size='small'
+                  color='error'
+                  onClick={clearCompletedTasks}
+                  sx={{ textTransform: "none" }}
                 >
-                  <DeleteIcon />
-                </IconButton>
-              }
-            >
-              <ListItemButton role={undefined} dense sx={{ width: "100%" }}>
-                <ListItemIcon>
-                  <Checkbox
-                    edge='start'
-                    checked={todo.completed}
-                    tabIndex={-1}
-                    disableRipple
-                    inputProps={{ "aria-labelledby": labelId }}
-                    onChange={() => toggleTaskCompletion(todo.id)}
-                    aria-label='delete'
-                  />
-                </ListItemIcon>
-                <ListItemText
-                  id={labelId}
-                  primary={todo.text}
-                  sx={{
-                    textDecoration: todo.completed ? "line-through" : "none",
-                    color: todo.completed ? "text.disabled" : "text.primary",
-                  }}
-                />
-              </ListItemButton>
-            </ListItem>
-          );
-        })}
-      </List>
+                  Clear all
+                </Button>
+              </Box>
+              <List>{renderTasks(completed)}</List>
+            </>
+          )}
+        </>
+      )}
     </Paper>
   );
 };
diff --git a/src/stores/useTodoStore.jsx b/src/stores/useTodoStore.jsx
index 25ce5c7..ff6ba72 100644
--- a/src/stores/useTodoStore.jsx
+++ b/src/stores/useTodoStore.jsx
@@ -27,9 +27,14 @@ export const useTodoStore = create(
         set((state) => ({
           tasks: state.tasks.filter((task) => task.id !== id),
         })),
+
+      clearCompletedTasks: () =>
+        set((state) => ({
+          tasks: state.tasks.filter((task) => !task.completed),
+        })),
     }),
     {
-      name: "todo-storage", // nyckeln i localStorage
+      name: "todo-storage",
     }
   )
 );

From 291262cfbeb60fa60710cb54399df2a4e5ae4088 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Sun, 1 Jun 2025 12:21:25 +0200
Subject: [PATCH 09/10] cleaned the code

---
 src/components/EmptyState.jsx | 18 ++++++++
 src/components/TaskItem.jsx   | 46 +++++++++++++++++++
 src/components/TodoList.jsx   | 85 ++++++++---------------------------
 3 files changed, 83 insertions(+), 66 deletions(-)
 create mode 100644 src/components/EmptyState.jsx
 create mode 100644 src/components/TaskItem.jsx

diff --git a/src/components/EmptyState.jsx b/src/components/EmptyState.jsx
new file mode 100644
index 0000000..f49da9c
--- /dev/null
+++ b/src/components/EmptyState.jsx
@@ -0,0 +1,18 @@
+import { Box, Typography } from "@mui/material";
+import InboxIcon from "@mui/icons-material/Inbox";
+
+export const EmptyState = () => (
+  <Box
+    sx={{
+      textAlign: "center",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: 2,
+    }}
+  >
+    <InboxIcon sx={{ fontSize: 60, color: "primary.main" }} />
+    <Typography variant='h6'>There's nothing here...</Typography>
+    <Typography variant='body2'>Add your first task to get started.</Typography>
+  </Box>
+);
diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx
new file mode 100644
index 0000000..6f74210
--- /dev/null
+++ b/src/components/TaskItem.jsx
@@ -0,0 +1,46 @@
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Checkbox,
+  IconButton,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+export const TaskItem = ({ todo, onToggle, onDelete }) => {
+  const labelId = `checkbox-list-label-${todo.id}`;
+
+  return (
+    <ListItem
+      disablePadding
+      secondaryAction={
+        <IconButton
+          edge='end'
+          aria-label='delete task'
+          onClick={() => onDelete(todo.id)}
+        >
+          <DeleteIcon />
+        </IconButton>
+      }
+    >
+      <ListItemButton dense sx={{ width: "100%" }}>
+        <ListItemIcon>
+          <Checkbox
+            checked={todo.completed}
+            onChange={() => onToggle(todo.id)}
+            inputProps={{ "aria-labelledby": labelId }}
+          />
+        </ListItemIcon>
+        <ListItemText
+          id={labelId}
+          primary={todo.text}
+          sx={{
+            textDecoration: todo.completed ? "line-through" : "none",
+            color: todo.completed ? "text.disabled" : "text.primary",
+          }}
+        />
+      </ListItemButton>
+    </ListItem>
+  );
+};
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
index 34c1cd3..c5203ba 100644
--- a/src/components/TodoList.jsx
+++ b/src/components/TodoList.jsx
@@ -1,19 +1,7 @@
 import { useTodoStore } from "../stores/useTodoStore";
-import {
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Checkbox,
-  IconButton,
-  Paper,
-  Box,
-  Typography,
-  Button,
-} from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { List, Paper, Box, Typography, Button } from "@mui/material";
 import InboxIcon from "@mui/icons-material/Inbox";
+import { TaskItem } from "./TaskItem";
 
 export const TodoList = () => {
   const todos = useTodoStore((state) => state.tasks);
@@ -24,51 +12,19 @@ export const TodoList = () => {
   const clearCompletedTasks = useTodoStore(
     (state) => state.clearCompletedTasks
   );
+
   const uncompleted = todos.filter((t) => !t.completed);
   const completed = todos.filter((t) => t.completed);
 
   const renderTasks = (taskList) =>
-    taskList.map((todo) => {
-      const labelId = `checkbox-list-label-${todo.id}`;
-      return (
-        <ListItem
-          key={todo.id}
-          sx={{ width: "100%" }}
-          disablePadding
-          secondaryAction={
-            <IconButton
-              edge='end'
-              aria-label='delete task'
-              onClick={() => deleteTask(todo.id)}
-            >
-              <DeleteIcon />
-            </IconButton>
-          }
-        >
-          <ListItemButton role={undefined} dense sx={{ width: "100%" }}>
-            <ListItemIcon>
-              <Checkbox
-                edge='start'
-                checked={todo.completed}
-                tabIndex={-1}
-                disableRipple
-                inputProps={{ "aria-labelledby": labelId }}
-                onChange={() => toggleTaskCompletion(todo.id)}
-                aria-label='task completed'
-              />
-            </ListItemIcon>
-            <ListItemText
-              id={labelId}
-              primary={todo.text}
-              sx={{
-                textDecoration: todo.completed ? "line-through" : "none",
-                color: todo.completed ? "text.disabled" : "text.primary",
-              }}
-            />
-          </ListItemButton>
-        </ListItem>
-      );
-    });
+    taskList.map((todo) => (
+      <TaskItem
+        key={todo.id}
+        todo={todo}
+        onToggle={toggleTaskCompletion}
+        onDelete={deleteTask}
+      />
+    ));
 
   return (
     <Paper
@@ -77,7 +33,7 @@ export const TodoList = () => {
         maxWidth: 600,
         mx: "auto",
         my: 2,
-        p: todos.length === 0 ? 2 : 2,
+        p: 2,
         borderRadius: 2,
         backgroundColor: "background.paper",
         minHeight: 150,
@@ -100,30 +56,27 @@ export const TodoList = () => {
           </Typography>
         </Box>
       ) : (
-        <>
+        <Box display='flex' flexDirection='column' gap={4}>
           {uncompleted.length > 0 && (
-            <>
+            <Box>
               <Typography variant='h6' sx={{ mb: 1 }}>
                 Tasks
               </Typography>
               <List>{renderTasks(uncompleted)}</List>
-            </>
+            </Box>
           )}
 
           {completed.length > 0 && (
-            <>
+            <Box>
               <Box
                 sx={{
-                  mt: 3,
                   mb: 1,
                   display: "flex",
                   justifyContent: "space-between",
                   alignItems: "center",
                 }}
               >
-                <Typography variant='h6' sx={{ mt: 3, mb: 1 }}>
-                  Completed
-                </Typography>
+                <Typography variant='h6'>Completed</Typography>
                 <Button
                   size='small'
                   color='error'
@@ -134,9 +87,9 @@ export const TodoList = () => {
                 </Button>
               </Box>
               <List>{renderTasks(completed)}</List>
-            </>
+            </Box>
           )}
-        </>
+        </Box>
       )}
     </Paper>
   );

From addff7e37dbd20bd3d11214c1a5d8c7984162918 Mon Sep 17 00:00:00 2001
From: llindallarsson <larsson.ll@hotmail.com>
Date: Mon, 2 Jun 2025 07:53:34 +0200
Subject: [PATCH 10/10] added wordbreake and whitespace to ListItemText

---
 src/components/TaskItem.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/TaskItem.jsx b/src/components/TaskItem.jsx
index 6f74210..0134535 100644
--- a/src/components/TaskItem.jsx
+++ b/src/components/TaskItem.jsx
@@ -38,6 +38,8 @@ export const TaskItem = ({ todo, onToggle, onDelete }) => {
           sx={{
             textDecoration: todo.completed ? "line-through" : "none",
             color: todo.completed ? "text.disabled" : "text.primary",
+            wordBreak: "break-word",
+            whiteSpace: "pre-wrap",
           }}
         />
       </ListItemButton>