fancier checkboxes

README.md

@@ -117,14 +117,13 @@ TODO better version where the token is also never exposed to the network so not
 
 ## Todos
 
-- fancier checkbox
 - create a new invitation needs a change in react-native-libsodium (use noble?)
-- on new list focus on the name input
+- show pending changes in the sidebar and the list
 
 - use expo-secure-store for the sessionKey
 - encrypt MMKV storage on iOS and Android
 - logo and colors
-- deploy to production (before move the repo)
+- deploy to production (before move the repo & cleanup readme and make on initial commit)
 
 - locker bug during registration 🤷
 

apps/app/src/app/(app)/list/[listId].tsx

@@ -6,10 +6,10 @@ import { generateId } from "secsync";
 import { useYjsSync } from "secsync-react-yjs";
 import * as Yjs from "yjs";
 import { Button } from "~/components/ui/button";
-import { Checkbox } from "~/components/ui/checkbox";
 import { Input } from "~/components/ui/input";
 import { Text } from "~/components/ui/text";
 import { X } from "~/lib/icons/X";
+import { Checkbox } from "../../../components/checkbox";
 import { DocumentMembers } from "../../../components/documentMember";
 import { SubtleInput } from "../../../components/subtleInput";
 import { UpdateDocumentNameForm } from "../../../components/updateDocumentNameForm";

apps/app/src/components/checkbox.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "~/components/primitives/checkbox";
+import { Check } from "~/lib/icons/Check";
+import { cn } from "~/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(
+        "web:peer h-8 w-8 shrink-0 rounded-full border border-input web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className={cn("items-center justify-center h-full w-full")}
+      >
+        <Check
+          size={26}
+          strokeWidth={2}
+          color="rgb(22 163 74)"
+          className="mt-1"
+          // className="text-primary-foreground"
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

apps/app/src/rnr/lib/icons/Check.tsx

@@ -1,4 +1,4 @@
-import { Check } from 'lucide-react-native';
-import { iconWithClassName } from './iconWithClassName';
+import { Check } from "lucide-react-native";
+import { iconWithClassName } from "./iconWithClassName";
 iconWithClassName(Check);
-export { Check };
+export { Check };