feat(545): Add close Collection Button and closing Logic (#570)

* 545-Add close collection button and closing logic
Adding the closing button with the given close icon.
Use same functionallity as not found collections to close a collection
To ensure proper updates the collections state is filtered.

With these changes, collections can be removed from the collections dropdown menu without deleting them from the system.

* 545- Adapt button style to fit the overall style
Changing the text style, adding a hover functionality.
Fixing the centering of text by changing the span to p.

* 545-Fixing alignment to the right side of the dropdown menu
The close button is now aligned to the right side of the dropdown menu to fit the overall style.

* 545-Removing closing button for first collection
The closing button is removed for the first collection as this collection is required for proper execution.

Author: Gondvalon

src/renderer/components/sidebar/CollectionDropdown.tsx

@@ -15,6 +15,8 @@ import { RendererEventService } from '@/services/event/renderer-event-service';
 import { useCallback, useEffect, useState } from 'react';
 import { CollectionBase } from 'shim/objects/collection';
 import { FolderOpen, FolderPlus, Upload } from 'lucide-react';
+import { CloseIcon } from '@/components/icons';
+import { cn } from '@/lib/utils';
 
 const eventService = RendererEventService.instance;
 
@@ -71,7 +73,22 @@ export default function CollectionDropdown() {
     () =>
       collections.map(({ title, dirPath }, i) => (
         <DropdownMenuRadioItem key={i} value={dirPath}>
-          {title}
+          <p className="flex-1 pr-2">{title}</p>
+          {i !== 0 && (
+            <button
+              onClick={async (e) => {
+                e.stopPropagation();
+                await eventService.closeCollection(dirPath);
+                setCollections((prev) => prev.filter((c) => c.dirPath !== dirPath));
+              }}
+              className={cn(
+                'text-popover-foreground flex h-6 w-6 items-center justify-center rounded-md opacity-0',
+                'hover:text-popover-foreground hover:bg-popover hover:opacity-100'
+              )}
+            >
+              <CloseIcon size={24} />
+            </button>
+          )}
         </DropdownMenuRadioItem>
       )),
     [collections]