feat: add keychains

frontend/components/ui/grid-view.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from "react";
+import { GetProps, ScrollView, View, ViewStyle } from "tamagui";
+
+type GridItem = { key: string };
+
+type GridViewProps<T extends GridItem> = GetProps<typeof ScrollView> & {
+  data?: T[] | null;
+  renderItem: (item: T, index: number) => React.ReactNode;
+  columns: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+};
+
+const GridView = <T extends GridItem>({
+  data,
+  renderItem,
+  columns,
+  gap,
+  ...props
+}: GridViewProps<T>) => {
+  const basisProps = useMemo(() => {
+    const basis: ViewStyle = { flexBasis: "100%" };
+    if (columns.xs) basis.flexBasis = `${100 / columns.xs}%`;
+    if (columns.sm) basis.$gtXs = { flexBasis: `${100 / columns.sm}%` };
+    if (columns.md) basis.$gtSm = { flexBasis: `${100 / columns.md}%` };
+    if (columns.lg) basis.$gtMd = { flexBasis: `${100 / columns.lg}%` };
+    if (columns.xl) basis.$gtLg = { flexBasis: `${100 / columns.xl}%` };
+    return basis;
+  }, [columns]);
+
+  return (
+    <ScrollView
+      {...props}
+      contentContainerStyle={{
+        flexDirection: "row",
+        flexWrap: "wrap",
+        ...(props.contentContainerStyle as object),
+      }}
+    >
+      {data?.map((item, idx) => (
+        <View key={item.key} p={gap} flexShrink={0} {...basisProps}>
+          {renderItem(item, idx)}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+export default GridView;

frontend/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import { Controller, FieldValues } from "react-hook-form";
 import { FormFieldBaseProps } from "./utility";
-import { Input, View } from "tamagui";
+import { Input, TextArea } from "tamagui";
 import { ComponentPropsWithoutRef } from "react";
 import { ErrorMessage } from "./form";
 
@@ -24,4 +24,24 @@ export const InputField = <T extends FieldValues>({
   />
 );
 
+type TextAreaFieldProps<T extends FieldValues> = FormFieldBaseProps<T> &
+  ComponentPropsWithoutRef<typeof TextArea>;
+
+export const TextAreaField = <T extends FieldValues>({
+  form,
+  name,
+  ...props
+}: TextAreaFieldProps<T>) => (
+  <Controller
+    control={form.control}
+    name={name}
+    render={({ field, fieldState }) => (
+      <>
+        <TextArea {...field} {...props} />
+        <ErrorMessage error={fieldState.error} />
+      </>
+    )}
+  />
+);
+
 export default Input;

frontend/components/ui/modal.tsx

@@ -22,23 +22,24 @@ const Modal = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange} modal>
-      <Adapt when="sm">
+      <Adapt when="sm" platform="touch">
         <Sheet
           animation="quick"
           zIndex={999}
           modal
           dismissOnSnapToBottom
-          disableDrag
+          // disableDrag
         >
-          <Sheet.Frame>
-            <Adapt.Contents />
-          </Sheet.Frame>
           <Sheet.Overlay
-            animation="quicker"
+            opacity={0.1}
+            animation="quick"
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
             zIndex={0}
           />
+          <Sheet.Frame>
+            <Adapt.Contents />
+          </Sheet.Frame>
         </Sheet>
       </Adapt>
 

frontend/components/ui/pressable.tsx

@@ -9,6 +9,7 @@ const StyledPressable = styled(Button, {
   unstyled: true,
   backgroundColor: "$colorTransparent",
   borderWidth: 0,
+  padding: 0,
   cursor: "pointer",
 });
 

frontend/components/ui/select.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { Controller, FieldValues } from "react-hook-form";
-import { Select as BaseSelect } from "tamagui";
+import { Adapt, Select as BaseSelect, Sheet, Text } from "tamagui";
 import { FormFieldBaseProps } from "./utility";
 import { ErrorMessage } from "./form";
 import Icons from "./icons";
@@ -42,6 +42,24 @@ const Select = forwardRef<SelectRef, SelectProps>(
           <BaseSelect.Value placeholder={placeholder} />
         </BaseSelect.Trigger>
 
+        <Adapt when="sm" platform="touch">
+          <Sheet native modal dismissOnSnapToBottom snapPoints={[40, 60, 80]}>
+            <Sheet.Overlay
+              opacity={0.1}
+              animation="quick"
+              enterStyle={{ opacity: 0 }}
+              exitStyle={{ opacity: 0 }}
+              zIndex={0}
+            />
+            {/* <Sheet.Handle /> */}
+            <Sheet.Frame>
+              <Sheet.ScrollView contentContainerStyle={{ py: "$3" }}>
+                <Adapt.Contents />
+              </Sheet.ScrollView>
+            </Sheet.Frame>
+          </Sheet>
+        </Adapt>
+
         <BaseSelect.Content>
           <BaseSelect.ScrollUpButton />
           <BaseSelect.Viewport>