(feat): show # of new unread chapters in manga list view

- so one can tell at a glance if there's a chapter they haven't read
  without having to tap into the manga
  - highlight # of new unread chapters in white

- make Manga component an observer so changes to the chapter list
  actually update the view

- continue showing "Today" or "Yesterday" if it's in the latest section
  - this # replaces that only if it's available, which, for most cases,
    means only for favorites, as those are the only ones persisted
    - but if one tapped into a latest, it would start showing # there
      as well
- increase the font size a bit since # isn't uppercased and therefore
  is harder to see than a "TODAY"

components/mangaList.js

@@ -31,9 +31,16 @@ export default class MangaList extends React.Component {
   }
 }
 
-class Manga extends React.PureComponent {
+@observer
+class Manga extends React.Component {
   render () {
     const { manga } = this.props
+    // show either the number of new unread chapters if available or
+    // "Today" / "Yesterday" if available
+    const newText = manga.numNewUnreadChapters()
+      ? manga.numNewUnreadChapters() + ' new unread chapters'
+      : manga.release && manga.release.toUpperCase()
+    const isNew = manga.numNewUnreadChapters() || manga.release === 'Today'
 
     return <TouchableWithoutFeedback onPress={this.onSelect}>
       <View style={styles.manga}>
@@ -45,10 +52,10 @@ class Manga extends React.PureComponent {
         <Text
           style={{
             ...styles.release,
-            color: manga.release === 'Today' ? '#fff' : '#aaa'
+            color: isNew ? '#fff' : '#aaa'
           }}
         >
-          {manga.release && manga.release.toUpperCase()}
+          {newText}
         </Text>
       </View>
     </TouchableWithoutFeedback>

components/mangaStyles.js

@@ -34,7 +34,7 @@ const styles = {
     paddingLeft: 4,
     paddingRight: 4,
     color: '#fff',
-    fontSize: 10,
+    fontSize: 12,
     lineHeight: 16,
     fontWeight: '500'
   }

models/models.js

@@ -101,7 +101,15 @@ const Manga = types.model('Manga', {
   chapters: types.array(types.late(() => Chapter)),
   tags: types.array(types.string),
   summary: ''
-}).actions((self) => ({
+}).views((self) => ({
+  numNewUnreadChapters () {
+    let sum = 0
+    self.chapters.forEach((chapter) => {
+      if (chapter.isNew() && !chapter.read) sum++
+    })
+    return sum
+  }
+})).actions((self) => ({
   loadChapters: flow(function * loadChapters () {
     const { chapters, tags, summary } = yield getChapters(self.link)