Update filters

src/components/ConferenceCard.tsx

@@ -31,17 +31,40 @@ const ConferenceCard = ({
   };
 
   const handleCardClick = (e: React.MouseEvent) => {
-    // Only open dialog if the click wasn't on a link or interactive element
-    if (!(e.target as HTMLElement).closest('a')) {
+    if (!(e.target as HTMLElement).closest('a') && 
+        !(e.target as HTMLElement).closest('.tag-button')) {
       setDialogOpen(true);
     }
   };
 
+  const handleTagClick = (e: React.MouseEvent, tag: string) => {
+    e.stopPropagation();
+    const searchParams = new URLSearchParams(window.location.search);
+    const currentTags = searchParams.get('tags')?.split(',') || [];
+    
+    let newTags;
+    if (currentTags.includes(tag)) {
+      newTags = currentTags.filter(t => t !== tag);
+    } else {
+      newTags = [...currentTags, tag];
+    }
+    
+    if (newTags.length > 0) {
+      searchParams.set('tags', newTags.join(','));
+    } else {
+      searchParams.delete('tags');
+    }
+    
+    const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+    window.history.pushState({}, '', newUrl);
+    window.dispatchEvent(new CustomEvent('urlchange', { detail: { tag } }));
+  };
+
   return (
     <>
       <div 
-        onClick={handleCardClick}
         className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-4 flex flex-col cursor-pointer"
+        onClick={handleCardClick}
       >
         <div className="flex justify-between items-start mb-2">
           <h3 className="text-lg font-semibold text-primary">{title}</h3>
@@ -82,12 +105,16 @@ const ConferenceCard = ({
         </div>
 
         {Array.isArray(tags) && tags.length > 0 && (
-          <div className="flex flex-wrap gap-1 mt-auto">
+          <div className="flex flex-wrap gap-2">
             {tags.map((tag) => (
-              <span key={tag} className="tag text-xs py-0.5">
+              <button
+                key={tag}
+                className="tag tag-button"
+                onClick={(e) => handleTagClick(e, tag)}
+              >
                 <Tag className="h-3 w-3 mr-1" />
                 {tag}
-              </span>
+              </button>
             ))}
           </div>
         )}

src/pages/Index.tsx

@@ -41,6 +41,46 @@ const Index = () => {
       });
   }, [selectedTags, searchQuery, showPastConferences]);
 
+  // Update handleTagsChange to handle multiple tags
+  const handleTagsChange = (newTags: Set<string>) => {
+    setSelectedTags(newTags);
+    const searchParams = new URLSearchParams(window.location.search);
+    if (newTags.size > 0) {
+      searchParams.set('tags', Array.from(newTags).join(','));
+    } else {
+      searchParams.delete('tags');
+    }
+    const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+    window.history.pushState({}, '', newUrl);
+  };
+
+  useEffect(() => {
+    const handleUrlChange = (event: CustomEvent) => {
+      const { tag } = event.detail;
+      // Create new Set with existing tags plus the new one
+      const newTags = new Set(selectedTags);
+      if (newTags.has(tag)) {
+        newTags.delete(tag);
+      } else {
+        newTags.add(tag);
+      }
+      handleTagsChange(newTags);
+    };
+
+    window.addEventListener('urlchange', handleUrlChange as EventListener);
+    
+    // Check URL params on mount
+    const params = new URLSearchParams(window.location.search);
+    const tagsParam = params.get('tags');
+    if (tagsParam) {
+      setSelectedTags(new Set(tagsParam.split(',')));
+    }
+
+    return () => {
+      window.removeEventListener('urlchange', handleUrlChange as EventListener);
+    };
+  }, [selectedTags]); // Add selectedTags as dependency
+
   if (!Array.isArray(conferencesData)) {
     return <div>Loading conferences...</div>;
   }
@@ -52,7 +92,7 @@ const Index = () => {
         <div className="space-y-4 py-4">
           <FilterBar 
             selectedTags={selectedTags}
-            onTagSelect={setSelectedTags}
+            onTagSelect={handleTagsChange}
           />
           <div className="flex items-center gap-2">
             <label htmlFor="show-past" className="text-sm text-neutral-600">

src/styles/globals.css

@@ -1,4 +1,3 @@
-
 /* Add these styles to make the filter tags more interactive */
 .filter-tag {
   @apply transition-all duration-200;
@@ -18,3 +17,21 @@
 .filter-tag-active {
   animation: subtle-pulse 2s infinite;
 }
+
+.tag-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: #666;
+  background-color: #f5f5f5;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+}
+
+.tag-button:hover {
+  background-color: #e5e5e5;
+}