cleaned up URL list: added actionable icon; reliability display fixes

src/components/FilterBox.js

@@ -5,11 +5,9 @@ import './shared/flockbox.css';
 
 /* FilterBox component
 
-- surrounds the children elements with a "filter-box" treatment, which currently includes:
+- surrounds children elements with a "filter-box" treatment, which currently includes:
     - stylized mini titlebar with open/close icon
-    - (maybe in future:) draggable box
-
-expected props:
+    - (maybe in future:) draggable box capabilities
 
  */
 export default function FilterBox({

src/components/FilterButtons.js

@@ -36,7 +36,7 @@ export default function FilterButtons ( {
                 f.count = flock ? flock.filter((f.filterFunction)()).length : 0;
                 f.name = name // for render function
 
-                return <FilterButton key={name}
+                return f.count === 0 ? null :<FilterButton key={name}
                     name={name}
                     caption={f.caption}
                     count={f.count}

src/components/shared/components.css

@@ -9,6 +9,7 @@
     --border-row-light: 1pt solid #aeaeae !important;
 
     --margin-box-space: .35rem;
+    --margin-box-top: .35rem;
     --margin-box-bottom: .35rem;
     --margin-box-left: .35rem;
     --margin-button-list: .35rem;
@@ -179,16 +180,20 @@
 
 .filter-box-contents {
     display:block;
-    margin-top:0;
+    /*margin-top:var(--margin-box-top);*/
     padding:.33rem;
     padding-bottom: .56rem;
     border: var(--border-box-light);
     border-radius: var(--border-box-radius);
     background-color: var(--color-filter-box-contents);
-
-
-
 }
+.actionable-filter-box .filter-box-contents {
+    margin-top:var(--margin-box-top);
+    border: none;
+    background-color: inherit;
+    padding:0;
+}
+
 .filter-box-show {
     float:right;
     font-weight:normal;

src/components/shared/urls.css

@@ -6,7 +6,7 @@
     --width-url-archive-status: 3rem;
     --width-url-citations: 3.5rem;
     --width-url-templates: 4.0rem;
-    --width-url-actionable: 7.0rem;
+    --width-url-actionable: 8.0rem;
     --width-url-sections: 4.5rem;
     --width-url-perennial: 5.0rem;
 
@@ -21,6 +21,8 @@
     --width-archive-book-list: 1.3rem;     /* size of check / x icons in list */
     --height-archive-book-list: 1.3rem;
 
+    --width-icon-actionable: .75rem;
+
     /* perennial ratings colors */
     --color-rating-blacklist: hsl(347.31deg 100% 88%);
     --color-rating-unreliable: hsl(296.92deg 100% 88%);
@@ -505,4 +507,24 @@ button.utility-button.disabled {
 
 /*.feedback-div.fade-out {*/
 /*    opacity: 0;*/
-/*}*/
+/*}*/
+
+.yes-actionable {
+    position: relative;
+}
+.yes-actionable .icon-area {
+    content: "";
+    position:relative;
+    top:2pt;
+    display: inline-block;
+    margin-right:3pt;
+    width: var(--width-icon-actionable);
+    height: var(--width-icon-actionable);
+    background-image: url('../../images/actionable_icon.v1r1.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.url-perennial .lolite {
+    color: var(--color-lolite)
+}

src/components/v2/UrlFlock.js

@@ -418,7 +418,8 @@ const urlFlock = React.memo( function UrlFlock({
             return !u.actionable
                 ? null
                 : u.actionable.map( (key,i) => {
-                    return <div key={i}>{ACTIONABLE_FILTER_MAP[key].short_caption}</div>
+                    return <div className={"yes-actionable"} key={i}>
+                        <span className={"icon-area"}></span>{ACTIONABLE_FILTER_MAP[key].short_caption}</div>
                 })
         })
 
@@ -436,7 +437,7 @@ const urlFlock = React.memo( function UrlFlock({
                 ? null
                 // rsp contains keys into rspMap
                 : u.rsp.map( (s,i) => {
-                    return <div key={i}>{rspMap[s]?.shortCaption ? rspMap[s].shortCaption : ''}</div>
+                    return <div key={i} className={rspMap[s]?.key === "__unassigned" ? "lolite" : ""}>{rspMap[s]?.shortCaption ? rspMap[s].shortCaption : ''}</div>
                 })
         })
 

src/components/v2/UrlOverview.js

@@ -158,7 +158,8 @@ const UrlOverview = React.memo(({pageData, options, onAction, currentState, tool
 
                 {debugFilters}  {/* will eventually put all filters in this variable with a sort of config-comtrolled inclusion */}
 
-                <FilterBox name={"actionable"} caption={"Actionable"} showContents={expand.actionable}
+                <FilterBox name={"actionable"} caption={"Actionable"} className={'actionable-filter-box'}
+                           showContents={expand.actionable}
                            onToggle={onToggleShow}>
                     <ActionableChart pageData={pageData} onAction={onAction} currentState={currentState?.actionable}
                                      tooltipId={tooltipId}/>