bk7312 / elicit-clone

A UI clone of Elicit written in React/Typescript/Chakra UI

Elicit Clone

A UI clone of Elicit with some modifications

Link to Elicit: https://elicit.org/

elicit-clone's Issues

List of things to work on

To do

• Implement a working search bar (mostly done, pending popover bug)
• Create the /search page layout with placeholder data (basic layout done, to tweak and work on logic and passing data)
• Upload pdf functionality (currently dummy modal, to add file upload functionality)
• Add loading animation when logging in, OR connect to firebase and implement anonymous auth and login
• Ability to star results and save to Starred
• Add Tasks with dummy data

Harder to do

• Create dummy /search page data based on real search and implement loading animation for each query?
• Create adaptable /search page layout based on adding/removing filters and implement horizontal scrolling?
• Responsive design, mobile layout?

---

Very minor UI bug on profile icon tooltip popup

1. Hover over profile icon, "Account Settings" tooltip pops up.
2. Click on profile icon to open popover, tooltip disappears.
3. Move mouse out of profile icon/popover, click anywhere to close the popover, tooltip reappears (should not reappear?).
4. Hover over profile icon and hover away to close tooltip.

Current profile icon tooltip implementation

• Tooltip wraps PopoverTrigger, forwardRef used to pass props to profile icon
• Without forwardRef, only one function (tooltip or popover) would work depending on the nesting layout

Very minor UI bug on /search paper summary thumbs up/down tooltip popup

1. Hover over the thumbs up/down icon, tooltip popup appears
2. Scroll the paper summary without moving the mouse, tooltip still stays but scrolls away instead of disappearing

---

Consider redesigning after cloning

• Redesign home landing page with new layout? Current landing page is a bit bare
• Create a light mode and dark mode color scheme with toggle to switch
• Study the /search page and find ways to improve based on existing public user feedback
• Add hover effects or link indication on login/signup pages

Search bar popover not meeting requirements

Requirements for search bar popover:

1. Initial state on page load, popover shall be closed and no focus on the search bar input field
2. Clicking on the search bar input field shall bring focus to the input field and open the popover
3. Focus shall remain on the input field after opening the popover, popover shall not steal focus
4. Popover shall not toggle open/close after multiple clicks on the search bar input field
5. Popover shall stay open while user is typing (maintaining focus on search bar input field) and popover content shall update as user types
6. Clicking inside the popover (losing search bar input field focus, gaining popover focus) shall not close the popover
7. Clicking outside the search bar/popover (losing both search bar input field and popover focus) shall close the popover
8. Pressing escape while focused on the search bar input field shall close the popover and remove input field focus

Current implementation:

1. PASS
2. PASS
3. PASS - Achievable with either Popover autoFocus={false} (doesn't steal focus) or Popover initialFocusRef={inputRef} (passes focus to search bar input field with ref={inputRef})
4. PASS - One solution is to open popover using onOpen from useDisclosure instead, i.e. input onFocus={onOpen}, putting input inside PopoverTrigger causes the toggle open/close behavior
5. PASS
6. PASS
7. FAIL - Weird bug where maintaining input focus -> clicking outside search bar/popover doesn't close the popover, but maintaining input focus -> clicking inside popover -> clicking outside search bar/popover will close the popover. Worse is that maintaining input focus -> clicking inside popover -> clicking inside search bar will also close the popover and user is unable to open the popover again unless they reload the page!!
8. PASS - Achievable with Input onKeyDown to blur() and onPopoverClose()

Current implementation code:

const { isOpen: isPopoverOpen, onOpen: onPopoverOpen, onClose: onPopoverClose } = useDisclosure()

<Popover
  isOpen={isPopoverOpen}
  onClose={onPopoverClose}
  autoFocus={false}
>

   <PopoverAnchor>
    <InputGroup>
      <InputLeftElement>...</InputLeftElement>
      <Input
        value={input}
        onChange={handleChange} // updates state
        onKeyDown={handleKeyDown} // e.key === 'Escape' -> e.currentTarget.blur() and onPopoverClose()
        onFocus={onPopoverOpen}
      />
      <InputRightElement>...</InputRightElement>
    </InputGroup>
  </PopoverAnchor>

  <PopoverContent>
    <PopoverBody>...</PopoverBody>
  </PopoverContent>
</Popover>