Handle logged-out cases

src/components/status.jsx

@@ -60,7 +60,7 @@ function Status({
       </div>
     );
   }
-  const { masto, instance } = api({ instance: propInstance });
+  const { masto, instance, authenticated } = api({ instance: propInstance });
   const { instance: currentInstance } = api();
   const sameInstance = instance === currentInstance;
 
@@ -388,7 +388,7 @@ function Status({
             <Poll
               lang={language}
               poll={poll}
-              readOnly={readOnly || !sameInstance}
+              readOnly={readOnly || !sameInstance || !authenticated}
               onUpdate={(newPoll) => {
                 states.statuses[sKey].poll = newPoll;
               }}
@@ -517,7 +517,7 @@ function Status({
                   icon="comment"
                   count={repliesCount}
                   onClick={() => {
-                    if (!sameInstance) {
+                    if (!sameInstance || !authenticated) {
                       return alert(unauthInteractionErrorMessage);
                     }
                     states.showCompose = {
@@ -537,7 +537,7 @@ function Status({
                     icon="rocket"
                     count={reblogsCount}
                     onClick={async () => {
-                      if (!sameInstance) {
+                      if (!sameInstance || !authenticated) {
                         return alert(unauthInteractionErrorMessage);
                       }
                       try {
@@ -580,7 +580,7 @@ function Status({
                   icon="heart"
                   count={favouritesCount}
                   onClick={async () => {
-                    if (!sameInstance) {
+                    if (!sameInstance || !authenticated) {
                       return alert(unauthInteractionErrorMessage);
                     }
                     try {
@@ -616,7 +616,7 @@ function Status({
                   class="bookmark-button"
                   icon="bookmark"
                   onClick={async () => {
-                    if (!sameInstance) {
+                    if (!sameInstance || !authenticated) {
                       return alert(unauthInteractionErrorMessage);
                     }
                     try {

src/pages/status.css

@@ -36,21 +36,20 @@
   pointer-events: none;
 }
 
-.status-deck footer {
+.post-status-banner {
   position: sticky;
   bottom: 16px;
   bottom: max(16px, env(safe-area-inset-bottom));
   font-size: 90%;
-  background-color: var(--bg-faded-blur-color);
+  background-color: var(--bg-faded-color);
-  backdrop-filter: blur(16px);
   padding: 16px;
-  margin: 16px;
+  margin: 0 16px;
   border-radius: 16px;
   white-space: pre-wrap;
   line-height: 1.2;
   max-width: var(--main-width);
 }
-.status-deck footer > p:first-of-type {
+.post-status-banner > p:first-of-type {
   margin-top: 0;
   padding-top: 0;
 }

src/pages/status.jsx

@@ -40,7 +40,7 @@ function resetScrollPosition(id) {
 
 function StatusPage() {
   const { id, ...params } = useParams();
-  const { masto, instance } = api({ instance: params.instance });
+  const { masto, instance, authenticated } = api({ instance: params.instance });
   const { masto: currentMasto, instance: currentInstance } = api();
   const sameInstance = instance === currentInstance;
   const navigate = useNavigate();
@@ -609,19 +609,70 @@ function StatusPage() {
                   } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
                 >
                   {isHero ? (
-                    <InView
+                    <>
-                      threshold={0.1}
+                      <InView
-                      onChange={onView}
+                        threshold={0.1}
-                      class="status-focus"
+                        onChange={onView}
-                      tabIndex={0}
+                        class="status-focus"
-                    >
+                        tabIndex={0}
-                      <Status
+                      >
-                        statusID={statusID}
+                        <Status
-                        instance={instance}
+                          statusID={statusID}
-                        withinContext
+                          instance={instance}
-                        size="l"
+                          withinContext
-                      />
+                          size="l"
-                    </InView>
+                        />
+                      </InView>
+                      {!sameInstance && uiState !== 'loading' && (
+                        <div class="post-status-banner">
+                          <p>
+                            This post is from another instance (
+                            <b>{instance}</b>). Interactions (reply, boost, etc)
+                            are not possible.
+                          </p>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              (async () => {
+                                try {
+                                  const results = await currentMasto.v2.search({
+                                    q: heroStatus.url,
+                                    type: 'statuses',
+                                    resolve: true,
+                                    limit: 1,
+                                  });
+                                  if (results.statuses.length) {
+                                    const status = results.statuses[0];
+                                    navigate(`/s/${status.id}`);
+                                  } else {
+                                    throw new Error('No results');
+                                  }
+                                } catch (e) {
+                                  alert('Error: ' + e);
+                                  console.error(e);
+                                }
+                              })();
+                            }}
+                          >
+                            <Icon icon="transfer" /> Switch to my instance to
+                            enable interactions
+                          </button>
+                        </div>
+                      )}
+                      {sameInstance &&
+                        !authenticated &&
+                        uiState !== 'loading' && (
+                          <div class="post-status-banner">
+                            <p>
+                              You're not logged in. Interactions (reply, boost,
+                              etc) are not possible.
+                            </p>
+                            <Link to="/login" class="button">
+                              Log in
+                            </Link>
+                          </div>
+                        )}
+                    </>
                   ) : (
                     <Link
                       class="status-link"
@@ -730,40 +781,6 @@ function StatusPage() {
             )}
           </>
         )}
-        {!sameInstance && uiState !== 'loading' && (
-          <footer class="">
-            <p>
-              This post is from another instance (<b>{instance}</b>), different
-              from your current logged-in instance (<b>{currentInstance}</b>).
-            </p>
-            <button
-              type="button"
-              onClick={() => {
-                (async () => {
-                  try {
-                    const results = await currentMasto.v2.search({
-                      q: heroStatus.url,
-                      type: 'statuses',
-                      resolve: true,
-                      limit: 1,
-                    });
-                    if (results.statuses.length) {
-                      const status = results.statuses[0];
-                      navigate(`/s/${status.id}`);
-                    } else {
-                      throw new Error('No results');
-                    }
-                  } catch (e) {
-                    alert('Error: ' + e);
-                    console.error(e);
-                  }
-                })();
-              }}
-            >
-              <Icon icon="transfer" /> Switch to my instance
-            </button>
-          </footer>
-        )}
       </div>
     </div>
   );