selfstarter/app/index.tsx

import { Stack } from "expo-router";
import {StyleSheet, Text, View, ColorValue, ListRenderItemInfo, TouchableOpacity, Platform} from "react-native";
import {RowMap, SwipeListView} from "react-native-swipe-list-view";
import {ChevronDown, Plus} from "lucide-react-native";
import {useRef} from "react";
import {MenuComponentRef, MenuView} from "@react-native-menu/menu";

const servers: Server[] = [
  {
    name: "Test Data Server",
    domain: "localhost",
    computers: [
      {
        key: 0,
        name: "Test PC",
        emoji: "💻",
        background_color: '#D9D9D9',
        mac_address: "00:1A:2B:3C:4D:5E",
      },
      {
        key: 1,
        name: "Another PC in the basement",
        emoji: "💻",
        background_color: '#D9D9D9',
        mac_address: "00:1A:2B:3C:4D:5E",
      }
    ]
  }
];

export default function Index() {
  return (
    <View>
      <Stack.Screen
        options={{
          title: 'Home',
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
          headerTitle: props =>
            <View style={{
              display: "flex",
              flexDirection: "row",
              gap: 10,
            }}>
              <Text style={{
                fontSize: 20,
                fontWeight: 'bold',
              }}>{servers[0].name}</Text>
              <View style={{
                backgroundColor: "#007AFF",
                borderRadius: 100,
              }}>
                <MenuView
                  onPressAction={({ nativeEvent }) => {
                    console.warn(JSON.stringify(nativeEvent));
                    //TODO: Handle adding computers/servers
                  }}
                  actions={[
                    {
                      id: 'server0',
                      title: servers[0].name,
                      titleColor: '#2367A2',
                      imageColor: '#2367A2',
                    },
                    {
                      id: 'deleteServer',
                      title: 'Delete Current Server',
                      attributes: {
                        destructive: true,
                      },
                      image: Platform.select({
                        ios: 'trash',
                        android: 'ic_menu_delete',
                      }),
                    },
                  ]}
                  shouldOpenOnLongPress={false}
                >
                  <ChevronDown color={"#FFFFFF"} />
                </MenuView>
              </View>
            </View>,
          headerRight: props =>
            <View>
              <MenuView
                onPressAction={({ nativeEvent }) => {
                  console.warn(JSON.stringify(nativeEvent));
                  //TODO: Handle adding computers/servers
                }}
                actions={[
                  {
                    id: 'addComputer',
                    title: 'Add Server',
                    titleColor: '#2367A2',
                    image: 'ic_menu_add', //TODO: Fix icons
                    imageColor: '#2367A2',
                  },
                  {
                    id: 'addServer',
                    title: 'Add Server',
                    titleColor: '#2367A2',
                    image: 'ic_menu_add',
                    imageColor: '#2367A2',
                  },
                ]}
                shouldOpenOnLongPress={false}
              >
                <Plus color={"#007AFF"} />
              </MenuView>
            </View>
        }}
      />
      <ComputerList computers={servers[0].computers}/>
    </View>
  );
}

const styles = StyleSheet.create({
  computerElement: {
    display: "flex",
    flexDirection: "row",
    paddingHorizontal: 24,
    paddingVertical: 14,
    gap: 32,
    backgroundColor: '#FFFFFF'
  },
  computerName: {
    fontSize: 18,
    justifyContent: "flex-start",
  },
  computerSubtitle: {
    fontSize: 12,
    justifyContent: "flex-start",
    color: '#979797'
  },
  backTextWhite: {
    color: '#FFF',
  },
  rowBack: {
    alignItems: 'center',
    backgroundColor: '#DDD',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 15,
  },
  backRightBtn: {
    alignItems: 'center',
    bottom: 0,
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    width: 75,
  },
  backRightBtnRight: {
    backgroundColor: 'red',
    right: 0,
  },
});

function ComputerList(computers: { computers: Computer[] }) {
  const renderHiddenItem = (data: ListRenderItemInfo<Computer>, rowMap: RowMap<Computer>) => (
    <View style={styles.rowBack}>
      <TouchableOpacity
        style={[styles.backRightBtn, styles.backRightBtnRight]}
        onPress={() => {
          //TODO: remove it from storage
        }}>
        <Text style={styles.backTextWhite}>Delete</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <SwipeListView
      data={computers.computers}
      renderItem={({item}: ListRenderItemInfo<Computer>) =>
        <View style={styles.computerElement}>
          <View style={{
            width: 65,
            height: 65,
            borderRadius: 100,
            backgroundColor: item.background_color,
            alignItems: "center",
            justifyContent: "center",
          }}> //TODO: Make Button
            <Text style={{
              fontSize: 28
            }}>{item.emoji}</Text>
          </View>
          <View style={{
            flexDirection: "column",
            gap: 3,
            padding: 0,
            justifyContent: "center",
          }}>
            <Text style={styles.computerName}>{item.name}</Text>
            <Text style={styles.computerSubtitle}>{item.mac_address}</Text>
          </View>
        </View>
      } rightOpenValue={-75} renderHiddenItem={renderHiddenItem}
    />
  )
}

type Server = {
  name: string,
  domain: string,
  computers: Computer[],
}

type Computer = {
  key: number,
  name: string,
  emoji: string,
  background_color: ColorValue,
  mac_address: string,
}