project setup

2025-11-02 10:08:56 +01:00
commit 568838003e
174 changed files with 27100 additions and 0 deletions
@@ -0,0 +1,97 @@
+import { View, Text } from "react-native";
+import { Dialog, IconButton } from "react-native-paper";
+
+import { DialogContainer } from "@/components/ui/DialogContainer";
+import { Todo } from "@/store/models/Todo.model";
+import { StatusTableItem } from "@/components/ui/StatusTableItem";
+import { PriorityIndicator } from "@/components/ui/PriorityIndicator";
+import { SizeEnum } from "@/constants/sizeEnum";
+import { formatDate } from "@/utils/dateUtils";
+import { TodoComments } from "@/components/features/todos/TodoComments";
+import { useAppSelector } from "@/store/hooks";
+import { selectIsMobile } from "@/store/screen/screenSizeSlice";
+
+interface TodoDetailsModalProps {
+  visible: boolean;
+  todo: Todo;
+  onClose: () => void;
+}
+
+export const TodoDetailsModal = ({
+  visible,
+  todo,
+  onClose,
+}: TodoDetailsModalProps) => {
+  const isMobile = useAppSelector(selectIsMobile);
+
+  return (
+    <DialogContainer visible={visible} onDismiss={onClose}>
+      <Dialog.Title>
+        <View className="w-full flex-row items-center justify-between">
+          <View className="flex-1">
+            <Text className="pr-3">{todo.title}</Text>
+          </View>
+
+          <View
+            style={{
+              alignSelf: "flex-start",
+              alignItems: "center",
+              flexDirection: "row",
+            }}
+          >
+            <View className="flex-row items-center gap-2">
+              <StatusTableItem todoStatus={todo.status} />
+              <PriorityIndicator
+                priority={todo.priority}
+                size={SizeEnum.Small}
+              />
+            </View>
+
+            <IconButton
+              icon="close"
+              size={20}
+              onPress={onClose}
+              accessibilityLabel="Close dialog"
+              style={{ margin: 0 }}
+            />
+          </View>
+        </View>
+      </Dialog.Title>
+      <Dialog.Content>
+        <View className={isMobile ? "flex-col" : "flex-row"}>
+          <View className={isMobile ? "w-full" : "w-1/2 pr-2"}>
+            <View className="mb-2">
+              <Text className="text-lg">Due: {formatDate(todo.dueDate)}</Text>
+            </View>
+            <Text className="text-base">{todo.task}</Text>
+          </View>
+
+          {isMobile ? (
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "#000000",
+                marginVertical: 12,
+                borderRadius: 1,
+              }}
+            />
+          ) : (
+            <View
+              style={{
+                width: 2,
+                backgroundColor: "#000000",
+                marginHorizontal: 12,
+                alignSelf: "stretch",
+                borderRadius: 1,
+              }}
+            />
+          )}
+
+          <View className={isMobile ? "w-full mt-4" : "w-1/2 pl-4 pr-6"}>
+            <TodoComments todoId={todo.id} />
+          </View>
+        </View>
+      </Dialog.Content>
+    </DialogContainer>
+  );
+};