Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor UI improvements #3371

Merged
merged 7 commits into from
Dec 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,10 @@ const BookmarkAddEditDialog = ({ curFolder, handleScroll }: Props) => {
label="Folder"
data={folderNamesList}
{...form.getInputProps('folder')}
comboboxProps={{ withinPortal: false }}
comboboxProps={{
withinPortal: false,
transitionProps: { transition: 'pop' },
}}
/>
<PersonSelect formProps={form.getInputProps('taggedPersons')} />
<Button color="red" onClick={handleDelete}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useMantineTheme } from '@mantine/core';
import md5 from 'md5';
import { PropsWithChildren, memo, useCallback } from 'react';
import { AiFillEdit } from 'react-icons/ai';
import { BsArrowUp } from 'react-icons/bs';
import { MdOutlineDelete, MdOutlineContentPasteGo } from 'react-icons/md';
import { RxExternalLink } from 'react-icons/rx';
import { TbCut } from 'react-icons/tb';
Expand All @@ -17,11 +16,10 @@ import { useHotkeys } from '@mantine/hooks';
type Props = PropsWithChildren<{
children: React.ReactNode;
handleOpenSelectedBookmarks: VoidFunction;
handleScroll: (itemNumber: number) => void;
}>;

const BookmarkContextMenu = memo<Props>(
({ children, handleOpenSelectedBookmarks, handleScroll }) => {
({ children, handleOpenSelectedBookmarks }) => {
const setBookmarkOperation = useBookmarkRouteStore(
(state) => state.setBookmarkOperation
);
Expand All @@ -31,19 +29,17 @@ const BookmarkContextMenu = memo<Props>(
cutBookmarks,
handleUrlRemove,
handleBulkUrlRemove,
handleMoveBookmarks,
handleCutBookmarks,
handlePasteBookmarks,
handlePasteSelectedBookmarks,
} = useBookmarkStore(
useShallow((state) => ({
contextBookmarks: state.contextBookmarks,
selectedBookmarks: state.selectedBookmarks,
cutBookmarks: state.cutBookmarks,
handleUrlRemove: state.handleUrlRemove,
handleBulkUrlRemove: state.handleBulkUrlRemove,
handleMoveBookmarks: state.handleMoveBookmarks,
handleCutBookmarks: state.handleCutBookmarks,
handlePasteBookmarks: state.handlePasteBookmarks,
handlePasteSelectedBookmarks: state.handlePasteSelectedBookmarks,
}))
);
const theme = useMantineTheme();
Expand All @@ -53,12 +49,18 @@ const BookmarkContextMenu = memo<Props>(
useHotkeys([
[
'mod+x',
(event) => {
event.stopPropagation();
event.preventDefault();
(e) => {
e.stopPropagation();
handleCutBookmarks();
},
],
[
'mod+v',
(e) => {
e.stopPropagation();
handlePasteSelectedBookmarks();
},
],
]);

const getBookmark = useCallback(
Expand Down Expand Up @@ -94,11 +96,6 @@ const BookmarkContextMenu = memo<Props>(
[getBookmark, setBookmarkOperation]
);

const handleMoveToTop = useCallback(() => {
handleMoveBookmarks(0);
handleScroll(0);
}, [handleMoveBookmarks, handleScroll]);

const getMenuOptions = () => {
const menuOptionsList: IMenuOption[] = [
{
Expand All @@ -109,11 +106,6 @@ const BookmarkContextMenu = memo<Props>(
icon: RxExternalLink,
color: theme.colors.yellow[9],
},
{
onClick: handleMoveToTop,
text: 'Top',
icon: BsArrowUp,
},
{
onClick: handleCutBookmarks,
text: 'Cut',
Expand All @@ -122,12 +114,7 @@ const BookmarkContextMenu = memo<Props>(
];
if (cutCount > 0 && selectedCount === 1) {
menuOptionsList.push({
onClick: () => {
const selectedIdx = selectedBookmarks.findIndex(Boolean);
if (selectedIdx !== -1) {
handlePasteBookmarks(selectedIdx + 1);
}
},
onClick: handlePasteSelectedBookmarks,
text: `Paste (${cutCount})`,
icon: MdOutlineContentPasteGo,
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,8 @@ const BookmarksHeader = memo<Props>(({ onSearchChange, folderContext }) => {
useHotkeys([
[
'mod+s',
(event) => {
event.stopPropagation();
event.preventDefault();
(e) => {
e.stopPropagation();
if (!disableSave) {
handleSaveClick();
}
Expand Down
13 changes: 3 additions & 10 deletions apps/extension/src/BookmarksPanel/components/BookmarksPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@ import {
shouldRenderBookmarks,
} from '@bypass/shared';
import { Box, Flex } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import useHistoryStore from '@store/history';
import { useVirtualizer } from '@tanstack/react-virtual';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useShallow } from 'zustand/react/shallow';
import useBookmarkStore from '../store/useBookmarkStore';
import BookmarkAddEditDialog from './BookmarkAddEditDialog';
Expand All @@ -28,7 +27,6 @@ const BookmarksPanel = ({
operation,
bmUrl,
}: BMPanelQueryParams) => {
const { ref: bodyRef, height: bodyHeight } = useElementSize();
const startHistoryMonitor = useHistoryStore(
(state) => state.startHistoryMonitor
);
Expand All @@ -52,6 +50,7 @@ const BookmarksPanel = ({
loadData: state.loadData,
}))
);
const bodyRef = useRef<HTMLDivElement>(null);
const [searchText, setSearchText] = useState('');
const filteredContextBookmarks = useMemo(
() => getFilteredContextBookmarks(contextBookmarks, searchText),
Expand Down Expand Up @@ -100,15 +99,10 @@ const BookmarksPanel = ({
}, [bmUrl, isFetching, operation, setBookmarkOperation]);

const curBookmarksCount = filteredContextBookmarks.length;
const minReqBookmarksToScroll = Math.ceil(bodyHeight / BOOKMARK_ROW_HEIGHT);

return (
<>
<ScrollButton
itemsSize={curBookmarksCount}
onScroll={handleScroll}
minItemsReqToShow={minReqBookmarksToScroll}
/>
<ScrollButton itemsSize={curBookmarksCount} onScroll={handleScroll} />
<Flex
direction="column"
w={MAX_PANEL_SIZE.WIDTH}
Expand All @@ -124,7 +118,6 @@ const BookmarksPanel = ({
/>
<BookmarkContextMenu
handleOpenSelectedBookmarks={handleOpenSelectedBookmarks}
handleScroll={handleScroll}
>
<Box
ref={bodyRef}
Expand Down
41 changes: 32 additions & 9 deletions apps/extension/src/BookmarksPanel/components/PersonSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,28 @@
import { sortAlphabetically, usePerson } from '@bypass/shared';
import {
IOptionData,
MultiSelectWithImage,
sortAlphabetically,
usePerson,
} from '@bypass/shared';
Avatar,
Group,
MultiSelect,
MultiSelectProps,
Text,
} from '@mantine/core';
import { useCallback, useEffect, useState } from 'react';

interface IOptionData {
label: string;
value: string;
image: string;
}

const renderMultiSelectOption: MultiSelectProps['renderOption'] = ({
option,
}) => (
<Group gap="sm">
<Avatar src={(option as IOptionData).image} radius="md" />
<Text size="sm">{option.label}</Text>
</Group>
);

const PersonSelect = ({ formProps }: { formProps: any }) => {
const { getAllDecodedPersons, getPersonsWithImageUrl } = usePerson();
const [personList, setPersonList] = useState<IOptionData[]>([]);
Expand All @@ -28,13 +45,19 @@ const PersonSelect = ({ formProps }: { formProps: any }) => {
}, [initPersonList]);

return (
<MultiSelectWithImage
options={personList}
<MultiSelect
data={personList}
label="Tagged Persons"
placeholder="Persons"
nothingFound="No person with this name"
nothingFoundMessage="No person with this name"
maxDropdownHeight={210}
comboboxProps={{ position: 'top' }}
comboboxProps={{
position: 'top',
withinPortal: false,
transitionProps: { transition: 'pop' },
}}
hidePickedOptions
renderOption={renderMultiSelectOption}
{...formProps}
/>
);
Expand Down
28 changes: 8 additions & 20 deletions apps/extension/src/BookmarksPanel/store/useBookmarkStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ interface State {
) => void;
handleFolderRemove: (pos: number, name: string) => void;
handleSave: (folderContext: string) => Promise<void>;
handleMoveBookmarks: (destinationIndex: number) => void;
handlePasteBookmarks: (destinationIndex: number) => void;
handlePasteSelectedBookmarks: () => void;
}

const useBookmarkStore = create<State>()((set, get) => ({
Expand Down Expand Up @@ -384,25 +383,14 @@ const useBookmarkStore = create<State>()((set, get) => ({
});
},

handleMoveBookmarks: (destinationIndex: number) => {
const { selectedBookmarks, contextBookmarks } = get();
const { newContextBookmarks, newSelectedBookmarks } = processBookmarksMove(
destinationIndex,
selectedBookmarks,
contextBookmarks
);

set({
contextBookmarks: newContextBookmarks,
selectedBookmarks: newSelectedBookmarks,
isSaveButtonActive: true,
});
},

handlePasteBookmarks: (destinationIndex: number) => {
const { cutBookmarks, contextBookmarks } = get();
handlePasteSelectedBookmarks: () => {
const { cutBookmarks, contextBookmarks, selectedBookmarks } = get();
const selectedIdx = selectedBookmarks.findIndex(Boolean);
if (selectedIdx === -1) {
return;
}
const { newContextBookmarks, newSelectedBookmarks } = processBookmarksMove(
destinationIndex,
selectedIdx,
cutBookmarks,
contextBookmarks
);
Expand Down
2 changes: 1 addition & 1 deletion apps/extension/src/HomePopup/containers/PopupHome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const PopupHome = () => {

return (
<>
<Flex direction="column" align="center" w={300} p="0.5rem 1rem 1rem">
<Flex direction="column" align="center" w={305} p="0.5rem 1rem 1rem">
<Text
fz="xl"
fw={700}
Expand Down
2 changes: 1 addition & 1 deletion apps/extension/src/components/Toast.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const Toast = () => {
{(styles) => (
<Alert
radius="md"
variant="light"
variant="filled"
withCloseButton
onClose={hideToast}
color={COLOR_MAP[severity]}
Expand Down
2 changes: 1 addition & 1 deletion packages/configs/manifest/manifest.base.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "22.3.0",
"version": "22.4.0",
"manifest_version": 3,
"short_name": "Bypass Links",
"name": "Bypass Links",
Expand Down
33 changes: 21 additions & 12 deletions packages/shared/src/components/Bookmarks/components/Favicon.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Avatar } from '@mantine/core';
import { forwardRef, useCallback, useEffect, useState } from 'react';
import { forwardRef, useEffect, useState } from 'react';
import { RiLinkUnlinkM } from 'react-icons/ri';
import { getFaviconProxyUrl } from '../../../utils';
import { getBlobUrlFromCache } from '../../../utils/cache';
Expand All @@ -9,29 +9,38 @@ interface Props {
url: string;
}

const urlMap = new Map<string, string>();

const getBlobUrl = async (url: string) => {
const proxyUrl = getFaviconProxyUrl(url);

const blobStr = urlMap.get(proxyUrl);
if (blobStr) {
return blobStr;
}

const blobUrl = await getBlobUrlFromCache(ECacheBucketKeys.favicon, proxyUrl);
urlMap.set(proxyUrl, blobUrl);
return blobUrl;
};

const Favicon = forwardRef<HTMLDivElement, Props>(
({ url, ...mantineTooltipProps }, ref) => {
const [faviconUrl, setFaviconUrl] = useState('');

const initFavicon = useCallback(async () => {
const faviconBlobUrl = await getBlobUrlFromCache(
ECacheBucketKeys.favicon,
getFaviconProxyUrl(url)
);
setFaviconUrl(faviconBlobUrl);
}, [url]);

useEffect(() => {
const initFavicon = async () => {
setFaviconUrl(await getBlobUrl(url));
};
initFavicon();
}, [initFavicon, url]);
}, [url]);

return (
<Avatar
ref={ref}
radius="xs"
size="1.25rem"
size={17}
src={faviconUrl}
alt={faviconUrl}
color="red"
{...mantineTooltipProps}
>
Expand Down
Loading
Loading