(DOCSP-12585): Playground updates

Author: jeff-allen-mongo

source/images/vsce-create-new-playground.png

@@ -25,7 +25,8 @@ MongoDB Playgrounds provide intelligent autocomplete for:
 - Database, collection, and field names.
 
 You can save playgrounds in your workspace and use them to
-document how your application interacts with MongoDB.
+document how your application interacts with MongoDB. |vsce| interprets
+files with the ``.mongodb`` extension as playgrounds.
 
 .. include:: /includes/admonitions/note-playgrounds.rst
 
@@ -42,18 +43,49 @@ To run a playground, you must connect to a MongoDB deployment using
 Open a Playground
 -----------------
 
-To open a playground and begin interacting with your data:
+Create a New Playground
+~~~~~~~~~~~~~~~~~~~~~~~
 
-.. include:: /includes/steps/open-new-playground.rst
+You can create a new playground from either the :guilabel:`Playgrounds`
+panel, or the |vscode| Command Pallette.
 
-Your playground runs against the deployment specified in your
-:ref:`active connection <vsce-connect>`.
+.. tabs::
+
+   .. tab:: Playgrounds Panel
+      :tabid: playground-panel
+
+      If you have no saved playgrounds in your |vscode-short| workspace,
+      in the :guilabel:`Playgrounds` panel of |vsce|, click
+      :guilabel:`Create New Playground`.
+
+      .. figure:: /images/vsce-create-new-playground.png
+         :figwidth: 400px
+         :alt: Image of Create New Playground button
+
+      If you have saved playgrounds in your |vscode| workspace, click
+      the :guilabel:`...` menu icon of the :guilabel:`Playgrounds` panel
+      and select :guilabel:`Create MongoDB Playground`.
+
+   .. tab:: VSCode Command Palette
+      :tabid: command-palette
+
+      .. include:: /includes/steps/open-new-playground.rst
+
+Open a Saved Playground
+~~~~~~~~~~~~~~~~~~~~~~~
+
+If you have files in your |vscode-short| workspace with the ``.mongodb``
+extension, |vsce| displays these files in the :guilabel:`Playgrounds`
+panel.
+
+Double click a ``.mongodb`` file to open that playground.
 
 Run a Playground
 ----------------
 
-To run a playground, click the :guilabel:`Play Button` in VS Code's
-top navigation bar.
+To run a playground, click the :guilabel:`Play Button` in VS Code's top
+navigation bar. Your playground runs against the deployment specified in
+your :ref:`active connection <vsce-connect>`.
 
 .. _playground-connect-to-deployment: