improve game widgets and sides, and TV history

app/views/game/gameIcon.scala.html

@@ -0,0 +1,8 @@
+@(game: Game)(implicit ctx: Context)
+@game.perfType match {
+case _ if game.fromPosition => {*}
+case _ if game.hasAi => {:}
+case _ if game.imported => {/}
+case Some(p) => {@p.iconChar}
+case _ => {8}
+}

app/views/game/side.scala.html

@@ -5,16 +5,13 @@
 
 <div class="side">
   <div class="side_box padded">
-    <div class="game_infos" data-icon="@game.perfType match {
-      case _ if game.fromPosition => {*}
-      case _ if game.hasAi => {:}
-      case _ if game.imported => {/}
-      case Some(p) => {@p.iconChar}
-      case _ => {8}
-      }">
+    <div class="game_infos" data-icon="@gameIcon(game)">
       <div class="header">
         <span class="setup">
           @bookmark.toggle(game)
+          @if(game.imported) {
+          <a class="hint--top" href="@routes.Importer.importGame" data-hint="@trans.importGame()">IMPORT</a>
+          } else {
           @game.clock.map(_.show).getOrElse {
           @game.daysPerTurn.map { days =>
           <span data-hint="@trans.correspondence()" class="hint--top">@{(days == 1).fold(trans.oneDay(), trans.nbDays(days))}</span>
@@ -29,6 +26,7 @@
           <span class="hint--top" data-hint="@pt.title">@pt.name.toUpperCase</span>
           }
           } • @game.rated.fold(trans.rated.str(), trans.casual.str()).toUpperCase
+          }
         </span>
         @game.pgnImport.flatMap(_.date).getOrElse(
         game.isBeingPlayed.fold(trans.playingRightNow(), momentFormat(game.createdAt))

app/views/game/widgets.scala.html

@@ -27,16 +27,16 @@
   @defining(user flatMap g.player) { fromPlayer =>
   @defining(fromPlayer | g.firstPlayer ) { firstPlayer =>
   @gameFen(g, firstPlayer.color, ownerLink, withTitle = false)
-  <div class="infos" data-icon="@g.perfType match {
-    case _ if g.fromPosition => {*}
-    case _ if g.hasAi => {:}
-    case _ if g.imported => {/}
-    case Some(p) => {@p.iconChar}
-    case _ => {8}
-    }">
+  <div class="infos" data-icon="@gameIcon(g)">
     @bookmark.toggle(g)
     <div class="header">
       <strong>
+        @if(g.imported) {
+        <span>IMPORT</span>
+        @g.pgnImport.flatMap(_.user).map { user =>
+        @trans.by(userIdLink(user.some, None, false))
+        }
+        } else {
         @g.clock.map(_.show).getOrElse {
         @g.daysPerTurn.map { days =>
         <span data-hint="@trans.correspondence()" class="hint--top">@if(days == 1) {@trans.oneDay()} else {@trans.nbDays(days)}</span>
@@ -46,6 +46,7 @@
         }
         • @g.perfType.map(_.name).getOrElse {@chess.variant.FromPosition.name}
         • @g.rated.fold(trans.rated(), trans.casual())
+        }
       </strong>
       @g.pgnImport.flatMap(_.date).getOrElse(momentFormat(g.createdAt))
     </div>

app/views/tv/side.scala.html

@@ -22,7 +22,7 @@
         <tbody>
           @games.map { g =>
           <tr>
-            <td><a class="view" href="@routes.Round.watcher(g.id, g.firstPlayer.color.name)" data-icon="v"></a></td>
+            <td><a class="icon" href="@routes.Round.watcher(g.id, g.firstPlayer.color.name)" data-icon="@game.gameIcon(g)"></a></td>
             <td>
               @playerLink(g.firstPlayer, withOnline = false, withDiff = true)<br />
               @playerLink(g.secondPlayer, withOnline = false, withDiff = true)

public/stylesheets/tv.css

@@ -17,12 +17,18 @@
   font-weight: bold;
   color: #a0a0a0;
 }
-#tv_history a.view {
-  padding-left: 5px;
+#tv_history a.icon {
+  font-size: 26px;
+  padding-left: 10px;
   text-decoration: none;
+  opacity: 0.7;
+  transition: 0.3s;
+}
+#tv_history tr:hover a.icon {
+  opacity: 1;
 }
 #tv_history td {
-  padding: 6px 5px 6px 5px;
+  padding: 4px 0px;
   border-top: 1px solid #eaeaea;
 }
 #tv_history tr:first-child td {