feat: add group

frontend/components/containers/interactive-session.tsx

@@ -52,10 +52,9 @@ const InteractiveSession = ({ type, params }: InteractiveSessionProps) => {
       ) : (
         <Terminal url={termUrl} />
       );
-
-    default:
-      throw new Error("Unknown interactive session type");
   }
+
+  return null;
 };
 
 export default InteractiveSession;

frontend/components/ui/button.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { GetProps, Button as BaseButton, Spinner } from "tamagui";
+import Icons from "./icons";
 
 type ButtonProps = GetProps<typeof BaseButton> & {
   isDisabled?: boolean;
@@ -16,4 +17,14 @@ const Button = ({ icon, isLoading, isDisabled, ...props }: ButtonProps) => {
   );
 };
 
+export const BackButton = (props: GetProps<typeof Button>) => (
+  <Button
+    circular
+    bg="$colorTransparent"
+    icon={<Icons name="arrow-left" size={24} />}
+    mr={6}
+    {...props}
+  />
+);
+
 export default Button;

frontend/components/ui/grid-view.tsx

@@ -3,9 +3,32 @@ import { GetProps, ScrollView, View, ViewStyle } from "tamagui";
 
 type GridItem = { key: string };
 
-type GridViewProps<T extends GridItem> = GetProps<typeof ScrollView> & {
+type GridViewProps<T extends GridItem> = GetProps<typeof ScrollView> &
+  GridLayoutProps<T>;
+
+const GridView = <T extends GridItem>({
+  data,
+  renderItem,
+  columns,
+  gap,
+  ...props
+}: GridViewProps<T>) => {
+  return (
+    <ScrollView {...props}>
+      <GridLayout
+        data={data}
+        renderItem={renderItem}
+        gap={gap}
+        columns={columns}
+      />
+    </ScrollView>
+  );
+};
+
+type GridLayoutProps<T extends GridItem> = GetProps<typeof View> & {
   data?: T[] | null;
   renderItem: (item: T, index: number) => React.ReactNode;
+  gap?: string | number;
   columns: {
     xs?: number;
     sm?: number;
@@ -15,10 +38,10 @@ type GridViewProps<T extends GridItem> = GetProps<typeof ScrollView> & {
   };
 };
 
-const GridView = <T extends GridItem>({
+export const GridLayout = <T extends GridItem>({
+  columns,
   data,
   renderItem,
-  columns,
   gap,
   ...props
 }: GridViewProps<T>) => {
@@ -33,20 +56,13 @@ const GridView = <T extends GridItem>({
   }, [columns]);
 
   return (
-    <ScrollView
-      {...props}
-      contentContainerStyle={{
-        flexDirection: "row",
-        flexWrap: "wrap",
-        ...(props.contentContainerStyle as object),
-      }}
-    >
+    <View flexDirection="row" flexWrap="wrap" {...props}>
       {data?.map((item, idx) => (
         <View key={item.key} p={gap} flexShrink={0} {...basisProps}>
           {renderItem(item, idx)}
         </View>
       ))}
-    </ScrollView>
+    </View>
   );
 };
 

frontend/components/ui/pressable.tsx

@@ -63,6 +63,7 @@ export const MultiTapPressable = ({
         }}
         numberOfTaps={numberOfTaps}
         ref={tapRef}
+        maxDelayMs={120}
       >
         <View pressStyle={{ opacity: 0.5 }} {...props} />
       </TapGestureHandler>