"No topics" and "No notifications" view

web/src/app/Repository.js

@@ -76,6 +76,17 @@ class Repository {
         }));
         localStorage.setItem('users', serialized);
     }
+
+    loadSelectedSubscriptionId() {
+        console.log(`[Repository] Loading selected subscription ID from localStorage`);
+        const selectedSubscriptionId = localStorage.getItem('selectedSubscriptionId');
+        return (selectedSubscriptionId) ? selectedSubscriptionId : "";
+    }
+
+    saveSelectedSubscriptionId(selectedSubscriptionId) {
+        console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId} to localStorage`);
+        localStorage.setItem('selectedSubscriptionId', selectedSubscriptionId);
+    }
 }
 
 const repository = new Repository();

web/src/components/ActionBar.js

@@ -26,6 +26,7 @@ const ActionBar = (props) => {
                 >
                     <MenuIcon />
                 </IconButton>
+                <img src="static/img/ntfy.svg" height="28" style={{ marginRight: '10px' }}/>
                 <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
                     {title}
                 </Typography>

web/src/components/App.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import {ThemeProvider} from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Toolbar from '@mui/material/Toolbar';
-import NotificationList from "./NotificationList";
+import Notifications from "./Notifications";
 import theme from "./theme";
 import api from "../app/Api";
 import repository from "../app/Repository";
@@ -14,14 +14,13 @@ import Navigation from "./Navigation";
 import ActionBar from "./ActionBar";
 import Users from "../app/Users";
 import notificationManager from "../app/NotificationManager";
+import NoTopics from "./NoTopics";
 
-// FIXME chrome notification order
 // TODO subscribe dialog:
 //  - check/use existing user
 //  - add baseUrl
 // TODO user management
 // TODO embed into ntfy server
-// TODO remember selected subscription
 
 const App = () => {
     console.log(`[App] Rendering main view`);
@@ -84,10 +83,17 @@ const App = () => {
     useEffect(() => {
         // Load subscriptions and users
         const subscriptions = repository.loadSubscriptions();
+        const selectedSubscriptionId = repository.loadSelectedSubscriptionId();
         const users = repository.loadUsers();
         setSubscriptions(subscriptions);
         setUsers(users);
 
+        // Set selected subscription
+        const maybeSelectedSubscription = subscriptions.get(selectedSubscriptionId);
+        if (maybeSelectedSubscription) {
+            setSelectedSubscription(maybeSelectedSubscription);
+        }
+
         // Poll all subscriptions
         subscriptions.forEach((subscriptionId, subscription) => {
             const user = users.get(subscription.baseUrl); // May be null
@@ -109,6 +115,10 @@ const App = () => {
     }, [subscriptions, users]);
     useEffect(() => repository.saveSubscriptions(subscriptions), [subscriptions]);
     useEffect(() => repository.saveUsers(users), [users]);
+    useEffect(() => {
+        const subscriptionId = (selectedSubscription) ? selectedSubscription.id : "";
+        repository.saveSelectedSubscriptionId(subscriptionId)
+    }, [selectedSubscription]);
 
     return (
         <ThemeProvider theme={theme}>
@@ -137,8 +147,10 @@ const App = () => {
                 <Box
                     component="main"
                     sx={{
+                        display: 'flex',
                         flexGrow: 1,
-                        p: 3,
+                        flexDirection: 'column',
+                        padding: 3,
                         width: {sm: `calc(100% - ${Navigation.width}px)`},
                         height: '100vh',
                         overflow: 'auto',
@@ -146,10 +158,11 @@ const App = () => {
                 }}>
                     <Toolbar/>
                     {selectedSubscription !== null &&
-                        <NotificationList
+                        <Notifications
                             subscription={selectedSubscription}
                             onDeleteNotification={handleDeleteNotification}
                         />}
+                    {selectedSubscription == null && <NoTopics />}
                 </Box>
             </Box>
         </ThemeProvider>

web/src/components/NoTopics.js

@@ -0,0 +1,25 @@
+import {Link} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import * as React from "react";
+import {Paragraph, VerticallyCenteredContainer} from "./styles";
+
+const NoTopics = (props) => {
+    return (
+        <VerticallyCenteredContainer maxWidth="xs">
+            <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+                <img src="static/img/ntfy-outline.svg" height="64" width="64" alt="No topics"/><br />
+                It looks like you don't have any subscriptions yet.
+            </Typography>
+            <Paragraph>
+                Click the "Add subscription" link to create or subscribe to a topic. After that, you can send messages
+                via PUT or POST and you'll receive notifications here.
+            </Paragraph>
+            <Paragraph>
+                For more information, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+                {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+            </Paragraph>
+        </VerticallyCenteredContainer>
+    );
+};
+
+export default NoTopics;

web/src/components/Notifications.js

@@ -1,18 +1,22 @@
 import Container from "@mui/material/Container";
-import {CardContent, Stack} from "@mui/material";
+import {CardContent, Link, Stack} from "@mui/material";
 import Card from "@mui/material/Card";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
 import {formatMessage, formatTitle, unmatchedTags} from "../app/utils";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from '@mui/icons-material/Close';
+import {Paragraph, VerticallyCenteredContainer} from "./styles";
 
-const NotificationList = (props) => {
+const Notifications = (props) => {
     const subscription = props.subscription;
     const sortedNotifications = subscription.getNotifications()
-        .sort((a, b) => a.time < b.time);
+        .sort((a, b) => a.time < b.time ? 1 : -1);
+    if (sortedNotifications.length === 0) {
+        return <NothingHereYet subscription={subscription}/>;
+    }
     return (
-        <Container maxWidth="lg" sx={{ marginTop: 3, marginBottom: 3 }}>
+        <Container maxWidth="lg" sx={{marginTop: 3, marginBottom: 3}}>
             <Stack spacing={3}>
                 {sortedNotifications.map(notification =>
                     <NotificationItem
@@ -55,4 +59,28 @@ const NotificationItem = (props) => {
     );
 }
 
-export default NotificationList;
+const NothingHereYet = (props) => {
+    return (
+        <VerticallyCenteredContainer maxWidth="xs">
+            <Typography variant="h5" align="center" sx={{ paddingBottom: 1 }}>
+                <img src="static/img/ntfy-outline.svg" height="64" width="64" alt="No notifications"/><br />
+                You haven't received any notifications for this topic yet.
+            </Typography>
+            <Paragraph>
+                To send notifications to this topic, simply PUT or POST to the topic URL.
+            </Paragraph>
+            <Paragraph>
+                Example:<br/>
+                <tt>
+                    $ curl -d "Hi" {props.subscription.shortUrl()}
+                </tt>
+            </Paragraph>
+            <Paragraph>
+                For more detailed instructions, check out the <Link href="https://ntfy.sh" target="_blank" rel="noopener">website</Link> or
+                {" "}<Link href="https://ntfy.sh/docs" target="_blank" rel="noopener">documentation</Link>.
+            </Paragraph>
+        </VerticallyCenteredContainer>
+    );
+};
+
+export default Notifications;

web/src/components/styles.js

@@ -1,4 +1,7 @@
-import {makeStyles} from "@mui/styles";
+import {makeStyles, styled} from "@mui/styles";
+import Typography from "@mui/material/Typography";
+import theme from "./theme";
+import Container from "@mui/material/Container";
 
 const useStyles = makeStyles(theme => ({
   bottomBar: {
@@ -15,4 +18,18 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+export const Paragraph = styled(Typography)({
+  paddingTop: 8,
+  paddingBottom: 8,
+});
+
+export const VerticallyCenteredContainer = styled(Container)({
+  display: 'flex',
+  flexGrow: 1,
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignContent: 'center',
+  color: theme.palette.body.main
+});
+
 export default useStyles;

web/src/components/theme.js

@@ -12,6 +12,9 @@ const theme = createTheme({
     error: {
       main: red.A400,
     },
+    body: {
+      main: '#444',
+    }
   },
 });