Use 'vite-plugin-pwa' to generate the service worker and PWA manifest

.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 2,
     'import/no-named-as-default': 2,
     'import/no-named-as-default-member': 2,
-    'import/no-unresolved': 2,
+    'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
     'import/order': [
       2,
       { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] },

.github/workflows/docker.yml

@@ -70,4 +70,3 @@ jobs:
       with:
         url: "https://webhook.freefeed.net/${{ secrets.WEBHOOK_SECRET }}/react-client/beta?version=beta"
         method: GET
-

CHANGELOG.md

@@ -5,7 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.135.0] - Not released
+## Experimental
+### Added
+- The PWA manifest and the service worker was added. The service worker caches
+  all site assets, including web fonts. It also caches user profile pictures (up
+  to 100 entries). The AppUpdated component periodically checks the service
+  worker for update.
 
 ## [1.134.4] - 2024-08-26
 ### Changed
@@ -379,6 +384,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   created the post, or add their @username to the comment you have already started creating.
 - Vimeo on demand links support
 ### Changed
+- Take Save out of "more" menu
 - The Dropzone library has been replaced with a custom file uploader.
   Attachments for posts and comments are now uploaded uniformly. The CreatePost
   and PostEditForm components have been redesigned to utilize the new uploader.
@@ -486,6 +492,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - It is now possible to hide posts by hashtags! Also, the underlying algorithm
   allows to add other types of hiding criteria in the future.
 
+### Changed
+- Take Save out of "more" menu
+
 ## [1.110.0] - 2022-06-29
 ### Fixed
 - The erroneous "Remove from" items has been removed from the post's "More" menu

index.html

@@ -19,18 +19,9 @@
     <title>FreeFeed</title>
     <meta name="description" content="FreeFeed is a small and free social network, that enables you to discover and discuss the interesting stuff your friends find on the web">
 
-    <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon" />
-    <link rel="icon" href="/assets/images/favicon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" sizes="512x512" href="/assets/images/ios/icon_512_512.png" />
-    <link rel="apple-touch-icon" sizes="256x256" href="/assets/images/ios/icon_256_256.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="/assets/images/ios/icon_192_192.png" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/ios/icon_180_180.png" />
-    <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/ios/icon_152_152.png" />
-    <link rel="apple-touch-icon" sizes="144x144" href="/assets/images/ios/icon_144_144.png" />
-    <link rel="apple-touch-icon" sizes="120x120" href="/assets/images/ios/icon_120_120.png" />
-    <link rel="apple-touch-icon" sizes="114x114" href="/assets/images/ios/icon_114_114.png" />
-    <link rel="apple-touch-icon" sizes="76x76" href="/assets/images/ios/icon_76_76.png" />
-    <link rel="apple-touch-icon" sizes="72x72" href="/assets/images/ios/icon_72_72.png" />
+    <link rel="icon" href="/assets/images/favicon.ico" sizes="48x48">
+    <link rel="icon" href="/assets/images/favicon.svg" sizes="any" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/assets/images/apple-touch-icon-180x180.png">
 
     <noscript>
       <style>

package.json

@@ -106,7 +106,9 @@
     "vite": "~5.3.5",
     "vite-plugin-compression": "~0.5.1",
     "vite-plugin-generate-file": "~0.2.0",
-    "vitest": "~2.0.4"
+    "vite-plugin-pwa": "^0.20.1",
+    "vitest": "~2.0.4",
+    "workbox-window": "^7.1.0"
   },
   "scripts": {
     "start": "vite",

src/components/app-updated.jsx

@@ -1,21 +1,44 @@
 /* global CONFIG */
 import { useSelector } from 'react-redux';
+import { useRegisterSW } from 'virtual:pwa-register/react';
 
+import { useEvent } from 'react-use-event-hook';
+import { useState } from 'react';
 import styles from './app-updated.module.scss';
 import { ButtonLink } from './button-link';
 
-function reloadPage() {
-  window.location.reload(true);
-}
+const { intervalSec } = CONFIG.appVersionCheck;
 
 export function AppUpdated() {
-  const updated = useSelector((state) => state.appUpdated.updated);
+  const versionFileUpdated = useSelector((state) => state.appUpdated.updated);
+  const [swRegistered, setSwRegistered] = useState(false);
+
+  const {
+    needRefresh: [workerUpdated],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      if (r) {
+        setSwRegistered(true);
+        setInterval(() => r.update(), intervalSec * 1000);
+      }
+    },
+  });
+
+  const reloadPage = useEvent(() => {
+    if (workerUpdated) {
+      updateServiceWorker();
+      // Sometimes the updateServiceWorker doesn't refresh the page, so reload
+      // it manually after some time
+      setTimeout(() => window.location.reload(true), 2000);
+    } else {
+      window.location.reload(true);
+    }
+  });
 
-  if (!updated) {
-    return null;
-  }
+  const needRefresh = swRegistered ? workerUpdated : versionFileUpdated;
 
-  return (
+  return needRefresh ? (
     <div className={styles.bar}>
       <div className={styles.indicator}>
         There’s an update for {CONFIG.siteTitle}!{' '}
@@ -25,5 +48,5 @@ export function AppUpdated() {
         when you are ready.
       </div>
     </div>
-  );
+  ) : null;
 }

src/components/footer.jsx

@@ -7,7 +7,7 @@ export default function Footer({ short }) {
   return (
     <footer className="footer">
       <p role="navigation">
-        &copy; FreeFeed 1.135.0 (Not released)
+        &copy; FreeFeed 1.134.4-beta (Sep 3, 2024)
         <br />
         <Link to="/about">About</Link>
         {' | '}

src/components/post/post-more-link.jsx

@@ -8,7 +8,6 @@ import { CLOSE_ON_CLICK_OUTSIDE } from '../hooks/drop-down';
 import { useDropDownKbd } from '../hooks/drop-down-kbd';
 import { useMediaQuery } from '../hooks/media-query';
 import { MoreWithTriangle } from '../more-with-triangle';
-import { TimedMessage } from '../timed-message';
 import { ButtonLink } from '../button-link';
 
 import { PostMoreMenu } from './post-more-menu';
@@ -34,19 +33,6 @@ export default function PostMoreLink({ post, user, ...props }) {
 
   const canonicalPostURI = canonicalURI(post);
 
-  const { isSaved, savePostStatus } = post;
-
-  let label = 'More';
-  if (savePostStatus.loading) {
-    label = isSaved ? 'Un-saving...' : 'Saving...';
-  }
-  if (savePostStatus.success) {
-    label = <TimedMessage message={isSaved ? 'Saved!' : 'Un-saved!'}>More</TimedMessage>;
-  }
-  if (savePostStatus.error) {
-    label = <TimedMessage message="Error!">More</TimedMessage>;
-  }
-
   useEffect(() => {
     if (fixedMenu && opened) {
       // Fix scroll position
@@ -71,7 +57,7 @@ export default function PostMoreLink({ post, user, ...props }) {
         aria-haspopup
         aria-expanded={opened}
       >
-        <MoreWithTriangle>{label}</MoreWithTriangle>
+        <MoreWithTriangle>More</MoreWithTriangle>
       </ButtonLink>
       {opened && (
         <Portal>

src/components/post/post-more-menu.jsx

@@ -1,28 +1,14 @@
 import { forwardRef, useLayoutEffect, useState, useMemo, useCallback } from 'react';
 import { Link } from 'react-router';
 import cn from 'classnames';
-import {
-  faExclamationTriangle,
-  faLink,
-  faEdit,
-  faBookmark as faBookmarkSolid,
-  faSignOutAlt,
-  faAt,
-} from '@fortawesome/free-solid-svg-icons';
-import {
-  faClock,
-  faCommentDots,
-  faTrashAlt,
-  faBookmark,
-} from '@fortawesome/free-regular-svg-icons';
+import { faLink, faEdit, faSignOutAlt, faAt } from '@fortawesome/free-solid-svg-icons';
+import { faClock, faCommentDots, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 import { noop } from 'lodash-es';
 import { useDispatch } from 'react-redux';
 
 import { copyURL } from '../../utils/copy-url';
 import { leaveDirect } from '../../redux/action-creators';
 import { ButtonLink } from '../button-link';
-import { Throbber } from '../throbber';
-import { Icon } from '../fontawesome-icons';
 import TimeDisplay from '../time-display';
 
 import styles from '../dropdown-menu.module.scss';
@@ -45,8 +31,6 @@ export const PostMoreMenu = forwardRef(function PostMoreMenu(
       commentsDisabled = false,
       createdAt,
       updatedAt,
-      isSaved = false,
-      savePostStatus = {},
       createdBy: postCreatedBy,
       isDirect = false,
     },
@@ -58,7 +42,6 @@ export const PostMoreMenu = forwardRef(function PostMoreMenu(
     doAndClose,
     doAndForceClose,
     permalink,
-    toggleSave,
     fixed = false,
     doMention,
   },
@@ -139,23 +122,6 @@ export const PostMoreMenu = forwardRef(function PostMoreMenu(
       </div>
     )),
     [
-      amIAuthenticated && (
-        <div className={styles.item} key="save-post">
-          <ButtonLink className={styles.link} onClick={doAndClose(toggleSave)}>
-            <Iconic icon={isSaved ? faBookmarkSolid : faBookmark}>
-              {isSaved ? 'Un-save' : 'Save'} post
-              {savePostStatus.loading && <Throbber />}
-              {savePostStatus.error && (
-                <Icon
-                  icon={faExclamationTriangle}
-                  className="post-like-fail"
-                  title={savePostStatus.errorText}
-                />
-              )}
-            </Iconic>
-          </ButtonLink>
-        </div>
-      ),
       <MenuItemNotifyOfAllComments
         key="notify-of-all-comments"
         postId={postId}

src/components/post/post.jsx

@@ -228,7 +228,7 @@
     return { role, postLabel };
   };
 
   renderPostActions() {
     const { props } = this;
 
     const canonicalPostURI = canonicalURI(props);
@@ -259,6 +259,23 @@
         false
       );
 
+    const { isSaved, savePostStatus } = this.props;
+    const saveLink = amIAuthenticated && (
+      <>
+        <a className="post-action" onClick={this.toggleSave} role="button">
+          {isSaved ? 'Un-save' : 'Save'}
+        </a>
+        {savePostStatus.loading && <Throbber />}
+        {savePostStatus.error && (
+          <Icon
+            icon={faExclamationTriangle}
+            className="post-like-fail"
+            title={savePostStatus.errorText}
+          />
+        )}
+      </>
+    );
+
     // "More" menu
     const moreLink = (
       <PostMoreLink
@@ -334,6 +351,7 @@
             <span className="post-footer-block" role="region">
               <span className="post-footer-item">{commentLink}</span>
               <span className="post-footer-item">{likeLink}</span>
+              <span className="post-footer-item">{saveLink}</span>
               {props.hideEnabled && (
                 <span className="post-footer-item" ref={this.hideLink}>
                   {this.renderHideLink()}

src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-pwa/react" />

styles/shared/post.scss

@@ -160,6 +160,10 @@ $post-line-height: rem(20px);
   margin-left: -1em;
   margin-right: 1em;
   max-width: 100%;
+
+  @media (max-width: 500px) {
+    display: block;
+  }
 }
 
 .post-footer-item {

test/jest/__snapshots__/post-more-menu.test.jsx.snap

@@ -146,31 +146,6 @@ exports[`PostMoreMenu > Renders a More menu for a group moderator 1`] = `
     <div
       class="group"
     >
-      <div
-        class="item"
-      >
-        <a
-          aria-disabled="false"
-          class="link"
-          role="button"
-          tabindex="0"
-        >
-          <span
-            class="iconic"
-          >
-            <span
-              class="iconicIcon"
-            >
-              fontawesome icon bookmark
-            </span>
-            <span
-              class="iconicContent"
-            >
-              Save post
-            </span>
-          </span>
-        </a>
-      </div>
       <div
         class="item"
       >
@@ -322,31 +297,6 @@ exports[`PostMoreMenu > Renders a More menu for a logged-in reader 1`] = `
     <div
       class="group"
     >
-      <div
-        class="item"
-      >
-        <a
-          aria-disabled="false"
-          class="link"
-          role="button"
-          tabindex="0"
-        >
-          <span
-            class="iconic"
-          >
-            <span
-              class="iconicIcon"
-            >
-              fontawesome icon bookmark
-            </span>
-            <span
-              class="iconicContent"
-            >
-              Save post
-            </span>
-          </span>
-        </a>
-      </div>
       <div
         class="item"
       >
@@ -674,31 +624,6 @@ exports[`PostMoreMenu > Renders a More menu for a post owner 1`] = `
     <div
       class="group"
     >
-      <div
-        class="item"
-      >
-        <a
-          aria-disabled="false"
-          class="link"
-          role="button"
-          tabindex="0"
-        >
-          <span
-            class="iconic"
-          >
-            <span
-              class="iconicIcon"
-            >
-              fontawesome icon bookmark
-            </span>
-            <span
-              class="iconicContent"
-            >
-              Save post
-            </span>
-          </span>
-        </a>
-      </div>
       <div
         class="item"
       >