fix: adhere to "collapse" setting in pagination, improvements to resu…

…lt item UX
WorldBrain · Jul 16, 2024 · d6d057b · d6d057b
1 parent ba661c7
commit d6d057b
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 42 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/dashboard-refactor/logic.ts b/src/dashboard-refactor/logic.ts
@@ -218,6 +218,7 @@ export class DashboardLogic extends UILogic<State, Events> {
  showDropArea: this.options.location.href.includes(
  MISSING_PDF_QUERY_PARAM,
  ),
+ showAllNotes: true,
  themeVariant: null,
  bulkSelectedUrls: null,
  bulkDeleteLoadingState: 'pristine',
@@ -903,6 +904,7 @@ export class DashboardLogic extends UILogic<State, Events> {
  result,
  params,
  this.options.annotationsCache,
+ previousState.showAllNotes,
  )
 
  const resultsList = results[-1].pages.byId
@@ -1223,6 +1225,7 @@ export class DashboardLogic extends UILogic<State, Events> {
  result,
  params,
  this.options.annotationsCache,
+ previousState.showAllNotes,
  )
 
  let noResultsType: NoResultsType = null
@@ -1567,11 +1570,15 @@ export class DashboardLogic extends UILogic<State, Events> {
 
  /* START - search result event handlers */
  // TODO: Remove this event
- setPageSearchResult: EventHandler<'setPageSearchResult'> = ({ event }) => {
+ setPageSearchResult: EventHandler<'setPageSearchResult'> = ({
+ event,
+ previousState,
+ }) => {
  const state = utils.pageSearchResultToState(
  event.result,
  { skip: 0, limit: 10 },
  this.options.annotationsCache,
+ previousState.showAllNotes,
  )
  this.emitMutation({
  searchResults: {
@@ -2899,6 +2906,16 @@ export class DashboardLogic extends UILogic<State, Events> {
  return results
  }
 
+ if (previousState.showAllNotes) {
+ this.emitMutation({
+ showAllNotes: { $set: false },
+ })
+ } else {
+ this.emitMutation({
+ showAllNotes: { $set: true },
+ })
+ }
+
  if (utils.areAllNotesShown(previousState.searchResults)) {
  this.emitMutation({
  searchResults: {

diff --git a/src/dashboard-refactor/search-results/components/page-result.tsx b/src/dashboard-refactor/search-results/components/page-result.tsx
@@ -944,7 +944,7 @@ export default class PageResultView extends PureComponent<Props> {
  }
  this.hoverTimeout = setTimeout(() => {
  this.props.onMainContentHover(event)
- }, 300)
+ }, 50)
  }
  }
 
@@ -959,6 +959,26 @@ export default class PageResultView extends PureComponent<Props> {
  }
  }
 
+ renderListsSegment = () => {
+ return (
+ <ListsSegment
+ lists={this.displayLists}
+ onListClick={(listId) => {
+ this.props.filterbyList(listId)
+ }}
+ onEditBtnClick={this.props.onListPickerBarBtnClick}
+ renderSpacePicker={
+ this.props.listPickerShowStatus === 'lists-bar'
+ ? this.renderSpacePicker
+ : null
+ }
+ filteredbyListID={this.props.filteredbyListID}
+ padding={'0px 20px 0px 20px'}
+ spacePickerButtonRef={this.spacePickerBarRef}
+ />
+ )
+ }
+
  render() {
  return (
  <ItemBox
@@ -1034,37 +1054,8 @@ export default class PageResultView extends PureComponent<Props> {
  ) : null
  }}
  renderSpacePicker={() => {
- if (this.displayLists.length > 0) {
- return (
- <ListSegmentContainer>
- <ListsSegment
- lists={this.displayLists}
- onListClick={(listId) => {
- this.props.filterbyList(
- listId,
- )
- }}
- onEditBtnClick={
- this.props
- .onListPickerBarBtnClick
- }
- renderSpacePicker={
- this.props
- .listPickerShowStatus ===
- 'lists-bar'
- ? this.renderSpacePicker
- : null
- }
- filteredbyListID={
- this.props.filteredbyListID
- }
- padding={'0px 20px 0px 20px'}
- spacePickerButtonRef={
- this.spacePickerBarRef
- }
- />
- </ListSegmentContainer>
- )
+ if (this.displayLists.length < 3) {
+ return this.renderListsSegment()
  }
  }}
  memexIcon={MemexIcon}
@@ -1084,7 +1075,11 @@ export default class PageResultView extends PureComponent<Props> {
  editTitleState={this.props.editTitleState}
  />
  </PageContentBox>
-
+ {this.displayLists.length >= 3 && (
+ <ListSegmentContainer>
+ {this.renderListsSegment()}
+ </ListSegmentContainer>
+ )}
  {this.props.searchType !== 'notes' &&
  this.props.searchTerms?.length > 0 &&
  this.props.text?.length > 0 &&
@@ -1111,6 +1106,11 @@ export default class PageResultView extends PureComponent<Props> {
  !this.props.editTitleState
  }
  inFocus={this.props.isInFocus}
+ position={
+ this.displayLists.length > 0
+ ? 'relative'
+ : 'absolute'
+ }
  >
  <ItemBoxBottom
  // firstDivProps={{
@@ -1196,6 +1196,7 @@ const FooterBar = styled.div<{
  inFocus: boolean
  inPageMode?: boolean
  inTitleEditMode?: boolean
+ position: 'absolute' | 'relative'
 }>`
  display: none;
  bottom: 0;
@@ -1206,7 +1207,7 @@ const FooterBar = styled.div<{
  background: unset;
  backdrop-filter: unset;
  margin-top: -5px;
- position: relative;
+ position: ${(props) => props.position ?? 'absolute'};
  opacity: 0;
  background: ${(props) => props.theme.colors.black}98;
  backdrop-filter: blur(5px);
@@ -1216,14 +1217,12 @@ const FooterBar = styled.div<{
  css`
  animation: ${slideInFromBottom} 1s cubic-bezier(0.22, 0.61, 0.36, 1)
  forwards;
- position: relative;
  display: flex;
  `};
  ${(props) =>
  props.inTitleEditMode &&
  css`
  display: flex;
- position: relative;
  `};
  ${(props) =>
  props.shouldShow &&
@@ -1328,8 +1327,8 @@ const PageActionBox = styled.div<{
  grid-gap: 5px;
  padding: 5px;
  position: absolute;
- top: 15px;
- right: 15px;
+ top: 10px;
+ right: 10px;
  z-index: 999;
  background: ${(props) => props.theme.colors.black}95;
  backdrop-filter: blur(5px);
@@ -1494,4 +1493,6 @@ const TooltipContent = styled.div`
  justify-content: center;
 `
 
-const ListSegmentContainer = styled.div``
+const ListSegmentContainer = styled.div`
+ margin-bottom: 15px;
+`
diff --git a/src/dashboard-refactor/search-results/util.ts b/src/dashboard-refactor/search-results/util.ts
@@ -106,12 +106,13 @@ export const getInitialPageResultState = (
  pageId: string,
  pageResultId: string,
  noteIds: string[] = [],
+ areNotesShown: boolean,
 ): PageResult => ({
  pageId,
  pageResultId,
  notesType: 'user',
  activePage: undefined,
- areNotesShown: true,
+ areNotesShown: areNotesShown ?? true,
  isTagPickerShown: false,
  isShareMenuShown: false,
  isCopyPasterShown: false,
@@ -212,6 +213,7 @@ export const pageSearchResultToState = (
  result: StandardSearchResponse,
  params: UnifiedSearchPaginationParams,
  cache: PageAnnotationsCacheInterface,
+ areNotesShown: boolean,
 ): Pick<
  RootState,
  'results' | 'noteData' | 'pageData' | 'pageIdToResultIds'
@@ -235,6 +237,7 @@ export const pageSearchResultToState = (
  pageId,
  resultId,
  noteIds,
+ areNotesShown,
  )
 
  pageData.allIds.push(pageId)

diff --git a/src/dashboard-refactor/types.ts b/src/dashboard-refactor/types.ts
@@ -81,6 +81,7 @@ export interface RootState {
  selectableBlocks: SelectableBlock[]
  focusedBlockId: number | null
  imageSourceForPreview: string
+ showAllNotes: boolean
 }
 
 export type Events = UIEvent<