private shares and revokation works

public/src/components/map/Toolbar.tsx

@@ -5,6 +5,7 @@ import { CABLE_COLORS, CABLE_LABELS } from '../../types/mapItem';
 interface ToolbarProps {
   mapId: string;
   onShare: () => void;
+  readOnly?: boolean;
 }
 
 interface ToolButton {
@@ -70,11 +71,18 @@ const TOOLS: ToolButton[] = [
   },
 ];
 
-export function Toolbar({ mapId, onShare }: ToolbarProps) {
+export function Toolbar({ mapId, onShare, readOnly = false }: ToolbarProps) {
   const { activeTool, setActiveTool } = useDrawingStore();
 
   return (
     <div className="bg-white shadow-lg rounded-lg p-2 space-y-1" style={{ minWidth: '150px' }}>
+      {/* Read-only indicator */}
+      {readOnly && (
+        <div className="w-full px-3 py-2 rounded bg-yellow-100 text-yellow-800 text-xs font-medium mb-2 text-center">
+          Read-Only Mode
+        </div>
+      )}
+
       {/* Share button */}
       <button
         onClick={onShare}
@@ -87,26 +95,32 @@ export function Toolbar({ mapId, onShare }: ToolbarProps) {
 
       <div className="border-t border-gray-200 my-2"></div>
 
-      {TOOLS.map((tool) => (
-        <button
-          key={tool.id}
-          onClick={() => setActiveTool(tool.id)}
-          className={`w-full px-3 py-2 rounded text-left flex items-center gap-2 transition-colors ${
-            activeTool === tool.id
-              ? 'bg-blue-100 text-blue-700 font-medium'
-              : 'hover:bg-gray-100 text-gray-700'
-          }`}
-          title={tool.description}
-        >
-          <span
-            className="text-lg"
-            style={tool.color ? { color: tool.color } : undefined}
+      {TOOLS.map((tool) => {
+        const isDisabled = readOnly && tool.id !== 'select';
+        return (
+          <button
+            key={tool.id}
+            onClick={() => !isDisabled && setActiveTool(tool.id)}
+            disabled={isDisabled}
+            className={`w-full px-3 py-2 rounded text-left flex items-center gap-2 transition-colors ${
+              isDisabled
+                ? 'opacity-50 cursor-not-allowed text-gray-400'
+                : activeTool === tool.id
+                ? 'bg-blue-100 text-blue-700 font-medium'
+                : 'hover:bg-gray-100 text-gray-700'
+            }`}
+            title={isDisabled ? 'Not available in read-only mode' : tool.description}
           >
-            {tool.icon}
-          </span>
-          <span className="text-sm">{tool.label}</span>
-        </button>
-      ))}
+            <span
+              className="text-lg"
+              style={tool.color && !isDisabled ? { color: tool.color } : undefined}
+            >
+              {tool.icon}
+            </span>
+            <span className="text-sm">{tool.label}</span>
+          </button>
+        );
+      })}
     </div>
   );
 }