Change the snip layout to make it less cluttered

src/Controller/SnipController.php

@@ -167,6 +167,6 @@ class SnipController extends AbstractController
             $this->addFlash('success', sprintf('Snip "%s" unarchived', $snip));
         }
 
-        return $this->redirectToRoute('snip_single', ['snip' => $snip->getId()]);
+        return $this->redirectToRoute('snip_edit', ['snip' => $snip->getId()]);
     }
 }

templates/snip/base.html.twig

@@ -0,0 +1,74 @@
+{% extends 'base/one.column.html.twig' %}
+
+{% block body %}
+    {% if app.user and app.user is same as(snip.createdBy) %}
+        <a href="{{ path('snip_index') }}" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i> Index
+        </a>
+    {% else %}
+        <a href="{{ path('snip_public') }}" class="btn btn-primary">
+            <i class="fa fa-arrow-left"></i> Index
+        </a>
+    {% endif %}
+    {% block buttons %}{% endblock %}
+
+    <br><br>
+    <div class="card" style="width: 100%;">
+        <div class="card-header d-flex justify-content-between">
+            <ul class="nav nav-tabs card-header-tabs">
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'single' %}active{% endif %}"
+                       href="{{ path('snip_single', {'snip': snip.id}) }}">View</a>
+                </li>
+                {% if is_granted('edit', snip) %}
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'edit' %}active{% endif %}"
+                       href="{{ path('snip_edit', {'snip': snip.id}) }}">Edit</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link {% if active == 'versions' %}active{% endif %}"
+                       href="{{ path('version_index', {'snip': snip.id}) }}">Versions</a>
+                </li>
+                {% endif %}
+            </ul>
+            <span>
+                <span class="badge bg-secondary">
+                    <i class="fa fa-hashtag"></i> {{ snip.id }}
+                </span>
+                {% for tag in snip.tags %}
+                    <span class="badge bg-secondary">{{ tag }}</span>
+                {% endfor %}
+                {{ include('user/badge.html.twig', {user: snip.createdBy}) }}
+                {{ include('snip/badge.html.twig', {snip: snip}) }}
+            </span>
+        </div>
+        <div class="card-body">
+            {% block cardbody %}{% endblock %}
+        </div>
+        <div class="card-footer">
+            <p class="card-text text-muted">
+                Current version: {{ snip.activeVersion.id }}
+                {% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
+                Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
+            </p>
+        </div>
+    </div>
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <script>
+        const codeBlocks = document.querySelectorAll('code.hljs');
+
+        codeBlocks.forEach((block) => {
+            hljs.highlightElement(block);
+        });
+    </script>
+{% endblock %}

templates/snip/edit.html.twig

@@ -1,21 +1,27 @@
-{% extends 'base/one.column.html.twig' %}
+{% extends 'snip/base.html.twig' %}
 
 {% if snip.id %}
-    {% set title = 'Edit Snip ' ~ snip %}
+    {% set title %}{{ snip }} - Edit{% endset %}
 {% else %}
     {% set title = 'Create Snip' %}
 {% endif %}
+{% set active = 'edit' %}
 
-{% block body %}
-    {% if snip.id %}
-        <a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
-            <i class="fa fa-arrow-left"></i>
-            Back
+{% block buttons %}
+    {% if is_granted('edit', snip) %}
+        <a href="{{ path('snip_archive', {snip: snip.id}) }}" class="btn btn-secondary">
+            {% if snip.archived %}
+                <i class="fa fa-undo"></i> Unarchive
+            {% else %}
+                <i class="fa fa-archive"></i> Archive
+            {% endif %}
+        </a>
+        <a href="{{ path('snip_delete', {snip: snip.id}) }}" class="btn btn-danger">
+            <i class="fa fa-trash"></i> Delete
         </a>
     {% endif %}
-    <a href="{{ path('snip_index') }}" class="btn btn-info">
-        <i class="fa fa-list"></i>
-        Index
-    </a><br><br>
+{% endblock %}
+
+{% block cardbody %}
     {{ form(form) }}
 {% endblock %}

templates/snip/single.html.twig

@@ -1,63 +1,16 @@
-{% extends 'base/one.column.html.twig' %}
+{% extends 'snip/base.html.twig' %}
 
-{% set title %}Snip {{ snip }}{% endset %}
+{% set title %}{{ snip }} - View{% endset %}
+{% set active = 'single' %}
 
-{% block body %}
-    {% if app.user %}
-        <a href="{{ path('snip_index') }}" class="btn btn-primary">
-            <i class="fa fa-arrow-left"></i> Back
-        </a>
-    {% else %}
-        <a href="{{ path('snip_public') }}" class="btn btn-primary">
-            <i class="fa fa-arrow-left"></i> Index
-        </a>
-    {% endif %}
-    {% if is_granted('edit', snip) %}
-        <a class="btn btn-info" href="{{ path('version_index', {snip: snip.id}) }}">
-            <i class="fa fa-history" aria-hidden="true"></i> Versions
-        </a>
-        <a class="btn btn-warning" href="{{ path('snip_edit', {snip: snip.id}) }}">
-            <i class="fa fa-pencil" aria-hidden="true"></i> Edit
-        </a>
-        <a href="{{ path('snip_archive', {snip: snip.id}) }}" class="btn btn-secondary">
-            {% if snip.archived %}
-                <i class="fa fa-undo"></i> Unarchive
-            {% else %}
-                <i class="fa fa-archive"></i> Archive
-            {% endif %}
-        </a>
-        <a href="{{ path('snip_delete', {snip: snip.id}) }}" class="btn btn-danger">
-            <i class="fa fa-trash"></i> Delete
-        </a>
-    {% endif %}
-    <a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-primary">
+{% block buttons %}
+    <a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-info">
         <i class="fa fa-eye"></i> Raw
     </a>
-    <br><br>
-    <div class="card" style="width: 100%;">
-        <h4 class="card-header d-flex justify-content-between">
-            <span>
-                {{ snip }} <small class="text-muted">#{{ snip.id }}</small>
-            </span>
-            <span>
-                {% for tag in snip.tags %}
-                    <span class="badge bg-secondary">{{ tag }}</span>
-                {% endfor %}
-                {{ include('user/badge.html.twig', {user: snip.createdBy}) }}
-                {{ include('snip/badge.html.twig', {snip: snip}) }}
-            </span>
-        </h4>
-        <div class="card-body">
-            {{ content|raw }}
-        </div>
-        <div class="card-footer">
-            <p class="card-text text-muted">
-                Current version: {{ snip.activeVersion.id }}
-                {% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
-                Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
-            </p>
-        </div>
-    </div>
+{% endblock %}
+
+{% block cardbody %}
+    {{ content|raw }}
 {% endblock %}
 
 {% block css %}

templates/user/badge.html.twig

@@ -1 +1,3 @@
-<span class="badge {% if user == app.user %}bg-success{% else %}bg-secondary{% endif %}">{{ user }}</span>
+<span class="badge {% if user == app.user %}bg-success{% else %}bg-secondary{% endif %}">
+    <i class="fa fa-user"></i> {{ user }}
+</span>

templates/version/index.html.twig

@@ -1,18 +1,18 @@
-{% extends 'base/one.column.html.twig' %}
+{% extends 'snip/base.html.twig' %}
 
-{% set title = 'Snip ' ~ snip %}
+{% set title %}{{ snip }} - Versions{% endset %}
+{% set active = 'versions' %}
 
-{% block body %}
-    <a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
-        <i class="fa fa-arrow-left"></i> Back
-    </a>
+{% block buttons %}
     <a href="{{ path('version_set', {version: snip.latestVersion.id, snip: snip.id}) }}" class="btn btn-warning">
         <i class="fa fa-refresh"></i> Latest
     </a>
     <a href="{{ path('content_compare', {to: snip.activeVersion.id}) }}" class="btn btn-info">
         <i class="fa fa-left-right"></i> Compare
     </a>
-    <br><br>
+{% endblock %}
+
+{% block cardbody %}
     <div class="list-group">
         {% for version in snip.snipContents|reverse %}
             <a class="list-group-item {% if version.id == snip.activeVersion.id %}list-group-item-success{% endif %} d-flex justify-content-between"