feat(web): reimplement main page

packages_rs/nextclade-web/src/components/Common/List.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 export const Ul = styled.ul`
   padding-left: 1.5rem;
@@ -13,3 +13,35 @@ export const UlInvisible = styled.ul`
 export const LiInvisible = styled.li`
   list-style: none;
 `
+
+// @formatter:off
+// prettier-ignore
+export const ScrollShadowVerticalCss = css`
+  /** Taken from: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows */
+  background:
+    /* Shadow Cover TOP */    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
+    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom,
+    /* Shadow TOP */          radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top,
+    /* Shadow BOTTOM */       radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+  background-attachment: local, local, scroll, scroll;
+`
+// @formatter:on
+
+export const ListGenericCss = css`
+  ${ScrollShadowVerticalCss};
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  -webkit-overflow-scrolling: touch;
+  overflow-scrolling: touch;
+
+  & li {
+    border: 0;
+  }
+`
+
+export const UlGeneric = styled.ul`
+  ${ListGenericCss}
+`

packages_rs/nextclade-web/src/components/Common/SearchBox.tsx

@@ -0,0 +1,96 @@
+import React, { ChangeEvent, useCallback, useMemo, HTMLProps } from 'react'
+import styled from 'styled-components'
+import { Form, Input as InputBase } from 'reactstrap'
+import { MdSearch as IconSearchBase, MdClear as IconClearBase } from 'react-icons/md'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { ButtonTransparent } from 'src/components/Common/ButtonTransparent'
+
+const SearchForm = styled(Form)`
+  display: inline;
+  position: relative;
+`
+
+const IconSearchWrapper = styled.span`
+  display: inline;
+  position: absolute;
+  padding: 5px 7px;
+`
+
+const IconSearch = styled(IconSearchBase)`
+  * {
+    color: ${(props) => props.theme.gray500};
+  }
+`
+
+const ButtonClear = styled(ButtonTransparent)`
+  display: inline;
+  position: absolute;
+  right: 0;
+  padding: 0 7px;
+`
+
+const IconClear = styled(IconClearBase)`
+  * {
+    color: ${(props) => props.theme.gray500};
+  }
+`
+
+const Input = styled(InputBase)`
+  display: inline !important;
+  padding-left: 35px;
+  padding-right: 30px;
+  height: 2.2em;
+`
+
+export interface SearchBoxProps extends Omit<HTMLProps<HTMLFormElement>, 'as'> {
+  searchTitle?: string
+  searchTerm: string
+  onSearchTermChange(term: string): void
+}
+
+export function SearchBox({ searchTitle, searchTerm, onSearchTermChange, ...restProps }: SearchBoxProps) {
+  const { t } = useTranslationSafe()
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      onSearchTermChange(event.target.value)
+    },
+    [onSearchTermChange],
+  )
+
+  const onClear = useCallback(() => {
+    onSearchTermChange('')
+  }, [onSearchTermChange])
+
+  const buttonClear = useMemo(() => {
+    if (searchTerm.length === 0) {
+      return null
+    }
+    return (
+      <ButtonClear onClick={onClear} title={t('Clear')}>
+        <IconClear size={20} />
+      </ButtonClear>
+    )
+  }, [onClear, searchTerm.length, t])
+
+  return (
+    <SearchForm {...restProps}>
+      <IconSearchWrapper>
+        <IconSearch size={25} />
+      </IconSearchWrapper>
+      <Input
+        type="text"
+        title={searchTitle}
+        placeholder={searchTitle}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        data-gramm="false"
+        value={searchTerm}
+        onChange={onChange}
+      />
+      {buttonClear}
+    </SearchForm>
+  )
+}

packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx

@@ -16,6 +16,7 @@ import { UploadedFileInfo } from './UploadedFileInfo'
 import { UploadedFileInfoCompact } from './UploadedFileInfoCompact'
 
 export const FilePickerContainer = styled.div`
+  flex: 1;
   display: flex;
   flex-direction: column;
 `

packages_rs/nextclade-web/src/components/FilePicker/UploadBox.tsx

@@ -84,6 +84,7 @@ export function UploadBox({ onUpload, children, multiple = false, ...props }: Pr
     () => (
       <UploadZoneTextContainer>
         <UploadZoneText>{t('Drag & drop files')}</UploadZoneText>
+        <UploadZoneText>{t('or folders')}</UploadZoneText>
         <UploadZoneButton color="primary">{t('Select files')}</UploadZoneButton>
       </UploadZoneTextContainer>
     ),

packages_rs/nextclade-web/src/components/Main/DatasetInfo.tsx

@@ -15,9 +15,21 @@ import {
 import type { Dataset } from 'src/types'
 import styled from 'styled-components'
 
-export const DatasetInfoContainer = styled.div`
+export const Container = styled.div`
   display: flex;
-  flex-direction: row;
+  //border: 1px #ccc9 solid;
+  //border-radius: 5px;
+
+  //margin-top: 3px !important;
+  //margin-bottom: 3px !important;
+  //margin-left: 5px;
+  //padding: 15px;
+
+  margin: 0;
+  padding: 15px;
+  box-shadow: 0 0 12px 0 #0002;
+  border: 1px #ccc9 solid;
+  border-radius: 5px;
 `
 
 export const FlexLeft = styled.div`
@@ -85,7 +97,7 @@ export function DatasetInfo({ dataset }: DatasetInfoProps) {
   }
 
   return (
-    <DatasetInfoContainer>
+    <Container>
       <FlexLeft>
         <DatasetInfoAutodetectProgressCircle dataset={dataset} />
       </FlexLeft>
@@ -144,22 +156,22 @@ export function DatasetInfo({ dataset }: DatasetInfoProps) {
         <DatasetInfoLine>{t('Updated at: {{updated}}', { updated: updatedAt })}</DatasetInfoLine>
         <DatasetInfoLine>{t('Dataset name: {{name}}', { name: path })}</DatasetInfoLine>
       </FlexRight>
-    </DatasetInfoContainer>
+    </Container>
   )
 }
 
 export function DatasetUndetectedInfo() {
   const { t } = useTranslationSafe()
 
   return (
-    <DatasetInfoContainer>
+    <Container>
       <DatasetName>
         <span>{t('Autodetect')}</span>
       </DatasetName>
       <DatasetInfoLine>{t('Detect pathogen automatically from sequences')}</DatasetInfoLine>
       <DatasetInfoLine />
       <DatasetInfoLine />
-    </DatasetInfoContainer>
+    </Container>
   )
 }
 
@@ -206,6 +218,7 @@ function DatasetInfoAutodetectProgressCircle({ dataset }: DatasetInfoCircleProps
 
 const CountText = styled.span`
   text-align: center;
+  font-size: 0.8rem;
 `
 
 interface CircleBorderProps {