Completed feature and added ability to change audit name. (#161)

Author: spotta85

entrypoints/components/audit-card.tsx

@@ -19,15 +19,36 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
   isExpanded = false,
   onToggle,
   onMenuClick,
+  onRename,
 }) => {
   const [menuOpen, setMenuOpen] = React.useState(false);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [draftTitle, setDraftTitle] = React.useState(title);
 
   React.useEffect(() => {
     if (!isSelected) {
       setMenuOpen(false);
     }
   }, [isSelected]);
 
+  const saveRename = () => {
+    const nextTitle = draftTitle.trim();
+    setIsEditing(false);
+    setMenuOpen(false);
+
+    if (nextTitle && nextTitle !== title) {
+      onRename?.(nextTitle);
+    } else {
+      setDraftTitle(title);
+    }
+  };
+
+  const startRename = () => {
+    setDraftTitle(title);
+    setIsEditing(true);
+    setMenuOpen(false);
+  };
+
   return (
     <div
       className={`relative rounded-[8px] px-4 py-[12px] w-full transition-all duration-200 cursor-pointer ${
@@ -42,13 +63,38 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
     >
       <div className="flex items-center justify-between">
         {/* Title */}
-        <div
-          className={`font-bold text-[18px] leading-tight ${
-            isSelected ? "text-white" : "text-dap-orange"
-          }`}
-        >
-          {title}
-        </div>
+        {isEditing ? (
+          <input
+            autoFocus
+            className="w-[160px] rounded border border-dap-border bg-background px-1 py-1 text-[18px] font-bold leading-tight text-text outline-none"
+            value={draftTitle}
+            onChange={(e) => setDraftTitle(e.target.value)}
+            onBlur={saveRename}
+            onClick={(e) => e.stopPropagation()}
+            onFocus={(e) => e.currentTarget.select()}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.currentTarget.blur();
+              }
+              if (e.key === "Escape") {
+                setDraftTitle(title);
+                setIsEditing(false);
+              }
+            }}
+          />
+        ) : (
+          <div
+            className={`min-w-0 flex-1 truncate font-bold text-[18px] leading-tight ${
+              isSelected ? "text-white" : "text-dap-orange"
+            }`}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              startRename();
+            }}
+          >
+            {title}
+          </div>
+        )}
 
         <div className="flex items-center gap-2">
           {/* Percentage Badge */}
@@ -86,7 +132,10 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
           className="absolute right-0 top-full z-30 mt-2 min-w-[180px] rounded-[8px] border border-dap-border bg-background p-2 shadow-lg"
           onClick={(e) => e.stopPropagation()}
         >
-          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg">
+          <button
+            className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg"
+            onClick={startRename}
+          >
             <PencilSimpleLine size={20} className="shrink-0" />
             <span>Rename</span>
           </button>

entrypoints/degree-audit/components/sidebar.tsx

@@ -17,7 +17,8 @@ import { useAuditContext } from "../providers/audit-provider";
 
 const Sidebar = () => {
   const { sidebarIsOpen, toggleSidebar } = usePreferences();
-  const { currentAuditId, setCurrentAuditId, history } = useAuditContext();
+  const { currentAuditId, setCurrentAuditId, history, renameAuditTitle } =
+    useAuditContext();
   // const [audits, setAudits] = useState<DegreeAuditCardProps[]>([]); //history
   // const [loading, setLoading] = useState(true);
 
@@ -97,6 +98,11 @@ const Sidebar = () => {
                       setCurrentAuditId(audit.auditId); // No page refresh, just update state
                     }
                   }}
+                  onRename={(title) => {
+                    if (audit.auditId) {
+                      renameAuditTitle(audit.auditId, title);
+                    }
+                  }}
                   onMenuClick={() => {
                     console.log("Menu clicked for", audit.title);
                   }}

entrypoints/degree-audit/providers/audit-provider.tsx

@@ -1,19 +1,27 @@
 import { usePreferences } from "@/entrypoints/degree-audit/providers/preferences-provider";
-import { calculateWeightedDegreeCompletion } from "@/lib/audit-calculations";
+import {
+  calculateWeightedDegreeCompletion,
+  getDuplicateCourseRequirementFlags,
+  getCompositeAuditRequirements,
+} from "@/lib/audit-calculations";
 import {
   addPlannedCourse as addPlannedCourseToStorage,
   getAuditData,
   getAuditHistory,
   removePlannedCourse as removePlannedCourseFromStorage,
+  renameAudit,
   wipeAllPlannedCourses as wipeAllPlannedCoursesFromStorage,
 } from "@/lib/backend/storage";
 import {
   AuditHistoryData,
   AuditRequirement,
+  CompositeAuditData,
+  CompositeAuditRequirement,
   Course,
   CourseId,
   CurrentAuditProgress,
   DegreeAuditCardProps,
+  DuplicateCourseRequirementFlag,
   PlannedCourseOutline,
   RequirementRule,
   StringSemester,
@@ -35,10 +43,14 @@ type AuditRequirementLike = Omit<AuditRequirement, "rule"> & {
 interface AuditContextType {
   sections: AuditRequirement[];
   courses: Course[];
+  compositeAuditData: CompositeAuditData;
+  compositeRequirements: CompositeAuditRequirement[];
+  duplicateCourseFlags: DuplicateCourseRequirementFlag[];
   history: AuditHistoryData;
   currentAuditId: string;
   currentAudit: DegreeAuditCardProps;
   setCurrentAuditId: (id: string) => void;
+  renameAuditTitle: (auditId: string, title: string) => Promise<boolean>;
   progresses: CurrentAuditProgress;
   semesters: SemesterInfo;
   getCourseById: (id: CourseId) => Course;
@@ -98,6 +110,13 @@ function normalizeRequirements(
   }));
 }
 
+function getAuditDisplayName(
+  audit: DegreeAuditCardProps | undefined,
+  auditId: string,
+) {
+  return audit?.title ?? audit?.majors?.join("; ") ?? auditId;
+}
+
 export const AuditContextProvider = ({
   children,
 }: {
@@ -111,8 +130,19 @@ export const AuditContextProvider = ({
 
   const [courseDict, setCourseDict] = useState<Record<CourseId, Course>>({});
   const [sections, setSections] = useState<AuditRequirement[]>([]);
+  const [compositeAuditData, setCompositeAuditData] =
+    useState<CompositeAuditData>({ audits: [] });
   const [history, setHistory] = useState<AuditHistoryData>();
 
+  const compositeRequirements = useMemo(
+    () => getCompositeAuditRequirements(compositeAuditData),
+    [compositeAuditData],
+  );
+  const duplicateCourseFlags = useMemo(
+    () => getDuplicateCourseRequirementFlags(compositeAuditData),
+    [compositeAuditData],
+  );
+
   const progresses = useMemo(
     () => calculateWeightedDegreeCompletion(sections ?? [], courseDict),
     [sections, courseDict],
@@ -230,6 +260,25 @@ export const AuditContextProvider = ({
     return numRemoved;
   }
 
+  // Keep the provider state in sync after storage accepts the rename.
+  async function renameAuditTitle(auditId: string, title: string) {
+    const cleanTitle = title.trim();
+    if (!cleanTitle) {
+      return false;
+    }
+
+    const updatedHistory = await renameAudit(auditId, cleanTitle);
+    if (!updatedHistory) {
+      return false;
+    }
+
+    setHistory(updatedHistory);
+    setCompositeAuditData((prev) => ({
+      audits: prev.audits.map((audit) => ({ ...audit, name: cleanTitle })),
+    }));
+    return true;
+  }
+
   const currentAudit = useMemo(() => {
     return history?.audits.find((a) => a.auditId === currentAuditId) ?? {};
   }, [history, currentAuditId]);
@@ -267,19 +316,21 @@ export const AuditContextProvider = ({
         // Load requirements from cache
         const cached = await getAuditData(currentAuditId!);
         if (cached) {
-          setSections(
-            cached.requirements.map((section) => ({
-              ...section,
-              rules: section.rules.map((rule) => ({
-                ...rule,
-                progressUnit: rule.progressUnit ?? "hours",
-                courses: rule.courses,
-              })),
-            })),
-          );
+          const namedAudit = {
+            ...cached,
+            name: getAuditDisplayName(matchingAudit, currentAuditId!),
+          };
+          const composite = { audits: [namedAudit] };
+          setCompositeAuditData(composite);
+          setSections(getCompositeAuditRequirements(composite));
           console.log("[Main] courses", cached.courses);
           setCourseDict(cached.courses);
-        } else console.warn(`[Main] Audit ${currentAuditId} not in cache.`);
+        } else {
+          setCompositeAuditData({ audits: [] });
+          setSections([]);
+          setCourseDict({});
+          console.warn(`[Main] Audit ${currentAuditId} not in cache.`);
+        }
 
         setLoaded(true);
       } catch (error) {
@@ -300,6 +351,9 @@ export const AuditContextProvider = ({
       value={{
         sections,
         courses: Object.values(courseDict),
+        compositeAuditData,
+        compositeRequirements,
+        duplicateCourseFlags,
         history: history!,
         semesters,
         currentAuditId,
@@ -309,6 +363,7 @@ export const AuditContextProvider = ({
           setCurrentAuditId(id);
           updateLastAuditId(id);
         },
+        renameAuditTitle,
         moveCourseToNewSemester,
         progresses,
         getCourseById: (id) => {

lib/audit-calculations.ts

@@ -1,10 +1,85 @@
 import type {
   AuditRequirement,
+  CompositeAuditData,
+  CompositeAuditRequirement,
   Course,
+  CourseCode,
   CourseId,
   CurrentAuditProgress,
+  DuplicateCourseRequirementFlag,
 } from "./general-types";
 
+// Give unnamed audits a readable fallback so the UI never shows a blank source.
+function getAuditName(
+  audit: CompositeAuditData["audits"][number],
+  index: number,
+) {
+  return audit.name ?? `Degree Audit ${index + 1}`;
+}
+
+// Find course codes that appear in requirements from more than one audit.
+export function getDuplicateCourseRequirementFlags(
+  composite: CompositeAuditData,
+): DuplicateCourseRequirementFlag[] {
+  const courseAudits = new Map<CourseCode, Set<string>>();
+
+  composite.audits.forEach((audit, auditIndex) => {
+    const auditName = getAuditName(audit, auditIndex);
+
+    audit.requirements.forEach((requirement) => {
+      requirement.rules.forEach((rule) => {
+        rule.courses.forEach((courseId) => {
+          const course = audit.courses[courseId];
+          if (!course) return;
+
+          const auditNames = courseAudits.get(course.code) ?? new Set<string>();
+          auditNames.add(auditName);
+          courseAudits.set(course.code, auditNames);
+        });
+      });
+    });
+  });
+
+  return Array.from(courseAudits.entries())
+    .filter(([, auditNames]) => auditNames.size > 1)
+    .map(([courseCode, auditNames]) => ({
+      courseCode,
+      auditNames: Array.from(auditNames),
+    }));
+}
+
+// Build the composite requirement list used by views that need all audits together.
+export function getCompositeAuditRequirements(
+  composite: CompositeAuditData,
+): CompositeAuditRequirement[] {
+  const duplicateCodes = new Set(
+    getDuplicateCourseRequirementFlags(composite).map(
+      (flag) => flag.courseCode,
+    ),
+  );
+
+  return composite.audits.flatMap((audit, auditIndex) => {
+    const auditName = getAuditName(audit, auditIndex);
+
+    return audit.requirements.map((requirement) => ({
+      ...requirement,
+      auditName,
+      duplicateCourseCodes: Array.from(
+        new Set(
+          requirement.rules.flatMap((rule) =>
+            rule.courses
+              .map((courseId) => audit.courses[courseId]?.code)
+              .filter(
+                (code): code is CourseCode =>
+                  !!code && duplicateCodes.has(code),
+              ),
+          ),
+        ),
+      ),
+    }));
+  });
+}
+
 export function calculateWeightedDegreeCompletion(
   sections: AuditRequirement[],
   courses: Record<CourseId, Course>,

lib/backend/storage.ts

@@ -31,6 +31,30 @@ export async function saveAuditHistory(
   }
 }
 
+// Rename only the history entry because that is what the sidebar displays.
+export async function renameAudit(
+  auditId: string,
+  title: string,
+): Promise<AuditHistoryData | null> {
+  try {
+    const history = await getAuditHistory();
+    if (!history) {
+      return null;
+    }
+
+    const audits = history.audits.map((audit) =>
+      audit.auditId === auditId ? { ...audit, title } : audit,
+    );
+    const updatedHistory = { ...history, audits, timestamp: Date.now() };
+
+    await browser.storage.local.set({ [STORAGE_KEY]: updatedHistory });
+    return updatedHistory;
+  } catch (e) {
+    console.error("Failed to rename audit:", e);
+    return null;
+  }
+}
+
 /**
  * Adds a course to the audit history.
  * @param auditId - The ID of the audit to add the course to.