Display lock information on directory and blob pages
## Context
By having a consistent title area for both directories and pages, we can start adding attributes/labels to identify the state of the file such as it being "locked".
## Proposal
Display lock icon next to title
| Proposed: Directory lock icon | Proposed: File lock icon |
|-------------------------------|--------------------------|
|  |  |
Improve the consistency and ux of the lock/unlock confirmation modals.
<table>
<tr>
<th>Proposed: Directory lock modal</th>
<th>Proposed: File lock modal</th>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
## Current state
Currently locked files/directories can be known by looking at the state of the button like "Unlock"
<table>
<tr>
<th>Current: Directory lock button</th>
<th>Current: File lock button</th>
</tr>
<tr>
<td>
{width="1232" height="828"}
{width="1234" height="828"}
</td>
<td>
{width="1232" height="827"}
{width="1233" height="829"}
</td>
</tr>
</table>
<table>
<tr>
<th>Current: Directory lock modal</th>
<th>Current: File lock modal</th>
</tr>
<tr>
<td>
{width="1231" height="827"}
{width="1230" height="829"}
</td>
<td>
{width="1228" height="825"}
{width="1228" height="825"}
</td>
</tr>
</table>
### User flow
<table>
<tr>
<th>Step</th>
<th>Screen</th>
</tr>
<tr>
<td>
User navigates to a single file/directory page that is currently **not locked**
</td>
<td>
</td>
</tr>
<tr>
<td>
User clicks into the `Overflow menu` \> `Lock file` to lock the file
</td>
<td>
</td>
</tr>
<tr>
<td>
The file is now **locked**. The lock button denotes the state of the file as being "locked."
</td>
<td>
</td>
</tr>
<tr>
<td>
When a user clicks on the lock icon, they can view details on who locked the file. If a user has permission, they can unlock the file.
`Unlock file` should still be available in the overflow menu as a redundancy for discoverability and accessibility.
</td>
<td>
If a user has permission to unlock:
If a user does not have permission to unlock:
Overflow menu item changes to "Unlock file" if an item is locked, and if the user has permission to unlock the file:
</td>
</tr>
</table>
### Design file
:art: [Figma - locked files](https://www.figma.com/file/eq2nf3B8MhB9xKrC0VzbPf/Repository?type=design&node-id=2445%3A221915&mode=design&t=2QM9DkbQpYYKb2JL-1)
epic