add selected indicator in list view

dist/styles/cards.css

@@ -75,7 +75,7 @@
     width: calc(100% - 6px);
     height: calc(100% - 6px);
     border: 1px solid var(--white);
-    outline: 2px solid #0078d4;
+    outline: 2px solid var(--primary);
 }
 .card.hidden::after {
     content: "";
@@ -223,6 +223,13 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
 }
+.list-card.selected::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    border-left: 2px solid var(--primary);
+}
 
 .magazine-card {
     width: 700px;

dist/styles/global.css

@@ -16,6 +16,7 @@
     --black: #000;
     --white: #fff;
     --whiteConstant: #fff;
+    --primary: #0078d4;
     --navHeight: 32px;
 
     --blur-0: saturate(150%) blur(16px);

src/components/cards/card.tsx

@@ -11,6 +11,7 @@ export namespace Card {
         item: RSSItem
         source: RSSSource
         filter: FeedFilter
+        selected?: boolean
         viewConfigs?: ViewConfigs
         shortcuts: (item: RSSItem, e: KeyboardEvent) => void
         markRead: (item: RSSItem) => void

src/components/cards/list-card.tsx

@@ -7,6 +7,7 @@ import { ViewConfigs } from "../../schema-types"
 const className = (props: Card.Props) => {
     let cn = ["card", "list-card"]
     if (props.item.hidden) cn.push("hidden")
+    if (props.selected) cn.push("selected")
     return cn.join(" ")
 }
 

src/components/feeds/feed.tsx

@@ -11,6 +11,7 @@ export type FeedProps = FeedReduxProps & {
     viewType: ViewType
     viewConfigs?: ViewConfigs
     items: RSSItem[]
+    currentItem: string
     sourceMap: Object
     filter: FeedFilter
     shortcuts: (item: RSSItem, e: KeyboardEvent) => void

src/components/feeds/list-feed.tsx

@@ -8,6 +8,7 @@ import { ViewType } from "../../schema-types";
 import ListCard from "../cards/list-card";
 import MagazineCard from "../cards/magazine-card";
 import CompactCard from "../cards/compact-card";
+import { Card } from "../cards/card";
 
 class ListFeed extends React.Component<FeedProps> {
     onRenderItem = (item: RSSItem) => {
@@ -22,6 +23,9 @@ class ListFeed extends React.Component<FeedProps> {
             markRead: this.props.markRead,
             contextMenu: this.props.contextMenu,
             showItem: this.props.showItem,
+        } as Card.Props
+        if (this.props.viewType === ViewType.List && this.props.currentItem === item._id) {
+            props.selected = true
         }
 
         switch (this.props.viewType) {

src/containers/feed-container.tsx

@@ -19,17 +19,19 @@ const getFeed = (state: RootState, props: FeedContainerProps) => state.feeds[pro
 const getFilter = (state: RootState) => state.page.filter
 const getView = (_, props: FeedContainerProps) => props.viewType
 const getViewConfigs = (state: RootState) => state.page.viewConfigs
+const getCurrentItem = (state: RootState) => state.page.itemId
 
 const makeMapStateToProps = () => {
     return createSelector(
-        [getSources, getItems, getFeed, getView, getFilter, getViewConfigs],
+        [getSources, getItems, getFeed, getView, getFilter, getViewConfigs, getCurrentItem],
-        (sources, items, feed, viewType, filter, viewConfigs) => ({
+        (sources, items, feed, viewType, filter, viewConfigs, currentItem) => ({
             feed: feed,
             items: feed.iids.map(iid => items[iid]),
             sourceMap: sources,
             filter: filter,
             viewType: viewType,
             viewConfigs: viewConfigs,
+            currentItem: currentItem,
         })
     )
 }