Skip to content

HANDOVER.md

Latest commit

 

History

History
157 lines (140 loc) · 4.67 KB

HANDOVER.md

File metadata and controls

157 lines (140 loc) · 4.67 KB

X Query Search - Handover Note

Project Summary

Chrome extension for advanced X.com search with templates, query builder, and favorites.

Current State

Working Files Created

/Users/jarodise/Documents/GitHub/XQuery/
├── package.json              ✅ Dependencies configured
├── tsconfig.json             ✅ TypeScript config
├── tsconfig.node.json        ✅ Node TypeScript config
├── vite.config.ts            ✅ Vite + CRXJS plugin
├── tailwind.config.js        ✅ Tailwind with X theme colors
├── postcss.config.js         ✅ PostCSS config
├── IMPLEMENTATION_PLAN.md    ✅ Detailed plan
│
├── src/
│   ├── manifest.ts           ✅ Chrome MV3 manifest
│   ├── types/index.ts        ✅ All TypeScript types
│   ├── stores/useStore.ts    ✅ Zustand store with favorites
│   ├── data/templates.ts     ✅ All region templates (zh/ja/es/en/global)
│   │
│   ├── utils/
│   │   ├── queryBuilder.ts       ✅ Query string builder
│   │   ├── queryBuilder.test.ts  ✅ Tests for query builder
│   │   ├── xSearch.ts            ✅ X.com URL builder
│   │   └── xSearch.test.ts       ✅ Tests for xSearch
│   │
│   ├── background/index.ts   ✅ Service worker
│   │
│   ├── content/
│   │   ├── index.tsx         ✅ Content script entry
│   │   └── Sidebar.tsx       ✅ Main sidebar component
│   │
│   ├── components/
│   │   ├── Header.tsx        ✅ Header with close button
│   │   ├── TabNav.tsx        ✅ Tab navigation
│   │   ├── TemplateList.tsx  ✅ Template list with region selector
│   │   └── TemplateCard.tsx  ✅ Individual template card
│   │
│   ├── styles/sidebar.css    ✅ CSS styles
│   └── test/setup.ts         ✅ Vitest setup
│
└── public/icons/             ❌ MISSING - need icon files

Missing Components (Must Create)

  1. src/components/QueryBuilder.tsx - Custom query form
  2. src/components/QueryPreview.tsx - Live query preview
  3. src/components/FavoritesList.tsx - Saved queries UI
  4. public/icons/icon16.png, icon48.png, icon128.png - Extension icons

Next Steps

Step 1: Create QueryBuilder.tsx

// Location: src/components/QueryBuilder.tsx
// Features needed:
// - Keywords input (multiple keywords as tags)
// - Language dropdown (zh-cn/ja/es/en/all)
// - Time range dropdown (1h/4h/12h/24h/7d/all)
// - Min likes selector (100/500/1000/5000/10000)
// - Collapsible advanced section:
//   - Media type checkboxes (images/videos)
//   - Exclude checkboxes (retweets/replies/links)
// - Live query preview
// - Search & Save buttons

Step 2: Create QueryPreview.tsx

// Location: src/components/QueryPreview.tsx
// Display generated query with copy button

Step 3: Create FavoritesList.tsx

// Location: src/components/FavoritesList.tsx
// Features:
// - Empty state
// - List of favorites with name, query, date
// - Edit/Delete actions
// - Click to search

Step 4: Create Icons

Create 3 PNG files in public/icons/:

  • icon16.png (16x16)
  • icon48.png (48x48)
  • icon128.png (128x128)

Simple X logo with search icon overlay.

Step 5: Run & Test

cd /Users/jarodise/Documents/GitHub/XQuery
pnpm install
pnpm dev
# Load dist/ folder in Chrome as unpacked extension
# Test on x.com

UI Theme (Use These Colors)

--background: #000000;
--elevated: #16181c;
--surface: #202327;
--border: #2f3336;
--text: #e7e9ea;
--secondary: #71767b;
--accent: #1d9bf0; /* X Blue */
--font: 'JetBrains Mono', sans-serif;

Key Imports Reference

// In components, use these imports:
import { useStore } from '@/stores/useStore'
import { buildQueryString } from '@/utils/queryBuilder'
import { executeSearch } from '@/utils/xSearch'
import type { QueryParams, Language, TimeRange, MediaType, ExcludeType } from '@/types'

Zustand Store API

const {
  queryParams,           // Current query params
  setQueryParams,        // Update params (partial)
  resetQueryParams,      // Reset to defaults
  favorites,             // Array of FavoriteQuery
  addFavorite,           // (name, query) => void
  removeFavorite,        // (id) => void
  updateFavorite,        // (id, name, query) => void
  loadFavorites,         // () => Promise<void>
} = useStore()

Default Query Params

{
  keywords: [],
  language: 'all',
  timeRange: 'all',
  minFaves: 0,
  mediaType: [],
  exclude: [],
}

File: IMPLEMENTATION_PLAN.md

Already exists in project root with full details.

Created: 2025-02-07 Status: 75% complete, 3 components + icons remaining