...

3 files changed, 158 insertions, 0 deletions

diff --git a/FrontEnd/src/app/views/home-v2/TimelineListView.tsx b/FrontEnd/src/app/views/home-v2/TimelineListView.tsx
new file mode 100644
index 00000000..1ba9f765
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/TimelineListView.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import { convertI18nText, I18nText } from "@/common";
+
+import { HttpTimelineInfo } from "@/http/timeline";
+import { useTranslation } from "react-i18next";
+
+interface TimelineListItemProps {
+  timeline: HttpTimelineInfo;
+}
+
+const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
+  return (
+    <div className="home-v2-timeline-list-item">
+      <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 100">
+        <path
+          d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z"
+          fillRule="evenodd"
+          fill="#007bff"
+        />
+      </svg>
+      <div>{timeline.title}</div>
+    </div>
+  );
+};
+
+const TimelineListLoading: React.FC = () => {
+  return (
+    <div>
+      <div className="home-v2-timeline-list-item">
+        <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 60">
+          <path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" />
+        </svg>
+      </div>
+      <div className="home-v2-timeline-list-item">
+        <svg
+          className="home-v2-timeline-list-item-line home-v2-timeline-list-loading-head"
+          viewBox="0 0 120 40"
+        >
+          <path
+            d="M 60,10 l 20,20 l 20,-20"
+            fill="none"
+            stroke="#007bff"
+            strokeWidth="5"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+interface TimelineListViewProps {
+  headerText?: I18nText;
+  timelines?: HttpTimelineInfo[];
+}
+
+const TimelineListView: React.FC<TimelineListViewProps> = ({
+  headerText,
+  timelines,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="home-v2-timeline-list">
+      <div className="home-v2-timeline-list-item">
+        <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 120">
+          <path
+            d="M 0,20 Q 80,20 80,80 l 0,40"
+            stroke="#007bff"
+            strokeWidth="40"
+            fill="none"
+          />
+        </svg>
+        <h3>{convertI18nText(headerText, t)}</h3>
+      </div>
+      {timelines != null ? (
+        timelines.map((t) => <TimelineListItem key={t.name} timeline={t} />)
+      ) : (
+        <TimelineListLoading />
+      )}
+    </div>
+  );
+};
+
+export default TimelineListView;
diff --git a/FrontEnd/src/app/views/home-v2/home-v2.sass b/FrontEnd/src/app/views/home-v2/home-v2.sass
new file mode 100644
index 00000000..a3218f08
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/home-v2.sass
@@ -0,0 +1,18 @@
+.home-v2-timeline-list-item

+  display: flex

+  align-items: center

+

+.home-v2-timeline-list-item-line

+  width: 80px

+  flex-shrink: 0

+

+@keyframes home-v2-timeline-list-loading-head-animation

+  from

+    transform: translate(0,-30px)

+    opacity: 1

+

+  to

+    opacity: 0

+

+.home-v2-timeline-list-loading-head

+  animation: 1s infinite home-v2-timeline-list-loading-head-animation

diff --git a/FrontEnd/src/app/views/home-v2/index.tsx b/FrontEnd/src/app/views/home-v2/index.tsx
new file mode 100644
index 00000000..d0013f1b
--- /dev/null
+++ b/FrontEnd/src/app/views/home-v2/index.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { useHistory } from "react-router";
+import { useTranslation } from "react-i18next";
+import { Container, Button } from "react-bootstrap";
+
+import { useUser } from "@/services/user";
+import SearchInput from "../common/SearchInput";
+
+import TimelineListView from "./TimelineListView";
+import TimelineCreateDialog from "../home/TimelineCreateDialog";
+
+const HomeV2: React.FC = () => {
+  const history = useHistory();
+
+  const { t } = useTranslation();
+
+  const user = useUser();
+
+  const [navText, setNavText] = React.useState<string>("");
+
+  const [dialog, setDialog] = React.useState<"create" | null>(null);
+
+  return (
+    <>
+      <Container className="px-0">
+        <SearchInput
+          className="my-3 mx-3"
+          value={navText}
+          onChange={setNavText}
+          onButtonClick={() => {
+            history.push(`search?q=${navText}`);
+          }}
+          additionalButton={
+            user != null && (
+              <Button
+                variant="outline-success"
+                onClick={() => {
+                  setDialog("create");
+                }}
+              >
+                {t("home.createButton")}
+              </Button>
+            )
+          }
+        />
+        <TimelineListView headerText="home.loadingHighlightTimelines" />
+      </Container>
+      {dialog === "create" && (
+        <TimelineCreateDialog open close={() => setDialog(null)} />
+      )}
+    </>
+  );
+};
+
+export default HomeV2;