From b00e8a7d895c2b6d2d56cc374bcb3b7885a79613 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 27 Jul 2024 09:12:54 +0400
Subject: [PATCH 1/3] hide chat and fix ui breaks

---
 .../app/components/feed/FeedSearchFilter.tsx  |  7 +++-
 packages/app/components/item/ItemForm.tsx     | 20 ++++++-----
 packages/app/components/pack/PackDetails.tsx  | 35 ++++++++++++++-----
 packages/app/screens/items/index.tsx          | 29 ++++++++-------
 .../src/adapters/solito/components/Link.tsx   |  2 +-
 .../crosspath/src/adapters/solito/index.ts    |  2 +-
 .../src/adapters/tanstack/components/Link.tsx |  5 +++
 packages/crosspath/src/lib-interface.ts       |  4 +++
 8 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/packages/app/components/feed/FeedSearchFilter.tsx b/packages/app/components/feed/FeedSearchFilter.tsx
index 7287c4729..66ba706ed 100644
--- a/packages/app/components/feed/FeedSearchFilter.tsx
+++ b/packages/app/components/feed/FeedSearchFilter.tsx
@@ -198,7 +198,12 @@ const FeedSearchFilter = ({
             </View>
           </RStack>
           {(feedType === 'userPacks' || feedType === 'userTrips') && (
-            <RButton onPress={handleCreateClick}>Create</RButton>
+            <RButton
+              style={{ marginLeft: 'auto', marginTop: 8 }}
+              onPress={handleCreateClick}
+            >
+              Create
+            </RButton>
           )}
         </RStack>
       )}
diff --git a/packages/app/components/item/ItemForm.tsx b/packages/app/components/item/ItemForm.tsx
index 0fefd3e31..743dd932b 100644
--- a/packages/app/components/item/ItemForm.tsx
+++ b/packages/app/components/item/ItemForm.tsx
@@ -102,15 +102,17 @@ export const ItemForm = ({
                   width="100"
                 />
               ) : (
-                <DropdownComponent
-                  value={selectedUnit}
-                  data={data}
-                  onValueChange={handleUnitChange}
-                  placeholder={selectedUnit}
-                  width="50%"
-                  native={true}
-                  zeego={true}
-                />
+                <View style={{ flex: 1 }}>
+                  <DropdownComponent
+                    value={selectedUnit}
+                    data={data}
+                    onValueChange={handleUnitChange}
+                    placeholder={selectedUnit}
+                    width="50%"
+                    native={true}
+                    zeego={true}
+                  />
+                </View>
               ))}
           </View>
           <FormInput
diff --git a/packages/app/components/pack/PackDetails.tsx b/packages/app/components/pack/PackDetails.tsx
index e519cdcfe..f9da846d7 100644
--- a/packages/app/components/pack/PackDetails.tsx
+++ b/packages/app/components/pack/PackDetails.tsx
@@ -11,7 +11,8 @@ import useResponsive from 'app/hooks/useResponsive';
 import { FlatList, Platform, View } from 'react-native';
 import { useFetchSinglePack } from '../../hooks/packs';
 import ScoreContainer from '../ScoreContainer';
-import ChatContainer from '../chat';
+// import ChatContainer from '../chat';
+import { TextLink } from '@packrat/crosspath';
 import { DetailsComponent } from '../details';
 import { TableContainer } from '../pack_table/Table';
 import { AddItemModal } from './AddItemModal';
@@ -111,14 +112,29 @@ export function PackDetails() {
                               }
                             />
                           </View>
-                        ) : null;
+                        ) : (
+                          <RText
+                            style={{ textAlign: 'center', fontWeight: 600 }}
+                          >
+                            <RText style={{ marginRight: 2 }}>
+                              You don't have permission to edit this pack. You
+                              can create your own pack{' '}
+                            </RText>
+                            <TextLink href="/pack/create">
+                              <RText
+                                style={{
+                                  color: 'blue',
+                                  fontWeight: 700,
+                                }}
+                              >
+                                here
+                              </RText>
+                            </TextLink>
+                          </RText>
+                        );
                       case SECTION.SCORECARD:
                         return (
-                          <View
-                            style={{
-                              minHeight: xxs ? 800 : xs ? 800 : xxl ? 100 : 800,
-                            }}
-                          >
+                          <View>
                             <ScoreContainer
                               type="pack"
                               data={currentPack}
@@ -147,7 +163,8 @@ export function PackDetails() {
           />
         </View>
       )}
-      <View
+      {/* Disable Chat */}
+      {/* <View
         style={{
           position: 'absolute',
           right: -40,
@@ -162,7 +179,7 @@ export function PackDetails() {
           trigger="Open Chat"
           type="pack"
         />
-      </View>
+      </View> */}
     </Layout>
   );
 }
diff --git a/packages/app/screens/items/index.tsx b/packages/app/screens/items/index.tsx
index c1f1639b4..568782ac8 100644
--- a/packages/app/screens/items/index.tsx
+++ b/packages/app/screens/items/index.tsx
@@ -73,21 +73,23 @@ export default function Items() {
             <RText style={{ fontWeight: 'bold', textWrap: 'nowrap' }}>
               Sort By:
             </RText>
-            <DropdownComponent
-              value={value}
-              data={optionValues}
-              onValueChange={handleSort}
-              placeholder={value}
-              width="80%"
-              native={true}
-              zeego={true}
-            />
+            <View style={{ flex: 1 }}>
+              <DropdownComponent
+                value={value}
+                data={optionValues}
+                onValueChange={handleSort}
+                placeholder={value}
+                native={true}
+                zeego={true}
+              />
+            </View>
           </RStack>
           <View
             style={{
               marginBottom: 10,
               display: 'flex',
               flexDirection: 'row',
+              justifyContent: 'flex-end',
               gap: 5,
             }}
           >
@@ -100,7 +102,7 @@ export default function Items() {
           </View>
         </RStack>
         {!isError && data?.items && Array.isArray(data.items) && (
-          <View style={{padding:10, width:'100%'}}>
+          <View style={{ padding: 10, width: '100%' }}>
             <ItemsTable
               limit={limit}
               setLimit={handleLimitChange}
@@ -110,7 +112,7 @@ export default function Items() {
               isLoading={isFetching}
               totalPages={data?.totalPages}
             />
-         </View>
+          </View>
         )}
       </RStack>
     </RScrollView>
@@ -137,14 +139,15 @@ const loadStyles = (theme) => {
     },
     container: {
       backgroundColor: currentTheme.colors.card,
-      flexDirection: 'row',
+      flexDirection: xs || xxs ? 'column' : 'row',
+      gap: xs || xxs ? 4 : 0,
       justifyContent: 'space-between',
       width: '100%',
       padding: 30,
       borderRadius: 10,
     },
     sortContainer: {
-      width: xxs ? '50%' : xs ? '50%' : '20%',
+      width: xxs ? '100%' : xs ? '100%' : '20%',
       justifyContent: 'space-between',
       flexDirection: 'row',
       alignItems: 'center',
diff --git a/packages/crosspath/src/adapters/solito/components/Link.tsx b/packages/crosspath/src/adapters/solito/components/Link.tsx
index 500853402..d4fbe2c67 100644
--- a/packages/crosspath/src/adapters/solito/components/Link.tsx
+++ b/packages/crosspath/src/adapters/solito/components/Link.tsx
@@ -1 +1 @@
-export { Link } from 'solito/link';
+export { Link, TextLink } from 'solito/link';
diff --git a/packages/crosspath/src/adapters/solito/index.ts b/packages/crosspath/src/adapters/solito/index.ts
index 604444abb..7ab5bfaeb 100644
--- a/packages/crosspath/src/adapters/solito/index.ts
+++ b/packages/crosspath/src/adapters/solito/index.ts
@@ -1,3 +1,3 @@
 export { createParam } from './createParam';
 export { useRouter } from './useRouter';
-export { Link } from './components/Link';
+export * from './components/Link';
diff --git a/packages/crosspath/src/adapters/tanstack/components/Link.tsx b/packages/crosspath/src/adapters/tanstack/components/Link.tsx
index b7b75a5ce..794c5e519 100644
--- a/packages/crosspath/src/adapters/tanstack/components/Link.tsx
+++ b/packages/crosspath/src/adapters/tanstack/components/Link.tsx
@@ -6,3 +6,8 @@ export const Link: LinkComponent = (props: LinkProps) => {
   // @ts-ignore
   return <TanstackLink to={props.href} {...props} />;
 };
+
+export const TextLink: LinkComponent = (props: LinkProps) => {
+  // @ts-ignore
+  return <TanstackLink to={props.href} {...props} />;
+};
diff --git a/packages/crosspath/src/lib-interface.ts b/packages/crosspath/src/lib-interface.ts
index f10411eed..1c9ee4a60 100644
--- a/packages/crosspath/src/lib-interface.ts
+++ b/packages/crosspath/src/lib-interface.ts
@@ -4,5 +4,9 @@ export declare function Link(
   props: Parameters<LinkComponent>,
 ): ReturnType<LinkComponent>;
 
+export declare function TextLinks(
+  props: Parameters<LinkComponent>,
+): ReturnType<LinkComponent>;
+
 export declare const createParam: CreateParam;
 export declare function useRouter(): Router;

From 0ff17c431bdffdac8e28614c84e9ac7b2d3f8dca Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 27 Jul 2024 14:53:41 +0400
Subject: [PATCH 2/3] fix ui break

---
 packages/app/components/card/CustomCard.tsx | 7 ++++---
 packages/app/components/details/index.tsx   | 1 -
 packages/app/components/item/ImportForm.tsx | 4 +++-
 packages/app/screens/feed/Feed.tsx          | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/app/components/card/CustomCard.tsx b/packages/app/components/card/CustomCard.tsx
index fa507d482..1a838126b 100644
--- a/packages/app/components/card/CustomCard.tsx
+++ b/packages/app/components/card/CustomCard.tsx
@@ -15,7 +15,7 @@ interface CustomCardProps {
   type: 'pack' | 'trip';
   destination?: string;
   data: {
-    owner_id: string
+    owner_id: string;
     owners?: Array<{ name: string }> | null;
   };
 }
@@ -35,7 +35,6 @@ export const CustomCard = ({
   if (!data) return null;
 
   const isWeb = Platform.OS === 'web';
-  console.log('CustomCardProps ', data  )
 
   return (
     <View
@@ -94,6 +93,8 @@ export const CustomCard = ({
           style={{
             paddingRight: 16,
             paddingLeft: 16,
+            flex: 1,
+            paddingBottom: 20,
           }}
         >
           {content}
@@ -120,4 +121,4 @@ const loadStyles = (theme) => {
       alignSelf: 'center',
     },
   };
-};
\ No newline at end of file
+};
diff --git a/packages/app/components/details/index.tsx b/packages/app/components/details/index.tsx
index e125b16dc..ba71b78be 100644
--- a/packages/app/components/details/index.tsx
+++ b/packages/app/components/details/index.tsx
@@ -20,7 +20,6 @@ export const DetailsComponent = ({
   additionalComps,
   link,
 }: DetailsComponent) => {
-  console.log('type', type)
   const renderDetails = () => {
     switch (type) {
       case 'pack':
diff --git a/packages/app/components/item/ImportForm.tsx b/packages/app/components/item/ImportForm.tsx
index c0c4c4fcf..97f87dd68 100644
--- a/packages/app/components/item/ImportForm.tsx
+++ b/packages/app/components/item/ImportForm.tsx
@@ -7,6 +7,7 @@ import { useAddPackItem } from 'app/hooks/packs/useAddPackItem';
 import { useAddItem } from 'app/hooks/items';
 import { useImportPackItem } from 'app/hooks/packs/useImportPackItem';
 import { useImportItem } from 'app/hooks/items/useImportItem';
+import useResponsive from 'app/hooks/useResponsive';
 
 interface ImportFormProps {
   showSubmitButton?: boolean;
@@ -44,6 +45,7 @@ export const ImportForm: FC<ImportFormProps> = ({
   const { handleAddNewItem } = useAddItem();
   const { handleImportNewItems } = useImportItem();
   const { importPackItem } = useImportPackItem();
+  const { xxs } = useResponsive();
 
   const [selectedType, setSelectedType] = useState<SelectedType>({
     label: 'CSV',
@@ -96,7 +98,7 @@ export const ImportForm: FC<ImportFormProps> = ({
   };
 
   return (
-    <View style={{ minWidth: 320 }}>
+    <View style={{ minWidth: xxs ? 250 : 320 }}>
       <View
         style={{
           flexDirection: 'row',
diff --git a/packages/app/screens/feed/Feed.tsx b/packages/app/screens/feed/Feed.tsx
index 55d013703..3e7657dbc 100644
--- a/packages/app/screens/feed/Feed.tsx
+++ b/packages/app/screens/feed/Feed.tsx
@@ -187,7 +187,7 @@ const loadStyles = (theme) => {
       backgroundColor: currentTheme.colors.background,
       fontSize: 18,
       padding: 15,
-      ...(Platform.OS !== 'web' && { paddingVertical: 0 }),
+      ...(Platform.OS !== 'web' && { paddingBottom: 15, paddingTop: 0 }),
     },
     // filterContainer: {
     //   backgroundColor: currentTheme.colors.card,

From 1dade7315cd97c6958546ee0e3c52abef2c26229 Mon Sep 17 00:00:00 2001
From: Taron <taron.aleksanyan.20@gmail.com>
Date: Sat, 27 Jul 2024 18:24:27 +0400
Subject: [PATCH 3/3] fix items screen issue

---
 packages/app/components/itemtable/itemTable.tsx                | 2 +-
 packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/app/components/itemtable/itemTable.tsx b/packages/app/components/itemtable/itemTable.tsx
index d9dc89896..a4e07d764 100644
--- a/packages/app/components/itemtable/itemTable.tsx
+++ b/packages/app/components/itemtable/itemTable.tsx
@@ -94,7 +94,7 @@ export const ItemsTable = ({
   return (
     <View
       style={{
-        padding: 30,
+        padding: 10,
         backgroundColor: isDark ? '#1A1A1D' : 'white',
         borderRadius: 12,
         margin: 20,
diff --git a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
index 7b089630f..6169b4d19 100644
--- a/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
+++ b/packages/ui/src/Bento/elements/tables/PaginatedSortedTable.tsx
@@ -108,6 +108,7 @@ export function PaginatedSortedTable({
           alignItems: 'center',
           justifyContent: 'center',
           width: '100%',
+          gap: 10,
           marginBottom: 30,
         }}
       >
@@ -156,6 +157,7 @@ export function PaginatedSortedTable({
             style={{
               flexDirection: 'row',
               alignSelf: 'center',
+              padding: 8,
               fontSize: 15,
             }}
           >