Adds smoothness as a optional key to TIGER roads

src/App.tsx

@@ -39,6 +39,8 @@ const App: React.FC = () => {
     setLanes,
     surface,
     setSurface,
+    smoothness,
+    setSmoothness,
     laneMarkings,
     setLaneMarkings,
     lanesForward,
@@ -86,6 +88,7 @@ const App: React.FC = () => {
   const addDetailTags = useCallback(() => {
     return {
       surface: surface,
+      ...(smoothness ? { smoothness } : {}),
       ...(lanes ? { lanes: lanes } : {}),
       ...(!laneMarkings ? { lane_markings: "no" } : {}),
       ...(lanesForward ? { "lanes:forward": lanesForward.toString() } : {}),
@@ -103,6 +106,7 @@ const App: React.FC = () => {
     lanesBackward,
     lanesForward,
     surface,
+    smoothness,
   ]);
 
   // Get search parameters from URL
@@ -261,6 +265,12 @@ const App: React.FC = () => {
         setSurface("");
       }
 
+      if (currentWayTags.smoothness) {
+        setSmoothness(currentWayTags.smoothness);
+      } else {
+        setSmoothness("");
+      }
+
       // Set lanes if it exists
       if (currentWayTags.lanes) {
         setLanes(currentWayTags.lanes);
@@ -296,6 +306,7 @@ const App: React.FC = () => {
     setLanesBackward,
     setLanesForward,
     setLaneMarkings,
+    setSmoothness,
   ]);
 
   const handleEnd = useCallback(() => {
@@ -332,6 +343,7 @@ const App: React.FC = () => {
         console.log("Skipped way", overpassWays[currentWay].id);
         setLanes("");
         setSurface("");
+        setSmoothness("");
         handleEnd();
       },
       fix: (message: string) => {
@@ -374,6 +386,7 @@ const App: React.FC = () => {
     [
       setLanes,
       setSurface,
+      setSmoothness,
       handleEnd,
       overpassWays,
       currentWay,

src/components/LeftPane.tsx

@@ -12,6 +12,7 @@ import { Spinner } from "@heroui/spinner";
 import RelationHeading from "./RelationHeading";
 import WayHeading from "./WayHeading";
 import SurfaceButtons from "./SurfaceButtons";
+import SmoothnessButtons from "./SmoothnessButtons";
 import LanesButtons from "./LanesButtons";
 import QuickTags from "./QuickTags";
 import NoRelationPlaceholder from "./NoRelationPlaceholder";
@@ -179,6 +180,7 @@ const LeftPane: React.FC<LeftPaneProps> = ({
               <div className="flex flex-col gap-2 md:grow">
                 <div className="py-2 flex flex-col gap-4">
                   <SurfaceButtons />
+                  <SmoothnessButtons />
                   <LanesButtons
                     showLaneDirection={showLaneDirection}
                     setShowLaneDirection={setShowLaneDirection}

src/components/SmoothnessButtons.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { ButtonGroup } from "@heroui/button";
+import TagButtonHeading from "./TagButtonHeading";
+import toggleButton from "./ToggleButton";
+import { useWayTagsStore } from "../stores/useWayTagsStore";
+
+const SMOOTHNESS_OPTIONS = [
+  "excellent",
+  "good",
+  "intermediate",
+  "bad",
+  "very_bad",
+  "horrible",
+  "very_horrible",
+  "impassible",
+];
+
+const SmoothnessButtons: React.FC = () => {
+  const { smoothness, setSmoothness } = useWayTagsStore();
+
+  return (
+    <div className="w-full">
+      <TagButtonHeading
+        header="smoothness"
+        tooltip="How smooth the way is for wheeled vehicles."
+      />
+      <ButtonGroup
+        variant="bordered"
+        className="flex flex-wrap w-full"
+        radius="sm"
+        size="md"
+      >
+        {SMOOTHNESS_OPTIONS.map((smoothnessKey) =>
+          toggleButton(smoothnessKey === smoothness, smoothnessKey, () =>
+            setSmoothness(smoothnessKey),
+          ),
+        )}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default SmoothnessButtons;

src/objects.ts

@@ -18,6 +18,7 @@ export interface Tags {
   ref?: string;
   lanes?: string;
   surface?: string;
+  smoothness?: string;
   oneway?: string;
   "lanes:forward"?: string;
   "lanes:backward"?: string;

src/stores/useWayTagsStore.ts

@@ -5,6 +5,10 @@ interface WayTagsState {
   surface: string;
   setSurface: (surface: string) => void;
 
+  // Smoothness state
+  smoothness: string;
+  setSmoothness: (smoothness: string) => void;
+
   // Lanes state
   lanes: string;
   setLanes: (lanes: string) => void;
@@ -31,6 +35,8 @@ export const useWayTagsStore = create<WayTagsState>((set) => ({
   // Surface
   surface: "",
   setSurface: (surface) => set({ surface }),
+  smoothness: "",
+  setSmoothness: (smoothness) => set({ smoothness }),
   laneMarkings: true,
   setLaneMarkings: (hasMarkings) => set({ laneMarkings: hasMarkings }),
 
@@ -54,6 +60,7 @@ export const useWayTagsStore = create<WayTagsState>((set) => ({
   resetTags: () =>
     set({
       surface: "",
+      smoothness: "",
       lanes: "",
       laneMarkings: true,
       showLaneDirection: false,