...

7 files changed, 168 insertions, 0 deletions

diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index fb57bd1e..5c4b7eb2 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import AppBar from "./views/common/AppBar";
 import LoadingPage from "./views/common/LoadingPage";
 import Home from "./views/home";
+import HomeV2 from "./views/home-v2";
 import Login from "./views/login";
 import Settings from "./views/settings";
 import About from "./views/about";
@@ -41,6 +42,12 @@ const App: React.FC = () => {
             <Route exact path="/">
               <Home />
             </Route>
+            <Route exact path="/home">
+              <Home />
+            </Route>
+            <Route exact path="/home-new">
+              <HomeV2 />
+            </Route>
             <Route exact path="/login">
               <Login />
             </Route>
diff --git a/FrontEnd/src/app/index.sass b/FrontEnd/src/app/index.sass
index 2079cad8..6527a65f 100644
--- a/FrontEnd/src/app/index.sass
+++ b/FrontEnd/src/app/index.sass
@@ -4,6 +4,7 @@
 @import './views/common/common'

 @import './views/common/alert/alert'

 @import './views/home/home'

+@import './views/home-v2/home-v2'

 @import './views/about/about'

 @import './views/login/login'

 @import './views/settings/settings'

diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 65ddbe0c..6707105a 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -27,6 +27,7 @@
   "chooseImage": "Choose a image",
   "loadImageError": "Failed to load image.",
   "home": {
+    "loadingHighlightTimelines": "Loading highlight timelines...",
     "highlightTimeline": "Highlight Timelines",
     "relatedTimeline": "Timelines Related To You",
     "publicTimeline": "Public Timelines",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index f6971241..dbff0a28 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -27,6 +27,7 @@
   "chooseImage": "选择一个图片",
   "loadImageError": "加载图片失败",
   "home": {
+    "loadingHighlightTimelines": "正在加载高光时间线...",
     "highlightTimeline": "高光时间线",
     "relatedTimeline": "关于你的时间线",
     "publicTimeline": "公开时间线",
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;