feat: add stats to rows and covers

app/(auth)/(tabs)/(libraries)/_layout.tsx

@@ -157,6 +157,23 @@ export default function IndexLayout() {
                       Show titles
                     </DropdownMenu.ItemTitle>
                   </DropdownMenu.CheckboxItem>
+                  <DropdownMenu.CheckboxItem
+                    key="show-stats-option"
+                    value={settings.libraryOptions.showStats}
+                    onValueChange={(newValue) => {
+                      updateSettings({
+                        libraryOptions: {
+                          ...settings.libraryOptions,
+                          showStats: newValue === "on" ? true : false,
+                        },
+                      });
+                    }}
+                  >
+                    <DropdownMenu.ItemIndicator />
+                    <DropdownMenu.ItemTitle key="show-stats-title">
+                      Show stats
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
                 </DropdownMenu.Group>
 
                 <DropdownMenu.Separator />

components/library/LibraryItemCard.tsx

@@ -117,7 +117,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
   if (settings?.libraryOptions?.display === "row") {
     return (
       <TouchableItemRouter item={library} className="w-full px-4">
-        <View className="flex flex-row items-center w-full relative">
+        <View className="flex flex-row items-center w-full relative ">
           <Ionicons
             name={icons[library.CollectionType!] || "folder"}
             size={22}
@@ -126,6 +126,11 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           <Text className="text-start px-4 text-neutral-200">
             {library.Name}
           </Text>
+          {settings?.libraryOptions?.showStats && (
+            <Text className="font-bold text-xs text-neutral-500 text-start px-4 ml-auto">
+              {itemsCount} items
+            </Text>
+          )}
         </View>
       </TouchableItemRouter>
     );
@@ -135,8 +140,7 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
     return (
       <TouchableItemRouter item={library} className="w-full">
         <View className="flex justify-center rounded-xl w-full relative border border-neutral-900 h-20 ">
-          <Image
-            source={{ uri: url }}
+          <View
             style={{
               width: "100%",
               height: "100%",
@@ -144,13 +148,37 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
               position: "absolute",
               top: 0,
               left: 0,
+              overflow: "hidden",
             }}
-          />
+          >
+            <Image
+              source={{ uri: url }}
+              style={{
+                width: "100%",
+                height: "100%",
+              }}
+            />
+            <View
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: "rgba(0, 0, 0, 0.3)", // Adjust the alpha value (0.3) to control darkness
+              }}
+            />
+          </View>
           {settings?.libraryOptions?.showTitles && (
-            <Text className="font-bold text-xl text-start px-4">
+            <Text className="font-bold text-lg text-start px-4">
               {library.Name}
             </Text>
           )}
+          {settings?.libraryOptions?.showStats && (
+            <Text className="font-bold text-xs  text-start px-4">
+              {itemsCount} items
+            </Text>
+          )}
         </View>
       </TouchableItemRouter>
     );
@@ -163,9 +191,11 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
           <Text className="font-bold text-lg text-start px-4">
             {library.Name}
           </Text>
-          <Text className="font-bold text-xs text-neutral-500 text-start px-4">
-            {itemsCount} items
-          </Text>
+          {settings?.libraryOptions?.showStats && (
+            <Text className="font-bold text-xs text-neutral-500 text-start px-4">
+              {itemsCount} items
+            </Text>
+          )}
         </View>
         <View className="p-2">
           <Image

utils/atoms/settings.ts

@@ -29,6 +29,7 @@ export type LibraryOptions = {
   cardStyle: "compact" | "detailed";
   imageStyle: "poster" | "cover";
   showTitles: boolean;
+  showStats: boolean;
 };
 
 type Settings = {
@@ -72,6 +73,7 @@ const loadSettings = async (): Promise<Settings> => {
       cardStyle: "detailed",
       imageStyle: "cover",
       showTitles: true,
+      showStats: true,
     },
   };