Some more UI changes. Also added device issue indicator

frontend/src/devices/DeviceDetail.jsx

@@ -367,6 +367,8 @@ export default function DeviceDetail() {
   const [savingNotes, setSavingNotes] = useState(false);
   const notesRef = useRef(null);
   const [usersLoading, setUsersLoading] = useState(false);
+  const [unresolvedIssues, setUnresolvedIssues] = useState(0);
+  const notesPanelRef = useRef(null);
 
   useEffect(() => {
     loadData();
@@ -396,6 +398,14 @@ export default function DeviceDetail() {
         setDeviceUsers([]);
       }).finally(() => setUsersLoading(false));
 
+      // Load unresolved issues count
+      api.get(`/equipment/notes?device_id=${id}`).then((data) => {
+        const issues = (data.notes || []).filter(
+          (n) => (n.category === "issue" || n.category === "action_item") && n.status !== "completed"
+        );
+        setUnresolvedIssues(issues.length);
+      }).catch(() => setUnresolvedIssues(0));
+
       // Reverse geocode
       const coords = parseCoordinates(d.device_location_coordinates);
       if (coords) {
@@ -944,7 +954,7 @@ export default function DeviceDetail() {
     </SectionCard>
   );
 
-  const notesSection = <NotesPanel deviceId={id} />;
+  const notesSection = <div ref={notesPanelRef}><NotesPanel deviceId={id} /></div>;
   const logsSection = <DeviceLogsPanel deviceSerial={device.device_id} />;
 
   // ===== Layout rendering =====
@@ -1021,10 +1031,11 @@ export default function DeviceDetail() {
           <button onClick={() => navigate("/devices")} className="text-sm hover:underline mb-2 inline-block" style={{ color: "var(--accent)" }}>
             &larr; Back to Devices
           </button>
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-4">
             <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>
               {device.device_name || "Unnamed Device"}
             </h1>
+            <div style={{ width: 1, height: 24, backgroundColor: "var(--border-primary)" }} />
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
               <span
                 className="w-3 h-3 rounded-full inline-block"
@@ -1039,6 +1050,19 @@ export default function DeviceDetail() {
                 )}
               </span>
             </div>
+            {unresolvedIssues > 0 && (
+              <>
+                <div style={{ width: 1, height: 24, backgroundColor: "var(--border-primary)" }} />
+                <button
+                  onClick={() => notesPanelRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}
+                  className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer hover:opacity-80 transition-opacity"
+                  style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)", border: "none" }}
+                >
+                  <span style={{ fontSize: "0.85rem", lineHeight: 1 }}>⚠</span>
+                  {unresolvedIssues} Issue{unresolvedIssues !== 1 ? "s" : ""} Unresolved
+                </button>
+              </>
+            )}
           </div>
         </div>
         {canEdit && (