Merge pull request #5455 from penpot/madalenapmelo-kp-patch-1

📚 File history versions

docs/user-guide/workspace-basics/index.njk

@@ -199,20 +199,57 @@ geometric structure. In Penpot there are three types of guides:
   <img src="/img/workspace-basics/shortcuts.webp" alt="Shortcuts panel" />
 </figure>
 
-<h2 id="history">History</h2>
-<p>The history panel keeps track of the latest changes on an opened file.</p>
+<h2 id="history">File history versions</h2>
+<p>The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.</p>
 
-<h4>View history</h4>
-<p>To view the recent history of a file at the workspace click at the history icon on the toolbar at the left.</p>
-<p>At the history you can see items with information about the last changes. At first sight you have object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item further details are shown.</p>
+<h3>View history</h3>
+<p>To view the recent history of a file at the workspace click the history icon on the navbar at the left:</p>
+<ul>
+  <li>To see the history of file versions go to the <strong>History</strong> tab.</li>
+  <li>To see the history of item changes go to the <strong>Actions</strong> tab.</li>
+</ul>
 <figure>
-  <img src="/img/workspace-basics/history.webp" alt="History panel" />
+  <img src="/img/workspace-basics/history-view.webp" alt="History versions button" />
 </figure>
-<p><strong>Note:</strong> History panel is still in a very early state and shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the History as well. Eventually, Penpot will have a proper version history capacity.</p>
 
-<h4>Navigate history</h4>
-<p>To navigate through the history press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
-<p>You can also press any item of the history list to get to this specific state.</p>
+<h3>History panel</h3>
+<p>At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.</p>
+
+<h4>Restore versions</h4>
+<p>All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.</p>
+<figure>
+  <img src="/img/workspace-basics/history-restore.webp" alt="Restore versions" />
+</figure>
+
+<h4>Saved versions</h4>
+<p>You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.</p>
+<figure>
+  <img src="/img/workspace-basics/history-save.webp" alt="Saved versions" />
+</figure>
+
+<h4>Autosaved versions</h4>
+<p>When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.</p>
+<p>In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.</p>
+<figure>
+  <img src="/img/workspace-basics/history-autosaved.webp" alt="Autosaved versions" />
+</figure>
+
+<h4>Pinned versions</h4>
+<p>File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.</p>
+<figure>
+  <img src="/img/workspace-basics/history-pin.webp" alt="Pin versions" />
+</figure>
+
+<h3>Actions panel</h3>
+<p>At the Actions panel, you have the object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.</p>
+<figure>
+  <img src="/img/workspace-basics/history-actions.webp" alt="Actions panel" />
+</figure>
+<p class="advice">The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.</p>
+
+<h4>Navigate actions</h4>
+<p>To navigate through the actions press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
+<p>You can also press any item of the actions list to get to this specific state.</p>
 <figure>
   <video title="Navigate history" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/history-navigate.webp" height="auto">
     <source src="/img/workspace-basics/history-navigate.mp4" type="video/mp4">