blurview

src/screens/Writing/CustomizeSongStructure.js

@@ -1,9 +1,7 @@
-import { BlurView } from "expo-blur";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   FlatList,
   Image,
-  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -21,6 +19,7 @@ import {
   OPTIONAL_STRUCTURE_SEGMENTS,
   sanitizeStructureList,
 } from "../../utils/songStructure";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 
 const randomSuffix = () => Math.random().toString(36).slice(2, 8);
@@ -138,38 +137,34 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
   );
 
   const Row = ({ item: rowData, onPress }) => {
-    const isButton = typeof onPress === "function";
-    const Wrapper = isButton ? TouchableOpacity : View;
-    const selected = rowData?.selected;
-    const icon = rowData?.icon;
     const baseType = rowData?.type || rowData?.value;
     const meta = getSegmentMeta(baseType);
     const canRemove = rowData?.sortable && meta?.optional === true;
+    const selected = rowData?.selected;
     const count = rowData?.count ?? 0;
-    return (
+    const containerStyle = StyleSheet.flatten([
-      <Wrapper
+      styles.rowContainer,
-        onPress={onPress}
+    ]);
-        activeOpacity={0.8}
+    const blurStyle = StyleSheet.flatten([
-        style={isButton ? styles.touchable : undefined}
-      >
-        <View
-          style={[
-            styles.itemContainer,
-            selected && styles.selectedItem,
-            rowData?.sortable && styles.sortableItem,
-          ]}
-        >
-          <BlurView
-            intensity={Platform.OS !== "ios" ? 10 : 30}
-            style={[
       styles.rowBlur,
-              selected && styles.selectedBlur,
+      selected ? styles.selectedBlur : null,
-              isButton && styles.buttonBlur,
+    ]);
-            ]}
+    const badgeStyle = StyleSheet.flatten([
+      styles.countBadge,
+      count > 0 ? styles.countBadgeActive : null,
+    ]);
+
+    return (
+      <CreateLyricsHeader
+        tint="dark"
+        intensity={40}
+        showBorder={false}
+        onPress={onPress}
+        containerStyle={containerStyle}
+        blurViewStyle={blurStyle}
       >
         <View style={styles.rowContent}>
           <Text style={styles.rowText}>{rowData?.label || ""}</Text>
-            </View>
           {rowData?.sortable ? (
             <View style={styles.rowActions}>
               <Sortable.Handle>
@@ -186,18 +181,12 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
               )}
             </View>
           ) : (
-              <View
+            <View style={badgeStyle}>
-                style={[
-                  styles.countBadge,
-                  count > 0 ? styles.countBadgeActive : null,
-                ]}
-              >
               <Text style={styles.countBadgeText}>{count}</Text>
             </View>
           )}
-          </BlurView>
         </View>
-      </Wrapper>
+      </CreateLyricsHeader>
     );
   };
 
@@ -216,6 +205,11 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
           <View style={styles.sectionTag}>
             <Text style={styles.sectionTagText}>Structure actuelle</Text>
           </View>
+          <ItemContainer
+            height="auto"
+            disableKeyboardHeight
+            style={styles.blurSection}
+          >
             <Sortable.Grid
               columns={1}
               rowGap={12}
@@ -229,17 +223,24 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
                 setSortableItems(buildSortableItems(sanitized));
               }}
             />
+          </ItemContainer>
           <View style={[styles.sectionTag, { marginTop: 24 }]}>
             <Text style={styles.sectionTagText}>Éléments à ajouter</Text>
           </View>
+          <ItemContainer
+            height="auto"
+            disableKeyboardHeight
+            style={styles.blurSection}
+          >
             <FlatList
               data={optionalSegments}
               gap={12}
-            renderItem={({ item }) => {
+              renderItem={({ item, index }) => {
                 const count = segmentCounts[item.type] || 0;
                 const selected = count > 0;
+                const wrapperStyle = index === 0 ? null : styles.optionWrapper;
                 return (
-                <View style={{ marginTop: 12 }}>
+                  <View style={wrapperStyle}>
                     <Row
                       item={{
                         ...item,
@@ -257,6 +258,7 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
               scrollEnabled={false}
               nestedScrollEnabled={false}
             />
+          </ItemContainer>
         </Animated.ScrollView>
       </View>
     </View>
@@ -266,40 +268,19 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
 export default CustomizeSongStructure;
 
 const styles = StyleSheet.create({
-  touchable: {
+  rowContainer: {
+    borderRadius: 14,
     width: "100%",
   },
-  itemContainer: {
+  blurSection: {
-    height: 54,
+    marginTop: 12,
-    backgroundColor: Palette.glass,
+    width: "100%",
-    borderRadius: 14,
-    overflow: "hidden",
-    shadowColor: "#00000040",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-  },
-  sortableItem: {
-    marginBottom: 0,
-  },
-  selectedItem: {
-    borderWidth: 1,
-    borderColor: Palette.white,
   },
   rowBlur: {
-    flex: 1,
+    minHeight: 54,
-    backgroundColor: Palette.glass,
+    paddingHorizontal: 16,
-    justifyContent: "center",
-    paddingHorizontal: 12,
     flexDirection: "row",
     alignItems: "center",
-    height: "100%",
-  },
-  buttonBlur: {
     justifyContent: "space-between",
   },
   selectedBlur: {
@@ -307,7 +288,9 @@ const styles = StyleSheet.create({
   },
   rowContent: {
     flex: 1,
-    justifyContent: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
   },
   rowText: {
     fontSize: 16,
@@ -320,11 +303,6 @@ const styles = StyleSheet.create({
     tintColor: Palette.white,
     marginRight: 12,
   },
-  optionIcon: {
-    width: 20,
-    height: 20,
-    tintColor: Palette.white,
-  },
   countBadge: {
     minWidth: 28,
     paddingHorizontal: 8,
@@ -356,6 +334,9 @@ const styles = StyleSheet.create({
     height: 16,
     tintColor: Palette.white,
   },
+  optionWrapper: {
+    marginTop: 12,
+  },
   sectionTag: {
     alignSelf: "flex-start",
     paddingHorizontal: 12,

src/screens/Writing/CustomizeSongStructure.web.js

@@ -23,6 +23,7 @@ import {
   OPTIONAL_STRUCTURE_SEGMENTS,
   sanitizeStructureList,
 } from "../../utils/songStructure";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 
 const ROW_HEIGHT = 54;
@@ -222,12 +223,22 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
     const baseType = item?.type || item?.value;
     const meta = getSegmentMeta(baseType);
     const canRemove = meta?.optional === true;
+    const containerStyle = StyleSheet.flatten([
+      styles.rowContainer,
+      activeItemId === item.id ? styles.activeItem : null,
+    ]);
+    const blurStyle = StyleSheet.flatten([
+      styles.itemBlur,
+      activeItemId === item.id ? styles.activeBlur : null,
+    ]);
+
     return (
-      <View
+      <CreateLyricsHeader
-        style={[
+        tint="dark"
-          styles.itemContainer,
+        intensity={40}
-          activeItemId === item.id && styles.activeItem,
+        showBorder={false}
-        ]}
+        containerStyle={containerStyle}
+        blurViewStyle={blurStyle}
       >
         <View style={styles.row}>
           <Text style={styles.rowText}>{item.label}</Text>
@@ -253,7 +264,7 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
             </View>
           </View>
         </View>
-      </View>
+      </CreateLyricsHeader>
     );
   };
 
@@ -271,38 +282,59 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
           <View style={styles.sectionTag}>
             <Text style={styles.sectionTagText}>Structure actuelle</Text>
           </View>
+          <ItemContainer
+            height="auto"
+            disableKeyboardHeight
+            style={styles.blurSection}
+          >
             <View style={styles.listContainer} ref={containerRef}>
               {labeledItems.map((item) => (
                 <StructureRow key={item.id} item={item} />
               ))}
             </View>
+          </ItemContainer>
           <View style={[styles.sectionTag, styles.addSectionTag]}>
             <Text style={styles.sectionTagText}>Éléments à ajouter</Text>
           </View>
+          <ItemContainer
+            height="auto"
+            disableKeyboardHeight
+            style={styles.blurSection}
+          >
             <View style={styles.optionsContainer}>
               {optionalSegments.map((segment) => {
                 const count = segmentCounts[segment.type] || 0;
                 const selected = count > 0;
-              return (
+                const blurStyle = StyleSheet.flatten([
-                <TouchableOpacity
+                  styles.itemBlur,
-                  key={segment.type}
+                  selected ? styles.selectedBlur : null,
-                  activeOpacity={0.85}
+                ]);
-                  onPress={() => handleOptionalSegmentPress(segment.type)}
+                const badgeStyle = StyleSheet.flatten([
-                  style={[styles.optionItem, selected && styles.selectedItem]}
-                >
-                  <Text style={styles.rowText}>{segment.label}</Text>
-                  <View
-                    style={[
                   styles.countBadge,
-                      selected && styles.countBadgeActive,
+                  selected ? styles.countBadgeActive : null,
-                    ]}
+                ]);
+
+                return (
+                  <CreateLyricsHeader
+                    key={segment.type}
+                    tint="dark"
+                    intensity={40}
+                    showBorder={false}
+                    onPress={() => handleOptionalSegmentPress(segment.type)}
+                    containerStyle={styles.rowContainer}
+                    blurViewStyle={blurStyle}
                   >
+                    <View style={styles.row}>
+                      <Text style={styles.rowText}>{segment.label}</Text>
+                      <View style={badgeStyle}>
                         <Text style={styles.countBadgeText}>{count}</Text>
                       </View>
-                </TouchableOpacity>
+                    </View>
+                  </CreateLyricsHeader>
                 );
               })}
             </View>
+          </ItemContainer>
         </ScrollView>
       </View>
     </View>
@@ -337,24 +369,32 @@ const styles = StyleSheet.create({
   listContainer: {
     gap: 12,
   },
-  itemContainer: {
+  blurSection: {
-    height: ROW_HEIGHT,
+    marginTop: 12,
+    width: "100%",
+  },
+  rowContainer: {
     borderRadius: 14,
-    backgroundColor: Palette.glass,
-    shadowColor: "#00000040",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-    overflow: "hidden",
   },
   activeItem: {
     borderWidth: 1,
     borderColor: Palette.white,
   },
+  itemBlur: {
+    minHeight: ROW_HEIGHT,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  activeBlur: {
+    backgroundColor: Palette.transparentWhite,
+  },
+  selectedBlur: {
+    backgroundColor: Palette.transparentWhite,
+  },
   row: {
     flex: 1,
-    paddingHorizontal: 16,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -391,26 +431,6 @@ const styles = StyleSheet.create({
   },
   optionsContainer: {
     gap: 12,
-    marginTop: 12,
-  },
-  optionItem: {
-    height: ROW_HEIGHT,
-    borderRadius: 14,
-    backgroundColor: Palette.glass,
-    shadowColor: "#00000040",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-    overflow: "hidden",
-    paddingHorizontal: 16,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  selectedItem: {
-    borderWidth: 1,
-    borderColor: Palette.white,
   },
   countBadge: {
     minWidth: 28,