Use chevrons not slashes to separate folders

It looks weird to have two different visual treatments for showing a
navigable hierarchy.

I reckon losing the slash won’t make things less folder like – Windows
for example uses chevrons as foler separators.

app/assets/stylesheets/components/message.scss

@@ -1,3 +1,29 @@
+@mixin separator {
+  display: inline-block;
+  vertical-align: top;
+  width: 20px;
+  height: $gutter;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -5px;
+    bottom: 1px;
+    right: 7px;
+    width: 9px;
+    height: 9px;
+    margin: auto 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border: solid;
+    border-width: 2px 2px 0 0;
+    border-color: $secondary-text-colour;
+  }
+}
+
 .message {
 
   &-name {
@@ -28,11 +54,7 @@
     }
 
     &-separator {
-      display: inline-block;
-      vertical-align: top;
-      color: $secondary-text-colour;
-      padding: 0 4px 0 5px;
-      font-weight: normal;
+      @include separator;
     }
 
   }
@@ -235,13 +257,7 @@
   }
 
   &-separator {
-
-    display: inline-block;
-    vertical-align: top;
-    color: $secondary-text-colour;
-    padding: 0 4px 0 5px;
-    font-weight: normal;
-
+    @include separator;
   }
 
   &-manage-link {

app/models/service.py

@@ -452,7 +452,10 @@ class Service(JSONModel):
                     "users_with_permission": folder["users_with_permission"]
                 }
                 while folder_attrs["parent_id"] is not None:
-                    folder_attrs["name"] = parent["name"] + " / " + folder_attrs["name"]
+                    folder_attrs["name"] = [
+                        parent["name"],
+                        folder_attrs["name"],
+                    ]
                     if parent["parent_id"] is None:
                         folder_attrs["parent_id"] = None
                     else:

app/templates/components/folder-path.html

@@ -79,5 +79,5 @@
 
 
 {% macro folder_path_separator() %}
-  <span class="folder-heading-separator">/</span>
+  <span class="folder-heading-separator"></span>
 {% endmacro %}

app/templates/views/templates/_template_list.html

@@ -1,6 +1,17 @@
 {% from "components/checkbox.html" import unlabelled_checkbox %}
 {% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
 
+{% macro format_item_name(name) -%}
+  {%- if name is string -%}
+    {{- name -}}
+  {%- else -%}
+    {%- for part in name -%}
+      {{- format_item_name(part) -}}
+      {%- if not loop.last %} <span class="message-name-separator"></span> {% endif -%}
+    {%- endfor -%}
+  {% endif %}
+{%- endmacro %}
+
 {% if template_list.template_folder_id and not template_list.templates_to_show %}
   <p class="template-list-empty">
     {% if template_list.folder_is_empty %}
@@ -24,16 +35,16 @@
         <h2 class="message-name">
           {% for ancestor in item.ancestors %}
             <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="template-list-folder">
-              {{ ancestor.name }}
-            </a> <span class="message-name-separator">/</span>
+              {{- format_item_name(ancestor.name) -}}
+            </a> <span class="message-name-separator"></span>
           {% endfor %}
           {% if item.is_folder %}
             <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="template-list-folder">
-              <span class="live-search-relevant">{{ item.name }}</span>
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% else %}
             <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="template-list-template">
-              <span class="live-search-relevant">{{ item.name }}</span>
+              <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% endif %}
         </h2>

app/templates/views/templates/copy.html

@@ -30,7 +30,7 @@
                   <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="template-list-folder">
                 {% endif %}
                   {{ ancestor.name }}
-                </a> <span class="message-name-separator">/</span>
+                </a> <span class="message-name-separator"></span>
               {% endfor %}
               {% if item.is_service %}
                 <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="template-list-folder">