From 270c02d960440edbb5c86d015a630f82801f388e Mon Sep 17 00:00:00 2001
From: Shannon Anahata <shannonanahata@gmail.com>
Date: Fri, 21 Aug 2026 11:07:18 -0700
Subject: [PATCH 1/2] feat(projects): show ready video availability

---
 src/app/components/ProjectCard.tsx  |  9 ++++
 src/app/queries/projects.ts         |  4 +-
 src/app/routes/ProjectsPage.tsx     | 17 +++++++-
 src/app/styles.css                  | 17 ++++++++
 src/shared/projects.ts              |  1 +
 src/worker/repositories/projects.ts | 15 ++++++-
 src/worker/routes/projects.ts       |  5 +++
 test/app/ProjectForm.test.tsx       |  1 +
 test/app/routes.test.tsx            | 59 +++++++++++++++++++++++++
 test/projects/projects.test.ts      | 67 +++++++++++++++++++++++++++++
 10 files changed, 192 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ProjectCard.tsx b/src/app/components/ProjectCard.tsx
index 3c1edb2..d8ea656 100644
--- a/src/app/components/ProjectCard.tsx
+++ b/src/app/components/ProjectCard.tsx
@@ -28,6 +28,7 @@ export function ProjectCard({
         groupName={project.group?.name ?? 'ungrouped'}
         members={project.members}
         needsHelp={project.needsHelp}
+        hasVideo={project.hasVideo}
         voteCategories={voteCategories}
       />
     );
@@ -58,6 +59,7 @@ export function ProjectListItem({
   detail,
   members,
   needsHelp = false,
+  hasVideo = false,
   emptyMemberLabel = 'up for grabs',
   voteCategories = [],
 }: {
@@ -70,6 +72,7 @@ export function ProjectListItem({
   detail?: string;
   members: ProjectListMember[];
   needsHelp?: boolean;
+  hasVideo?: boolean;
   emptyMemberLabel?: string;
   voteCategories?: string[];
 }) {
@@ -92,6 +95,7 @@ export function ProjectListItem({
       <div className="projectRowTags">
         <span className="tag tag--group">{groupName}</span>
         {detail && <span className="tag">{detail}</span>}
+        <ProjectVideoTag hasVideo={hasVideo} />
         <ProjectVoteBadge categories={voteCategories} />
         {needsHelp && <strong className="tag tag--help">looking for help</strong>}
       </div>
@@ -120,11 +124,16 @@ function ProjectTags({project, className}: {project: ProjectSummary; className:
       <span className="tag tag--group">
         {project.kind === 'idea' ? 'open idea' : (project.group?.name ?? 'ungrouped')}
       </span>
+      <ProjectVideoTag hasVideo={project.hasVideo} />
       {project.needsHelp && <strong className="tag tag--help">looking for help</strong>}
     </div>
   );
 }
 
+function ProjectVideoTag({hasVideo}: {hasVideo: boolean}) {
+  return hasVideo ? <strong className="tag tag--video">has video</strong> : null;
+}
+
 function MemberStack({
   members,
   emptyLabel = 'up for grabs',
diff --git a/src/app/queries/projects.ts b/src/app/queries/projects.ts
index 10f4261..edd54b4 100644
--- a/src/app/queries/projects.ts
+++ b/src/app/queries/projects.ts
@@ -39,6 +39,7 @@ export function useProjects(
   kind?: 'project' | 'idea',
   group?: string,
   search?: string,
+  hasVideo?: boolean,
   cursor?: string,
 ) {
   const query = new URLSearchParams({
@@ -48,9 +49,10 @@ export function useProjects(
   if (kind) query.set('kind', kind);
   if (group) query.set('group', group);
   if (search) query.set('q', search);
+  if (hasVideo) query.set('hasVideo', 'true');
   if (cursor) query.set('cursor', cursor);
   return useQuery({
-    queryKey: ['projects', yearId, kind, group, search, cursor ?? null],
+    queryKey: ['projects', yearId, kind, group, search, hasVideo, cursor ?? null],
     queryFn: () => apiRequest<ProjectsResponse>(`/projects?${query}`),
     placeholderData: keepPreviousData,
   });
diff --git a/src/app/routes/ProjectsPage.tsx b/src/app/routes/ProjectsPage.tsx
index 62d9067..4f23acd 100644
--- a/src/app/routes/ProjectsPage.tsx
+++ b/src/app/routes/ProjectsPage.tsx
@@ -36,6 +36,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
   const {yearId} = useParams<{yearId: string}>();
   const [kind, setKind] = useState<'project' | 'idea'>('project');
   const [group, setGroup] = useState('');
+  const [hasVideoOnly, setHasVideoOnly] = useState(false);
   const [searchInput, setSearchInput] = useState('');
   const [search, setSearch] = useState('');
   const [cursor, setCursor] = useState<string | undefined>();
@@ -50,6 +51,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
     kind,
     kind === 'project' ? group || undefined : undefined,
     search || undefined,
+    kind === 'project' && hasVideoOnly ? true : undefined,
     cursor,
   );
   const error = year.error ?? projects.error;
@@ -226,6 +228,19 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                   </select>
                 </label>
               )}
+              {kind === 'project' && (
+                <label className="projectVideoFilter">
+                  <input
+                    type="checkbox"
+                    checked={hasVideoOnly}
+                    onChange={(event) => {
+                      setHasVideoOnly(event.target.checked);
+                      resetPagination();
+                    }}
+                  />
+                  <span>Has video</span>
+                </label>
+              )}
               <div className="projectViewToggle" role="group" aria-label="Project view">
                 {(['grid', 'list'] as const).map((option) => (
                   <button
@@ -272,7 +287,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
               <span>∅</span>
               <h2>No {kind === 'idea' ? 'ideas' : 'projects'} found</h2>
               <p>
-                {search
+                {search || (kind === 'project' && hasVideoOnly)
                   ? 'try another search or adjust the filters.'
                   : `try another group or add the first ${kind} for this Hackweek.`}
               </p>
diff --git a/src/app/styles.css b/src/app/styles.css
index 9c6b2fa..8ba89a0 100644
--- a/src/app/styles.css
+++ b/src/app/styles.css
@@ -889,6 +889,18 @@ main {
   background: #fff;
   box-shadow: 0 1px 2px rgba(29, 17, 39, 0.12);
 }
+.projectVideoFilter {
+  min-height: 2.5rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid #c9c3d1;
+  border-radius: 0.5rem;
+  background: #fff;
+  cursor: pointer;
+}
+.projectVideoFilter input {
+  margin: 0;
+  accent-color: var(--blurple);
+}
 .projectControls label,
 .operationsBar label {
   display: flex;
@@ -1037,6 +1049,11 @@ main {
   border-radius: 999px;
   background: #e9d8fd;
 }
+.tag--video {
+  color: #305500;
+  border-color: #b8db78;
+  background: #f0ffd7;
+}
 .tag--help,
 .detailTags span + span {
   color: #6f1648;
diff --git a/src/shared/projects.ts b/src/shared/projects.ts
index bb4e36c..6d89a52 100644
--- a/src/shared/projects.ts
+++ b/src/shared/projects.ts
@@ -47,6 +47,7 @@ export interface ProjectSummary {
   group: GroupSummary | null;
   members: ProjectMember[];
   mediaCount: number;
+  hasVideo: boolean;
 }
 
 export interface ProjectDetail extends ProjectSummary {
diff --git a/src/worker/repositories/projects.ts b/src/worker/repositories/projects.ts
index 5920c05..f9cb25b 100644
--- a/src/worker/repositories/projects.ts
+++ b/src/worker/repositories/projects.ts
@@ -41,6 +41,7 @@ interface ProjectRow {
   creator_avatar: string | null;
   creator_admin: number;
   media_count: number;
+  has_video: number;
 }
 
 interface MemberRow {
@@ -171,6 +172,7 @@ export async function listProjects(
     kind?: 'project' | 'idea';
     groupId?: string;
     search?: string;
+    hasVideo?: boolean;
     limit: number;
     offset: number;
   },
@@ -186,6 +188,9 @@ export async function listProjects(
     conditions.push('p.group_id = ?');
     bindings.push(options.groupId);
   }
+  if (options.hasVideo) {
+    conditions.push(readyVideoExistsSql);
+  }
   let relevanceOrder = '';
   if (options.search) {
     const escapedSearch = escapeLikePattern(options.search);
@@ -627,11 +632,18 @@ function projectSelect() {
     g.id group_id, g.name group_name,
     u.email creator_email, u.display_name creator_name,
     u.avatar_url creator_avatar, u.is_admin creator_admin,
-    (SELECT COUNT(*) FROM media m WHERE m.project_id = p.id AND m.status = 'available') media_count
+    (SELECT COUNT(*) FROM media m WHERE m.project_id = p.id AND m.status = 'available') media_count,
+    ${readyVideoExistsSql} has_video
    FROM projects p JOIN users u ON u.id = p.creator_id
    LEFT JOIN groups g ON g.id = p.group_id`;
 }
 
+const readyVideoExistsSql = `EXISTS (
+  SELECT 1 FROM video_submissions video
+  WHERE video.project_id = p.id AND video.status = 'ready'
+    AND video.retired_at IS NULL AND video.processed_r2_key IS NOT NULL
+)`;
+
 function mapProject(row: ProjectRow, members: ProjectMember[]): ProjectSummary {
   return {
     id: row.id,
@@ -658,6 +670,7 @@ function mapProject(row: ProjectRow, members: ProjectMember[]): ProjectSummary {
         : null,
     members,
     mediaCount: row.media_count,
+    hasVideo: Boolean(row.has_video),
   };
 }
 
diff --git a/src/worker/routes/projects.ts b/src/worker/routes/projects.ts
index 802f1b0..ba8fbde 100644
--- a/src/worker/routes/projects.ts
+++ b/src/worker/routes/projects.ts
@@ -33,11 +33,16 @@ projectsRoutes.get('/', async (c) => {
     const limit = boundedInteger(c.req.query('limit'), 24, 1, 250, 'Limit');
     const offset = boundedInteger(c.req.query('cursor'), 0, 0, 100_000, 'Cursor');
     const search = boundedSearch(c.req.query('q'));
+    const hasVideoQuery = c.req.query('hasVideo');
+    if (hasVideoQuery !== undefined && hasVideoQuery !== 'true') {
+      throw new ServiceError('VALIDATION_FAILED', 'Has video query is invalid', 400);
+    }
     const response: ProjectsResponse = await listProjects(c.env.DB, {
       yearId,
       kind,
       groupId: c.req.query('group'),
       search,
+      hasVideo: hasVideoQuery === 'true',
       limit,
       offset,
     });
diff --git a/test/app/ProjectForm.test.tsx b/test/app/ProjectForm.test.tsx
index d69a84b..93b1ee4 100644
--- a/test/app/ProjectForm.test.tsx
+++ b/test/app/ProjectForm.test.tsx
@@ -447,6 +447,7 @@ const projectFixture: ProjectDetail = {
   group: {id: 'group', yearId: '2026', name: 'Orbital', projectCount: 1},
   members: [alice],
   mediaCount: 0,
+  hasVideo: false,
   media: [],
   nominationCategoryIds: [],
   permissions: {
diff --git a/test/app/routes.test.tsx b/test/app/routes.test.tsx
index 0b781ae..8235306 100644
--- a/test/app/routes.test.tsx
+++ b/test/app/routes.test.tsx
@@ -471,6 +471,64 @@ describe('clickable project routes', () => {
     expect(listBadge.closest('.projectRow')).toBeTruthy();
   });
 
+  it('marks playable videos in both views and filters projects by video', async () => {
+    const readyProject = {...projectFixture, hasVideo: true};
+    const projectWithoutVideo = {
+      ...projectFixture,
+      id: 'project-without-video',
+      name: 'Still recording',
+      hasVideo: false,
+    };
+    fetchMock.mockImplementation(async (input) => {
+      const url = input instanceof Request ? input.url : input.toString();
+      if (url.includes('/api/years/2026')) {
+        return json({
+          year: {
+            id: '2026',
+            votingEnabled: false,
+            submissionsClosed: false,
+            projectCount: 2,
+            ideaCount: 0,
+            groupCount: 1,
+            participantCount: 1,
+          },
+          groups: [{id: 'group', yearId: '2026', name: 'Orbital', projectCount: 2}],
+          awards: [],
+        });
+      }
+      const hasVideo = new URL(url, 'https://hackweek.test').searchParams.get('hasVideo');
+      return json({
+        projects:
+          hasVideo === 'true' ? [readyProject] : [readyProject, projectWithoutVideo],
+        nextCursor: null,
+      });
+    });
+
+    renderRoute(<ProjectsPage />, '/years/2026/projects', '/years/:yearId/projects');
+
+    const gridTag = await screen.findByText('has video');
+    expect(gridTag.closest('.projectCard')).toBeTruthy();
+    expect(screen.getByRole('heading', {name: 'Still recording'})).toBeTruthy();
+    expect(screen.getAllByText('has video')).toHaveLength(1);
+
+    await userEvent.click(screen.getByRole('button', {name: 'list view'}));
+    const listTag = screen.getByText('has video');
+    expect(listTag.closest('.projectRow')).toBeTruthy();
+
+    await userEvent.click(screen.getByRole('checkbox', {name: 'Has video'}));
+
+    await waitFor(() =>
+      expect(fetchMock).toHaveBeenCalledWith(
+        expect.stringContaining('hasVideo=true'),
+        undefined,
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.queryByRole('heading', {name: 'Still recording'})).toBeNull(),
+    );
+    expect(screen.getByRole('heading', {name: 'A small machine'})).toBeTruthy();
+  });
+
   it('keeps closed-year browsing and ballot read failures local', async () => {
     mockProjectsOverview({votingEnabled: false, projects: [projectFixture]});
     const closed = renderRoute(
@@ -1598,6 +1656,7 @@ const projectFixture: ProjectDetail = {
     },
   ],
   mediaCount: 0,
+  hasVideo: false,
   media: [],
   nominationCategoryIds: [],
   permissions: {
diff --git a/test/projects/projects.test.ts b/test/projects/projects.test.ts
index 3ba8bc8..1df6fe0 100644
--- a/test/projects/projects.test.ts
+++ b/test/projects/projects.test.ts
@@ -95,6 +95,73 @@ describe('project and history APIs', () => {
     expect(page.body.projects[0].members).toBeInstanceOf(Array);
   });
 
+  it('marks and filters only ready, playable project videos', async () => {
+    const ready = await createProject(memberToken, {name: 'Ready video'});
+    const failed = await createProject(memberToken, {name: 'Failed video'});
+    const unplayable = await createProject(memberToken, {name: 'Unplayable video'});
+    const retired = await createProject(memberToken, {name: 'Retired video'});
+    await env.DB.batch([
+      env.DB.prepare(
+        `INSERT INTO video_submissions (
+          id, project_id, original_name, size_bytes, original_r2_key,
+          processed_r2_key, status
+        ) VALUES (?, ?, 'ready.mp4', 100, ?, ?, 'ready')`,
+      ).bind(
+        `ready-video-${suffix}`,
+        ready.id,
+        `ready-original-${suffix}`,
+        `ready-processed-${suffix}`,
+      ),
+      env.DB.prepare(
+        `INSERT INTO video_submissions (
+          id, project_id, original_name, size_bytes, original_r2_key, status
+        ) VALUES (?, ?, 'failed.mp4', 100, ?, 'failed')`,
+      ).bind(`failed-video-${suffix}`, failed.id, `failed-original-${suffix}`),
+      env.DB.prepare(
+        `INSERT INTO video_submissions (
+          id, project_id, original_name, size_bytes, original_r2_key, status
+        ) VALUES (?, ?, 'unplayable.mp4', 100, ?, 'ready')`,
+      ).bind(
+        `unplayable-video-${suffix}`,
+        unplayable.id,
+        `unplayable-original-${suffix}`,
+      ),
+      env.DB.prepare(
+        `INSERT INTO video_submissions (
+          id, project_id, original_name, status, retired_at
+        ) VALUES (?, ?, 'retired.mp4', 'retired', CURRENT_TIMESTAMP)`,
+      ).bind(`retired-video-${suffix}`, retired.id),
+    ]);
+
+    const all = await api(`/projects?year=${yearId}&kind=project`, memberToken);
+    const filtered = await api(
+      `/projects?year=${yearId}&kind=project&hasVideo=true`,
+      memberToken,
+    );
+    const invalid = await api(
+      `/projects?year=${yearId}&kind=project&hasVideo=1`,
+      memberToken,
+    );
+    const videoState = new Map(
+      all.body.projects.map((project: {name: string; hasVideo: boolean}) => [
+        project.name,
+        project.hasVideo,
+      ]),
+    );
+
+    expect(videoState.get('Ready video')).toBe(true);
+    expect(videoState.get('Failed video')).toBe(false);
+    expect(videoState.get('Unplayable video')).toBe(false);
+    expect(videoState.get('Retired video')).toBe(false);
+    expect(filtered.body.projects.map((project: {id: string}) => project.id)).toEqual([
+      ready.id,
+    ]);
+    expect(invalid).toMatchObject({
+      status: 400,
+      body: {error: {code: 'VALIDATION_FAILED'}},
+    });
+  });
+
   it('returns ordered year categories and persists ordered project nominations', async () => {
     const options = await api(`/years/${yearId}/options`, memberToken);
     const allCategories = await createProject(memberToken, {

From 9b5e3eeba247ebcc1ec2102ecbf5b9b2d0ae9a8a Mon Sep 17 00:00:00 2001
From: Shannon Anahata <shannonanahata@gmail.com>
Date: Fri, 21 Aug 2026 11:12:08 -0700
Subject: [PATCH 2/2] fix(projects): reset video filter for ideas

---
 src/app/routes/ProjectsPage.tsx |  1 +
 test/app/routes.test.tsx        | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/src/app/routes/ProjectsPage.tsx b/src/app/routes/ProjectsPage.tsx
index 4f23acd..1cb1679 100644
--- a/src/app/routes/ProjectsPage.tsx
+++ b/src/app/routes/ProjectsPage.tsx
@@ -202,6 +202,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                 className={kind === 'idea' ? 'active' : ''}
                 onClick={() => {
                   setKind('idea');
+                  setHasVideoOnly(false);
                   resetPagination();
                 }}
               >
diff --git a/test/app/routes.test.tsx b/test/app/routes.test.tsx
index 8235306..218c038 100644
--- a/test/app/routes.test.tsx
+++ b/test/app/routes.test.tsx
@@ -527,6 +527,22 @@ describe('clickable project routes', () => {
       expect(screen.queryByRole('heading', {name: 'Still recording'})).toBeNull(),
     );
     expect(screen.getByRole('heading', {name: 'A small machine'})).toBeTruthy();
+
+    await userEvent.click(screen.getByRole('button', {name: /Ideas/}));
+    expect(screen.queryByRole('checkbox', {name: 'Has video'})).toBeNull();
+
+    await userEvent.click(screen.getByRole('button', {name: /Projects/}));
+    const resetFilter = screen.getByRole('checkbox', {name: 'Has video'});
+    expect(resetFilter).toBeInstanceOf(HTMLInputElement);
+    if (!(resetFilter instanceof HTMLInputElement)) throw new Error();
+    expect(resetFilter.checked).toBe(false);
+    await waitFor(() => {
+      const projectRequest = fetchMock.mock.calls
+        .map(([input]) => requestUrl(input))
+        .filter((url) => url.includes('/api/projects?'))
+        .at(-1);
+      expect(projectRequest).not.toContain('hasVideo=');
+    });
   });
 
   it('keeps closed-year browsing and ballot read failures local', async () => {