About Screen

server/build.gradle.kts

@@ -3,6 +3,7 @@ import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 import org.jmailen.gradle.kotlinter.tasks.FormatTask
 import org.jmailen.gradle.kotlinter.tasks.LintTask
 import java.io.BufferedReader
+import java.time.Instant
 
 plugins {
     application
@@ -117,6 +118,10 @@ buildConfig {
     buildConfigField("String", "VERSION", tachideskVersion)
     buildConfigField("String", "REVISION", tachideskRevision)
     buildConfigField("String", "BUILD_TYPE", if (System.getenv("TachideskBuildType") == "Stable") "Stable" else "Preview")
+    buildConfigField("long", "BUILD_TIME", Instant.now().epochSecond.toString())
+
+    buildConfigField("String", "GITHUB", "https://github.com/Suwayomi/Tachidesk")
+    buildConfigField("String", "DISCORD", "https://discord.gg/DDZdqZWaHA")
 }
 
 tasks {

server/src/main/kotlin/ir/armor/tachidesk/server/impl_internal/About.kt

@@ -10,17 +10,25 @@ package ir.armor.tachidesk.server.impl_internal
 import ir.armor.tachidesk.server.BuildConfig
 
 data class AboutDataClass(
+    val name: String,
     val version: String,
     val revision: String,
     val buildType: String,
+    val buildTime: Long,
+    val github: String,
+    val discord: String,
 )
 
 object About {
     fun getAbout(): AboutDataClass {
         return AboutDataClass(
+            BuildConfig.NAME,
             BuildConfig.VERSION,
             BuildConfig.REVISION,
             BuildConfig.BUILD_TYPE,
+            BuildConfig.BUILD_TIME,
+            BuildConfig.GITHUB,
+            BuildConfig.DISCORD,
         )
     }
 }

webUI/react/src/App.tsx

@@ -27,6 +27,7 @@ import Settings from './screens/Settings';
 import Categories from './screens/settings/Categories';
 import Backup from './screens/settings/Backup';
 import useLocalStorage from './util/useLocalStorage';
+import About from './screens/settings/About';
 
 export default function App() {
     const [title, setTitle] = useState<string>('Tachidesk');
@@ -101,6 +102,9 @@ export default function App() {
                             <Route path="/library">
                                 <Library />
                             </Route>
+                            <Route path="/settings/about">
+                                <About />
+                            </Route>
                             <Route path="/settings/categories">
                                 <Categories />
                             </Route>

webUI/react/src/screens/Settings.tsx

@@ -12,12 +12,19 @@ import BackupIcon from '@material-ui/icons/Backup';
 import Brightness6Icon from '@material-ui/icons/Brightness6';
 import DnsIcon from '@material-ui/icons/Dns';
 import EditIcon from '@material-ui/icons/Edit';
-import {
+import InfoIcon from '@material-ui/icons/Info';
-    Button, Dialog, DialogActions, DialogContent,
-    DialogContentText, IconButton, ListItemSecondaryAction, Switch, TextField,
-    ListItemIcon, ListItemText,
-} from '@material-ui/core';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import Switch from '@material-ui/core/Switch';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import TextField from '@material-ui/core/TextField';
 import NavbarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
@@ -87,9 +94,14 @@ export default function Settings() {
                         >
                             <EditIcon />
                         </IconButton>
-
                     </ListItemSecondaryAction>
                 </ListItem>
+                <ListItemLink href="/settings/about">
+                    <ListItemIcon>
+                        <InfoIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="About" />
+                </ListItemLink>
             </List>
 
             <Dialog open={dialogOpen} onClose={handleDialogCancel}>

webUI/react/src/screens/settings/About.tsx

@@ -0,0 +1,70 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { CircularProgress, makeStyles } from '@material-ui/core';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import client from '../../util/client';
+import ListItemLink from '../../util/ListItemLink';
+import NavbarContext from '../../context/NavbarContext';
+
+const useStyles = makeStyles({
+    loading: {
+        width: '100vw',
+        '& div': {
+            margin: '50px auto',
+            display: 'block',
+        },
+    },
+});
+
+export default function About() {
+    const { setTitle, setAction } = useContext(NavbarContext);
+    const classes = useStyles();
+
+    const [about, setAbout] = useState<IAbout>();
+
+    useEffect(() => { setTitle('About'); setAction(<></>); }, []);
+
+    useEffect(() => {
+        client.get('/api/v1/about')
+            .then((response) => response.data)
+            .then((data:IAbout) => {
+                setAbout(data);
+            });
+    }, []);
+
+    if (about === undefined) {
+        return (
+            <div className={classes.loading}>
+                <CircularProgress thickness={5} />
+            </div>
+        );
+    }
+
+    const version = () => {
+        if (about.buildType === 'Stable') return `${about.version}`;
+        return `${about.version}-${about.revision}`;
+    };
+
+    const buildTime = () => new Date(about.buildTime * 1000).toUTCString();
+
+    return (
+        <List>
+            <ListItem>
+                <ListItemText primary="Server" secondary={`${about.name} ${about.buildType}`} />
+            </ListItem>
+            <ListItem>
+                <ListItemText primary="Server version" secondary={version()} />
+            </ListItem>
+            <ListItem>
+                <ListItemText primary="Build time" secondary={buildTime()} />
+            </ListItem>
+            <ListItemLink href={about.github}>
+                <ListItemText primary="Github" secondary={about.github} />
+            </ListItemLink>
+            <ListItemLink href={about.discord}>
+                <ListItemText primary="Discord" secondary={about.discord} />
+            </ListItemLink>
+        </List>
+    );
+}

webUI/react/src/typings.d.ts

@@ -119,3 +119,13 @@ interface IReaderProps {
     nextChapter: () => void
     prevChapter: () => void
 }
+
+interface IAbout {
+    name: string
+    version: string
+    revision: string
+    buildType: 'Stable' | 'Preview'
+    buildTime: number
+    github: string
+    discord: string
+}