Fix the diff visualizer of connected sessions (#674)

Clicking on the "X changes X ago" message opens up a handy diff
visualizer to see what those changes were. However, it had quite a few
issues that needed fixing.

- Disconnecting a session with it expanded caused an error as it tried
to read the serveSession that no longer exists during the page fade
transition. (#671)
- Resolved by converting to stateful component and holding the
serveSession during the lifetime to ensure it can render the last known
changes during the fade transition
- Leaving it open while new changes are synced did not update the
visualizer
- The patch data was piggybacking on an existing binding, which meant
that new patches did not trigger rerender.
    - Resolved by converting to state
    - Also made some improvements to that old binding
- Moved from app to connected page for better organization and
separation of duties
      - No more useless updates causing rerenders with no real change
- Scroll window child component wouldn't actually display the updated
visuals
    - Resolved by making major improvements to VirtualScroller
      - Made more robust against edge case states
      - Made smarter about knowing when it needs to refresh

As you can see in this slow motion GIF, it works now.

![slowedDemo](https://github.com/rojo-rbx/rojo/assets/40185666/c9fc8489-72a9-47be-ae45-9c420e1535d4)

plugin/src/App/Components/PatchVisualizer/DomLabel.lua

@@ -40,11 +40,6 @@ end
 local DomLabel = Roact.Component:extend("DomLabel")
 
 function DomLabel:init()
-	self.maxElementHeight = 0
-	if self.props.changeList then
-		self.maxElementHeight = math.clamp(#self.props.changeList * 30, 30, 30 * 6)
-	end
-
 	local initHeight = self.props.elementHeight:getValue()
 	self.expanded = initHeight > 30
 
@@ -118,7 +113,8 @@ function DomLabel:render()
 					Size = UDim2.new(1, 0, 1, 0),
 					[Roact.Event.Activated] = function()
 						self.expanded = not self.expanded
-						self.motor:setGoal(Flipper.Spring.new((self.expanded and self.maxElementHeight or 0) + 30, {
+						local goalHeight = 30 + (if self.expanded then math.clamp(#self.props.changeList * 30, 30, 30 * 6) else 0)
+						self.motor:setGoal(Flipper.Spring.new(goalHeight, {
 							frequency = 5,
 							dampingRatio = 1,
 						}))

plugin/src/App/Components/VirtualScroller.lua

@@ -99,18 +99,30 @@ function VirtualScroller:refresh()
 	})
 end
 
+function VirtualScroller:didUpdate(previousProps)
+	if self.props.count ~= previousProps.count then
+		-- Items have changed, so we need to refresh
+		self:refresh()
+	end
+end
+
 function VirtualScroller:render()
 	local props, state = self.props, self.state
 
 	local items = {}
 	for i = state.Start, state.End do
+		local content = props.render(i)
+		if content == nil then
+			continue
+		end
+
 		items["Item" .. i] = e("Frame", {
 			LayoutOrder = i,
 			Size = props.getHeightBinding(i):map(function(height)
 				return UDim2.new(1, 0, 0, height)
 			end),
 			BackgroundTransparency = 1,
-		}, props.render(i))
+		}, content)
 	end
 
 	return Theme.with(function(theme)