✨ Add tweet listing box

nest_frontend/components/base/summary/SummaryLeft.module.css

@@ -1,4 +1,5 @@
 .SummaryLeft {
+    min-width: 175px;
     width: 275px;
 
     display: grid;

nest_frontend/components/base/summary/SummaryText.js

@@ -6,7 +6,9 @@ import classNames from "classnames"
 export default function SummaryText({ children, className, ...props }) {
     return (
         <div className={classNames(Style.SummaryText, className)} {...props}>
+            <div className={Style.Text}>
                 {children}
             </div>
+        </div>
     )
 }

nest_frontend/components/base/summary/SummaryText.module.css

@@ -0,0 +1,22 @@
+.SummaryText {
+    flex-grow: 3;
+
+    padding: 0 0 0 20px;
+
+    background-color: var(--bg-light);
+
+    display: flex;
+    justify-content: stretch;
+    align-items: center;
+
+    font-size: small;
+}
+
+.Text {
+    height: 60px;
+    overflow-y: auto;
+
+    /* Custom scrollbar (firefox only!) */
+    scrollbar-color: var(--bg-accent) var(--bg-light);
+    scrollbar-width: auto;
+}

nest_frontend/components/interactive/BoxRepositoryTweets.js

@@ -0,0 +1,14 @@
+import React from "react"
+import BoxFullScrollable from "../base/BoxFullScrollable"
+import SummaryTweet from "./SummaryTweet"
+
+
+export default function BoxRepositoryTweets({ tweets, ...props }) {
+    // TODO: Translate this
+
+    return (
+        <BoxFullScrollable header={"Tweets"} {...props}>
+            {tweets.map(tweet => <SummaryTweet tweet={tweet}/>)}
+        </BoxFullScrollable>
+    )
+}

nest_frontend/components/interactive/SummaryRepository.js

@@ -40,7 +40,7 @@ export default function SummaryRepository(
     }
 
     return (
-        <SummaryBase>
+        <SummaryBase {...props}>
             <SummaryLeft
                 icon={repo.is_active ? faFolderOpen : faFolder}
                 title={repo.name}

nest_frontend/components/interactive/SummaryTweet.js

@@ -0,0 +1,32 @@
+import React from "react"
+import SummaryBase from "../base/summary/SummaryBase"
+import SummaryLeft from "../base/summary/SummaryLeft"
+import { faComment, faMapPin } from "@fortawesome/free-solid-svg-icons"
+import SummaryText from "../base/summary/SummaryText"
+import SummaryRight from "../base/summary/SummaryRight"
+
+
+export default function SummaryTweet({ tweet, ...props }) {
+    let icon
+    if(tweet.place) {
+        icon = faMapPin
+    }
+    else {
+        icon = faComment
+    }
+
+    return (
+        <SummaryBase {...props}>
+            <SummaryLeft
+                icon={icon}
+                title={`@${tweet.poster}`}
+                subtitle={tweet.place}
+                onClick={() => window.open(`https://twitter.com/${tweet.poster}/status/${tweet.snowflake}`)}
+            />
+            <SummaryText>
+                {tweet.content}
+            </SummaryText>
+            <SummaryRight/>
+        </SummaryBase>
+    )
+}

nest_frontend/components/interactive/SummaryUser.js

@@ -12,7 +12,7 @@ export default function SummaryUser({ user, destroyUser, running, ...props }) {
     const { strings } = useContext(ContextLanguage)
 
     return (
-        <SummaryBase>
+        <SummaryBase {...props}>
             <SummaryLeft
                 icon={user.isAdmin ? faStar : faUser}
                 title={user.username}

nest_frontend/index.css

@@ -28,6 +28,10 @@ h1, h2, h3, h4, h5, h6 {
     cursor: not-allowed;
 }
 
+a {
+    color: var(--fg-primary)
+}
+
 .ThemeDark {
     --bg-primary: #3B7097;
     --fg-primary: #FFFFFF;

nest_frontend/routes/PageRepository.js

@@ -1,13 +1,25 @@
 import React from "react"
 import Style from "./PageRepository.module.css"
 import classNames from "classnames"
-import BoxWordcloud from "../components/interactive/BoxWordcloud"
+import BoxRepositoryTweets from "../components/interactive/BoxRepositoryTweets"
 
 
 export default function PageRepository({ className, ...props }) {
     return (
         <div className={classNames(Style.PageRepository, className)} {...props}>
-            <BoxWordcloud className={Style.Wordcloud}/>
+            <BoxRepositoryTweets
+                tweets={[
+                    {
+                        "conditions": [],
+                        "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec posuere lacinia eleifend. Maecenas a neque augue. Nulla dapibus lobortis gravida. Quisque quis ultricies elit. Donec in tortor augue. Cras eget aliquam felis. Nunc tempor, ipsum in lobortis tristique, nunc ante velit.",
+                        "insert_time": "2021-05-18T18:56Z",
+                        "location": null,
+                        "place": "Casa mia",
+                        "poster": "USteffo",
+                        "snowflake": "1394698342282809344",
+                    },
+                ]}
+            />
         </div>
     )
 }

nest_frontend/routes/PageRepository.module.css

@@ -1,7 +1,10 @@
 .PageRepository {
     display: grid;
 
-    grid-template-areas: "a";
+    grid-template-areas:
+            "a b"
+            "c d"
+    ;
 
     grid-gap: 10px;