feat: added basic dictionary system

chore: added additional TODOs

src/lib/models/dictionary_model.dart

@@ -0,0 +1,24 @@
+class DictionaryModel {
+  String cardId;
+  String title;
+  String instructions;
+  String image;
+
+  DictionaryModel(
+      {required this.cardId,
+      required this.title,
+      required this.instructions,
+      required this.image});
+
+  factory DictionaryModel.fromMap(
+    String cardId,
+    Map<String, dynamic> data,
+  ) {
+    return DictionaryModel(
+      cardId: cardId,
+      title: data['title'],
+      instructions: data['instructions'],
+      image: data['image'],
+    );
+  }
+}

src/lib/pages/dictionary_page.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/data_provider.dart';
 
 class DictionaryPage extends StatefulWidget {
   const DictionaryPage({super.key});
@@ -8,10 +10,50 @@ class DictionaryPage extends StatefulWidget {
 }
 
 class _DictionaryPageState extends State<DictionaryPage> {
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_scrollListener);
+  }
+
   @override
   Widget build(BuildContext context) {
-    // TODO create dictionary page
-    // TODO add searching functionality
-    return const Center(child: CircularProgressIndicator());
+    final cards = context.watch<DataProvider>().dictionary;
+
+    // TODO add search bar
+    // TODO restyle with better loading indicator and better card design
+    return Scrollbar(
+      thumbVisibility: true,
+      controller: _scrollController,
+      child: ListView.builder(
+          controller: _scrollController,
+          itemCount: cards.length + 1,
+          itemBuilder: (context, index) {
+            if (index == cards.length) {
+              return SizedBox(
+                height: MediaQuery.of(context).size.height,
+                child: const Center(child: CircularProgressIndicator()),
+              );
+            }
+
+            return Card(
+              child: ListTile(
+                title: Text(cards[index].title),
+                subtitle: Text(cards[index].instructions),
+                leading: Image.network(cards[index].image),
+              ),
+            );
+          }),
+    );
+  }
+
+  void _scrollListener() {
+    if (_scrollController.offset >=
+            _scrollController.position.maxScrollExtent &&
+        !_scrollController.position.outOfRange) {
+      context.read<DataProvider>().loadMoreDictionary();
+    }
   }
 }

src/lib/pages/home_page.dart

@@ -20,6 +20,7 @@ class _HomePageState extends State<HomePage> {
     super.initState();
 
     context.read<DataProvider>().loadLessons();
+    context.read<DataProvider>().loadDictionary();
   }
 
   @override

src/lib/pages/lessons_page.dart

@@ -23,6 +23,8 @@ class _LessonsPageState extends State<LessonsPage> {
   Widget build(BuildContext context) {
     final decks = context.watch<DataProvider>().lessons;
 
+    // TODO fix loading more lessons
+    // TODO add loading indicator
     return ListView.builder(
         controller: _scrollController,
         itemCount: decks.length,

src/lib/providers/data_provider.dart

@@ -3,6 +3,7 @@ import 'package:firebase_auth/firebase_auth.dart';
 import 'package:flutter/material.dart';
 import 'package:cloud_firestore/cloud_firestore.dart';
 import 'package:spaced_repetition/sm.dart';
+import '../models/dictionary_model.dart';
 import '../models/lesson_model.dart';
 import '../models/flashcard_model.dart';
 import '../models/review_model.dart';
@@ -13,11 +14,14 @@ const pageSize = 5;
 class DataProvider extends ChangeNotifier {
   List<LessonModel> _lessons = [];
   Map<String, List<ReviewModel>> _reviews = {};
+  List<DictionaryModel> _dictionary = [];
 
   late DocumentSnapshot<Map<String, dynamic>> _lastDeckDoc;
+  late DocumentSnapshot<Map<String, dynamic>> _lastCardDoc;
 
   List<LessonModel> get lessons => _lessons;
   Map<String, List<ReviewModel>> get reviews => _reviews;
+  List<DictionaryModel> get dictionary => _dictionary;
 
   Future<void> loadLessons() async {
     final lessons = await FirebaseFirestore.instance
@@ -90,9 +94,9 @@ class DataProvider extends ChangeNotifier {
           .where('userId', isEqualTo: currentUser.uid)
           .get();
 
-      final reviewModelList = reviews.docs
-          .map((doc) => ReviewModel.fromMap(doc.id, doc.data()))
-          .toList();
+      final reviewModelList = reviews.docs.map((doc) {
+        return ReviewModel.fromMap(doc.id, doc.data());
+      }).toList();
       _reviews =
           groupBy(reviewModelList, (ReviewModel review) => review.deckTitle);
     } on Exception catch (e) {
@@ -189,4 +193,43 @@ class DataProvider extends ChangeNotifier {
     _reviews.remove(deckTitle);
     notifyListeners();
   }
+
+  Future<void> loadDictionary() async {
+    final dictionary = await FirebaseFirestore.instance
+        .collectionGroup('cards')
+        .where('type', isEqualTo: 'immutable')
+        .limit(pageSize)
+        .get();
+
+    _dictionary = dictionary.docs
+        .map((doc) => DictionaryModel.fromMap(doc.id, doc.data()))
+        .toList();
+
+    _lastCardDoc = dictionary.docs.last;
+
+    notifyListeners();
+  }
+
+  Future<void> loadMoreDictionary() async {
+    final cards = await FirebaseFirestore.instance
+        .collectionGroup('cards')
+        .where('type', isEqualTo: 'immutable')
+        .startAfterDocument(_lastCardDoc)
+        .limit(pageSize)
+        .get();
+
+    // If there are no more cards to fetch, return the current list of dictionary
+    if (cards.docs.isEmpty) {
+      return;
+    }
+
+    _dictionary = _dictionary
+      ..addAll(cards.docs
+          .map((doc) => DictionaryModel.fromMap(doc.id, doc.data()))
+          .toList());
+
+    _lastCardDoc = cards.docs.last;
+
+    notifyListeners();
+  }
 }

src/lib/widgets/flashcard.dart

@@ -32,6 +32,7 @@ class _FlashcardState extends State<Flashcard> {
     double cardWidth = screenWidth * 0.15;
 
     return SizedBox(
+      // TODO fix responsiveness based of screen
       width: cardWidth,
       child: Card(
         child: Column(