Merge branch 'beta' into pwa

.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,7 @@ 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
@@ -384,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.
@@ -491,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

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

@@ -259,6 +259,23 @@ class Post extends Component {
         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 @@ class Post extends Component {
             <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()}

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"
       >

test/jest/__snapshots__/post.test.jsx.snap

@@ -140,6 +140,16 @@ exports[`Post > Renders a post and doesn't blow up 1`] = `
                   Like
                 </a>
               </span>
+              <span
+                class="post-footer-item"
+              >
+                <a
+                  class="post-action"
+                  role="button"
+                >
+                  Save
+                </a>
+              </span>
               <span
                 class="post-footer-item"
               />

vite.config.mjs

@@ -73,8 +73,11 @@ export default defineConfig(({ mode }) => ({
           /^\/(config\.json|version\.txt|robots\.txt)$/,
           /^\/(docs|assets)\//,
         ],
-        // Add 'woff2' to the default 'globPatterns'
-        globPatterns: ['**/*.{js,wasm,css,html,woff2}'],
+        // Add '.woff2' and exclude (!) '.html' from the default 'globPatterns'.
+        // We don't want to cache index.html because of beta/non-beta switching
+        // and the possible config.json inclusion. So we only cache the assets
+        // but not the page itself.
+        globPatterns: ['**/*.{js,wasm,css,woff2}'],
         runtimeCaching: [
           // Cache profile pictures (up to 100 entries)
           {