Draw / Super Draw edit modes + UX batch (elections revert, panel renames, portal routes, CMS place-page ordering) (#617)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: nofurtherinformation

app/bun.lock

@@ -273,6 +273,17 @@ test.describe('Sidebar Responsiveness', () => {
     // Sidebar should be hidden on mobile
     const sidebar = page.locator(testSelectors.sidebar);
     await expect(sidebar).not.toBeVisible();
+
+    // ...but the drawing tools move to the mobile dock instead of vanishing.
+    const toolbar = page.locator('[data-testid="toolbar"]');
+    await expect(toolbar).toBeVisible();
+
+    // Selecting the paint tool reveals the brush controls (district picker).
+    const brushTool = page.locator(testSelectors.brushTool);
+    if (await brushTool.isVisible()) {
+      await brushTool.click();
+      await expect(page.getByText('Brush Size')).toBeVisible();
+    }
   });
 
   test('should show sidebar on landscape mobile/tablet', async ({page}) => {

app/e2e/tests/sidebar/data-panels.spec.ts

@@ -23,6 +23,14 @@ test.describe('Shatter Tool', () => {
       test.skip(true, 'No document ID available');
       return;
     }
+    // The shatter tool is only rendered in Super Draw; seed the persisted
+    // toolbar store so a fresh browser context doesn't silently skip the suite.
+    await page.addInitScript(() => {
+      window.localStorage.setItem(
+        'toolbarStore',
+        JSON.stringify({state: {superDraw: true}, version: 3})
+      );
+    });
     await navigateToMap(page, sharedDocumentId);
   });
 

app/e2e/tests/tools/shatter-tool.spec.ts

@@ -5,6 +5,13 @@ import createMDX from '@next/mdx';
 const nextConfig = {
   // Configure pageExtensions to include MDX files
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  // "Tag" pages were renamed to "portal" pages; keep old links working.
+  async redirects() {
+    return [
+      {source: '/tag/:slug', destination: '/portal/:slug', permanent: true},
+      {source: '/tags', destination: '/portals', permanent: true},
+    ];
+  },
   // Path aliases are configured in tsconfig.json and automatically used by Next.js
   webpack: (config, {isServer, webpack}) => {
     // Exclude Node.js modules from client-side bundles

app/next.config.mjs

@@ -88,7 +88,6 @@
     "react-google-recaptcha": "^3.1.0",
     "react-intersection-observer": "^9.16.0",
     "react-map-gl": "^7.1.3",
-    "react-relative-time": "^0.0.9",
     "react-resizable": "^3.0.5",
     "sharp": "^0.34.1",
     "simple-statistics": "^7.8.7",

app/package.json

@@ -73,6 +73,13 @@ export default function GuidePage() {
         </Link>{' '}
         database, which stores all sorts of geospatial data.
       </Text>
+      <Text size="3">
+        Election results and voter history data are provided courtesy of{' '}
+        <Link href="https://davesredistricting.org" target="_blank">
+          Dave&apos;s Redistricting
+        </Link>
+        .
+      </Text>
       <CTA />
     </Flex>
   );

app/src/app/(static)/data/page.tsx

@@ -3,6 +3,7 @@ import {Flex, Heading, Text, Link, Box} from '@radix-ui/themes';
 import Image from 'next/image';
 import {ContentSection} from '../components/Static/ContentSection';
 import {ResponsivePlaceMap} from '../components/Static/PlaceMap/PlaceMap';
+import {ImportBlockAssignments} from '../components/Static/Interactions/ImportBlockAssignments';
 import {DevTeam} from '../components/Static/Content/DevTeam';
 import {CTA} from '../components/Static/Content/CTA';
 
@@ -137,9 +138,15 @@ const Main: React.FC = () => {
         </Flex>
       </ContentSection>
       <ContentSection title="Where would you like to start?">
-        <Box className="w-full aspect-square mx-auto lg:aspect-video">
-          <ResponsivePlaceMap />
-        </Box>
+        <Flex direction="column" gapY="3">
+          <Text size="5">
+            Pick a state on the map, or upload a block-assignment file from another tool.
+          </Text>
+          <ImportBlockAssignments />
+          <Box className="w-full aspect-square mx-auto lg:aspect-video">
+            <ResponsivePlaceMap />
+          </Box>
+        </Flex>
       </ContentSection>
       <ContentSection title="About Districtr">
         <Flex direction="column" gapY="4" py="4">

app/src/app/(static)/page.tsx

@@ -5,6 +5,7 @@ import {PlaceMapGrid} from '@/app/components/Static/Interactions/PlaceMapGrid';
 import {getAvailableDistrictrMaps} from '@/app/utils/api/apiHandlers/getAvailableDistrictrMaps';
 import {getCMSContent} from '@/app/utils/api/cms';
 import {Flex, Heading} from '@radix-ui/themes';
+import {ImportBlockAssignments} from '@/app/components/Static/Interactions/ImportBlockAssignments';
 import {cookies} from 'next/headers';
 
 export const revalidate = 3600;
@@ -25,8 +26,11 @@ export default async function Page({params}: {params: Promise<{slug: string}>})
     );
   }
 
+  // Preserve the order saved in the CMS, not the order of the available-maps list.
   const availableMaps = maps.ok
-    ? maps.response.filter(m => cmsData.content.districtr_map_slugs!.includes(m.districtr_map_slug))
+    ? (cmsData.content.districtr_map_slugs ?? [])
+        .map(slug => maps.response.find(m => m.districtr_map_slug === slug))
+        .filter((m): m is NonNullable<typeof m> => m !== undefined)
     : null;
 
   return (
@@ -40,6 +44,9 @@ export default async function Page({params}: {params: Promise<{slug: string}>})
       />
       <ContentSection title="Draw a plan from scratch">
         {Boolean(availableMaps?.length) && <PlaceMapGrid maps={availableMaps!} />}
+        <Flex direction="column" align="start" pt="3">
+          <ImportBlockAssignments />
+        </Flex>
       </ContentSection>
 
       <RichTextRenderer content={cmsData.content.published_content.body} className="my-4" />

app/src/app/(static)/place/[slug]/page.tsx

@@ -5,7 +5,7 @@ import {Card, Flex, Grid, Heading, Text, Link} from '@radix-ui/themes';
 export const dynamic = 'force-dynamic';
 export const revalidate = 3600;
 
-export default async function TagsPage() {
+export default async function PortalsPage() {
   const cmsContent = await listCMSContent('tags');
   const cmsContentWithPublishedContent = cmsContent?.filter(content => content.published_content);
   if (!cmsContentWithPublishedContent) return null;
@@ -19,7 +19,7 @@ export default async function TagsPage() {
   return (
     <Flex direction={'column'}>
       <Heading as="h1" size="6" mb="4">
-        Tags
+        Portals
       </Heading>
       <Grid
         columns={{
@@ -29,13 +29,13 @@ export default async function TagsPage() {
         }}
         gap="4"
       >
-        {entries.length === 0 && <Text>No tags found</Text>}
+        {entries.length === 0 && <Text>No portals found</Text>}
         {entries.map(content => (
           <Card key={content.slug}>
             <Heading as="h3" size="4">
               {content.published_content!.title}
             </Heading>
-            <Link href={`/tag/${content.slug}`}>Go to tag</Link>
+            <Link href={`/portal/${content.slug}`}>Go to portal</Link>
           </Card>
         ))}
       </Grid>