feat: add MemoFooter and MemoCompleteList components; enhance ListItem with strike-through for completed tasks

web/src/components/MemoView/MemoView.tsx

@@ -16,6 +16,7 @@ import { MEMO_CARD_BASE_CLASSES } from "./constants";
 import { useImagePreview } from "./hooks";
 import { computeCommentAmount, MemoViewContext } from "./MemoViewContext";
 import type { MemoViewProps } from "./types";
+import MemoFooter from "./components/MemoFooter";
 
 const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 <<<<<<< HEAD
@@ -181,7 +182,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
 >>>>>>> 89d43a2e (Developed Color Picker Feature for memos)
 
       <MemoBody compact={compact} />
-
+      <MemoFooter/>
       <PreviewImageDialog
         open={previewState.open}
         onOpenChange={setPreviewOpen}

web/src/components/MemoView/components/MemoCompleteList.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+
+function MemoCompleteList() {
+  return (
+    <section className="  flex items-center gap-3">
+        <div className=" flex items-center gap-2 ">
+            <span>Completed Task</span>
+        <Switch
+         defaultChecked
+         className="  [&>[data-slot=switch-thumb][data-state=unchecked]]:bg-mauve-400 [&>[data-slot=switch-thumb][data-state=checked]]:bg-white"
+         />
+         </div>
+        <Button  className=" not-hover:border-foreground not-hover:text-foreground bg-transparent border-2 transition-all ease-linear">Clear Completed</Button>
+    </section>
+  )
+}
+
+export default MemoCompleteList

web/src/components/MemoView/components/MemoFooter.tsx

@@ -0,0 +1,11 @@
+import MemoCompleteList from "./MemoCompleteList";
+
+function MemoFooter() {
+  return (
+<footer className=" w-full  mt-5 flex justify-end items-center">
+    <MemoCompleteList/>
+</footer>
+  );
+}
+
+export default MemoFooter;