Merge pull request #10 from piclane/develop

v1.0.8

Author: piclane

.idea/.gitignore

@@ -1,6 +1,6 @@
 {
   "name": "fal-plus-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "homepage": "/falp",
   "dependencies": {
@@ -53,8 +53,8 @@
     "@types/react": "^17.0.43"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
+    "start": "REACT_APP_VERSION=\"$npm_package_version\" REACT_APP_COMMIT_DATETIME=\"$(git log --pretty='format:%ad' --date=iso-strict -n 1)\" craco start",
+    "build": "REACT_APP_VERSION=\"$npm_package_version\" REACT_APP_COMMIT_DATETIME=\"$(git log --pretty='format:%ad' --date=iso-strict -n 1)\" craco build",
     "test": "craco test",
     "eject": "craco eject",
     "package": "./package.sh",

.idea/inspectionProfiles/Project_Default.xml

@@ -9,6 +9,7 @@ import {ApolloProvider} from "@apollo/client";
 import RecordingDetail from "@/components/pages/recording/detail/RecordingDetail";
 import AppTopHeader from "@/components/atoms/AppTopHeader";
 import Cleaner from "@/components/pages/cleaner/Cleaner";
+import AppBottomFooter from "@/components/atoms/AppBottomFooter";
 
 const baseName = '/falp';
 
@@ -47,16 +48,23 @@ function AppContent() {
   const appHeaderBounds = useBounds(appHeaderRef);
   const appFooterRef = useRef<HTMLElement>(null);
   const appFooterBounds = useBounds(appFooterRef);
+  const appBottomFooterRef = useRef<HTMLDivElement>(null);
+  const appBottomFooterBounds = useBounds(appBottomFooterRef);
   return (
     <>
       <AppTopHeader ref={appTopHeaderRef} />
-      <Box sx={{ flexGrow: 1, paddingTop: appTopHeaderBounds.height }}>
+      <Box sx={{
+        flexGrow: 1,
+        paddingTop: appTopHeaderBounds.height,
+        paddingBottom: appBottomFooterBounds.height,
+      }}>
         <Box id="app-header" sx={{ top: appTopHeaderBounds.height }} ref={appHeaderRef} />
         <Box id="app-header-spacer" sx={{height: appHeaderBounds.height }} />
         {routes}
         <Box id="app-footer" ref={appFooterRef} />
         <Box id="app-footer-spacer" sx={{height: appFooterBounds.height }} />
       </Box>
+      <AppBottomFooter ref={appBottomFooterRef} />
     </>
   );
 }

.idea/modules.xml

@@ -0,0 +1,82 @@
+import React from "react";
+import {AppBar, AppBarProps, createTheme, ThemeProvider, Toolbar, Typography} from "@mui/material";
+import {DateTime} from "luxon";
+import {gql, useQuery} from "@apollo/client";
+
+const FETCH_API_VERSION = gql`
+    query {
+        version
+    }
+`;
+
+const theme = createTheme({
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          top: 'auto',
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,.5)',
+          backdropFilter: 'saturate(5) blur(10px)'
+        }
+      }
+    },
+    MuiToolbar: {
+      styleOverrides: {
+        root: {
+          minHeight: 'auto !important',
+        }
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: 'rgba(220,220,220,.9)',
+          fontSize: '12px',
+          fontWeight: "400",
+          fontFamily: "'Akshar', sans-serif",
+          marginRight: '0.5em'
+        }
+      }
+    }
+  }
+});
+
+interface AppBottomFooterProps extends AppBarProps {
+
+}
+
+const AppBottomFooter = React.forwardRef<HTMLDivElement, AppBottomFooterProps>((props: AppBottomFooterProps, ref) => {
+  const {
+    position = 'fixed',
+    color = 'transparent',
+    ...restProps
+  } = props;
+  const {data: apiVersionData} = useQuery<{version: string}>(FETCH_API_VERSION);
+  const commitDateTime = process.env.REACT_APP_COMMIT_DATETIME;
+  const crYear = (commitDateTime ? DateTime.fromISO(commitDateTime) : DateTime.now()).toFormat("yyyy");
+  const crUiVersion = `v${process.env.REACT_APP_VERSION}`;
+  const crApiVersion = apiVersionData ? `v${apiVersionData?.version}` : '...';
+
+  return (
+    <ThemeProvider theme={theme}>
+      <AppBar
+        {...restProps}
+        className="app-bottom-footer"
+        position={position}
+        color={color}
+        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        ref={ref}
+        component="footer"
+      >
+        <Toolbar className="app-bottom-footer-tool-bar">
+          <Typography variant="body1">&copy; { crYear } piclane.</Typography>
+          <Typography variant="body1">FAL+UI { crUiVersion }</Typography>
+          <Typography variant="body1">FAL+API { crApiVersion }</Typography>
+        </Toolbar>
+      </AppBar>
+    </ThemeProvider>
+  );
+});
+
+export default AppBottomFooter;

FoltiaUI.iml FalPlusUI.imlFoltiaUI.iml renamed to FalPlusUI.iml

@@ -8,7 +8,7 @@ export interface AppTopHeaderProps extends AppBarProps {
   backTo?: () => To
 }
 
-const AppTopHeader = React.forwardRef((props: AppTopHeaderProps, ref) => {
+const AppTopHeader = React.forwardRef<HTMLDivElement, AppTopHeaderProps>((props: AppTopHeaderProps, ref) => {
   const navigate = useNavigate();
   const location = useLocation();
   const {
@@ -34,7 +34,6 @@ const AppTopHeader = React.forwardRef((props: AppTopHeaderProps, ref) => {
       position={position}
       color={color}
       sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
-      // @ts-ignore
       ref={ref}
     >
       <Toolbar className="app-top-header-tool-bar">