Add torrent view, fix srht styles

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scss/srht"]
+	path = scss/srht
+	url = https://git.sr.ht/~sircmpwn/srht

scss/base.scss

@@ -1,3 +0,0 @@
-@import "bootstrap";
-$fa-font-path: "../node_modules/font-awesome/fonts/";
-@import "font-awesome";

scss/main.scss

@@ -0,0 +1,37 @@
+@import "base";
+
+.table {
+  tbody td {
+    border: none;
+  }
+}
+
+.torrent {
+  &.paused {
+    color: $gray-dark;
+    background: $gray-lighter;
+  }
+
+  &.idle {
+    color: $gray-dark;
+  }
+
+  &.error {
+    background-color: $brand-danger;
+    color: $white;
+    a {
+      color: $white;
+      text-decoration: underline;
+    }
+  }
+
+  &.seeding {
+    background-image: linear-gradient(to right, lighten($brand-info, 20), $brand-info);
+  }
+
+  &.leeching {
+    background-image: linear-gradient(to right, lighten($brand-success, 20), $brand-success);
+  }
+
+  background-repeat: no-repeat;
+}

scss/srht

@@ -0,0 +1 @@
+Subproject commit 1cea2941056108fe5fb17626ad9a45f4276c83eb

src/index.js

@@ -3,10 +3,13 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 
 import store from './store';
-import scss from '../scss/base.scss';
+import scss from '../scss/main.scss';
 import { ws_init } from './socket';
 import { filter_subscribe } from './actions/filter_subscribe';
 
+import Nav from './ui/navigation';
+import Main from './ui/main';
+
 ws_init(() => {
   store.dispatch(filter_subscribe());
   store.dispatch(filter_subscribe('server'));
@@ -14,9 +17,12 @@ ws_init(() => {
 
 render(
   <Provider store={store}>
-    <h1>
+    <div>
-      Hello world!
+      <Nav />
-    </h1>
+      <div className="container">
+        <Main />
+      </div>
+    </div>
   </Provider>,
   document.getElementById('root')
 );

src/ui/main.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import TorrentTable from './torrent_table';
+
+export default class Main extends Component {
+  render() {
+    return (
+      <div className="row">
+        <div className="col-md-4">
+          <h3>Filter</h3>
+          <p>TODO</p>
+        </div>
+        <div className="col-md-8">
+          <h3>Torrents</h3>
+          <TorrentTable />
+        </div>
+      </div>
+    );
+  }
+}

src/ui/navigation.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function render(props) {
+  return <nav className="navbar navbar-light navbar-toggleable-xl">
+    <span className="navbar-brand">receptor</span>
+    <div className="navbar-collapse collapse">
+      <ul className="navbar-nav mr-auto">
+        <li className="nav-item">
+          <a className="nav-link" href="#">all</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">leeching</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">seeding</a>
+        </li>
+      </ul>
+    </div>
+  </nav>;
+}

src/ui/torrent_table.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class TorrentTable extends Component {
+  render() {
+    const { torrents } = this.props;
+    return (
+      <table className="table">
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>up</th>
+            <th>down</th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.values(torrents).map(t =>
+            <tr
+              key={t.id}
+              className={`torrent ${"seeding" || t.status}`}
+              style={{
+                backgroundSize: `${t.progress * 100}% 100%`
+              }}
+            >
+              <td>
+                <a href="#">
+                  {t.name}
+                </a>
+              </td>
+              <td>{t.rate_up}</td>
+              <td>{t.rate_down}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default connect(state => ({ torrents: state.torrents }))(TorrentTable);

webpack.config.js

@@ -28,10 +28,10 @@ module.exports = {
             loader: 'sass-loader',
             options: {
               includePaths: [
-                path.resolve(__dirname, './node_modules/bootstrap/scss/'),
+                path.resolve(__dirname, './node_modules'),
-                path.resolve(__dirname, './node_modules/font-awesome/scss/')
+                path.resolve(__dirname, './scss/srht/srht/scss'),
               ]
-            }
+            },
           }
         ],
       }