Simplify the peek view of exercises from Plan

SetItem.tsx

@@ -4,7 +4,12 @@ import React, { useCallback, useMemo } from "react";
 import { Image } from "react-native";
 import { List, Text, useTheme } from "react-native-paper";
 import { StackParams } from "./AppStack";
-import { DARK_RIPPLE, LIGHT_RIPPLE } from "./constants";
+import {
+  DARK_RIPPLE,
+  DARK_SUBDUED,
+  LIGHT_RIPPLE,
+  LIGHT_SUBDUED,
+} from "./constants";
 import GymSet from "./gym-set";
 import Settings from "./settings";
 
@@ -60,7 +65,7 @@ const SetItem = React.memo(
         title={item.name}
         description={
           settings.showDate ? (
-            <Text style={{ color: dark ? "#909090ff" : "#717171ff" }}>
+            <Text style={{ color: dark ? DARK_SUBDUED : LIGHT_SUBDUED }}>
               {format(new Date(item.created), settings.date || "P")}
             </Text>
           ) : null
@@ -72,7 +77,7 @@ const SetItem = React.memo(
           <Text
             style={{
               alignSelf: "center",
-              color: dark ? "#909090ff" : "#717171ff",
+              color: dark ? DARK_SUBDUED : LIGHT_SUBDUED,
             }}
           >
             {`${item.reps} x ${item.weight}${item.unit || "kg"}`}

ViewSetList.tsx

@@ -1,15 +1,16 @@
 import { RouteProp, useRoute } from "@react-navigation/native";
+import { format } from "date-fns";
 import { useEffect, useState } from "react";
 import { FlatList } from "react-native";
-import { List, useTheme } from "react-native-paper";
+import { List, Text, useTheme } from "react-native-paper";
 import { Like } from "typeorm";
 import { StackParams } from "./AppStack";
-import { LIMIT } from "./constants";
+import SetItem from "./SetItem";
+import StackHeader from "./StackHeader";
+import { DARK_SUBDUED, LIGHT_SUBDUED, LIMIT } from "./constants";
 import { setRepo, settingsRepo } from "./db";
 import GymSet from "./gym-set";
-import SetItem from "./SetItem";
 import Settings from "./settings";
-import StackHeader from "./StackHeader";
 
 interface ColorSet extends GymSet {
   color?: string;
@@ -18,7 +19,7 @@ interface ColorSet extends GymSet {
 export default function ViewSetList() {
   const [sets, setSets] = useState<ColorSet[]>();
   const [settings, setSettings] = useState<Settings>();
-  const { colors } = useTheme();
+  const { colors, dark } = useTheme();
   const { params } = useRoute<RouteProp<StackParams, "ViewSetList">>();
 
   useEffect(() => {
@@ -52,14 +53,18 @@ export default function ViewSetList() {
   }, [params.name, colors]);
 
   const renderItem = ({ item }: { item: ColorSet; index: number }) => (
-    <SetItem
+    <List.Item
-      settings={settings}
+      title={format(new Date(item.created), settings.date || "P")}
-      item={item}
+      style={{ backgroundColor: item.color }}
-      key={item.id}
+      right={() => (
-      ids={[]}
+        <Text
-      setIds={() => null}
+          style={{
-      disablePress
+            alignSelf: "center",
-      customBg={item.color}
+          }}
+        >
+          {`${item.reps} x ${item.weight}${item.unit || "kg"}`}
+        </Text>
+      )}
     />
   );
 

colors.ts

@@ -1,6 +1,6 @@
 import { DefaultTheme, MD3DarkTheme } from "react-native-paper";
 
-export const lightColors = [
+export const LIGHT_COLORS = [
   { hex: MD3DarkTheme.colors.primary, name: "Purple" },
   { hex: "#B3E5FC", name: "Blue" },
   { hex: "#FA8072", name: "Salmon" },
@@ -11,7 +11,7 @@ export const lightColors = [
   { hex: "#00CED1", name: "Dark Turquoise" },
 ];
 
-export const darkColors = [
+export const DARK_COLORS = [
   { hex: DefaultTheme.colors.primary, name: "Purple" },
   { hex: "#0051a9", name: "Blue" },
   { hex: "#000000", name: "Black" },

constants.ts

@@ -3,4 +3,6 @@ export const PADDING = 10;
 export const ITEM_PADDING = 8;
 export const DARK_RIPPLE = "#444444";
 export const LIGHT_RIPPLE = "#c2c2c2";
+export const DARK_SUBDUED = "#909090ff";
+export const LIGHT_SUBDUED = "#717171ff";
 export const LIMIT = 15;

options.ts

@@ -1,4 +1,4 @@
-import { darkColors, lightColors } from "./colors";
+import { DARK_COLORS, LIGHT_COLORS } from "./colors";
 
 export const themeOptions = [
   { label: "System", value: "system" },
@@ -6,13 +6,13 @@ export const themeOptions = [
   { label: "Light", value: "light" },
 ];
 
-export const lightOptions = lightColors.map((color) => ({
+export const lightOptions = LIGHT_COLORS.map((color) => ({
   label: color.name,
   value: color.hex,
   color: color.hex,
 }));
 
-export const darkOptions = darkColors.map((color) => ({
+export const darkOptions = DARK_COLORS.map((color) => ({
   label: color.name,
   value: color.hex,
   color: color.hex,