Try to make the backlinks section prettier

I'm not totally convinced that it should be here.

assets/langs/en.yaml

@@ -73,4 +73,13 @@ widgets:
       empty: Please enter a name
       exists: Already Exists
       contains: Cannot contain /
+  backlinks:
+    title:
+      zero: ""
+      one: "{} Note links to this Note"
+      many: "{} Notes link to this Note"
+      two: "{} Notes link to this Note"
+      few: "{} Notes link to this Note"
+      other: "{} Notes link to this Note"
+
 rootFolder: Root Folder

lib/core/note.dart

@@ -406,6 +406,10 @@ class Note with NotesNotifier {
     _links = links;
     return links;
   }
+
+  List<Link> links() {
+    return _links;
+  }
 }
 
 String buildTitleFileName(String parentDir, String title) {

lib/widgets/note_viewer.dart

@@ -76,6 +76,7 @@ class NoteViewer extends StatelessWidget {
                   url, note.parent.folderPath + p.separator, null, null),
             ),
           ),
+          const SizedBox(height: 16.0),
           NoteBacklinkRenderer(note: note, rootFolder: rootFolder),
           // _buildFooter(context),
         ],

lib/widgets/notes_backlinks.dart

@@ -1,3 +1,4 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:gitjournal/folder_views/common.dart';
@@ -51,49 +52,110 @@ class _NoteBacklinkRendererState extends State<NoteBacklinkRenderer> {
       return Container();
     }
 
+    var title = widget.note.title;
+    if (title.isEmpty) {
+      title = widget.note.fileName;
+    }
+
+    var num = linkedNotes.length;
     var textTheme = Theme.of(context).textTheme;
     var c = Column(
       children: <Widget>[
-        Text('BackLinks', style: textTheme.headline5),
+        Text(
+          plural("widgets.backlinks.title", num),
+          style: textTheme.headline6,
+        ),
         const SizedBox(height: 8.0),
-        for (var n in linkedNotes)
+        for (var note in linkedNotes)
-          NoteSnippet(n, () {
+          NoteSnippet(
-            openNoteEditor(context, n);
+            note: note,
-          }),
+            parentNote: widget.note,
+            onTap: () {
+              openNoteEditor(context, note);
+            },
+          ),
       ],
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.start,
     );
 
-    return Padding(
+    var backgroundColor = Colors.grey[200];
-      padding: const EdgeInsets.fromLTRB(0.0, 16.0, 0.0, 16.0),
+    if (Theme.of(context).brightness == Brightness.dark) {
-      child: c,
+      backgroundColor = Theme.of(context).backgroundColor;
+    }
+    return Container(
+      color: backgroundColor,
+      width: MediaQuery.of(context).size.width,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0),
+        child: c,
+      ),
     );
   }
 }
 
 class NoteSnippet extends StatelessWidget {
   final Note note;
+  final Note parentNote;
   final Function onTap;
 
-  NoteSnippet(this.note, this.onTap);
+  NoteSnippet({
+    @required this.note,
+    @required this.parentNote,
+    @required this.onTap,
+  });
 
   @override
   Widget build(BuildContext context) {
-    var textTheme = Theme.of(context).textTheme;
+    var theme = Theme.of(context);
+    var textTheme = theme.textTheme;
     var title = note.title;
     if (title.isEmpty) {
       title = note.fileName;
     }
 
     return Padding(
-      padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0, 8.0),
+      padding: const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
-      child: GestureDetector(
+      child: Container(
-        onTap: () {
+        color: theme.scaffoldBackgroundColor,
-          openNoteEditor(context, note);
+        width: MediaQuery.of(context).size.width,
-        },
+        child: GestureDetector(
-        child: Text('-   $title', style: textTheme.bodyText1),
+          onTap: () {
+            openNoteEditor(context, note);
+          },
+          child: Column(
+            children: <Widget>[
+              Text('$title', style: textTheme.bodyText1),
+              const SizedBox(height: 8.0),
+              _buildSummary(context),
+            ],
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+          ),
+        ),
       ),
     );
   }
+
+  Widget _buildSummary(BuildContext context) {
+    var textTheme = Theme.of(context).textTheme;
+    var links = note.links();
+    if (links == null) {
+      return Container();
+    }
+
+    var link = links.where((l) => l.filePath == parentNote.filePath).first;
+    var body = note.body.split('\n');
+    var paragraph = body.firstWhere(
+      (line) => line.contains('[${link.term}]'),
+      orElse: () => "",
+    );
+    // vHanda: This isn't a very fool proof way of figuring out the line
+
+    return Text(
+      paragraph,
+      style: textTheme.bodyText2,
+      maxLines: 3,
+    );
+  }
 }