feat: add SVG icons and implement AlbumPickerModal and CenteredState components

src/components/RenameMediaModal.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useTheme } from '../services/ThemeContext';
+import ModalShell from './ModalShell';
+
+const RenameMediaModal = ({ visible, initialName, onClose, onSave, saving }) => {
+  const { theme } = useTheme();
+  const [name, setName] = useState(initialName || '');
+
+  useEffect(() => {
+    if (visible) setName(initialName || '');
+  }, [visible, initialName]);
+
+  const submit = () => {
+    const trimmed = (name || '').trim();
+    if (!trimmed || saving) return;
+    onSave?.(trimmed);
+  };
+
+  return (
+    <ModalShell visible={visible} onClose={onClose} cardStyle={{ backgroundColor: theme.card }}>
+      <Text style={[styles.title, { color: theme.text }]}>Rename media</Text>
+      <Text style={[styles.hint, { color: theme.textSecondary }]}> 
+        This updates the name shown in your library and keeps it after refresh.
+      </Text>
+      <TextInput
+        style={[
+          styles.input,
+          { color: theme.text, borderColor: theme.border, backgroundColor: theme.background },
+        ]}
+        value={name}
+        onChangeText={setName}
+        placeholder="Enter a new name"
+        placeholderTextColor={theme.textTertiary}
+        onSubmitEditing={submit}
+        editable={!saving}
+      />
+      <View style={styles.row}>
+        <TouchableOpacity
+          style={[styles.secondary, { borderColor: theme.border }]}
+          onPress={onClose}
+          disabled={saving}
+        >
+          <Text style={{ color: theme.textSecondary }}>Cancel</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.primary, { backgroundColor: theme.primary, opacity: saving ? 0.6 : 1 }]}
+          onPress={submit}
+          disabled={saving || !name.trim()}
+        >
+          <Text style={styles.primaryText}>{saving ? 'Saving…' : 'Save'}</Text>
+        </TouchableOpacity>
+      </View>
+    </ModalShell>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: { fontSize: 18, fontWeight: '700', marginBottom: 4 },
+  hint: { fontSize: 13, marginBottom: 12 },
+  input: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    marginBottom: 14,
+  },
+  row: { flexDirection: 'row', gap: 10, justifyContent: 'flex-end' },
+  secondary: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  primary: {
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+  },
+  primaryText: { color: '#fff', fontWeight: '700' },
+});
+
+export default RenameMediaModal;