From 2108d165fc775e1ec86f0043a1b27de0d787ddf2 Mon Sep 17 00:00:00 2001
From: Tom <mottoes_recap0u@icloud.com>
Date: Thu, 4 May 2023 18:18:47 +0200
Subject: [PATCH] add offline indicator in popular boards section

---
 public/assets/disconnected.png        | Bin 0 -> 859 bytes
 public/assets/offline.png             | Bin 0 -> 2155 bytes
 src/components/BoardAvatar.jsx        |  30 ++++++++++++++++++++++++++
 src/components/styled/Home.styled.jsx |  17 ++++++++++++++-
 src/components/views/Home.jsx         |  15 +------------
 5 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 public/assets/disconnected.png
 create mode 100644 public/assets/offline.png
 create mode 100644 src/components/BoardAvatar.jsx

diff --git a/public/assets/disconnected.png b/public/assets/disconnected.png
new file mode 100644
index 0000000000000000000000000000000000000000..a40aa2bb0c843be979468f70180b57f687fcaae8
GIT binary patch
literal 859
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fjKx9jP7LeL$-D$|6p}rHd>I(3
z)EF2VS{N990fib~Fff!FFfhDIU|_JC!N4G1FlSew4NxK=HNrE^*Ox&H$mU>RViaOv
z2C^7|kfA-3fd$NFU;vr~1k4K<5wZ)I;Id*1m=SD{LcTw;E<i&fGeaUuB7A+UlJj%*
z5>xV%QuQiw3qT4OY$~jP%-qzHM1_jnoV;SI3R@+x3M(KRB&@Hb09I0xZL1XF8=&Bv
zUzDm~re~mMpk&9TprBw=l#*r@<l+X^4&>P?Wt5Z@Sn2DRmzV368|&p4rRy77T3YHG
z80i}s=>k>g7FXt#Bv$C=6)QswftllyTAW;zSx}OhpQivaH!&%{w8U0P31kr*K-^i9
znTD__uNdkrpa=CqGWv#k2KsQbfm&@qqE`MznW;dVLFU^T+JIG}h(YbK(Fa+M<QRxg
z!J<H~+Hu+F!-LI^OET^uJ1~$nJY5_^ECkn1_T_7K;Aow@Z1ubaUla81R>@7zi>=xy
zx4?6Iu;OP9rRKlJhC%lpGfU2%_2bmWJ4<H0<7A4SwlwVc&vmc2>`R<GwP<<8ymU|A
z!wMV4GxG0$kJ<k#@7C<)nUAV{FCE#j^?3Kq>)Y0@P0yD*E~rpdS8d3wbBjA+wydbt
zmZ;5Hz3Kujjq)=0`ZjwDh&U9#+P$*(e6lC6V`cb^C=vUF^{YO{vX*TLUoUaE;#Pg}
z!?+Ob-(uVRUaxssKkt#p304c0l<Ur{9#T(EFZDdHuH(zHu1+>1M2aJ31v{f}>+PtC
z$DdTrm9YHgChR`hMXK4qY|4Z0X^RdVzm)i#X~XYrr4gJrBfG-_XXM-FEZ*Lg&=odu
ry{4;`guMOd!!@Gzdz-TM-~Py5wxR5w<4@H%Q1bJ1^>bP0l+XkK<r5pp

literal 0
HcmV?d00001

diff --git a/public/assets/offline.png b/public/assets/offline.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1ed1ddebbbb0a85fd6918eb5530c6cd426137c6
GIT binary patch
literal 2155
zcmZ`(3p|s1AAgKABT;U7#oCffW^)URX$-H<alaG7W}C5Tn>Mo2q4GwT!%6CJrd-P9
zjnfFB!g8$;(I-Ogj$87IQ?mD&daKXpocDP?&-4HOf4|@Ncl|%lzua6Lx53n5003-r
z`X|8yT%UlCCR7@HAMIW00{|&`s-2x1&Cbz|5yfD7#)O8G97%K%lN#>fXbS)q7cO`Q
zQ8c`jaKF|F_V0a`)LU4XF27;+OGT7Nck-+04U!;w&>$nK0)M$}?sX1zpUK#IK2;B=
zgjZ;|J(4jZ3T)8X6In8!in>|hc2g=zcdhG#<BjL4GP5-%g4&E~T7AdhpOe{(C#Qy3
z3q!J(s|^A(hqNIE>UU5RJ)?q_NudzSZs2uo<8`6-U%aA!WuL@9#u^{KnqP!B5B0yV
zS{0FJ@3=Wiq`W@!vecp-F-ih9lpo&>N|eHXY?bK`TaytUjLL?O?r5q6eARy2{`PL?
zwV#bsLhKE6i_<oQ11VdlknaPewzA$1T(mN~{ck-)hke_DlIt$Wp8BMZr|#LmrU?g<
zTrUYQJf&gD>i1XmnVE0SDe%3=2iYlQhE&001re!+Dzk(Hf@<r|FkwqLVYv5+I*n;|
zQL%aVqy4vfuaOmolen=BR_)CTg!M|JkZf4&Nsnx~$?clJ$f!Q5Jbo3aS?)~LPwBYe
zOF7W;E@iEHQY8YyTR@Si*#0idf{62YgN4+wcZxo@a6;dr->%wz3PDvVHEUa+4bGNh
zw_;+~S3Vr~&AA30O}A8)RZr7K`&2I3wx05>)X7%}xyL?rX>_pFc_5=*g8z`OKH-+3
zl`($=CsfY5&~~UHIc`oFb95)+GJHEVA@FG4EtvW=<;HXY<;L2Jk-6bUy+1dADzC_m
z*4gQ9jBTL^`L?ULagpMUtdlz#M=6Qzl8J~x_8K{%ozj!mG!Pl%m|c7F;ORPTp2Rd_
zH}<f+SxY8@MO?1w?v0Z`dhpFt>r$sV_~s2VF>9ov^YLN6xx&lNmz}isEB*9fERXJ+
zTI=A$ukB;au=kSHBT?+uSG_sRPEljXRDXHMlzD*M#@3UPr)CFys?26hpZLId_Zfjg
z$7O35BCY`C9Th6byXkM{^8upO0q|<LwNSEj;QIJ#n@u{cZ8cqM->I>oaon3{EIyNe
zY&fwsXvB~i!VEd4#o{|g_Qoxm(iY0{euqs`ueuNNZ3AAStaOQItQ(sei9fhbE1yl4
z2}Q>rH!s<FK{cpWx}}^!Ea8<Vsur>4=%s?bH#S}lnbJB5g=32*k}mYIWTcbLF2tGW
z+W6%8mBQmEf3SX4cDk9h6lJv~EFmPp6sKg<7?ZSXIQ4=1+)^)d=5B}lXc{%AqVoD5
z=bPHb$HHJ`#`-F96OVFrXYWtfYIGOMS6-z|0Oco)EgBh48=q7M;tEJCzO==<&cW4y
zdzRZrN+r8KQaTPKlE>;7fl^!{_q_*KM;JB?v3QZx)Zpu?-dUnGyAsHyYYzc06Y7IS
zA3w$OmL+?Kf$Ch5q)3}9`#8L>1N=b{NPbQc&dz{7h@k*PVh11zA_?#Y&QSrWO$-40
zz!d->xsb1tC%KYev8GtLH*?E2&_t5z<;V7O{t+9_h&Bu*GQvoP+~^pw0bs?&f-suI
z4ux~0qv$Lw*BY^Dfd#Qxj7GpWP1rPRgrBn;+>XH{!4DW>3^52C3=W4|F^Lga4}!xN
zI=Hh&P}uAkEE>(>a11#nh72YdZDeU_iN+YCjg3*D1&S3%XNPi8bQbcnlmGc4kXYeN
zY7Cpopu@#}L&F%cY-<EU9O&!yIZqOo`YjTj^`$JZK(ttcHZsJZ|Bl9{M*JU|So4{-
zS=Z-qR$^yZH!7DD<xikSljtlkHJrJT)n=5xD8A+S9ntR_(HLX#J@Y%wcT902SXU;M
z1olYW2^<*hFS0N8R%mgXzH8g(nQThIq2ORv=&u9D!8~I)J>WU2aU$ToxDxZ(-RVhi
zIr{>ENYqj5!pSn`5b)i5C;n5Q9L79>I5KP3v-lx^iw7XiQo+vdQXpVJ4AcyzplpS;
znH1h$(*kzUv%cMvFS7mJuAN}JJoW8sU+Ju)1wZ|HmU2Y1f9=(=`GnnNIm6hYk`glp
zO+&ut@OcYpsnnpQT+kB!P)<WUc@<Cck5NPC9CCz0Cgn}yb!csz7J8iHGeuvwz88%o
zLVccwf2VtPf1E}$jodYno><dVo&VEq`<zFqcK%h;=YC%RR_qkBo`<rldN0l_6fXz1
zaK;CVck)V`XXIG2Di&#5Vk6ILV+xv*=QD4_#3o+%R6CrIZz{hGjX0kmds=U|1E)jr
zX&rJ38Z^WtOeHsQYj1XqU4Qh8{MdaYURdP$<lV2*=VX|t5j|TaRMIZtauHAol^-uV
z?D?Dh@-1Q>{~iUWmG#j(oA*cl@WV`<OSFWC&mWjDUq2Awx?N{Kd2NW2n{*W~?kTrR
z+#--Xrw7#q{qA_9201A8Jl?f6<naO!27_ozXcXo*kf9n1M;kPNFm;IbX`3{65~^$E
S@Raz=b+UIM+_63S(|-X<>6sn?

literal 0
HcmV?d00001

diff --git a/src/components/BoardAvatar.jsx b/src/components/BoardAvatar.jsx
new file mode 100644
index 00000000..deace73b
--- /dev/null
+++ b/src/components/BoardAvatar.jsx
@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+import { useSubplebbit } from "@plebbit/plebbit-react-hooks";
+
+const BoardAvatar = ({ address }) => {
+  const [avatarUrl, setAvatarUrl] = useState("assets/plebchan.png");
+  const subplebbit = useSubplebbit({ subplebbitAddress: address });
+
+  const isOnline = subplebbit.updatedAt > Date.now() / 1000 - 60 * 20;
+
+  useEffect(() => {
+    if (subplebbit.suggested?.avatarUrl) {
+      setAvatarUrl(subplebbit.suggested.avatarUrl);
+    }
+  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
+
+  return (
+    <div className="board-avatar-container">
+      <img
+        className={isOnline ? "board-avatar" : "board-avatar offline"}
+        alt="board logo"
+        src={avatarUrl}
+      />
+      {!isOnline && (
+        <img className="offline-indicator" alt="offline" src="assets/offline.png" />
+      )}
+    </div>
+  );
+};
+
+export default BoardAvatar;
\ No newline at end of file
diff --git a/src/components/styled/Home.styled.jsx b/src/components/styled/Home.styled.jsx
index 74d9e66f..6546bb6d 100644
--- a/src/components/styled/Home.styled.jsx
+++ b/src/components/styled/Home.styled.jsx
@@ -230,14 +230,29 @@ export const BoardsContent = styled.div`
     border: 1px solid #800;
     display: inline-block;
     overflow: hidden;
+    position: relative;
   }
 
-  .board-avatar-container img {
+
+  .board-avatar-container img.board-avatar {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
 
+  .board-avatar-container img.offline {
+    filter: brightness(50%);
+  }
+
+  .offline-indicator {
+    position: absolute;
+    top: calc(50% - 10px);
+    left: 0;
+    width: 100%;
+    object-fit: cover;
+    z-index: 1;
+  }
+
   .board-text {
     margin-bottom: 5px;
     padding: 0 2px;
diff --git a/src/components/views/Home.jsx b/src/components/views/Home.jsx
index 92aa598f..fbd1c312 100644
--- a/src/components/views/Home.jsx
+++ b/src/components/views/Home.jsx
@@ -4,24 +4,11 @@ import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
+import BoardAvatar from '../BoardAvatar';
 import packageJson from '../../../package.json'
 const {version} = packageJson
 
 
-const BoardAvatar = ({ address }) => {
-  const [avatarUrl, setAvatarUrl] = useState('assets/plebchan.png');
-  const subplebbit = useSubplebbit({ subplebbitAddress: address });
-
-  useEffect(() => {
-    if (subplebbit.suggested?.avatarUrl) {
-      setAvatarUrl(subplebbit.suggested.avatarUrl);
-    }
-  }, [subplebbit.suggested?.avatarUrl, subplebbit]);
-
-  return <img alt="board logo" src={avatarUrl} />;
-};
-
-
 const Home = () => {
   const { 
     setBodyStyle,