Tag context ux

src/app/(user)/components/workspace/components/context/components/tag-filter-select.tsx

@@ -31,11 +31,15 @@ export function FilterSelect({ defaultValue }: { defaultValue?: FilterOption })
         router.push(`${pathname}?${newSerchParams}`);
     }
 
-    return <Select itemGroups={itemGroups}
-        defaultValue={defaultValue}
-        disabled={false}
-        label="Filter type"
-        placeholder="Filter type"
-        onValueChange={(value) => handleSelectOption(value as FilterOption)}
-    />;
+    return (
+        <div>
+            <Select itemGroups={itemGroups}
+                defaultValue={defaultValue}
+                disabled={false}
+                label="Filter type"
+                placeholder="Filter type"
+                onValueChange={(value) => handleSelectOption(value as FilterOption)}
+            />
+        </div>
+    );
 }

src/app/(user)/components/workspace/components/context/components/tags-selector.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import Button from '@/app/components/ui/button/button';
+import { useCloseUiComponent } from '@/app/components/ui/hooks/useCloseUiComponent';
+import Popover from '@/app/components/ui/popover/popover';
+
+export default function TagsSelector({ options }: { options: { value: string, label: string }[]}) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const [tags, setTags] = useState<string[]>([]);
+    const [isClosed, close] = useCloseUiComponent();
+
+    function handleSelectOption(tag: string) {
+        setTags([...tags, tag]);
+    }
+
+    function applyTags() {
+        const newSerchParams = new URLSearchParams(searchParams.toString());
+        const currentTags = newSerchParams.get('selectedTagsFilter')?.split(',') || [];
+        newSerchParams.set('selectedTagsFilter', [...currentTags, ...tags].join(','));
+        router.push(`${pathname}?${newSerchParams}`);
+        close();
+        setTags([]);
+    }
+
+    return (
+        <div className="p-2">
+            <Popover close={isClosed} openComponent={<Button size="md" label="See notes for tag"></Button>}>
+                <div className="flex w-64 flex-wrap gap-2 p-2">
+                    {options.length > 0 ? options.map(({ value, label }) => (
+                        <div onClick={() => handleSelectOption(value)}
+                            key={value}
+                            className={`cursor-pointer rounded border border-neutral-500 p-1 hover:bg-neutral-500 ${tags.includes(value) ? 'bg-neutral-500' : ''}`}
+                        >
+                            {label}
+                        </div>
+                    )) : <div>No tags left to apply</div>}
+                </div>
+                <div className="flex justify-end">
+                    <Button size="s" label="Apply" onClick={applyTags}></Button>
+                </div>
+            </Popover>
+        </div>
+    );
+}

src/app/(user)/components/workspace/components/context/context.tsx

@@ -6,6 +6,7 @@ import { FilterOption } from '@/lib/notes/get-notes-by-tags';
 
 import NoteComponent from './components/note';
 import { FilterSelect } from './components/tag-filter-select';
+import TagsSelector from './components/tags-selector';
 
 function buildQueryWithTag(tag: string, selectedTagsFilter?: string[]) {
     return selectedTagsFilter?.length ? { selectedTagsFilter: [...selectedTagsFilter, tag].join(',') } : { selectedTagsFilter: tag };
@@ -47,6 +48,14 @@ export default function Context({ tags, notes, selectedTagsFilter, selectedOpera
     }
 
     const dynamicTags = tags.reduce((tagsSofar, tag) => {
+        if (!fixedTagValues.includes(tag) && !isSelected(tag)) {
+            return [...tagsSofar, { value: tag, label: tag }];
+        }
+
+        return tagsSofar;
+    }, [] as { value: string, label: string }[]);
+
+    const selectedDynamicTags = selectedTagsFilter?.reduce((tagsSofar, tag) => {
         if (!fixedTagValues.includes(tag)) {
             return [...tagsSofar, { value: tag, label: tag }];
         }
@@ -56,12 +65,24 @@ export default function Context({ tags, notes, selectedTagsFilter, selectedOpera
 
     return (
         <div className="overflow-scroll">
-            <div className="my-5 flex flex-wrap gap-4">
+            <div className="flex items-center">
                 <FilterSelect defaultValue={selectedOperator}></FilterSelect>
+                <TagsSelector options={dynamicTags}></TagsSelector>
+            </div>
+            <div className="my-5 flex flex-wrap gap-4">
                 {fixedTags.map(renderTag)}
-                {dynamicTags.map(renderTag)}
+                {selectedDynamicTags?.map(renderTag)}
             </div>
 
+            {
+                notes.length === 0 ? (
+                    <div className="text-center text-neutral-500">
+                        <div className="font-bold">No notes found.</div>
+                        {selectedOperator === FilterOption.Intersection ? <div> Try removing some tags or using the Union operator </div> : null}
+                    </div>
+                ) : null
+            }
+
             {notes.map(({ text, id }) => (
                 <div key={id} className="my-1">
                     <NoteComponent text={text} id={id}></NoteComponent>

src/app/components/ui/popover/popover.tsx

@@ -40,7 +40,7 @@ export default function Popover({
                 {isPopoverOpen ?
                     <RadixPopover.Portal key="popover" forceMount>
                         <RadixPopover.Content align={align}>
-                            <motion.div className="w-52 rounded bg-neutral-700 p-2 text-sm shadow-sm"
+                            <motion.div className="rounded bg-neutral-700 p-2 text-sm shadow-sm"
                                 initial={{ opacity: 0 }}
                                 animate={{ opacity: 1 }}
                                 exit={{ opacity: 0 }}