Merge pull request #4755 from urbit/lf/scroll-pos-reset-publish

landscape: grabbag

pkg/interface/src/logic/lib/hark.ts

@@ -31,6 +31,6 @@ export function getNotificationCount(
 ): number {
   const unread = unreads.graph?.[path] || {};
   return Object.keys(unread)
-    .map(index => unread[index]?.notifications || 0)
+    .map(index => unread[index]?.notifications?.length || 0)
     .reduce(f.add, 0);
 }

pkg/interface/src/views/apps/publish/PublishResource.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, {useEffect, useRef} from 'react';
 import { Box } from '@tlon/indigo-react';
 
 import GlobalApi from '~/logic/api/global';
 import { StoreState } from '~/logic/store/type';
 import { Association } from '@urbit/api';
-import { RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps, useLocation } from 'react-router-dom';
 import { NotebookRoutes } from './components/NotebookRoutes';
 
 type PublishResourceProps = StoreState & {
@@ -17,9 +17,21 @@ export function PublishResource(props: PublishResourceProps) {
   const { association, api, baseUrl, notebooks } = props;
   const rid = association.resource;
   const [, , ship, book] = rid.split('/');
+  const location = useLocation();
+  const scrollRef = useRef(null)
+  useEffect(() => {
+    const search = new URLSearchParams(location.search);
+    if(search.has('selected') || search.has('edit') || !scrollRef.current) {
+      return;
+    }
+    scrollRef.current.scrollTop = 0;
+
+
+
+  }, [location])
 
   return (
-    <Box height="100%" width="100%" overflowY="auto">
+    <Box ref={scrollRef} height="100%" width="100%" overflowY="auto">
       <NotebookRoutes
         api={api}
         ship={ship}

pkg/interface/src/views/apps/publish/components/Note.tsx

@@ -94,12 +94,6 @@ export function Note(props: NoteProps & RouteComponentProps) {
 
   const { doCopy, copyDisplay } = useCopy(permalink, 'Copy Link');
 
-  const windowRef = React.useRef(null);
-  useEffect(() => {
-    if (windowRef.current && !query.has('selected')) {
-      windowRef.current.parentElement.scrollTop = 0;
-    }
-  }, [note, windowRef]);
 
   return (
     <Box
@@ -112,7 +106,6 @@ export function Note(props: NoteProps & RouteComponentProps) {
       width="100%"
       gridRowGap={4}
       mx="auto"
-      ref={windowRef}
     >
       <Link to={rootUrl}>
         <Text>{'<- Notebook Index'}</Text>

pkg/interface/src/views/components/RemoteContent.tsx

@@ -135,7 +135,7 @@ return;
     return (
       <Row
         alignItems="center"
-        maxWidth="20rem"
+        maxWidth="min(100%, 20rem)"
         gapX="1" borderRadius="1" backgroundColor="washedGray">
         { textOnly && (<Icon ml="2" display="block" icon="ArrowExternal" />)}
         <BaseAnchor
@@ -149,8 +149,8 @@ return;
         textOverflow="ellipsis"
         minWidth="0"
         width={textOnly ? "calc(100% - 24px)" : "fit-content"}
+        maxWidth="min(500px, 100%)"
         style={{ color: 'inherit', textDecoration: 'none', ...style }}
-        className="word-break-all"
         target="_blank"
         rel="noopener noreferrer"
               >
@@ -218,6 +218,8 @@ return;
             style={style}
             onLoad={onLoad}
             objectFit="contain"
+            height="100%"
+            width="100%"
             {...audioProps}
             {...props}
           />
@@ -237,6 +239,8 @@ return;
             style={style}
             onLoad={onLoad}
             objectFit="contain"
+            height="100%"
+            width="100%"
             {...videoProps}
             {...props}
           />

pkg/interface/src/views/components/ShipSearch.tsx

@@ -157,7 +157,7 @@ export function ShipSearch<I extends string, V extends Value<I>>(
     setFieldValue(name(), newValue);
   };
 
-  const error = _.compact(errors[id] as string[]);
+  const error = _.compact((_.isString(errors[id]) ? [errors[id]] : errors[id] as string[]) as any);
 
   const isExact = useCallback((s: string) => {
     const ship = `~${deSig(s)}`;