OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-001B-launcher-fixes/DASH-001B-remove-list-view.md

DASH-001B-3: Remove List View

Overview

Remove all list view code and make grid view the standard. Simplify the UI by eliminating the view mode toggle and related complexity.

Problem

Both list and grid views were implemented per DASH-002 spec, but grid view is the only one needed. List view adds:

• Unnecessary code to maintain
• UI complexity (toggle button)
• Performance overhead (two rendering modes)
• Testing surface area

Solution

Delete list view completely and make grid the only rendering mode.

Implementation Steps

1. Delete ViewModeToggle component

Directory to delete: packages/noodl-core-ui/src/preview/launcher/Launcher/components/ViewModeToggle/

This directory contains:

• ViewModeToggle.tsx
• ViewModeToggle.module.scss
• ViewModeToggle.stories.tsx (if exists)
• index.ts

2. Delete ProjectList component

Directory to delete: packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/

This directory contains:

• ProjectList.tsx
• ProjectListRow.tsx
• ProjectListHeader.tsx
• ProjectList.module.scss
• ProjectList.stories.tsx (if exists)
• index.ts

3. Delete useProjectList hook

File to delete: packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectList.ts

This hook provides sorting logic specifically for list view.

4. Remove from LauncherContext

File: packages/noodl-core-ui/src/preview/launcher/Launcher/LauncherContext.tsx

Remove ViewMode and related properties:

// DELETE THIS EXPORT:
export { ViewMode };

export interface LauncherContextValue {
  activePageId: LauncherPageId;
  setActivePageId: (pageId: LauncherPageId) => void;

  // DELETE THESE TWO LINES:
  // viewMode: ViewMode;
  // setViewMode: (mode: ViewMode) => void;

  useMockData: boolean;
  setUseMockData: (value: boolean) => void;
  // ... rest
}

5. Update Launcher component

File: packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx

Remove viewMode state and prop:

export interface LauncherProps {
  projects?: LauncherProjectData[];
  initialPage?: LauncherPageId;
  useMockData?: boolean;
  // DELETE THIS:
  // initialViewMode?: ViewMode;
  onCreateProject?: () => void;
  // ... rest
}

export function Launcher({
  projects = [],
  initialPage = 'projects',
  useMockData: useMockDataProp = false,
  // DELETE THIS:
  // initialViewMode = ViewMode.Grid,
  onCreateProject
}: // ... rest
LauncherProps) {
  const [activePageId, setActivePageId] = useState<LauncherPageId>(initialPage);

  // DELETE THESE LINES:
  // const [viewMode, setViewMode] = useState<ViewMode>(initialViewMode);

  const [useMockData, setUseMockData] = useState(useMockDataProp);
  const [selectedFolderId, setSelectedFolderId] = useState<string | null>(null);

  const contextValue: LauncherContextValue = {
    activePageId,
    setActivePageId,

    // DELETE THESE LINES:
    // viewMode,
    // setViewMode,

    useMockData,
    setUseMockData
    // ... rest
  };

  // ... rest of component
}

6. Update Projects view

File: packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx

Remove all list view logic:

// DELETE THESE IMPORTS:
// import { ProjectList } from '@noodl-core-ui/preview/launcher/Launcher/components/ProjectList';
// import { ViewModeToggle } from '@noodl-core-ui/preview/launcher/Launcher/components/ViewModeToggle';
// import { useProjectList } from '@noodl-core-ui/preview/launcher/Launcher/hooks/useProjectList';
// import { ViewMode } from '@noodl-core-ui/preview/launcher/Launcher/LauncherContext';

export function Projects({}: ProjectsViewProps) {
  const {
    // DELETE THIS:
    // viewMode,
    // setViewMode,
    projects: allProjects
    // ... rest
  } = useLauncherContext();

  // ... (keep existing filtering and search logic)

  // DELETE THIS ENTIRE BLOCK:
  // const { sortedProjects, sortField, sortDirection, setSorting } = useProjectList({
  //   projects,
  //   initialSortField: 'lastModified',
  //   initialSortDirection: 'desc'
  // });

  // In the JSX, DELETE the ViewModeToggle:
  <HStack hasSpacing={4} UNSAFE_style={{ justifyContent: 'space-between', alignItems: 'center' }}>
    <LauncherSearchBar
      searchTerm={searchTerm}
      setSearchTerm={setSearchTerm}
      filterValue={filterValue}
      setFilterValue={setFilterValue}
      filterDropdownItems={visibleTypesDropdownItems}
    />
    {/* DELETE THIS: */}
    {/* <ViewModeToggle mode={viewMode} onChange={setViewMode} /> */}
  </HStack>;

  {
    /* DELETE THE ENTIRE CONDITIONAL RENDERING: */
  }
  {
    /* Replace this: */
  }
  {
    /* {viewMode === ViewMode.List ? (
    <ProjectList ... />
  ) : (
    <grid view>
  )} */
  }

  {
    /* With just the grid view: */
  }
  <Box hasTopSpacing={4}>
    {/* Project list legend */}
    <Box hasBottomSpacing={4}>
      <HStack hasSpacing>
        <div style={{ width: 100 }} />
        <div style={{ width: '100%' }}>
          <Columns layoutString={'1 1 1'}>
            <Label variant={TextType.Shy} size={LabelSize.Small}>
              Name
            </Label>
            <Label variant={TextType.Shy} size={LabelSize.Small}>
              Version control
            </Label>
            <Label variant={TextType.Shy} size={LabelSize.Small}>
              Contributors
            </Label>
          </Columns>
        </div>
      </HStack>
    </Box>

    {/* Grid of project cards */}
    <Columns layoutString="1" hasXGap hasYGap>
      {projects.map((project) => (
        <LauncherProjectCard
          key={project.id}
          {...project}
          onClick={() => onLaunchProject?.(project.id)}
          contextMenuItems={
            [
              // ... existing menu items
            ]
          }
        />
      ))}
    </Columns>
  </Box>;
}

7. Update Storybook stories

Files to check:

• packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.stories.tsx

Remove any initialViewMode or ViewMode usage:

// DELETE imports of ViewMode, ViewModeToggle

export const Default: Story = {
  args: {
    projects: MOCK_PROJECTS
    // DELETE THIS:
    // initialViewMode: ViewMode.Grid,
  }
};

Files to Delete

1. packages/noodl-core-ui/src/preview/launcher/Launcher/components/ViewModeToggle/ (entire directory)
2. packages/noodl-core-ui/src/preview/launcher/Launcher/components/ProjectList/ (entire directory)
3. packages/noodl-core-ui/src/preview/launcher/Launcher/hooks/useProjectList.ts

Files to Modify

1. packages/noodl-core-ui/src/preview/launcher/Launcher/LauncherContext.tsx
2. packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx
3. packages/noodl-core-ui/src/preview/launcher/Launcher/views/Projects.tsx
4. packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.stories.tsx (if exists)

Testing Checklist

• ViewModeToggle button is gone
• Only grid view renders
• Search still works
• Filter dropdown still works
• Project cards render correctly
• Context menu on cards works
• No TypeScript errors
• No console errors
• Storybook builds successfully

Benefits

1. Simpler codebase - ~500+ lines of code removed
2. Easier maintenance - Only one rendering mode to maintain
3. Better performance - No conditional rendering overhead
4. Cleaner UI - No toggle button cluttering the toolbar
5. Focused UX - One consistent way to view projects

Potential Issues

If grid view has issues

If problems are discovered with grid view after list view removal, they can be fixed directly in the grid implementation without worrying about list view parity.

If users request list view later

The code can be recovered from git history if truly needed, but grid view should be sufficient for most users.

Follow-up

After this subtask, proceed to DASH-001B-4 (Create Project Modal) to improve project creation UX.

---

Estimated Time: 1-2 hours Status: Not Started