Real-time status about sync details (#569)

* Rough prototype of patch info display

* Remove extra newline

* Switch to binding

* Update slower for older timestamps

* Batch patches within a second of each other

* Fix indentation

* Less wasteful refresh hz

* More apt variable name

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

plugin/src/App/init.lua

@@ -43,6 +43,10 @@ function App:init()
 
 	self.host, self.setHost = Roact.createBinding("")
 	self.port, self.setPort = Roact.createBinding("")
+	self.patchInfo, self.setPatchInfo = Roact.createBinding({
+		changes = 0,
+		timestamp = os.time(),
+	})
 
 	self:setState({
 		appStatus = AppStatus.NotConnected,
@@ -105,6 +109,34 @@ function App:startSession()
 		twoWaySync = sessionOptions.twoWaySync,
 	})
 
+	serveSession:onPatchApplied(function(patch, unapplied)
+		local now = os.time()
+		local changes = 0
+
+		for _, set in patch do
+			for _ in set do
+				changes += 1
+			end
+		end
+		for _, set in unapplied do
+			for _ in set do
+				changes -= 1
+			end
+		end
+
+		if changes == 0 then return end
+
+		local old = self.patchInfo:getValue()
+		if now - old.timestamp < 2 then
+			changes += old.changes
+		end
+
+		self.setPatchInfo({
+			changes = changes,
+			timestamp = now,
+		})
+	end)
+
 	serveSession:onStatusChanged(function(status, details)
 		if status == ServeSession.Status.Connecting then
 			self:setState({
@@ -148,6 +180,16 @@ function App:startSession()
 	serveSession:start()
 
 	self.serveSession = serveSession
+
+	task.defer(function()
+		while self.serveSession == serveSession do
+			-- Trigger rerender to update timestamp text
+			local patchInfo = table.clone(self.patchInfo:getValue())
+			self.setPatchInfo(patchInfo)
+			local elapsed = os.time() - patchInfo.timestamp
+			task.wait(elapsed < 60 and 1 or elapsed/5)
+		end
+	end)
 end
 
 function App:endSession()
@@ -231,6 +273,7 @@ function App:render()
 				Connected = createPageElement(AppStatus.Connected, {
 					projectName = self.state.projectName,
 					address = self.state.address,
+					patchInfo = self.patchInfo,
 
 					onDisconnect = function()
 						self:endSession()