From 1f99f6163b65f085807534cd989e073b0232d572 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 11:10:48 +0100
Subject: [PATCH 1/9] move _redirects to public folder (netlify)

---
 .gitignore                      | 1 +
 _redirects => public/_redirects | 0
 2 files changed, 1 insertion(+)
 rename _redirects => public/_redirects (100%)

diff --git a/.gitignore b/.gitignore
index a294589b..890a205a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ node_modules
 .vscode/settings.json
 storybook-static
 # _redirects
+journal-of-digital-history.code-workspace
diff --git a/_redirects b/public/_redirects
similarity index 100%
rename from _redirects
rename to public/_redirects

From 14a26e88a54edda8cdc1a16b506ac421865f4f12 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 11:28:27 +0100
Subject: [PATCH 2/9] progressive loading articles page

---
 src/components/Articles/ArticlesFacets.js |  3 +-
 src/components/Articles/ArticlesGrid.js   | 55 ++++++++++++++++-------
 src/components/Facets/Dimension.js        | 11 ++++-
 src/components/Facets/Facets.js           |  2 +
 src/pages/Articles.js                     | 12 ++---
 5 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/components/Articles/ArticlesFacets.js b/src/components/Articles/ArticlesFacets.js
index 17849418..45e11c20 100644
--- a/src/components/Articles/ArticlesFacets.js
+++ b/src/components/Articles/ArticlesFacets.js
@@ -105,7 +105,7 @@ const Dimensions = [
   },
 ]
 
-const ArticlesFacets = ({ items, onSelect, className }) => {
+const ArticlesFacets = ({ items, onSelect, onShowMore, className }) => {
   return (
     <Facets
       dimensions={Dimensions}
@@ -113,6 +113,7 @@ const ArticlesFacets = ({ items, onSelect, className }) => {
       onSelect={onSelect}
       onInit={(args) => console.debug('[ArticlesFacets] @init', args)}
       ShowMoreLabel={ShowMoreLabel}
+      onShowMore={onShowMore}
       className={className}
     />
   )
diff --git a/src/components/Articles/ArticlesGrid.js b/src/components/Articles/ArticlesGrid.js
index 2c06fe77..9ad27c32 100644
--- a/src/components/Articles/ArticlesGrid.js
+++ b/src/components/Articles/ArticlesGrid.js
@@ -23,10 +23,9 @@ import Article from '../../models/Article'
 import ArticlesFacets from '../Articles/ArticlesFacets'
 import Issue from '../Issue'
 import ArticleFingerprintTooltip from '../ArticleV2/ArticleFingerprintTooltip'
-
 import groupBy from 'lodash/groupBy'
 import { Container, Row, Col } from 'react-bootstrap'
-import { useSpring, config } from 'react-spring'
+import { useSpring, config, a } from '@react-spring/web'
 import { useHistory } from 'react-router'
 import { useBoundingClientRect } from '../../hooks/graphics'
 
@@ -39,6 +38,7 @@ const ArticlesGrid = ({
   // tag ategories to keep
   categories = ['narrative', 'tool', 'issue'],
 }) => {
+  const facetsRef = useRef()
   const { t } = useTranslation()
   const [{ [OrderByQueryParam]: orderBy }, setQuery] = useQueryParams({
     [OrderByQueryParam]: withDefault(
@@ -64,6 +64,10 @@ const ArticlesGrid = ({
     backgroundColor: 'var(--secondary)',
     config: config.stiff,
   }))
+  // animation properties to slide up and down the articleFacets block
+  const [facetsAnimatedProps, setFacetsAnimatedProps] = useSpring(() => ({
+    height: 0,
+  }))
   const data = (items || []).map((d, idx) => new Article({ ...d, idx }))
   const articles = sort(data, AvailablesOrderByComparators[orderBy])
   const { articlesByIssue, showFilters } = useMemo(() => {
@@ -163,6 +167,15 @@ const ArticlesGrid = ({
     selected,
   )
 
+  useLayoutEffect(() => {
+    if (status === StatusSuccess) {
+      setFacetsAnimatedProps.start({
+        height: facetsRef.current.scrollHeight,
+        delay: 1000,
+      })
+    }
+  }, [status])
+
   return (
     <Container ref={ref} className="Articles Issue page ">
       <ArticleFingerprintTooltip forwardedRef={animatedRef} animatedProps={animatedProps} />
@@ -183,20 +196,32 @@ const ArticlesGrid = ({
           </div>
         </Col>
       </Row>
-      {showFilters && (
-        <Row className="mb-3">
-          <Col md={{ offset: 1, span: 10 }}>
-            {status === StatusSuccess && (
-              <ArticlesFacets
-                items={data}
-                onSelect={onFacetsSelectHandler}
-                className="Articles_facets"
-              />
-            )}
-          </Col>
-        </Row>
-      )}
 
+      <a.div
+        className="row mb-3 position-relative overflow-hidden"
+        ref={facetsRef}
+        style={facetsAnimatedProps}
+      >
+        <Col md={{ offset: 1, span: 10 }} className="position-absolute">
+          {status === StatusSuccess && (
+            <ArticlesFacets
+              items={data}
+              onShowMore={() => {
+                console.info('[ArticlesGrid] @showMore')
+                // eslint-disable-next-line
+                setTimeout(() => {
+                  setFacetsAnimatedProps.set({
+                    height: facetsRef.current.firstChild.scrollHeight,
+                    delay: 0,
+                  })
+                }, 0)
+              }}
+              onSelect={onFacetsSelectHandler}
+              className="Articles_facets "
+            />
+          )}
+        </Col>
+      </a.div>
       {orderBy === OrderByIssue &&
         issues.map((issue) => {
           // const issue = articlesByIssue[id][0].issue
diff --git a/src/components/Facets/Dimension.js b/src/components/Facets/Dimension.js
index 0739cc8f..b98d8528 100644
--- a/src/components/Facets/Dimension.js
+++ b/src/components/Facets/Dimension.js
@@ -80,6 +80,7 @@ const Dimension = ({
   onInit,
   onSelect,
   onMouseEnter,
+  onShowMore,
   children,
   ListItem = DimensionGroupListItem,
 }) => {
@@ -174,7 +175,15 @@ const Dimension = ({
           ))}
         {restGroups.length > 0 && (
           <li>
-            <button className="Dimension_toggleShowMoreBtn" onClick={() => setShowMore(!showMore)}>
+            <button
+              className="Dimension_toggleShowMoreBtn"
+              onClick={() => {
+                if (typeof onShowMore === 'function') {
+                  onShowMore(!showMore)
+                }
+                setShowMore(!showMore)
+              }}
+            >
               <span>
                 {t(showMore ? 'dimensions.actions.showLess' : 'dimensions.actions.showMore', {
                   n: restGroups.length,
diff --git a/src/components/Facets/Facets.js b/src/components/Facets/Facets.js
index 2edacacd..af504825 100644
--- a/src/components/Facets/Facets.js
+++ b/src/components/Facets/Facets.js
@@ -146,6 +146,7 @@ const Facets = ({
   onSelect,
   onInit,
   onMouseEnter,
+  onShowMore,
   className,
   style,
 }) => {
@@ -242,6 +243,7 @@ const Facets = ({
             onSelect={onSelectHandler}
             onInit={onInitHandler}
             onMouseEnter={onMouseEnterHandler}
+            onShowMore={onShowMore}
             ListItem={dimension.ListItem}
           >
             {reset === true && dims[dimension.name].selected.length > 0 && (
diff --git a/src/pages/Articles.js b/src/pages/Articles.js
index e5566c16..aa3c1a2e 100644
--- a/src/pages/Articles.js
+++ b/src/pages/Articles.js
@@ -9,6 +9,8 @@ import { usePropsStore } from '../store'
 import { StatusError, StatusFetching, StatusSuccess } from '../constants'
 import ErrorViewer from './ErrorViewer'
 
+const ProgressLoadingId = 'articles'
+
 const Articles = ({
   match: {
     params: { id: issueId },
@@ -29,7 +31,7 @@ const Articles = ({
       axios
         .get('/api/issues?ordering=-pid', {
           timeout: 10000,
-          onDownloadProgress: (e) => setLoadingProgressFromEvent(e, 'articles', 0.5, 0),
+          onDownloadProgress: (e) => setLoadingProgressFromEvent(e, ProgressLoadingId, 0.5, 0),
         })
         .then((res) => res.data.results),
   })
@@ -43,7 +45,7 @@ const Articles = ({
       axios
         .get('/api/articles?limit=500', {
           timeout: 10000,
-          onDownloadProgress: (e) => setLoadingProgressFromEvent(e, 'articles', 0.5, 0.5),
+          onDownloadProgress: (e) => setLoadingProgressFromEvent(e, ProgressLoadingId, 0.5, 0.5),
         })
         .then((res) => res.data.results),
     enabled: statusIssues === StatusSuccess,
@@ -51,11 +53,11 @@ const Articles = ({
 
   useEffect(() => {
     if (statusIssues === StatusFetching) {
-      setLoadingProgress(0.05, 'articles')
+      setLoadingProgress(0.05, ProgressLoadingId)
     } else if (statusArticles === StatusSuccess) {
-      setLoadingProgress(1, 'articles')
+      setLoadingProgress(1, ProgressLoadingId)
     } else if (statusArticles === StatusError) {
-      setLoadingProgress(0, 'articles')
+      setLoadingProgress(0, ProgressLoadingId)
     }
   }, [statusIssues, statusArticles])
 

From ec83e85736ca4aa12e98095a33f038e959a3c113 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 14:43:51 +0100
Subject: [PATCH 3/9] add number of articles published to issue

---
 src/components/Articles/ArticlesGrid.js | 43 ++++++++++++++++---------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/Articles/ArticlesGrid.js b/src/components/Articles/ArticlesGrid.js
index 9ad27c32..2be31ce4 100644
--- a/src/components/Articles/ArticlesGrid.js
+++ b/src/components/Articles/ArticlesGrid.js
@@ -28,6 +28,7 @@ import { Container, Row, Col } from 'react-bootstrap'
 import { useSpring, config, a } from '@react-spring/web'
 import { useHistory } from 'react-router'
 import { useBoundingClientRect } from '../../hooks/graphics'
+import { useWindowStore } from '../../store'
 
 const ArticlesGrid = ({
   items = [],
@@ -39,6 +40,7 @@ const ArticlesGrid = ({
   categories = ['narrative', 'tool', 'issue'],
 }) => {
   const facetsRef = useRef()
+  const timerRef = useRef()
   const { t } = useTranslation()
   const [{ [OrderByQueryParam]: orderBy }, setQuery] = useQueryParams({
     [OrderByQueryParam]: withDefault(
@@ -82,6 +84,7 @@ const ArticlesGrid = ({
     const sortedItems = data.map((item, idx) => ({
       ...item,
       idx,
+      selected: selected?.includes(idx),
     }))
     const articlesByIssue = groupBy(sortedItems, 'issue.pid')
 
@@ -89,7 +92,7 @@ const ArticlesGrid = ({
       return acc || d.tags.some((t) => categories.includes(t.category))
     }, false)
     return { articlesByIssue, showFilters }
-  }, [url, status])
+  }, [url, selected, status])
 
   const onArticleMouseMoveHandler = (e, datum, idx, article, bounds) => {
     if (!isNaN(idx) && animatedRef.current.idx !== idx) {
@@ -158,21 +161,22 @@ const ArticlesGrid = ({
   useLayoutEffect(() => {
     setAnimatedProps.start({ opacity: 0 })
   }, [selected])
-  console.debug(
-    '[Articles] \n- articles:',
-    Array.isArray(articles),
-    articles,
-    '\n- issueId:',
-    issueId,
-    selected,
-  )
 
   useLayoutEffect(() => {
     if (status === StatusSuccess) {
       setFacetsAnimatedProps.start({
-        height: facetsRef.current.scrollHeight,
+        height: facetsRef.current.firstChild.scrollHeight,
         delay: 1000,
       })
+      return useWindowStore.subscribe(() => {
+        clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => {
+          setFacetsAnimatedProps.start({
+            height: facetsRef.current.firstChild.scrollHeight,
+            delay: 0,
+          })
+        }, 0)
+      })
     }
   }, [status])
 
@@ -198,7 +202,7 @@ const ArticlesGrid = ({
       </Row>
 
       <a.div
-        className="row mb-3 position-relative overflow-hidden"
+        className="row mb-1 position-relative overflow-hidden"
         ref={facetsRef}
         style={facetsAnimatedProps}
       >
@@ -208,9 +212,9 @@ const ArticlesGrid = ({
               items={data}
               onShowMore={() => {
                 console.info('[ArticlesGrid] @showMore')
-                // eslint-disable-next-line
+                clearTimeout(timerRef.current)
                 setTimeout(() => {
-                  setFacetsAnimatedProps.set({
+                  setFacetsAnimatedProps.start({
                     height: facetsRef.current.firstChild.scrollHeight,
                     delay: 0,
                   })
@@ -224,11 +228,11 @@ const ArticlesGrid = ({
       </a.div>
       {orderBy === OrderByIssue &&
         issues.map((issue) => {
-          // const issue = articlesByIssue[id][0].issue
+          const numArticles = articlesByIssue[issue.pid]?.length
+          const numSelectedArticles = articlesByIssue[issue.pid]?.filter((d) => d.selected).length
 
           return (
             <React.Fragment key={issue.pid}>
-              <hr />
               <a className="anchor" id={`anchor-${issue.pid}`} />
 
               <IssueArticles
@@ -238,7 +242,14 @@ const ArticlesGrid = ({
                 onArticleClick={onArticleClickHandler}
                 onArticleMouseOut={onArticleMouseOutHandler}
               >
-                <Issue item={issue} className="my-2" />
+                <Issue
+                  numArticles={numArticles}
+                  isInFilterMode={Array.isArray(selected)}
+                  numSelectedArticles={numSelectedArticles}
+                  hasSelectedArticles={!!articlesByIssue[issue.pid]}
+                  item={issue}
+                  className="py-2 mb-1"
+                />
               </IssueArticles>
             </React.Fragment>
           )

From b788ec8996930607e2a99ada12f6bb35c82aa0c9 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 14:44:07 +0100
Subject: [PATCH 4/9] remove date in Issue label, add name

---
 src/components/Issue/IssueLabel.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Issue/IssueLabel.js b/src/components/Issue/IssueLabel.js
index 36d73821..a851b39e 100644
--- a/src/components/Issue/IssueLabel.js
+++ b/src/components/Issue/IssueLabel.js
@@ -1,15 +1,21 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-const IssueLabel = ({ pid, publication_date }) => {
+const IssueLabel = ({ pid = '', name }) => {
   const { t } = useTranslation()
   return (
     <React.Fragment>
       {pid.replace(/jdh0+(\d+)/, (m, n) => t('numbers.issue', { n }))}
       &nbsp;&middot;&nbsp;
-      {new Date(publication_date).getFullYear()}
+      {name}
     </React.Fragment>
   )
 }
 
+IssueLabel.propTypes = {
+  pid: PropTypes.string,
+  name: PropTypes.string,
+}
+
 export default IssueLabel

From 87a413249faa4c40589116f6e82b4d02ec2dbbe3 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 14:44:32 +0100
Subject: [PATCH 5/9] add active/disabled class for Issue component

---
 src/components/Issue/Issue.css | 10 ++++++++
 src/components/Issue/Issue.js  | 44 ++++++++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Issue/Issue.css

diff --git a/src/components/Issue/Issue.css b/src/components/Issue/Issue.css
new file mode 100644
index 00000000..21056a40
--- /dev/null
+++ b/src/components/Issue/Issue.css
@@ -0,0 +1,10 @@
+.Issue.disabled > div {
+  display: none !important;
+}
+.Issue {
+  border-top: 1px solid var(--gray-400);
+  position: sticky;
+  top: 99px;
+  background: var(--gray-100);
+  z-index: 1;
+}
diff --git a/src/components/Issue/Issue.js b/src/components/Issue/Issue.js
index ba2c35bc..f0014d82 100644
--- a/src/components/Issue/Issue.js
+++ b/src/components/Issue/Issue.js
@@ -3,17 +3,27 @@ import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 import { Col, Row } from 'react-bootstrap'
 import { a, useSpring } from '@react-spring/web'
+import './Issue.css'
 
-const Issue = ({ item, className = '' }) => {
+const Issue = ({
+  item,
+  numArticles = -1,
+  numSelectedArticles = -1,
+  isInFilterMode = false,
+  className = '',
+}) => {
   const ref = useRef()
+  const { t } = useTranslation()
   const descriptionRef = useRef()
   const buttonRef = useRef()
   const isOpen = useRef(false)
 
   const [{ height }, api] = useSpring(() => ({ height: 0 }))
-  const { t } = useTranslation()
   const label = item.pid.replace(/jdh0+(\d+)/, (m, n) => t('numbers.issue', { n }))
 
+  const activeClass = isInFilterMode && numSelectedArticles > 0 ? 'active' : ''
+  const disabledClass = isInFilterMode && numSelectedArticles < 1 ? 'disabled' : ''
+
   const toggleHeight = () => {
     isOpen.current = !isOpen.current
     // change label on the button
@@ -38,9 +48,32 @@ const Issue = ({ item, className = '' }) => {
   }, [ref])
 
   return (
-    <Row className={`Issue align-items-start ${className}`}>
+    <Row className={`Issue align-items-start ${className} ${activeClass} ${disabledClass}`}>
       <Col md={{ span: 11 }} lg={{ span: 5 }} ref={ref}>
-        {label} {item.status !== 'PUBLISHED' ? <b>&mdash; {t('status.' + item.status)}</b> : null}
+        {item.status !== 'PUBLISHED' ? <em>{t('status.' + item.status)}</em> : label}
+        {isInFilterMode && numSelectedArticles > 0 ? (
+          <>
+            &nbsp; &mdash; &nbsp;
+            <div
+              className="d-inline-block"
+              dangerouslySetInnerHTML={{
+                __html: t('numbers.articlesFiltered', {
+                  n: numSelectedArticles,
+                  total: numArticles,
+                }),
+              }}
+            />
+          </>
+        ) : null}
+        {!isInFilterMode && numArticles > 0 ? (
+          <>
+            &nbsp; &mdash; &nbsp;
+            <div
+              className="d-inline-block"
+              dangerouslySetInnerHTML={{ __html: t('numbers.articles', { n: numArticles }) }}
+            />{' '}
+          </>
+        ) : null}
         <h2>{item.name}</h2>
       </Col>
 
@@ -74,6 +107,9 @@ Issue.propTypes = {
     description: PropTypes.string,
     status: PropTypes.string.isRequired,
   }).isRequired,
+  numArticles: PropTypes.number,
+  numSelectedArticles: PropTypes.number,
+  isInFilterMode: PropTypes.bool,
   className: PropTypes.string,
 }
 

From 745af9b08a66fb4deb457992aaae5427a86aa22f Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 14:44:37 +0100
Subject: [PATCH 6/9] Update ArticlesFacets.js

---
 src/components/Articles/ArticlesFacets.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Articles/ArticlesFacets.js b/src/components/Articles/ArticlesFacets.js
index 45e11c20..6cd07dd8 100644
--- a/src/components/Articles/ArticlesFacets.js
+++ b/src/components/Articles/ArticlesFacets.js
@@ -57,7 +57,7 @@ const IssueListItem = (props) => {
         const issue = props.items[group.indices[0]].issue
         return (
           <div className="d-flex align-items-center flex-nowrap" title={issue.name || group.key}>
-            <IssueLabel pid={issue.pid} publication_date={issue.publication_date} />
+            <IssueLabel pid={issue.pid} name={issue.name} />
             <div>&nbsp;({group.count})</div>
           </div>
         )

From c60b52e8a10604d23fe4b9e5d2125b13bba69c25 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 14:44:40 +0100
Subject: [PATCH 7/9] Update translations.json

---
 src/translations.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/translations.json b/src/translations.json
index ee7dfc7e..7e90b5af 100644
--- a/src/translations.json
+++ b/src/translations.json
@@ -264,6 +264,7 @@
         "currentCharactersWithCount": "(now: <b>{{count}}</b>)",
         "itemIdx": "(item #{{idx}})",
         "articles": "{{ n }} articles",
+        "articlesFiltered": "<b>{{ n }}</b> of {{ total }} articles matching filters",
         "datatableRows": "<b>{{ total }}</b> rows",
         "datatableRowsFiltered": "<b>{{ n }}</b> / {{ total }} rows (filtered)",
         "datatableShowAllRows": "show all rows ({{ n }})",

From 716e3a92aace8736a35d6824fbc5d9c679cd6e79 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 15:28:46 +0100
Subject: [PATCH 8/9] add "new" label

---
 src/components/Issue/Issue.css                |  5 ++++
 src/components/Issue/Issue.js                 |  6 ++---
 src/components/Issue/IssueArticleGridItem.js  | 16 +++++++++++-
 src/components/Issue/IssueLabel.js            | 11 +++++---
 .../components/IssueArticleGridItem.scss      | 26 ++++++++++++++++++-
 src/translations.json                         |  1 +
 6 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/src/components/Issue/Issue.css b/src/components/Issue/Issue.css
index 21056a40..40a65db2 100644
--- a/src/components/Issue/Issue.css
+++ b/src/components/Issue/Issue.css
@@ -8,3 +8,8 @@
   background: var(--gray-100);
   z-index: 1;
 }
+.Issue__numArticles b {
+  border: 1px solid;
+  padding: 0 6px 0 5px;
+  border-radius: 5px;
+}
diff --git a/src/components/Issue/Issue.js b/src/components/Issue/Issue.js
index f0014d82..073e3384 100644
--- a/src/components/Issue/Issue.js
+++ b/src/components/Issue/Issue.js
@@ -55,7 +55,7 @@ const Issue = ({
           <>
             &nbsp; &mdash; &nbsp;
             <div
-              className="d-inline-block"
+              className="d-inline-block Issue__numArticles"
               dangerouslySetInnerHTML={{
                 __html: t('numbers.articlesFiltered', {
                   n: numSelectedArticles,
@@ -69,8 +69,8 @@ const Issue = ({
           <>
             &nbsp; &mdash; &nbsp;
             <div
-              className="d-inline-block"
-              dangerouslySetInnerHTML={{ __html: t('numbers.articles', { n: numArticles }) }}
+              className="d-inline-block Issue__numArticles"
+              dangerouslySetInnerHTML={{ __html: t('numbers.articlesInIssue', { n: numArticles }) }}
             />{' '}
           </>
         ) : null}
diff --git a/src/components/Issue/IssueArticleGridItem.js b/src/components/Issue/IssueArticleGridItem.js
index 49d740ea..4cdc8fd6 100644
--- a/src/components/Issue/IssueArticleGridItem.js
+++ b/src/components/Issue/IssueArticleGridItem.js
@@ -12,6 +12,8 @@ import '../../styles/components/IssueArticleGridItem.scss'
 import { ArrowRightCircle } from 'react-feather'
 import IssueLabel from './IssueLabel'
 
+const JustAddedTimeInterval = 3600000 * 24 * 240
+
 const IssueArticleGridItem = ({
   article = {},
   isFake = false,
@@ -25,8 +27,20 @@ const IssueArticleGridItem = ({
   const [{ width: size }, ref] = useBoundingClientRect()
   const { title, keywords, excerpt, contributor } = extractMetadataFromArticle(article)
   const { t } = useTranslation()
+  const isPrettyRecent = new Date() - new Date(article.publication_date) < JustAddedTimeInterval
+  console.debug(
+    '[IssueArticleGridItem]',
+    article.publication_date,
+    new Date() - new Date(article.publication_date),
+    JustAddedTimeInterval,
+    isPrettyRecent,
+  )
   return (
-    <div className="IssueArticleGridItem" ref={ref} onMouseOut={onMouseOut}>
+    <div
+      className={`IssueArticleGridItem ${isPrettyRecent ? 'just-added' : ''}`}
+      ref={ref}
+      onMouseOut={onMouseOut}
+    >
       <div
         className={IsMobile ? 'half-squared' : 'squared'}
         onMouseOut={onMouseOut}
diff --git a/src/components/Issue/IssueLabel.js b/src/components/Issue/IssueLabel.js
index a851b39e..110664f6 100644
--- a/src/components/Issue/IssueLabel.js
+++ b/src/components/Issue/IssueLabel.js
@@ -2,13 +2,18 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
 
-const IssueLabel = ({ pid = '', name }) => {
+const IssueLabel = ({ pid = '', name = '' }) => {
   const { t } = useTranslation()
+  const shortName = name.length > 16 ? name.slice(0, 16) + '...' : name
   return (
     <React.Fragment>
       {pid.replace(/jdh0+(\d+)/, (m, n) => t('numbers.issue', { n }))}
-      &nbsp;&middot;&nbsp;
-      {name}
+      {name.length > 0 ? (
+        <>
+          &nbsp;&middot;&nbsp;
+          {shortName}
+        </>
+      ) : null}
     </React.Fragment>
   )
 }
diff --git a/src/styles/components/IssueArticleGridItem.scss b/src/styles/components/IssueArticleGridItem.scss
index d7a86546..7999a800 100644
--- a/src/styles/components/IssueArticleGridItem.scss
+++ b/src/styles/components/IssueArticleGridItem.scss
@@ -2,6 +2,8 @@
 .IssueArticleGridItem {
   margin: var(--spacer-3) 0;
   border-top: 1px solid var(--secondary);
+  border-radius: 10px;
+  padding: 10px;
   svg {
     cursor: pointer;
   }
@@ -20,6 +22,28 @@
   padding: var(--spacer-1);
 }
 
+.IssueArticleGridItem.just-added {
+  position: relative;
+  border: 1px solid var(--accent);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+.IssueArticleGridItem.just-added::after {
+  position: absolute;
+  top: -15px;
+  left: 6px;
+  transform: rotate(-3deg);
+  font-size: 0.8em;
+  content: 'new';
+  color: var(--white);
+  text-transform: uppercase;
+  padding: 2px 8px;
+  letter-spacing: 1px;
+  border-radius: 5px;
+  font-weight: bold;
+  background-color: var(--accent);
+  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+}
+
 .IssueArticleGridItem_contributor {
   display: inline-block;
   a {
@@ -59,7 +83,7 @@
   .IssueArticleGridItem {
     margin: 0;
     margin-bottom: var(--spacer-5);
-    padding: 0;
+    // padding: 0;
     border-top-color: transparent;
   }
 }
diff --git a/src/translations.json b/src/translations.json
index 7e90b5af..801fcfc3 100644
--- a/src/translations.json
+++ b/src/translations.json
@@ -264,6 +264,7 @@
         "currentCharactersWithCount": "(now: <b>{{count}}</b>)",
         "itemIdx": "(item #{{idx}})",
         "articles": "{{ n }} articles",
+        "articlesInIssue": "<b>{{ n }}</b> articles",
         "articlesFiltered": "<b>{{ n }}</b> of {{ total }} articles matching filters",
         "datatableRows": "<b>{{ total }}</b> rows",
         "datatableRowsFiltered": "<b>{{ n }}</b> / {{ total }} rows (filtered)",

From d66347baff1a14e64c31501eb0b67f1d6540be00 Mon Sep 17 00:00:00 2001
From: Daniele Guido <gui.daniele@gmail.com>
Date: Mon, 12 Feb 2024 15:41:15 +0100
Subject: [PATCH 9/9] increase space

---
 src/components/Issue/IssueArticles.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Issue/IssueArticles.js b/src/components/Issue/IssueArticles.js
index eefd5557..3858d02a 100644
--- a/src/components/Issue/IssueArticles.js
+++ b/src/components/Issue/IssueArticles.js
@@ -26,6 +26,7 @@ const IssueArticles = ({
 
   respectOrdering = false,
   children,
+  className = '',
 }) => {
   const ref = React.useRef()
   const bboxRef = React.useRef()
@@ -77,8 +78,9 @@ const IssueArticles = ({
   console.debug('[IssueArticles] rendered')
 
   return (
-    <Row ref={ref}>
+    <Row ref={ref} className={`IssueArticles ${className}`}>
       {children}
+      {data.length > 0 && <Col sm={{ span: 12 }} className="py-3"></Col>}
       {editorials.map((article, i) => {
         if (Array.isArray(selected) && selected.indexOf(article.idx) === -1) {
           return null