Merge branch 'main' of github.com:Icon-Shelf/icon-shelf into packge-u…

…pdates

# Conflicts:
#	packages/main/src/index.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icon-shelf",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "productName": "Icon Shelf",
   "description": "Icon Shelf is a free icon manager for developers",
   "private": true,

packages/main/src/index.ts

@@ -33,6 +33,7 @@ import MenuBuilder from './menu';
 import { activateAnalytics } from './utils/analytics';
 import AppUpdater from './app-updater';
 import { debounce } from 'lodash';
+import type { MessageBoxOptions } from 'electron';
 
 const isSingleInstance = app.requestSingleInstanceLock();
 const isDevelopment = import.meta.env.MODE === 'development';
@@ -144,6 +145,8 @@ protocol.registerSchemesAsPrivileged([
 app.whenReady().then(() => {
   protocol.handle('icon-image', (request) => {
     let url = decodeURI(request.url.replace('icon-image://', ''));
+    url = url.replace(/\?.*/, '');
+
     if (process.platform === 'win32') {
       url = url.charAt(0).toUpperCase() + ':' + url.slice(1);
     }
@@ -224,6 +227,25 @@ ipcMain.on(
       // const ext = matches?.[1];
       const data = matches?.[2];
       if (data && filename) {
+        const formattedPath = join(folderPath, filename);
+
+        if (existsSync(formattedPath)) {
+          const dialogOpts: MessageBoxOptions = {
+            type: 'error',
+            message: `Icon with the name ${filename} is already present in the collection`,
+            buttons: ['Skip', 'Override'],
+            title: 'Icon is already present in the collection',
+          };
+
+          const window = BrowserWindow.getFocusedWindow();
+          if (window) {
+            const response = dialog.showMessageBoxSync(window, dialogOpts);
+            if (response === 0) {
+              return;
+            }
+          }
+        }
+
         const buffer = Buffer.from(data, 'base64');
 
         let fileData: Buffer | string = buffer;
@@ -240,8 +262,6 @@ ipcMain.on(
           }
         }
 
-        const formattedPath = join(folderPath, filename);
-
         filePromiseList.push(promiseFs.writeFile(formattedPath, fileData));
       }
     });
@@ -329,7 +349,7 @@ ipcMain.on('collection-switch', async (event, props) => {
     mainWindow?.webContents.send('collection-folder-change_reply', props?.collectionId);
   }, 100);
 
-  watcher.on('add', eventReply).on('unlink', eventReply);
+  watcher.on('add', eventReply).on('change', eventReply).on('unlink', eventReply);
 });
 
 const dragIcon = nativeImage.createFromDataURL(

packages/renderer/src/App.css

@@ -3,6 +3,33 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --scrollPrimary: #7230ff;
+}
+
+/* Chrome, Edge, and Safari */
+.customScroll::-webkit-scrollbar {
+  width: 16px;
+}
+
+.customScroll::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 14px 14px transparent;
+  border: solid 4px transparent;
+}
+
+.customScroll::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 24px 24px var(--scrollPrimary);
+  border: solid 6px transparent;
+
+  border-radius: 14px;
+  height: 80px;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.customScroll::-webkit-scrollbar-button {
+  display: none;
+}
+
 html,
 body,
 #app {

packages/renderer/src/components/modules/IconsHome/IconCardsSection/IconCard/index.tsx

@@ -44,6 +44,7 @@ export const IconCard: FC<React.PropsWithChildren<Props>> = ({
         <IconDisplay
           src={icon.imageSrc}
           color={color}
+          lastUpdatedAt={icon.updatedAt}
           className="mt-4 h-10 w-10 bg-black text-black dark:bg-white dark:text-white"
         />
 

packages/renderer/src/components/modules/IconsHome/IconCardsSection/index.tsx

@@ -45,19 +45,20 @@ export const IconCardsSection: FC<React.PropsWithChildren<Props>> = ({
   return (
     <>
       <div className="relative h-full w-full overflow-hidden" ref={wrapperDivRef}>
-        <HotKeys keyMap={keyMap} handlers={handlers} className="h-full outline-none">
+        <HotKeys keyMap={keyMap} handlers={handlers} className=" h-full outline-none">
           <VirtualizedGrid
             rowHeight={128}
             cellWidth={128}
             gridGap={12}
             itemCount={icons.length}
             gridHeight={'min(min-content, 100%'}
-            className={'virtualized-icons-grid-container px-4 pb-16'}
+            className={'virtualized-icons-grid-container customScroll  px-4 pb-16'}
             debounceDelay={100}
             prerenderScreens={5}
           >
             {(index) => {
               const icon = icons[index];
+
               return (
                 <IconCard
                   key={icon?.id}

packages/renderer/src/components/modules/IconsHome/LeftIconsCollectionsNav/ListItemWrapper/ListItem/OptionsOverlay.tsx

@@ -8,21 +8,33 @@ import { ReactComponent as CursorClickIcon } from '/assets/icons/cursor-click-sm
 import { platformBasedText } from '/@/utils/platformText';
 import { ReactComponent as CollectionIcon } from '/assets/icons/collection-16.svg';
 import { uuidv4 } from '/@/utils/uuid';
+import { SortItem } from './SortItem';
 
-export const OptionsOverlay: FC<React.PropsWithChildren<{
-  collection?: Collection;
-  onDeleteClick?: () => void;
-  editCollection?: (c?: Collection) => void;
-  onCustomizeActionsClick?: (c?: Collection) => void;
-}>> = ({ collection, editCollection, onDeleteClick, onCustomizeActionsClick }) => {
+export const OptionsOverlay: FC<
+  React.PropsWithChildren<{
+    collection?: Collection;
+    onDeleteClick?: () => void;
+    editCollection?: (c?: Collection) => void;
+    onCustomizeActionsClick?: (c?: Collection) => void;
+    onSortClick: () => void;
+    isActive: boolean;
+  }>
+> = ({
+  collection,
+  editCollection,
+  onDeleteClick,
+  onSortClick,
+  onCustomizeActionsClick,
+  isActive,
+}) => {
   const openCollectionFolderInFinder = () => {
     window.electron.ipcRenderer.send('open-collection-folder', collection?.folderSrc);
   };
 
   const createSubCollection = () => {
     if (collection?.id) {
       let folderSrc = collection.folderSrc.replace(/\/$/, '');
-      folderSrc += `${folderSrc}/collection-${uuidv4()}`;
+      folderSrc = `${folderSrc}/collection-${uuidv4()}`;
 
       editCollection?.({
         parentCollectionId: collection?.id,
@@ -53,6 +65,12 @@ export const OptionsOverlay: FC<React.PropsWithChildren<{
         <div>Customize actions</div>
       </Dropdown.Item>
 
+      {isActive && (
+        <Dropdown.Item onClick={onSortClick}>
+          <SortItem />
+        </Dropdown.Item>
+      )}
+
       <Dropdown.Item onClick={createSubCollection}>
         <CollectionIcon className="mr-2" />
         <div>Create sub-collection</div>

packages/renderer/src/components/modules/IconsHome/LeftIconsCollectionsNav/ListItemWrapper/ListItem/SortItem.tsx

@@ -0,0 +1,28 @@
+import { useSearchParams } from 'react-router-dom';
+import { ReactComponent as ArrowDown } from '/assets/icons/arrow-down.svg';
+import { ReactComponent as ArrowsUpDown } from '/assets/icons/arrows-up-down.svg';
+
+export const SortItem = () => {
+  const [searchParams] = useSearchParams();
+  const isSortedDesc = searchParams.get('sortByNameDesc');
+
+  if (isSortedDesc === null)
+    return (
+      <>
+        <ArrowDown className="w-4 h-4 mr-2 rotate-180" />
+        <span>Sort by name ascending</span>
+      </>
+    );
+
+  return isSortedDesc === 'true' ? (
+    <>
+      <ArrowsUpDown className="w-4 h-4 mr-2" />
+      <span>Reset sorting</span>
+    </>
+  ) : (
+    <>
+      <ArrowDown className="w-4 h-4 mr-2" />
+      <span>Sort by name descending</span>
+    </>
+  );
+};

packages/renderer/src/components/modules/IconsHome/LeftIconsCollectionsNav/ListItemWrapper/ListItem/index.tsx

@@ -24,6 +24,7 @@ interface Props {
   onShowChildCollectionsToggle?: (v: boolean) => void;
   editCollection?: (v?: Collection) => void;
   onCustomizeActionsClick?: (v?: Collection) => void;
+  onSortClick: () => void;
 }
 
 export const ListItem: FC<React.PropsWithChildren<Props>> = ({
@@ -38,6 +39,7 @@ export const ListItem: FC<React.PropsWithChildren<Props>> = ({
   onShowChildCollectionsToggle,
   editCollection,
   onCustomizeActionsClick,
+  onSortClick,
 }) => {
   const queryClent = useQueryClient();
   const navigate = useNavigate();
@@ -100,6 +102,8 @@ export const ListItem: FC<React.PropsWithChildren<Props>> = ({
                   editCollection={editCollection}
                   onCustomizeActionsClick={onCustomizeActionsClick}
                   onDeleteClick={() => setShowDeleteConfirm(true)}
+                  onSortClick={onSortClick}
+                  isActive={isActive}
                 />
               }
               onMenuButtonClick={(opened) => setDropdownIsVisible(opened)}

packages/renderer/src/components/modules/IconsHome/LeftIconsCollectionsNav/ListItemWrapper/index.tsx

@@ -11,6 +11,7 @@ interface Props {
   marginLeft?: number;
   editCollection?: (v?: Collection) => void;
   onCustomizeActionsClick?: (v?: Collection) => void;
+  onSortClick: () => void;
 }
 export const ListItemWrapper: FC<React.PropsWithChildren<Props>> = ({
   collection,
@@ -19,6 +20,7 @@ export const ListItemWrapper: FC<React.PropsWithChildren<Props>> = ({
   marginLeft = 0,
   editCollection,
   onCustomizeActionsClick,
+  onSortClick,
 }) => {
   const [showChildCollections, setShowChildCollections] = useState(
     !!collection?.childCollectionIds?.length
@@ -40,6 +42,7 @@ export const ListItemWrapper: FC<React.PropsWithChildren<Props>> = ({
         onCustomizeActionsClick={onCustomizeActionsClick}
         showChildCollections={showChildCollections}
         onShowChildCollectionsToggle={onShowChildCollectionsToggle}
+        onSortClick={onSortClick}
       />
 
       {showChildCollections &&
@@ -56,6 +59,7 @@ export const ListItemWrapper: FC<React.PropsWithChildren<Props>> = ({
                 selectedCollectionId={selectedCollectionId}
                 editCollection={editCollection}
                 onCustomizeActionsClick={onCustomizeActionsClick}
+                onSortClick={onSortClick}
               />
             )
           );