Summary

Enhanced the TagColumn component in the toolkit with mobile-friendly search functionality, URL parameter support for pre-selected tags, and a share button for creating shareable filtered views.

Why Care

These improvements significantly enhance the user experience by making the toolkit filtering system accessible on mobile devices, enabling shareable filtered views via URLs, and providing a more intuitive interface for collaborative tool discovery. The changes maintain SSG compatibility while adding modern interactive features.

Implementation

Changes Made

Primary File Modified

site/src/components/tool-components/TagColumn.astro - Complete overhaul of component functionality

Key Features Added

Mobile Search Functionality
- Enhanced Choices.js configuration for mobile devices
- Added touch event handling for proper search input focus
- Implemented mobile-specific CSS optimizations
- Added virtual keyboard support and iOS compatibility
URL Parameter Support
- Added handleUrlParameters() function for reading tags parameter
- Implemented automatic tag selection from URL query string
- Support for comma-separated tag values (e.g., ?tags=AI-Toolkit,Web-Frameworks)
- SSG-compatible client-side implementation
Share Button Implementation
- Added share button next to "Filter by Tag" heading
- Implemented clipboard API with fallback support
- Added visual feedback for copy success/failure states
- Created shareable URLs with current tag selection
Sort Functionality Fix
- Fixed duplicate tag selection bug in sort buttons
- Implemented proper refreshChoices() function
- Added selection preservation across sort operations

Technical Implementation Details

Mobile Enhancements

javascript

// Mobile detection and specific enhancements
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
  // Touch event handling for search input focus
  choices.passedElement.element.addEventListener('touchstart', (e) => {
    e.preventDefault();
    setTimeout(() => {
      const searchInput = choices.input.element;
      if (searchInput) {
        searchInput.focus();
        searchInput.click();
      }
    }, 50);
  }, { passive: false });
}

URL Parameter Handling

javascript

function handleUrlParameters() {
  const urlParams = new URLSearchParams(window.location.search);
  const tagsParam = urlParams.get('tags');
  
  if (tagsParam) {
    const selectedTags = tagsParam.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
    selectedTags.forEach(tag => {
      choices.setChoiceByValue(tag);
    });
    filterCards();
  }
}

javascript

shareBtn.addEventListener('click', async () => {
  const selectedTags = getSelectedTags();
  const currentUrl = new URL(window.location.href);
  currentUrl.searchParams.set('tags', selectedTags.join(','));
  const shareableUrl = currentUrl.toString();
  
  try {
    await navigator.clipboard.writeText(shareableUrl);
    // Visual feedback implementation
  } catch (err) {
    // Fallback to document.execCommand for older browsers
  }
});

Technical Details

Mobile Optimization Strategy

Touch Targets: Increased minimum heights to 44px for mobile-friendly interaction
Font Size: Set to 16px to prevent iOS zoom on input focus
Input Attributes: Added inputmode="search" and disabled autocorrect/autocapitalize
Focus Management: Multiple strategies to ensure search input gets proper focus
Virtual Keyboard: Proper triggering of mobile virtual keyboard

URL Parameter Implementation

Client-Side Only: Works entirely in browser after page load
SSG Compatible: No server-side processing required
Parameter Parsing: Robust handling of comma-separated values with whitespace trimming
State Management: Proper integration with existing Choices.js state

Modern API: Primary use of navigator.clipboard.writeText()
Fallback Support: document.execCommand('copy') for older browsers
User Feedback: Visual indicators for success/failure states
URL Construction: Preserves current page URL while adding tag parameters

CSS Enhancements

css

/* Mobile-specific improvements */
@media (max-width: 768px) {
  .choices__inner {
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  .choices__input {
    font-size: 16px !important;
    -webkit-appearance: none !important;
    border-radius: 0 !important;
  }
}

/* Share button styling */
.share-btn {
  background: transparent;
  border: 1px solid var(--clr-lossless-primary-glass);
  color: white;
  padding: 0.4rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn.copied {
  background-color: var(--clr-lossless-highlight);
  border-color: var(--clr-lossless-highlight);
  color: black;
}

Integration Points

Choices.js Integration

Enhanced configuration with mobile-friendly settings
Proper event handling for dropdown states
Integration with existing sort functionality
State management for selected items

Toolkit Layout Integration

Component works within existing ToolkitLayout.astro structure
Maintains compatibility with CardGrid.astro filtering
Preserves existing CSS variables and design system

Browser Compatibility

Modern browsers: Uses Clipboard API
Older browsers: Falls back to document.execCommand()
Mobile browsers: Enhanced touch and focus handling
iOS Safari: Specific optimizations for virtual keyboard

Documentation

Usage Examples

URL Parameter Usage

text

http://localhost:4321/toolkit?tags=AI-Toolkit
http://localhost:4321/toolkit?tags=AI-Toolkit,Web-Frameworks
http://localhost:4321/toolkit?tags=Software-Development,Frameworks,UI-Libraries

Select desired tags in the filter dropdown
Click the share button (download icon)
URL is automatically copied to clipboard
Share the URL with others for the same filtered view

site/src/layouts/ToolkitLayout.astro - Parent layout component
site/src/basics/CardGrid.astro - Tool card grid with filtering
site/src/components/tool-components/ToolCard.astro - Individual tool cards

Performance Considerations

Lazy Loading: URL parameter handling occurs after DOM content loaded
Event Delegation: Efficient event handling for dynamic content
Memory Management: Proper cleanup of event listeners and observers
Mobile Performance: Optimized touch handling and focus management

Accessibility Features

Keyboard Navigation: Full keyboard support for all interactive elements
Screen Reader Support: Proper ARIA labels and semantic HTML
Focus Management: Clear focus indicators and logical tab order
Mobile Accessibility: Touch-friendly targets and gesture support