From 02f3582e578a30a2fb43900c02ab5a1dfc20106f Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 14:17:13 +0200
Subject: [PATCH 1/8] Added fallback loading animation for when
 ResourceExplorer is loading

---
 .../components/explorer/FallbackExplorer.vue  | 48 +++++++++++++++++++
 .../components/explorer/ResourceExplorer.vue  | 13 +++++
 loama/src/views/HomeView.vue                  |  9 ++--
 3 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 loama/src/components/explorer/FallbackExplorer.vue
 create mode 100644 loama/src/components/explorer/ResourceExplorer.vue

diff --git a/loama/src/components/explorer/FallbackExplorer.vue b/loama/src/components/explorer/FallbackExplorer.vue
new file mode 100644
index 0000000..46da54a
--- /dev/null
+++ b/loama/src/components/explorer/FallbackExplorer.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <span></span>
+        <p>
+            <slot></slot>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+div {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: var(--off-white);
+    height: calc(100vh - calc(var(--base-unit)* 14));
+}
+
+span {
+    display: block;
+    width: 60px;
+    aspect-ratio: 1;
+    --gradient: conic-gradient(from -90deg at 10px 10px, var(--solid-purple) 90deg, #0000 0);
+    background: var(--gradient), var(--gradient), var(--gradient);
+    background-size: 50% 50%;
+    animation: l16 1s infinite;
+}
+
+@keyframes l16 {
+    0% {
+        background-position: 0 0, 10px 10px, 20px 20px
+    }
+
+    50% {
+        background-position: 0 20px, 10px 10px, 20px 0
+    }
+
+    100% {
+        background-position: 20px 20px, 10px 10px, 0 0
+    }
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
new file mode 100644
index 0000000..a8bac40
--- /dev/null
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -0,0 +1,13 @@
+<template>
+   <p>Test</p>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/store";
+import type { Session } from "@inrupt/solid-client-authn-browser";
+import { listPods, getOrCreateIndex } from "loama-controller";
+import { ref } from "vue";
+
+const pods = await listPods(store.session as Session);
+const indexFile = ref(await getOrCreateIndex(store.session as Session, pods[0])); // .then((index) => addPermissions(store.session, index, ["example.com"], true, [Permission.Read]))
+</script>
\ No newline at end of file
diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue
index 6015961..d2c8827 100644
--- a/loama/src/views/HomeView.vue
+++ b/loama/src/views/HomeView.vue
@@ -5,12 +5,10 @@
     </HeaderBase>
   </Suspense>
   <main>
-    <hr />
     <Suspense>
-      <PodList />
-
+      <ResourceExplorer />
       <template #fallback>
-        Loading pods...
+              <FallbackExplorer>Loading resource explorer...</FallbackExplorer>
       </template>
     </Suspense>
   </main>
@@ -19,5 +17,6 @@
 <script setup lang="ts">
 import HeaderTab from "../components/header/HeaderTab.vue";
 import HeaderBase from '../components/header/HeaderBase.vue'
-import PodList from '../components/PodList.vue'
+import ResourceExplorer from '../components/explorer/ResourceExplorer.vue'
+import FallbackExplorer from '../components/explorer/FallbackExplorer.vue'
 </script>

From 5411b59144312ff20eeb72ae21d6265b53f5fd8e Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 15:11:09 +0200
Subject: [PATCH 2/8] Able to display the resources on the top-level of pod

---
 .../components/explorer/ResourceExplorer.vue  | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index a8bac40..80a9833 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -1,13 +1,54 @@
 <template>
-   <p>Test</p>
+   <div v-for="thing in resource" :key="thing.url">
+        <component :is="thing.icon" :size="40" />
+        <span>{{ thing.name }}</span>
+   </div>
 </template>
 
 <script setup lang="ts">
 import { store } from "@/store";
 import type { Session } from "@inrupt/solid-client-authn-browser";
-import { listPods, getOrCreateIndex } from "loama-controller";
+import { listPods, getPod } from "loama-controller";
 import { ref } from "vue";
+import { PhFolder, PhFile } from "@phosphor-icons/vue";
 
-const pods = await listPods(store.session as Session);
-const indexFile = ref(await getOrCreateIndex(store.session as Session, pods[0])); // .then((index) => addPermissions(store.session, index, ["example.com"], true, [Permission.Read]))
-</script>
\ No newline at end of file
+const resource = ref(await getTopLevelThings());
+
+/**
+ * TODO: This function causes the icons to be re-active, so we'll need to extract the format function to a separate function
+ */
+async function getTopLevelThings(){
+    const content = (await getPod(store.session as Session, store.usedPod || (await listPods(store.session as Session))[0])).things
+        .filter(thing => thing.url !== store.usedPod)
+        .filter(thing => {
+            const depth = thing.url.replace(store.usedPod, '').split('/');
+            return depth.length <= 2;
+        })
+    return content
+        .map(thing => {
+            const uri = thing.url.replace(store.usedPod, '');
+            const depth = uri.split('/').length;
+            console.log(thing)
+            return {
+                icon: (depth === 2) ? PhFolder : PhFile,
+                name: uri.replace('/', ''),
+                ...thing
+            }
+        })
+}
+</script>
+
+<style scoped>
+    div {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: var(--base-unit);
+    }
+    span {
+        font-size: calc(var(--base-unit)*3);
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+    }
+</style>
\ No newline at end of file

From 910cd752526198ed4dffd0e82b41230cb3801264 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 15:33:58 +0200
Subject: [PATCH 3/8] Moved resource entry to seperate component

---
 .../src/components/explorer/ExplorerEntry.vue | 36 +++++++++++++++++++
 .../components/explorer/ResourceExplorer.vue  | 19 ++++------
 2 files changed, 43 insertions(+), 12 deletions(-)
 create mode 100644 loama/src/components/explorer/ExplorerEntry.vue

diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
new file mode 100644
index 0000000..04a0146
--- /dev/null
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -0,0 +1,36 @@
+<template>
+    <button>
+        <component :is="icon" :size="40" />
+        <span><slot></slot></span>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+defineProps<{
+    icon: object,
+    authProtected: boolean
+}>()
+</script>
+
+<style lang="css" scoped>
+    button {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: var(--base-unit);
+        background-color: #0000;
+        border: none;
+        gap: var(--base-unit);
+        width: 100%;
+    }
+
+    span {
+        font-size: calc(var(--base-unit)*3);
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        flex-grow: 1;
+        text-align: start;
+    }
+</style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index 80a9833..ab8836b 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -1,8 +1,7 @@
 <template>
-   <div v-for="thing in resource" :key="thing.url">
-        <component :is="thing.icon" :size="40" />
-        <span>{{ thing.name }}</span>
-   </div>
+    <div>
+        <ExplorerEntry v-for="thing in resource" :key="thing.url" :icon="thing.icon" :authProtected="false">{{thing.name}}</ExplorerEntry>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -11,6 +10,7 @@ import type { Session } from "@inrupt/solid-client-authn-browser";
 import { listPods, getPod } from "loama-controller";
 import { ref } from "vue";
 import { PhFolder, PhFile } from "@phosphor-icons/vue";
+import ExplorerEntry from "./ExplorerEntry.vue";
 
 const resource = ref(await getTopLevelThings());
 
@@ -28,7 +28,7 @@ async function getTopLevelThings(){
         .map(thing => {
             const uri = thing.url.replace(store.usedPod, '');
             const depth = uri.split('/').length;
-            console.log(thing)
+            console.log(thing.accessModes);
             return {
                 icon: (depth === 2) ? PhFolder : PhFile,
                 name: uri.replace('/', ''),
@@ -41,14 +41,9 @@ async function getTopLevelThings(){
 <style scoped>
     div {
         display: flex;
-        flex-flow: row nowrap;
+        flex-flow: column nowrap;
         align-items: center;
         gap: var(--base-unit);
-    }
-    span {
-        font-size: calc(var(--base-unit)*3);
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
+        margin: calc(var(--base-unit)*2);
     }
 </style>
\ No newline at end of file

From b6a9b8a22e5b190a1948b259ce95f2960837a944 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Thu, 18 Jul 2024 09:48:43 +0200
Subject: [PATCH 4/8] Extracted Thing type for controller for use in LOAMA

---
 controller/src/pod.ts                            | 10 ++--------
 controller/src/types.ts                          |  6 ++++++
 loama/src/components/explorer/ExplorerEntry.vue  |  1 +
 .../src/components/explorer/ResourceExplorer.vue | 16 +++++++++++-----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/controller/src/pod.ts b/controller/src/pod.ts
index 28f0fca..599d500 100644
--- a/controller/src/pod.ts
+++ b/controller/src/pod.ts
@@ -10,7 +10,7 @@ import {
   getPublicAccess,
 } from "@inrupt/solid-client/universal";
 import { Session } from "@inrupt/solid-client-authn-browser";
-import { Permission, url } from "./types";
+import { FormattedThing, Permission, url } from "./types";
 
 /**
  * List the pods that are from the currently authenticated user.
@@ -36,13 +36,7 @@ export async function getPod(session: Session, url: url) {
 async function listThings(
   session: Session,
   url: url
-): Promise<
-  {
-    url: url;
-    properties: url[];
-    accessModes: Record<url, Permission[]>;
-  }[]
-> {
+): Promise<FormattedThing[]> {
   const dataset = await getSolidDataset(url, { fetch: session.fetch });
   return Promise.all(
     getThingAll(dataset).map(async (t) => ({
diff --git a/controller/src/types.ts b/controller/src/types.ts
index 6d1d018..09668fe 100644
--- a/controller/src/types.ts
+++ b/controller/src/types.ts
@@ -38,3 +38,9 @@ export enum Type {
 }
 
 export type url = string;
+
+export interface FormattedThing {
+  url: url;
+  properties: url[];
+  accessModes: Record<url, Permission[]>;
+}[]
diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
index 04a0146..e4c1442 100644
--- a/loama/src/components/explorer/ExplorerEntry.vue
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -23,6 +23,7 @@ defineProps<{
         border: none;
         gap: var(--base-unit);
         width: 100%;
+        color: var(--off-black);
     }
 
     span {
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index ab8836b..91db39c 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <ExplorerEntry v-for="thing in resource" :key="thing.url" :icon="thing.icon" :authProtected="false">{{thing.name}}</ExplorerEntry>
+        <ExplorerEntry v-for="thing in getViewFormattedThings(data)" :key="thing.url" :icon="thing.icon" :authProtected="false">{{thing.name}}</ExplorerEntry>
     </div>
 </template>
 
@@ -11,21 +11,27 @@ import { listPods, getPod } from "loama-controller";
 import { ref } from "vue";
 import { PhFolder, PhFile } from "@phosphor-icons/vue";
 import ExplorerEntry from "./ExplorerEntry.vue";
+import type { FormattedThing } from "loama-controller/dist/types";
 
-const resource = ref(await getTopLevelThings());
+const data = ref(await getTopLevelThings());
 
 /**
  * TODO: This function causes the icons to be re-active, so we'll need to extract the format function to a separate function
  */
 async function getTopLevelThings(){
-    const content = (await getPod(store.session as Session, store.usedPod || (await listPods(store.session as Session))[0])).things
+    const podUrl = (store.usedPod)
+        ? store.usedPod
+        : (await listPods(store.session as Session))[0]
+    return (await getPod(store.session as Session, podUrl)).things
         .filter(thing => thing.url !== store.usedPod)
         .filter(thing => {
             const depth = thing.url.replace(store.usedPod, '').split('/');
             return depth.length <= 2;
         })
-    return content
-        .map(thing => {
+}
+
+function getViewFormattedThings(data: FormattedThing[]) {
+    return data.map(thing => {
             const uri = thing.url.replace(store.usedPod, '');
             const depth = uri.split('/').length;
             console.log(thing.accessModes);

From 2bce10c2c71a972d378ac4f3f03aa8b3c24256af Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Thu, 18 Jul 2024 10:02:12 +0200
Subject: [PATCH 5/8] Reworked controller to return permissions as large object

---
 controller/src/pod.ts                              | 13 ++++++++-----
 loama/src/components/explorer/ResourceExplorer.vue |  6 ++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/controller/src/pod.ts b/controller/src/pod.ts
index 599d500..d241fe4 100644
--- a/controller/src/pod.ts
+++ b/controller/src/pod.ts
@@ -73,6 +73,9 @@ async function getAccessModes(
 function accessModesToPermissions(
   record: Record<url, AccessModes>
 ): Record<url, Permission[]> {
+  const result: { 
+    [agent: string]: Permission[]
+  } = {};
   // List -> Set -> List is done to filter out possible duplicate Permission.Control's
   const mapToPermission = (accessModes: [string, boolean][]) => [
     ...new Set(
@@ -96,9 +99,9 @@ function accessModesToPermissions(
     ),
   ];
 
-  return Object.assign(
-    Object.entries(record).map(([agent, accessModes]) => ({
-      [agent]: mapToPermission(Object.entries(accessModes)),
-    }))
-  );
+  Object.entries(record).forEach(([agent, accessModes]) => {
+    result[agent] = mapToPermission(Object.entries(accessModes));
+  });
+
+  return result;
 }
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index 91db39c..449ba99 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -15,9 +15,6 @@ import type { FormattedThing } from "loama-controller/dist/types";
 
 const data = ref(await getTopLevelThings());
 
-/**
- * TODO: This function causes the icons to be re-active, so we'll need to extract the format function to a separate function
- */
 async function getTopLevelThings(){
     const podUrl = (store.usedPod)
         ? store.usedPod
@@ -31,10 +28,11 @@ async function getTopLevelThings(){
 }
 
 function getViewFormattedThings(data: FormattedThing[]) {
+    console.log(data);
     return data.map(thing => {
             const uri = thing.url.replace(store.usedPod, '');
             const depth = uri.split('/').length;
-            console.log(thing.accessModes);
+            console.log(thing.accessModes.public);
             return {
                 icon: (depth === 2) ? PhFolder : PhFile,
                 name: uri.replace('/', ''),

From c641cc26e26fcbe95be87519e4bdb73f43314a0c Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Thu, 18 Jul 2024 11:47:56 +0200
Subject: [PATCH 6/8] SOO: Changing ownership to Fredriech

---
 loama/src/components/explorer/ResourceExplorer.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index 449ba99..4fa67e2 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -9,7 +9,7 @@ import { store } from "@/store";
 import type { Session } from "@inrupt/solid-client-authn-browser";
 import { listPods, getPod } from "loama-controller";
 import { ref } from "vue";
-import { PhFolder, PhFile } from "@phosphor-icons/vue";
+import { PhFolder, PhFile, PhLock, PhLockOpen } from "@phosphor-icons/vue";
 import ExplorerEntry from "./ExplorerEntry.vue";
 import type { FormattedThing } from "loama-controller/dist/types";
 
@@ -32,10 +32,14 @@ function getViewFormattedThings(data: FormattedThing[]) {
     return data.map(thing => {
             const uri = thing.url.replace(store.usedPod, '');
             const depth = uri.split('/').length;
-            console.log(thing.accessModes.public);
+            const publicAccess = thing.accessModes.public.length > 0;
             return {
                 icon: (depth === 2) ? PhFolder : PhFile,
                 name: uri.replace('/', ''),
+                public: {
+                    access: publicAccess,
+                    icon: (publicAccess) ? PhLockOpen : PhLock
+                },
                 ...thing
             }
         })

From f5e730b4e2885fe5a605bc72e336de3e9bc6aa6e Mon Sep 17 00:00:00 2001
From: Zelzahn <friedrich@friedrichvdb.be>
Date: Mon, 22 Jul 2024 14:02:08 +0200
Subject: [PATCH 7/8] File tree

---
 controller/src/types.ts                       |   3 +-
 loama/src/assets/vault.svg                    |  75 ++++++++++
 loama/src/components/LoginForm.vue            |   2 +-
 .../explorer/ExplorerBreadcrumbs.vue          |  26 ++++
 .../src/components/explorer/ExplorerEntry.vue |  81 +++++++----
 .../components/explorer/ResourceExplorer.vue  | 137 +++++++++++++-----
 loama/src/components/header/HeaderBase.vue    |   1 +
 loama/src/router/index.ts                     |   3 +-
 loama/src/store.ts                            |  13 +-
 loama/src/views/HomeView.vue                  |   2 +-
 loama/src/views/LoginView.vue                 |  19 +--
 11 files changed, 277 insertions(+), 85 deletions(-)
 create mode 100644 loama/src/assets/vault.svg
 create mode 100644 loama/src/components/explorer/ExplorerBreadcrumbs.vue

diff --git a/controller/src/types.ts b/controller/src/types.ts
index a3d1b36..acfb5d0 100644
--- a/controller/src/types.ts
+++ b/controller/src/types.ts
@@ -43,7 +43,8 @@ export interface FormattedThing {
   url: url;
   properties: url[];
   accessModes: Record<url, Permission[]>;
-}[]
+}
+[];
 
 export interface Post {
   text: string;
diff --git a/loama/src/assets/vault.svg b/loama/src/assets/vault.svg
new file mode 100644
index 0000000..0f0efc5
--- /dev/null
+++ b/loama/src/assets/vault.svg
@@ -0,0 +1,75 @@
+<svg width="240" height="112" viewBox="0 0 240 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g opacity="0.5" clip-path="url(#clip0_166_7287)">
+    <path d="M50.8972 105.262C45.1508 101.513 40.9726 94.7725 41.8277 87.9583C47.002 93.3376 53.9098 96.7109 61.329 97.4815C64.1913 97.7682 67.4047 97.7888 69.4374 99.8269C70.7022 101.095 71.2396 102.949 71.2673 104.74C71.2949 106.533 70.8648 108.296 70.4376 110.037L70.5426 110.472C63.6883 110.218 56.6436 109.012 50.8972 105.262Z" fill="#F0F0F0"/>
+    <path d="M41.9717 87.9569C44.1213 93.2183 47.8719 97.6678 52.6908 100.673C53.7167 101.339 54.841 101.838 56.0222 102.153C57.1828 102.423 58.3942 102.376 59.5307 102.018C60.5971 101.706 61.6518 101.263 62.7754 101.215C63.351 101.2 63.9233 101.306 64.4549 101.527C64.9865 101.749 65.4654 102.08 65.8602 102.5C66.8709 103.52 67.4554 104.843 67.982 106.156C68.5667 107.615 69.151 109.139 70.3419 110.219C70.4862 110.35 70.2749 110.566 70.1308 110.436C68.0589 108.556 67.8309 105.541 66.2022 103.361C65.4423 102.343 64.3715 101.549 63.0625 101.516C61.9179 101.486 60.8299 101.942 59.7529 102.268C58.6493 102.633 57.4731 102.722 56.3272 102.528C55.1337 102.274 53.9921 101.819 52.9512 101.182C50.5849 99.7845 48.4527 98.0235 46.6328 95.9633C44.5426 93.6234 42.8676 90.9428 41.6802 88.0374C41.6068 87.8575 41.8987 87.7782 41.9717 87.9569Z" fill="#F7F7F7"/>
+    <path d="M51.0822 99.797C50.4689 100.538 49.6124 101.037 48.6657 101.204C47.7191 101.371 46.7439 101.196 45.9144 100.71C45.7469 100.611 45.8926 100.345 46.0603 100.444C46.832 100.899 47.7403 101.062 48.6216 100.904C49.5028 100.747 50.2987 100.279 50.8658 99.5857C50.9892 99.4351 51.2049 99.6473 51.0822 99.797Z" fill="#F7F7F7"/>
+    <path d="M59.0108 102.248C58.8451 100.287 57.9475 98.4613 56.4969 97.134C56.3531 97.0026 56.5643 96.7861 56.7079 96.9173C58.2149 98.3013 59.1451 100.203 59.3131 102.244C59.329 102.439 59.0266 102.441 59.0108 102.248Z" fill="#F7F7F7"/>
+    <path d="M44.923 93.4966C45.22 93.2594 45.4535 92.952 45.6025 92.6021C45.7516 92.2522 45.8115 91.8707 45.7769 91.4918C45.7585 91.2976 46.0609 91.2951 46.0791 91.488C46.1154 91.9067 46.0488 92.328 45.8849 92.715C45.7211 93.1019 45.4652 93.4429 45.1394 93.7079C45.1108 93.7355 45.0728 93.7511 45.0331 93.7516C44.9934 93.7521 44.955 93.7375 44.9257 93.7106C44.8972 93.6825 44.8809 93.6443 44.8804 93.6042C44.8799 93.5641 44.8952 93.5255 44.923 93.4966Z" fill="#F7F7F7"/>
+    <path d="M61.4292 75.4884C61.4441 75.6093 61.459 75.7303 61.4762 75.8525C61.6848 77.4774 62.0249 79.0827 62.4931 80.6525C62.5274 80.7744 62.564 80.8975 62.6017 81.0182C63.7701 84.7881 65.6273 88.3081 68.079 91.3991C69.0557 92.6283 70.1243 93.7812 71.2757 94.8479C72.866 96.3211 74.7072 97.7917 75.6896 99.6501C75.7943 99.8428 75.8869 100.042 75.967 100.246L71.0644 110.31C71.0418 110.327 71.0214 110.346 70.9987 110.363L70.8213 110.774C70.7581 110.723 70.6936 110.669 70.6304 110.618C70.5936 110.588 70.5579 110.557 70.5211 110.528C70.4969 110.507 70.4728 110.487 70.4498 110.47C70.4417 110.463 70.4337 110.456 70.4279 110.451C70.4049 110.434 70.3854 110.416 70.3647 110.4C70.0034 110.098 69.6437 109.794 69.2854 109.486C69.2831 109.485 69.2831 109.485 69.2819 109.482C66.558 107.131 64.0062 104.532 61.9296 101.627C61.8671 101.54 61.8023 101.451 61.7421 101.359C60.8133 100.045 59.9933 98.6566 59.2904 97.2085C58.908 96.4143 58.5661 95.6012 58.2658 94.7723C57.4941 92.6293 57.0639 90.378 56.9909 88.1011C56.846 83.562 58.1526 79.0271 61.1944 75.7375C61.2723 75.6534 61.3491 75.5714 61.4292 75.4884Z" fill="#F0F0F0"/>
+    <path d="M61.5457 75.5733C60.0984 81.0701 60.4176 86.8838 62.4581 92.1886C62.8771 93.3385 63.4745 94.415 64.2283 95.3785C64.9928 96.2934 65.9881 96.9865 67.1107 97.386C68.15 97.7795 69.2585 98.0615 70.1842 98.7011C70.6531 99.0355 71.0462 99.4654 71.3375 99.9626C71.6289 100.46 71.812 101.013 71.8749 101.586C72.0686 103.01 71.7398 104.418 71.3705 105.785C70.9605 107.302 70.5105 108.871 70.8119 110.451C70.8484 110.643 70.5495 110.688 70.5131 110.497C69.9888 107.747 71.6197 105.202 71.6303 102.48C71.6353 101.209 71.2579 99.9297 70.2329 99.1138C69.3366 98.4002 68.1937 98.1085 67.138 97.7192C66.0372 97.3456 65.0444 96.7078 64.2465 95.8615C63.4462 94.9394 62.8083 93.8878 62.3604 92.7515C61.3111 90.2095 60.6675 87.5181 60.4532 84.7759C60.1912 81.6476 60.4657 78.4975 61.2646 75.4619C61.3141 75.274 61.5949 75.3867 61.5457 75.5733Z" fill="#F7F7F7"/>
+    <path d="M61.7007 90.5193C60.7653 90.7413 59.7817 90.6231 58.9253 90.1859C58.0689 89.7487 57.3957 89.0209 57.0257 88.1325C56.9515 87.9525 57.2274 87.8285 57.3017 88.0088C57.6447 88.8367 58.2719 89.5145 59.0702 89.9201C59.8684 90.3256 60.7852 90.432 61.6549 90.2201C61.844 90.1743 61.8887 90.4738 61.7007 90.5193Z" fill="#F7F7F7"/>
+    <path d="M66.5576 97.2559C67.6041 95.5906 67.9853 93.5916 67.6252 91.6573C67.5894 91.4657 67.8882 91.4201 67.924 91.6115C68.295 93.625 67.8941 95.7046 66.8012 97.4351C66.6969 97.6 66.4538 97.4199 66.5576 97.2559Z" fill="#F7F7F7"/>
+    <path d="M60.5712 81.7757C60.9509 81.7654 61.3222 81.6607 61.6516 81.4712C61.981 81.2816 62.2582 81.0131 62.4584 80.6898C62.5605 80.5237 62.8035 80.7039 62.702 80.869C62.4792 81.2252 62.1727 81.5213 61.8092 81.7316C61.4458 81.9418 61.0364 82.0597 60.6169 82.075C60.5775 82.0797 60.5378 82.0693 60.5058 82.0457C60.4737 82.0222 60.4519 81.9873 60.4446 81.9483C60.4388 81.9086 60.4488 81.8682 60.4725 81.8359C60.4962 81.8036 60.5316 81.782 60.5712 81.7757Z" fill="#F7F7F7"/>
+    <path d="M226.264 105.262C232.011 101.513 236.189 94.7725 235.334 87.9583C230.159 93.3376 223.252 96.7109 215.832 97.4815C212.97 97.7682 209.757 97.7888 207.724 99.8269C206.459 101.095 205.922 102.949 205.894 104.74C205.867 106.533 206.297 108.296 206.724 110.037L206.619 110.472C213.473 110.218 220.518 109.012 226.264 105.262Z" fill="#F0F0F0"/>
+    <path d="M235.19 87.9569C233.04 93.2183 229.29 97.6678 224.471 100.673C223.445 101.339 222.32 101.838 221.139 102.153C219.979 102.423 218.767 102.376 217.631 102.018C216.564 101.706 215.51 101.263 214.386 101.215C213.81 101.2 213.238 101.306 212.706 101.527C212.175 101.749 211.696 102.08 211.301 102.5C210.291 103.52 209.706 104.843 209.179 106.156C208.595 107.615 208.01 109.139 206.82 110.219C206.675 110.35 206.887 110.566 207.031 110.436C209.103 108.556 209.331 105.541 210.959 103.361C211.719 102.343 212.79 101.549 214.099 101.516C215.244 101.486 216.332 101.942 217.409 102.268C218.512 102.633 219.688 102.722 220.834 102.528C222.028 102.274 223.169 101.819 224.21 101.182C226.577 99.7845 228.709 98.0235 230.529 95.9633C232.619 93.6234 234.294 90.9428 235.481 88.0374C235.555 87.8575 235.263 87.7782 235.19 87.9569Z" fill="#F7F7F7"/>
+    <path d="M226.079 99.797C226.693 100.538 227.549 101.037 228.496 101.204C229.442 101.371 230.418 101.196 231.247 100.71C231.415 100.611 231.269 100.345 231.101 100.444C230.33 100.899 229.421 101.062 228.54 100.904C227.659 100.747 226.863 100.279 226.296 99.5857C226.172 99.4351 225.957 99.6473 226.079 99.797Z" fill="#F7F7F7"/>
+    <path d="M218.151 102.248C218.316 100.287 219.214 98.4613 220.664 97.134C220.808 97.0026 220.597 96.7861 220.453 96.9173C218.947 98.3013 218.016 100.203 217.848 102.244C217.832 102.439 218.135 102.441 218.151 102.248Z" fill="#F7F7F7"/>
+    <path d="M232.239 93.4966C231.942 93.2594 231.708 92.952 231.559 92.6021C231.41 92.2522 231.35 91.8707 231.385 91.4918C231.403 91.2976 231.101 91.2951 231.082 91.488C231.046 91.9067 231.113 92.328 231.277 92.715C231.44 93.1019 231.696 93.4429 232.022 93.7079C232.051 93.7355 232.089 93.7511 232.128 93.7516C232.168 93.7521 232.207 93.7375 232.236 93.7106C232.264 93.6825 232.281 93.6443 232.281 93.6042C232.282 93.5641 232.266 93.5255 232.239 93.4966Z" fill="#F7F7F7"/>
+    <path d="M215.732 75.4884C215.717 75.6093 215.702 75.7303 215.685 75.8525C215.477 77.4774 215.137 79.0827 214.668 80.6525C214.634 80.7744 214.598 80.8975 214.56 81.0182C213.391 84.7881 211.534 88.3081 209.083 91.3991C208.106 92.6283 207.037 93.7812 205.886 94.8479C204.296 96.3211 202.454 97.7917 201.472 99.6501C201.367 99.8428 201.275 100.042 201.194 100.246L206.097 110.31C206.12 110.327 206.14 110.346 206.163 110.363L206.34 110.774C206.403 110.723 206.468 110.669 206.531 110.618C206.568 110.588 206.604 110.557 206.64 110.528C206.665 110.507 206.689 110.487 206.712 110.47C206.72 110.463 206.728 110.456 206.734 110.451C206.757 110.434 206.776 110.416 206.797 110.4C207.158 110.098 207.518 109.794 207.876 109.486C207.878 109.485 207.878 109.485 207.88 109.482C210.603 107.131 213.155 104.532 215.232 101.627C215.294 101.54 215.359 101.451 215.419 101.359C216.348 100.045 217.168 98.6566 217.871 97.2085C218.253 96.4142 218.595 95.6012 218.896 94.7723C219.667 92.6293 220.098 90.378 220.171 88.1011C220.315 83.562 219.009 79.0271 215.967 75.7375C215.889 75.6534 215.812 75.5714 215.732 75.4884Z" fill="#F0F0F0"/>
+    <path d="M215.616 75.5733C217.063 81.0701 216.744 86.8838 214.703 92.1886C214.284 93.3385 213.687 94.415 212.933 95.3785C212.169 96.2934 211.173 96.9865 210.051 97.386C209.011 97.7795 207.903 98.0615 206.977 98.7011C206.508 99.0355 206.115 99.4654 205.824 99.9626C205.532 100.46 205.349 101.013 205.287 101.586C205.093 103.01 205.422 104.418 205.791 105.785C206.201 107.302 206.651 108.871 206.35 110.451C206.313 110.643 206.612 110.688 206.648 110.497C207.173 107.747 205.542 105.202 205.531 102.48C205.526 101.209 205.904 99.9297 206.929 99.1138C207.825 98.4002 208.968 98.1085 210.023 97.7192C211.124 97.3456 212.117 96.7078 212.915 95.8615C213.715 94.9394 214.353 93.8878 214.801 92.7515C215.85 90.2095 216.494 87.5181 216.708 84.7759C216.97 81.6476 216.696 78.4975 215.897 75.4619C215.847 75.274 215.566 75.3867 215.616 75.5733Z" fill="#F7F7F7"/>
+    <path d="M215.461 90.5193C216.396 90.7413 217.38 90.6231 218.236 90.1859C219.092 89.7487 219.766 89.0209 220.136 88.1325C220.21 87.9525 219.934 87.8285 219.86 88.0088C219.517 88.8367 218.89 89.5145 218.091 89.9201C217.293 90.3256 216.376 90.432 215.506 90.2201C215.317 90.1743 215.273 90.4738 215.461 90.5193Z" fill="#F7F7F7"/>
+    <path d="M210.604 97.2559C209.557 95.5906 209.176 93.5916 209.536 91.6573C209.572 91.4657 209.273 91.4201 209.237 91.6115C208.866 93.625 209.267 95.7046 210.36 97.4351C210.464 97.6 210.708 97.4199 210.604 97.2559Z" fill="#F7F7F7"/>
+    <path d="M216.59 81.7757C216.211 81.7654 215.839 81.6607 215.51 81.4712C215.18 81.2816 214.903 81.0131 214.703 80.6898C214.601 80.5237 214.358 80.7039 214.459 80.869C214.682 81.2252 214.989 81.5213 215.352 81.7316C215.716 81.9418 216.125 82.0597 216.545 82.075C216.584 82.0797 216.624 82.0693 216.656 82.0457C216.688 82.0222 216.71 81.9873 216.717 81.9483C216.723 81.9086 216.713 81.8682 216.689 81.8359C216.665 81.8036 216.63 81.782 216.59 81.7757Z" fill="#F7F7F7"/>
+    <path d="M62.2154 72.1951C61.9979 72.0641 61.8119 71.8869 61.6702 71.6761C61.5286 71.4653 61.4348 71.2259 61.3956 70.9749C61.3563 70.7239 61.3725 70.4673 61.443 70.2232C61.5135 69.9791 61.6366 69.7535 61.8036 69.5622L58.7468 64.1976L61.9455 64.4045L64.3578 69.4671C64.6602 69.7693 64.8414 70.1721 64.867 70.5991C64.8926 71.0261 64.7608 71.4477 64.4967 71.784C64.2326 72.1202 63.8545 72.3478 63.4341 72.4236C63.0136 72.4994 62.58 72.4181 62.2154 72.1951Z" fill="#FFB6B6"/>
+    <path d="M38.6845 108.766H40.8008L41.8076 100.593L38.6842 100.593L38.6845 108.766Z" fill="#FFB6B6"/>
+    <path d="M38.1448 108.074L42.3123 108.074C43.0167 108.074 43.6924 108.354 44.1904 108.853C44.6885 109.352 44.9683 110.028 44.9684 110.733V110.82L38.1449 110.82L38.1448 108.074Z" fill="#170D33"/>
+    <path d="M53.1841 108.766H55.3002L56.307 100.593L53.1836 100.593L53.1841 108.766Z" fill="#FFB6B6"/>
+    <path d="M52.6442 108.074L56.8117 108.074C57.5161 108.074 58.1918 108.354 58.6898 108.853C59.1879 109.352 59.4677 110.028 59.4678 110.733V110.82L52.6443 110.82L52.6442 108.074Z" fill="#170D33"/>
+    <path d="M58.6256 64.4282C58.6256 64.4282 59.2077 72.728 58.0613 76.9081C56.9149 81.0881 56.7102 106.366 56.7102 106.366H52.8676L49.537 71.9573L41.8589 106.488L38.1987 106.236L40.206 65.5462L58.6256 64.4282Z" fill="#170D33"/>
+    <path d="M41.7939 36.4499L44.7315 34.3035L49.654 35.3767L50.9864 38.5469L53.2824 39.6867C54.0374 40.0615 54.6901 40.6143 55.1846 41.2974C55.6791 41.9806 56.0006 42.7738 56.1213 43.6088L59.4015 66.2892L40.206 65.5462L37.8822 38.8356C37.8579 38.5566 37.8898 38.2755 37.9759 38.0091C38.062 37.7426 38.2007 37.4962 38.3836 37.2843C38.5665 37.0724 38.7901 36.8995 39.041 36.7756C39.2919 36.6518 39.565 36.5796 39.8442 36.5634L41.7939 36.4499Z" fill="#3F3D56"/>
+    <path d="M54.4971 41.4584L56.27 43.8513L63.992 67.434L60.3723 68.885L54.5764 57.8961L54.4971 41.4584Z" fill="#3F3D56"/>
+    <path d="M48.0704 33.1828C50.4382 33.1828 52.3577 31.2608 52.3577 28.8899C52.3577 26.519 50.4382 24.597 48.0704 24.597C45.7026 24.597 43.7831 26.519 43.7831 28.8899C43.7831 31.2608 45.7026 33.1828 48.0704 33.1828Z" fill="#FFB9B9"/>
+    <path opacity="0.1" d="M38.724 46.5519L45.7203 56.2954L53.5408 61.4017L38.724 46.5519Z" fill="#7C4DFF"/>
+    <path d="M45.7983 31.9934C45.5001 31.3972 45.1933 30.7482 45.3073 30.0913C45.4213 29.4343 46.1742 28.8619 46.7553 29.1876C46.9964 28.3152 48.0636 27.9334 48.9621 28.0341C49.8605 28.1348 50.6877 28.5687 51.5724 28.755C52.457 28.9413 53.5314 28.7935 54.0095 28.0253L52.8655 28.0055L54.0568 26.6219L52.6759 26.5184C53.1542 26.0015 53.0271 25.1233 52.5641 24.5926C52.101 24.062 51.3983 23.8109 50.7126 23.6521C49.3438 23.3362 47.9249 23.3035 46.543 23.5561C45.8915 23.6567 45.2637 23.8755 44.6906 24.2016C44.1508 24.5312 43.7049 24.9943 43.3955 25.5464C43.0618 26.1692 42.8814 26.8628 42.8694 27.5695C42.849 28.5162 43.0662 29.4528 43.5011 30.2935C43.9361 31.1343 44.5748 31.8523 45.3588 32.3817" fill="#170D33"/>
+    <path d="M205.428 110.93H72.3781C71.0079 110.929 69.6943 110.383 68.7254 109.413C67.7565 108.443 67.2115 107.128 67.21 105.756V5.7433C67.2115 4.37135 67.7565 3.05604 68.7254 2.08593C69.6943 1.11582 71.0079 0.570144 72.3781 0.568604H205.428C206.799 0.570168 208.112 1.11586 209.081 2.08596C210.05 3.05607 210.595 4.37137 210.596 5.7433V105.756C210.595 107.128 210.05 108.443 209.081 109.413C208.112 110.383 206.799 110.929 205.428 110.93Z" fill="#E4E4E4"/>
+    <path d="M171.942 46.4887H151.404C150.389 46.4887 149.415 46.085 148.698 45.3664C147.98 44.6477 147.577 43.673 147.577 42.6567C147.577 41.6404 147.98 40.6657 148.698 39.9471C149.415 39.2284 150.389 38.8247 151.404 38.8247H171.942C172.957 38.8247 173.931 39.2284 174.648 39.9471C175.366 40.6657 175.769 41.6404 175.769 42.6567C175.769 43.673 175.366 44.6477 174.648 45.3664C173.931 46.085 172.957 46.4887 171.942 46.4887Z" fill="#F7F7F7"/>
+    <path d="M153.955 56.9628H149.108C148.735 56.9628 148.379 56.8148 148.115 56.5513C147.852 56.2878 147.704 55.9304 147.704 55.5578C147.704 55.1851 147.852 54.8278 148.115 54.5642C148.379 54.3007 148.735 54.1527 149.108 54.1527H153.955C154.327 54.1527 154.684 54.3007 154.947 54.5642C155.211 54.8278 155.358 55.1851 155.358 55.5578C155.358 55.9304 155.211 56.2878 154.947 56.5513C154.684 56.8148 154.327 56.9628 153.955 56.9628Z" fill="#F7F7F7"/>
+    <path d="M174.111 56.9628H169.263C168.891 56.9628 168.534 56.8148 168.271 56.5513C168.008 56.2878 167.86 55.9304 167.86 55.5578C167.86 55.1851 168.008 54.8278 168.271 54.5642C168.534 54.3007 168.891 54.1527 169.263 54.1527H174.111C174.483 54.1527 174.84 54.3007 175.103 54.5642C175.366 54.8278 175.514 55.1851 175.514 55.5578C175.514 55.9304 175.366 56.2878 175.103 56.5513C174.84 56.8148 174.483 56.9628 174.111 56.9628Z" fill="#F7F7F7"/>
+    <path d="M163.905 56.9628H159.058C158.686 56.9628 158.329 56.8148 158.066 56.5513C157.803 56.2878 157.655 55.9304 157.655 55.5578C157.655 55.1851 157.803 54.8278 158.066 54.5642C158.329 54.3007 158.686 54.1527 159.058 54.1527H163.905C164.278 54.1527 164.635 54.3007 164.898 54.5642C165.161 54.8278 165.309 55.1851 165.309 55.5578C165.309 55.9304 165.161 56.2878 164.898 56.5513C164.635 56.8148 164.278 56.9628 163.905 56.9628Z" fill="#F7F7F7"/>
+    <path d="M153.955 62.3277H149.108C148.735 62.3277 148.379 62.1797 148.115 61.9162C147.852 61.6527 147.704 61.2953 147.704 60.9226C147.704 60.55 147.852 60.1926 148.115 59.9291C148.379 59.6656 148.735 59.5176 149.108 59.5176H153.955C154.327 59.5176 154.684 59.6656 154.947 59.9291C155.211 60.1926 155.358 60.55 155.358 60.9226C155.358 61.2953 155.211 61.6527 154.947 61.9162C154.684 62.1797 154.327 62.3277 153.955 62.3277Z" fill="#F7F7F7"/>
+    <path d="M174.111 62.3277H169.263C168.891 62.3277 168.534 62.1797 168.271 61.9162C168.008 61.6527 167.86 61.2953 167.86 60.9226C167.86 60.55 168.008 60.1926 168.271 59.9291C168.534 59.6656 168.891 59.5176 169.263 59.5176H174.111C174.483 59.5176 174.84 59.6656 175.103 59.9291C175.366 60.1926 175.514 60.55 175.514 60.9226C175.514 61.2953 175.366 61.6527 175.103 61.9162C174.84 62.1797 174.483 62.3277 174.111 62.3277Z" fill="#F7F7F7"/>
+    <path d="M163.905 62.3277H159.058C158.686 62.3277 158.329 62.1797 158.066 61.9162C157.803 61.6527 157.655 61.2953 157.655 60.9226C157.655 60.55 157.803 60.1926 158.066 59.9291C158.329 59.6656 158.686 59.5176 159.058 59.5176H163.905C164.278 59.5176 164.635 59.6656 164.898 59.9291C165.161 60.1926 165.309 60.55 165.309 60.9226C165.309 61.2953 165.161 61.6527 164.898 61.9162C164.635 62.1797 164.278 62.3277 163.905 62.3277Z" fill="#F7F7F7"/>
+    <path d="M153.955 67.6925H149.108C148.735 67.6925 148.379 67.5444 148.115 67.2809C147.852 67.0174 147.704 66.66 147.704 66.2874C147.704 65.9147 147.852 65.5574 148.115 65.2939C148.379 65.0304 148.735 64.8823 149.108 64.8823H153.955C154.327 64.8823 154.684 65.0304 154.947 65.2939C155.211 65.5574 155.358 65.9147 155.358 66.2874C155.358 66.66 155.211 67.0174 154.947 67.2809C154.684 67.5444 154.327 67.6925 153.955 67.6925Z" fill="#F7F7F7"/>
+    <path d="M174.111 67.6925H169.263C168.891 67.6925 168.534 67.5444 168.271 67.2809C168.008 67.0174 167.86 66.66 167.86 66.2874C167.86 65.9147 168.008 65.5574 168.271 65.2939C168.534 65.0304 168.891 64.8823 169.263 64.8823H174.111C174.483 64.8823 174.84 65.0304 175.103 65.2939C175.366 65.5574 175.514 65.9147 175.514 66.2874C175.514 66.66 175.366 67.0174 175.103 67.2809C174.84 67.5444 174.483 67.6925 174.111 67.6925Z" fill="#F7F7F7"/>
+    <path d="M163.905 67.6925H159.058C158.686 67.6925 158.329 67.5444 158.066 67.2809C157.803 67.0174 157.655 66.66 157.655 66.2874C157.655 65.9147 157.803 65.5574 158.066 65.2939C158.329 65.0304 158.686 64.8823 159.058 64.8823H163.905C164.278 64.8823 164.635 65.0304 164.898 65.2939C165.161 65.5574 165.309 65.9147 165.309 66.2874C165.309 66.66 165.161 67.0174 164.898 67.2809C164.635 67.5444 164.278 67.6925 163.905 67.6925Z" fill="#F7F7F7"/>
+    <path d="M153.955 73.0573H149.108C148.735 73.0573 148.379 72.9093 148.115 72.6458C147.852 72.3823 147.704 72.0249 147.704 71.6523C147.704 71.2796 147.852 70.9222 148.115 70.6587C148.379 70.3952 148.735 70.2472 149.108 70.2472H153.955C154.327 70.2472 154.684 70.3952 154.947 70.6587C155.211 70.9222 155.358 71.2796 155.358 71.6523C155.358 72.0249 155.211 72.3823 154.947 72.6458C154.684 72.9093 154.327 73.0573 153.955 73.0573Z" fill="#F7F7F7"/>
+    <path d="M174.111 73.0573H169.263C168.891 73.0573 168.534 72.9093 168.271 72.6458C168.008 72.3823 167.86 72.0249 167.86 71.6523C167.86 71.2796 168.008 70.9222 168.271 70.6587C168.534 70.3952 168.891 70.2472 169.263 70.2472H174.111C174.483 70.2472 174.84 70.3952 175.103 70.6587C175.366 70.9222 175.514 71.2796 175.514 71.6523C175.514 72.0249 175.366 72.3823 175.103 72.6458C174.84 72.9093 174.483 73.0573 174.111 73.0573Z" fill="#F7F7F7"/>
+    <path d="M163.905 73.0573H159.058C158.686 73.0573 158.329 72.9093 158.066 72.6458C157.803 72.3823 157.655 72.0249 157.655 71.6523C157.655 71.2796 157.803 70.9222 158.066 70.6587C158.329 70.3952 158.686 70.2472 159.058 70.2472H163.905C164.278 70.2472 164.635 70.3952 164.898 70.6587C165.161 70.9222 165.309 71.2796 165.309 71.6523C165.309 72.0249 165.161 72.3823 164.898 72.6458C164.635 72.9093 164.278 73.0573 163.905 73.0573Z" fill="#F7F7F7"/>
+    <path d="M121.17 67.437C128.357 67.437 134.182 61.6038 134.182 54.4082C134.182 47.2126 128.357 41.3794 121.17 41.3794C113.984 41.3794 108.158 47.2126 108.158 54.4082C108.158 61.6038 113.984 67.437 121.17 67.437Z" fill="#CACACA"/>
+    <path d="M121.17 70.3748C120.156 70.3737 119.183 69.9696 118.465 69.2512C117.748 68.5328 117.344 67.5588 117.343 66.5428V42.2735C117.343 41.77 117.441 41.2713 117.634 40.8061C117.826 40.3408 118.108 39.918 118.463 39.5618C118.818 39.2057 119.24 38.9231 119.705 38.7303C120.169 38.5376 120.667 38.4384 121.17 38.4384C121.673 38.4384 122.171 38.5376 122.635 38.7303C123.1 38.9231 123.522 39.2057 123.877 39.5618C124.233 39.918 124.515 40.3408 124.707 40.8061C124.899 41.2713 124.998 41.77 124.997 42.2735V66.5428C124.996 67.5588 124.592 68.5328 123.875 69.2512C123.158 69.9696 122.185 70.3737 121.17 70.3748Z" fill="#F7F7F7"/>
+    <path d="M155.164 44.8433H151.592C151.456 44.8433 151.327 44.7894 151.231 44.6936C151.135 44.5978 151.081 44.4679 151.081 44.3323C151.081 44.1968 151.135 44.0669 151.231 43.9711C151.327 43.8752 151.456 43.8214 151.592 43.8214H155.164C155.299 43.8214 155.429 43.8752 155.524 43.9711C155.62 44.0669 155.674 44.1968 155.674 44.3323C155.674 44.4679 155.62 44.5978 155.524 44.6936C155.429 44.7894 155.299 44.8433 155.164 44.8433Z" fill="#E4E4E4"/>
+    <path d="M160.777 44.971H157.205C157.069 44.971 156.939 44.9171 156.844 44.8213C156.748 44.7255 156.694 44.5955 156.694 44.46C156.694 44.3245 156.748 44.1946 156.844 44.0987C156.939 44.0029 157.069 43.9491 157.205 43.9491H160.777C160.912 43.9491 161.042 44.0029 161.137 44.0987C161.233 44.1946 161.287 44.3245 161.287 44.46C161.287 44.5955 161.233 44.7255 161.137 44.8213C161.042 44.9171 160.912 44.971 160.777 44.971Z" fill="#E4E4E4"/>
+    <path d="M166.39 45.0988H162.818C162.682 45.0988 162.553 45.0449 162.457 44.9491C162.361 44.8533 162.307 44.7233 162.307 44.5878C162.307 44.4523 162.361 44.3224 162.457 44.2266C162.553 44.1307 162.682 44.0769 162.818 44.0769H166.39C166.525 44.0769 166.655 44.1307 166.75 44.2266C166.846 44.3224 166.9 44.4523 166.9 44.5878C166.9 44.7233 166.846 44.8533 166.75 44.9491C166.655 45.0449 166.525 45.0988 166.39 45.0988Z" fill="#E4E4E4"/>
+    <path d="M172.002 45.2265H168.431C168.295 45.2265 168.165 45.1726 168.07 45.0768C167.974 44.981 167.92 44.851 167.92 44.7155C167.92 44.58 167.974 44.4501 168.07 44.3542C168.165 44.2584 168.295 44.2046 168.431 44.2046H172.002C172.138 44.2046 172.268 44.2584 172.363 44.3542C172.459 44.4501 172.513 44.58 172.513 44.7155C172.513 44.851 172.459 44.981 172.363 45.0768C172.268 45.1726 172.138 45.2265 172.002 45.2265Z" fill="#E4E4E4"/>
+    <path d="M84.1755 95.1549C84.1752 95.7875 84.3005 96.4139 84.544 96.9976C84.7875 97.5813 85.1445 98.1108 85.594 98.5552H83.4864C82.8646 98.5552 82.2489 98.4326 81.6744 98.1943C81.0999 97.956 80.5779 97.6068 80.1382 97.1665C79.6985 96.7263 79.3497 96.2036 79.1118 95.6284C78.8738 95.0531 78.7513 94.4366 78.7513 93.814V16.9486C78.7513 16.326 78.8738 15.7095 79.1118 15.1342C79.3497 14.559 79.6985 14.0363 80.1382 13.5961C80.5779 13.1558 81.0999 12.8066 81.6744 12.5683C82.2489 12.33 82.8646 12.2074 83.4864 12.2074H86.5534C85.8301 12.6286 85.2298 13.2325 84.8125 13.9587C84.3953 14.685 84.1756 15.5081 84.1755 16.346L84.1755 95.1549Z" fill="#CACACA"/>
+    <path d="M239.696 111.432H0.303762C0.223345 111.431 0.146304 111.399 0.0895229 111.342C0.032742 111.285 0.000854492 111.208 0.000854492 111.127C0.000854492 111.047 0.032742 110.97 0.0895229 110.913C0.146304 110.856 0.223345 110.823 0.303762 110.823H239.696C239.777 110.823 239.854 110.855 239.911 110.912C239.968 110.969 240 111.047 240 111.127C240 111.208 239.968 111.285 239.911 111.343C239.854 111.4 239.777 111.432 239.696 111.432Z" fill="#CACACA"/>
+    <path d="M83.6652 34.668C82.0528 34.2159 80.4344 33.7969 78.81 33.4111C73.2553 32.0835 67.6239 31.1006 61.9481 30.4682C60.9861 30.2145 59.9629 30.3516 59.1013 30.8497C58.2397 31.3478 57.6096 32.1665 57.348 33.1276L54.5134 43.6017C54.2532 44.5672 54.3862 45.5966 54.8832 46.464C55.3802 47.3314 56.2006 47.9659 57.1643 48.2282L57.2026 48.2359C60.9531 48.6625 64.7393 49.2552 68.505 50.0114C68.8419 50.0778 69.1762 50.1468 69.5129 50.2183C70.7197 50.4687 71.9231 50.7361 73.123 51.0205C73.6486 51.1431 74.1716 51.2708 74.6972 51.4011C76.1107 51.7537 77.525 52.1292 78.9402 52.5277C80.5144 52.9722 82.0894 53.4466 83.6652 53.9507C83.8362 54.0018 84.0072 54.0554 84.1755 54.1116V34.8137C84.0072 34.7626 83.8363 34.714 83.6652 34.668Z" fill="#F7F7F7"/>
+    <path d="M83.6652 34.668C82.0528 34.2159 80.4344 33.7969 78.81 33.4111C73.2553 32.0835 67.6239 31.1006 61.9481 30.4682C60.9861 30.2145 59.9629 30.3516 59.1013 30.8497C58.2397 31.3478 57.6096 32.1665 57.348 33.1276L54.5134 43.6017C54.2532 44.5672 54.3862 45.5966 54.8832 46.464C55.3802 47.3314 56.2006 47.9659 57.1643 48.2282L57.2026 48.2359C60.9531 48.6625 64.7393 49.2552 68.505 50.0114C68.8419 50.0778 69.1762 50.1468 69.5129 50.2183C70.7197 50.4687 71.9231 50.7361 73.123 51.0205C73.6486 51.1431 74.1716 51.2708 74.6972 51.4011C76.1107 51.7537 77.525 52.1292 78.9402 52.5277C80.5144 52.9722 82.0894 53.4466 83.6652 53.9507C83.8362 54.0018 84.0072 54.0554 84.1755 54.1116V53.5726C84.0046 53.5189 83.8336 53.4653 83.6652 53.4116C82.2161 52.9492 80.7687 52.5141 79.3229 52.1062C78.782 51.9504 78.2411 51.7996 77.7002 51.654C76.7256 51.3909 75.7535 51.1388 74.784 50.8978C74.2687 50.7676 73.7541 50.6424 73.2404 50.5223C73.2021 50.5121 73.1613 50.5044 73.123 50.4942C72.2479 50.2873 71.371 50.0897 70.4926 49.9015C70.1558 49.83 69.8191 49.7585 69.4822 49.6895C65.4205 48.8464 61.3281 48.1899 57.279 47.7301C56.4509 47.4991 55.7473 46.9499 55.3216 46.2021C54.8958 45.4543 54.7824 44.5683 55.0059 43.7371L57.8404 33.2604C58.0671 32.4268 58.6149 31.7173 59.3635 31.2877C60.1121 30.8581 61.0003 30.7434 61.8332 30.9689L61.8715 30.974C67.4753 31.597 73.0357 32.5628 78.5217 33.8659C78.5778 33.8812 78.634 33.894 78.69 33.9067C80.3536 34.3053 82.012 34.7362 83.6652 35.1994C83.8336 35.2454 84.0045 35.2939 84.1755 35.345V34.8136C84.0072 34.7626 83.8363 34.714 83.6652 34.668Z" fill="#7C4DFF"/>
+    <path d="M84.1755 35.0793V53.8408C84.0046 53.7846 83.8363 53.731 83.6653 53.6773C82.1575 53.1945 80.6446 52.7398 79.1265 52.3131C77.6696 51.8993 76.2077 51.5101 74.7408 51.1457C74.2203 51.0179 73.7023 50.8927 73.1818 50.7701C73.1614 50.6781 73.1409 50.5862 73.1231 50.4942C73.0287 50.0548 72.9548 49.6103 72.8986 49.1632C72.8731 48.9921 72.8553 48.8209 72.8373 48.6472C72.5688 45.9102 72.943 43.1484 73.93 40.5819C74.917 38.0155 76.4894 35.7157 78.5218 33.8659C78.5958 33.7943 78.6723 33.7254 78.7489 33.6589C80.3971 34.0524 82.0359 34.4781 83.6653 34.9363C83.8363 34.9797 84.0072 35.0283 84.1755 35.0793Z" fill="#7C4DFF"/>
+    <path d="M67.232 42.7612L60.1366 41.9233C59.887 41.8937 59.634 41.9137 59.3922 41.9821C59.1503 42.0505 58.9242 42.1659 58.7268 42.3218C58.5295 42.4776 58.3647 42.6709 58.242 42.8905C58.1192 43.1101 58.0409 43.3518 58.0114 43.6017C57.9819 43.8516 58.0019 44.1049 58.0702 44.3471C58.1384 44.5894 58.2537 44.8157 58.4094 45.0133C58.565 45.2109 58.758 45.3759 58.9774 45.4988C59.1967 45.6217 59.438 45.7002 59.6877 45.7297L66.7829 46.5676C67.2863 46.626 67.7923 46.4819 68.1899 46.1672C68.5874 45.8525 68.8441 45.3927 68.9036 44.8887C68.963 44.3847 68.8204 43.8777 68.5071 43.4789C68.1937 43.0801 67.7351 42.822 67.232 42.7612ZM68.4005 44.8305C68.3561 45.2002 68.167 45.5372 67.8747 45.7676C67.5825 45.9979 67.2109 46.1028 66.8416 46.0593L59.7462 45.2213C59.3778 45.1764 59.0421 44.9871 58.8128 44.6949C58.5834 44.4027 58.4791 44.0314 58.5226 43.6623C58.5662 43.2932 58.7541 42.9565 59.0451 42.7258C59.3361 42.4951 59.7066 42.3893 60.0753 42.4316L67.1707 43.2696C67.54 43.3143 67.8766 43.5036 68.1071 43.7961C68.3375 44.0885 68.443 44.4604 68.4005 44.8305Z" fill="#7C4DFF"/>
+    <path d="M84.1755 39.4733V48.3712C84.0116 48.4697 83.8411 48.5568 83.6653 48.6318C82.7495 49.0412 81.7342 49.1737 80.7443 49.013C79.7543 48.8523 78.8329 48.4055 78.0931 47.7274C78.0218 47.6636 77.9502 47.5946 77.8814 47.5231C77.8125 47.4541 77.7462 47.38 77.6824 47.3059C76.9122 46.4201 76.467 45.2976 76.4206 44.1241C76.3741 42.9505 76.729 41.7963 77.4267 40.8522C78.1244 39.9081 79.1231 39.2307 80.2575 38.9321C81.3919 38.6336 82.5941 38.7316 83.6653 39.2102C83.84 39.2886 84.0103 39.3765 84.1755 39.4733Z" fill="#F7F7F7"/>
+    <path d="M83.6653 45.9137C81.6575 46.3327 79.6632 46.7968 77.6824 47.306C76.9426 47.495 76.2052 47.6909 75.4704 47.8936C74.5928 48.1362 73.7151 48.3875 72.8373 48.6472C71.7174 48.9793 70.599 49.3267 69.4823 49.6895C69.1583 49.7968 68.8318 49.9041 68.5051 50.0114C65.4001 51.0486 62.3156 52.1982 59.282 53.4525C58.3166 53.6941 57.4857 54.3078 56.9701 55.16C56.4545 56.0121 56.296 57.0338 56.5291 58.0024L59.0882 68.5481C59.325 69.5194 59.9369 70.3569 60.7897 70.877C61.6425 71.3972 62.6665 71.5573 63.6371 71.3224L63.6729 71.3096C68.6615 69.2608 73.7673 67.5103 78.9632 66.0675C80.5145 65.6357 82.0818 65.2287 83.6653 64.8463C83.8363 64.8055 84.0046 64.7646 84.1756 64.7263V45.809C84.0046 45.8396 83.8363 45.8754 83.6653 45.9137Z" fill="#F7F7F7"/>
+    <path d="M83.6653 45.9137C81.6575 46.3327 79.6632 46.7968 77.6824 47.306C76.9426 47.495 76.2052 47.6909 75.4704 47.8936C74.5928 48.1362 73.7151 48.3875 72.8373 48.6472C71.7174 48.9793 70.599 49.3267 69.4823 49.6895C69.1583 49.7968 68.8318 49.9041 68.5051 50.0114C65.4001 51.0486 62.3156 52.1982 59.282 53.4525C58.3166 53.6941 57.4857 54.3078 56.9701 55.16C56.4545 56.0121 56.296 57.0338 56.5291 58.0024L59.0882 68.5481C59.325 69.5194 59.9369 70.3569 60.7897 70.877C61.6425 71.3972 62.6665 71.5573 63.6371 71.3224L63.6729 71.3096C68.6615 69.2608 73.7673 67.5103 78.9632 66.0675C80.5145 65.6357 82.0818 65.2287 83.6653 64.8463C83.8363 64.8055 84.0046 64.7646 84.1756 64.7263V64.2C84.0046 64.2409 83.8363 64.2818 83.6653 64.3226C83.5377 64.3533 83.4077 64.384 83.2801 64.4146C81.7799 64.7799 80.2959 65.1665 78.8279 65.5744C78.7897 65.5846 78.7489 65.5974 78.7106 65.6076C73.5409 67.0472 68.4608 68.7917 63.4968 70.8319C62.6598 71.0284 61.7791 70.8861 61.0462 70.436C60.3133 69.9858 59.7875 69.2642 59.5831 68.428L57.0266 57.8823C56.8237 57.0426 56.9618 56.1565 57.4104 55.4185C57.859 54.6805 58.5816 54.1508 59.4198 53.9456L59.458 53.9328C62.7621 52.5635 66.1247 51.3219 69.513 50.2183C69.8395 50.111 70.1661 50.0063 70.4927 49.9015C71.2938 49.6486 72.0958 49.4025 72.8986 49.1632C73.7456 48.9103 74.5918 48.6668 75.4372 48.4326C75.4933 48.4173 75.5495 48.4019 75.6056 48.3866C76.4323 48.1593 77.2615 47.9395 78.0932 47.7275C79.9378 47.2575 81.7952 46.8257 83.6653 46.4323C83.8337 46.3965 84.0046 46.3608 84.1756 46.3276V45.809C84.0046 45.8396 83.8363 45.8754 83.6653 45.9137Z" fill="#7C4DFF"/>
+    <path d="M84.1755 46.0669V64.4631C84.0071 64.5014 83.8362 64.5397 83.6652 64.5806C82.0681 64.9689 80.4778 65.3827 78.8942 65.8222C78.8304 65.7506 78.7692 65.6791 78.7105 65.6076C77.0573 63.6698 75.8426 61.3967 75.1498 58.9444C74.457 56.4921 74.3026 53.9188 74.6972 51.401C74.71 51.3168 74.7253 51.2299 74.7407 51.1456C74.7534 51.0638 74.7687 50.9795 74.784 50.8978C74.9415 50.0612 75.1598 49.2373 75.437 48.4325C75.4703 48.3354 75.5034 48.2384 75.5392 48.1413C76.3173 47.9267 77.098 47.7206 77.8813 47.5231C79.7974 47.0275 81.7254 46.577 83.6652 46.1716C83.8336 46.1333 84.0045 46.1001 84.1755 46.0669Z" fill="#7C4DFF"/>
+    <path d="M72.3194 62.7311C72.1281 62.2606 71.7582 61.8853 71.2909 61.6875C70.8236 61.4897 70.2971 61.4856 69.8267 61.676L63.2059 64.3636C62.7364 64.5552 62.362 64.9255 62.165 65.3933C61.9679 65.861 61.9643 66.388 62.1549 66.8584C62.3456 67.3288 62.7149 67.7042 63.1817 67.9023C63.6486 68.1003 64.1748 68.1047 64.6449 67.9146L71.2657 65.227C71.7352 65.035 72.1097 64.6646 72.3072 64.1969C72.5046 63.7291 72.509 63.2021 72.3194 62.7311ZM71.0744 64.7519L64.4536 67.4419C64.1086 67.5816 63.7223 67.5784 63.3797 67.4332C63.037 67.2879 62.766 67.0124 62.626 66.6672C62.4861 66.3219 62.4887 65.9352 62.6333 65.5919C62.7779 65.2486 63.0527 64.9768 63.3973 64.8362L70.0181 62.1487C70.3628 62.0084 70.7491 62.011 71.092 62.156C71.4348 62.3009 71.7061 62.5762 71.8461 62.9214C71.9862 63.2666 71.9836 63.6534 71.8389 63.9967C71.6941 64.34 71.4191 64.6116 71.0744 64.7519Z" fill="#7C4DFF"/>
+    <path d="M84.1755 50.765V60.7819C84.0073 60.8248 83.8369 60.8589 83.6652 60.8841C82.6409 61.0278 81.5971 60.8597 80.6695 60.4016C79.7418 59.9435 78.9733 59.2166 78.4637 58.3154C77.9541 57.4142 77.727 56.3803 77.812 55.3481C77.897 54.316 78.2901 53.3333 78.9402 52.5278C78.9989 52.4537 79.06 52.3822 79.1264 52.3132C79.1876 52.2416 79.254 52.1727 79.3229 52.1062C79.887 51.5475 80.5724 51.1268 81.3256 50.8769C82.0788 50.627 82.8795 50.5546 83.6652 50.6654C83.8371 50.6885 84.0075 50.7218 84.1755 50.765Z" fill="#F7F7F7"/>
+    <path d="M83.6653 33.3371V58.8352C83.8363 58.779 84.0072 58.7254 84.1756 58.6743V33.5696C84.0046 33.4904 83.8363 33.4137 83.6653 33.3371ZM83.6653 33.3371V58.8352C83.8363 58.779 84.0072 58.7254 84.1756 58.6743V33.5696C84.0046 33.4904 83.8363 33.4137 83.6653 33.3371ZM83.6653 33.3371V58.8352C83.8363 58.779 84.0072 58.7254 84.1756 58.6743V33.5696C84.0046 33.4904 83.8363 33.4137 83.6653 33.3371ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.8464C83.8363 64.8055 84.0046 64.7646 84.1756 64.7263V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM194.968 11.0425H88.962C87.5579 11.0448 86.2121 11.6043 85.2192 12.5984C84.2264 13.5925 83.6676 14.9401 83.6653 16.346V95.1549C83.6677 96.5606 84.2266 97.9079 85.2194 98.9016C86.2123 99.8952 87.5582 100.454 88.962 100.456H194.968C196.372 100.454 197.717 99.8951 198.71 98.9014C199.702 97.9076 200.261 96.5603 200.262 95.1549V16.346C200.261 14.9402 199.703 13.5923 198.711 12.598C197.718 11.6038 196.372 11.0443 194.968 11.0425ZM199.752 95.1549C199.751 96.4249 199.246 97.6425 198.35 98.5405C197.453 99.4386 196.237 99.9436 194.968 99.945H88.962C87.6934 99.9438 86.477 99.4388 85.5797 98.5408C84.6824 97.6429 84.1774 96.4252 84.1756 95.1549V16.346C84.1775 15.0755 84.6824 13.8576 85.5796 12.9592C86.4768 12.0609 87.6931 11.5553 88.962 11.5534H194.968C196.237 11.5549 197.453 12.0604 198.35 12.9589C199.247 13.8574 199.751 15.0756 199.752 16.346V95.1549ZM83.6653 35.1994V64.3227C83.8363 64.2818 84.0046 64.2409 84.1756 64.2V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 35.1994V64.5807C83.8363 64.5398 84.0072 64.5015 84.1756 64.4632V35.345C84.0046 35.2939 83.8337 35.2454 83.6653 35.1994ZM83.6653 33.3371V58.8352C83.8363 58.779 84.0072 58.7254 84.1756 58.6743V33.5696C84.0046 33.4904 83.8363 33.4137 83.6653 33.3371ZM83.6653 33.3371V58.8352C83.8363 58.779 84.0072 58.7254 84.1756 58.6743V33.5696C84.0046 33.4904 83.8363 33.4137 83.6653 33.3371Z" fill="#170D33"/>
+    <path d="M60.9393 60.3156C60.8393 60.0821 60.6894 59.8733 60.5001 59.7041C60.3108 59.5349 60.0868 59.4093 59.8438 59.3361C59.6008 59.263 59.3447 59.2441 59.0936 59.2808C58.8425 59.3174 58.6025 59.4088 58.3905 59.5484L53.4993 55.7853L53.2682 58.9864L57.9483 62.0692C58.2062 62.4103 58.58 62.6448 58.999 62.7284C59.418 62.812 59.853 62.7388 60.2217 62.5226C60.5904 62.3065 60.8671 61.9624 60.9993 61.5556C61.1316 61.1489 61.1103 60.7076 60.9393 60.3156Z" fill="#FFB6B6"/>
+    <path d="M41.2297 37.6052L39.6203 36.8436C39.6203 36.8436 37.0274 37.5739 38.2871 41.007L45.9104 55.2272L55.2175 60.6833L58.1189 58.1089L48.8051 50.7299L41.2297 37.6052Z" fill="#3F3D56"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_166_7287">
+      <rect width="240" height="110.863" fill="white" transform="translate(0 0.568604)"/>
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/loama/src/components/LoginForm.vue b/loama/src/components/LoginForm.vue
index e1e70d6..94c0fba 100644
--- a/loama/src/components/LoginForm.vue
+++ b/loama/src/components/LoginForm.vue
@@ -52,7 +52,7 @@ const login = () => {
 
   store.session.login({
     oidcIssuer: issuer,
-    redirectUrl: new URL('/home', window.location.href).toString(),
+    redirectUrl: new URL('/home/', window.location.href).toString(),
     clientName: 'LOAMA',
   })
     .then(() => {
diff --git a/loama/src/components/explorer/ExplorerBreadcrumbs.vue b/loama/src/components/explorer/ExplorerBreadcrumbs.vue
new file mode 100644
index 0000000..b6946dc
--- /dev/null
+++ b/loama/src/components/explorer/ExplorerBreadcrumbs.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <template v-for="(param, index) in params" :key="index">
+            <RouterLink v-if="param !== '/' && index !== params.length - 2" :to="'../'.repeat(index)">
+                {{ param }}
+            </RouterLink>
+            <div v-else>
+                {{ param }}
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const params = computed(() => route.path.split(/(\/)/).filter(p => p !== ""))
+</script>
+
+<style scoped>
+div {
+    display: unset;
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
index e4c1442..f486bcb 100644
--- a/loama/src/components/explorer/ExplorerEntry.vue
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -1,37 +1,66 @@
 <template>
-    <button>
-        <component :is="icon" :size="40" />
-        <span><slot></slot></span>
-    </button>
+    <div>
+        <button class="file">
+            <component :is="icon" :size="40" />
+            <span>
+                <slot></slot>
+            </span>
+        </button>
+        <RouterLink :to="props.url">
+            <LoButton v-if="isContainer" :right-icon="PhArrowRight" class="view">View files
+            </LoButton>
+        </RouterLink>
+    </div>
 </template>
 
 <script setup lang="ts">
 import { defineProps } from 'vue';
-defineProps<{
-    icon: object,
+import { RouterLink } from 'vue-router';
+import LoButton from "../LoButton.vue";
+import { PhFolder, PhFile, PhArrowRight } from '@phosphor-icons/vue';
+
+const props = defineProps<{
+    url: string,
+    isContainer: boolean,
     authProtected: boolean
 }>()
+
+const icon = props.isContainer ? PhFolder : PhFile;
 </script>
 
 <style lang="css" scoped>
-    button {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        gap: var(--base-unit);
-        background-color: #0000;
-        border: none;
-        gap: var(--base-unit);
-        width: 100%;
-        color: var(--off-black);
-    }
-
-    span {
-        font-size: calc(var(--base-unit)*3);
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        flex-grow: 1;
-        text-align: start;
-    }
+div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+a {
+    text-decoration: none;
+}
+
+.file {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: var(--base-unit);
+    background-color: #0000;
+    border: none;
+    width: 100%;
+    color: var(--off-black);
+}
+
+.view {
+    width: calc(var(--base-unit)*20)
+}
+
+span {
+    font-size: calc(var(--base-unit)*3);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    flex-grow: 1;
+    text-align: start;
+}
 </style>
\ No newline at end of file
diff --git a/loama/src/components/explorer/ResourceExplorer.vue b/loama/src/components/explorer/ResourceExplorer.vue
index 4fa67e2..2a9c42a 100644
--- a/loama/src/components/explorer/ResourceExplorer.vue
+++ b/loama/src/components/explorer/ResourceExplorer.vue
@@ -1,26 +1,51 @@
 <template>
-    <div>
-        <ExplorerEntry v-for="thing in getViewFormattedThings(data)" :key="thing.url" :icon="thing.icon" :authProtected="false">{{thing.name}}</ExplorerEntry>
+    <div class="panel-container">
+        <div class="left-panel">
+            <ExplorerBreadcrumbs />
+            <ExplorerEntry v-for="thing in getViewFormattedThings(data)" :key="thing.url"
+                :isContainer="thing.isContainer" :authProtected="false" :url="thing.name + '/'">{{ thing.name }}
+            </ExplorerEntry>
+        </div>
+        <div class="right-panel">
+            <Vault class="side-image" />
+            <strong>No folder or file selected!</strong>
+            <i>Select one to get started</i>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import Vault from "@/assets/vault.svg"
 import { store } from "@/store";
 import type { Session } from "@inrupt/solid-client-authn-browser";
-import { listPods, getPod } from "loama-controller";
-import { ref } from "vue";
-import { PhFolder, PhFile, PhLock, PhLockOpen } from "@phosphor-icons/vue";
+import { getPod } from "loama-controller";
+import { ref, watch } from "vue";
+import { PhLock, PhLockOpen } from "@phosphor-icons/vue";
 import ExplorerEntry from "./ExplorerEntry.vue";
 import type { FormattedThing } from "loama-controller/dist/types";
+import { useRoute } from "vue-router";
+import ExplorerBreadcrumbs from "./ExplorerBreadcrumbs.vue";
 
-const data = ref(await getTopLevelThings());
+const data = ref(await getThingsAtLevel(store.usedPod));
+const route = useRoute();
 
-async function getTopLevelThings(){
-    const podUrl = (store.usedPod)
-        ? store.usedPod
-        : (await listPods(store.session as Session))[0]
-    return (await getPod(store.session as Session, podUrl)).things
-        .filter(thing => thing.url !== store.usedPod)
+const fileUrl = (path: string | string[]) => `${store.usedPod}${path}`
+
+const uriToName = (uri: string, isContainer: boolean) => {
+    const splitted = uri.split('/');
+
+    return isContainer ? splitted[splitted.length - 2] : splitted[splitted.length - 1];
+}
+
+watch(() => route.params.filePath, async (path) => {
+    data.value = await getThingsAtLevel(fileUrl(path)), { immediate: true }
+})
+
+async function getThingsAtLevel(url: string) {
+    return (await getPod(store.session as Session, url)).things
+        // Filter out the current resource
+        .filter(thing => thing.url !== url)
+        // Filter out the things that are nested (?)
         .filter(thing => {
             const depth = thing.url.replace(store.usedPod, '').split('/');
             return depth.length <= 2;
@@ -28,30 +53,76 @@ async function getTopLevelThings(){
 }
 
 function getViewFormattedThings(data: FormattedThing[]) {
-    console.log(data);
     return data.map(thing => {
-            const uri = thing.url.replace(store.usedPod, '');
-            const depth = uri.split('/').length;
-            const publicAccess = thing.accessModes.public.length > 0;
-            return {
-                icon: (depth === 2) ? PhFolder : PhFile,
-                name: uri.replace('/', ''),
-                public: {
-                    access: publicAccess,
-                    icon: (publicAccess) ? PhLockOpen : PhLock
-                },
-                ...thing
-            }
-        })
+        const uri = thing.url.replace(store.usedPod, '');
+        const isContainer = uri.charAt(uri.length - 1) === '/'
+        const name = uriToName(uri, isContainer);
+        const publicAccess = thing.accessModes.public.length > 0;
+        return {
+            isContainer,
+            name,
+            public: {
+                access: publicAccess,
+                icon: (publicAccess) ? PhLockOpen : PhLock
+            },
+            ...thing
+        }
+    })
 }
 </script>
 
 <style scoped>
-    div {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: center;
-        gap: var(--base-unit);
-        margin: calc(var(--base-unit)*2);
-    }
+/* div {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    gap: var(--base-unit);
+    margin: calc(var(--base-unit)*2); */
+/* } */
+.side-image {
+    margin-bottom: calc(var(--base-unit)*2);
+}
+
+strong {
+    color: var(--off-black-50, rgba(23, 13, 51, 0.50));
+    text-align: center;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+i {
+    color: var(--off-black-50, rgba(23, 13, 51, 0.50));
+    text-align: center;
+    font-size: 16px;
+    font-style: italic;
+    font-weight: 400;
+}
+
+.panel-container {
+    display: flex;
+    height: calc(100vh - var(--base-unit)*13);
+    width: 100vw;
+}
+
+.left-panel,
+.right-panel {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.left-panel {
+    gap: 2rem;
+    flex: 3;
+    padding: 2rem 2rem 0 2rem;
+    background-color: var(--off-white);
+}
+
+.right-panel {
+    flex: 2;
+    background-color: var(--lama-gray);
+    position: relative;
+    justify-content: center;
+    align-items: center;
+}
 </style>
\ No newline at end of file
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 4de316a..669c171 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -61,6 +61,7 @@ header {
     border-radius: 0 0 var(--base-corner) var(--base-corner);
     border-bottom: 0.5rem solid var(--solid-purple);
     border-top: 0;
+    border-inline: 0;
     padding: calc(var(--base-unit)*3) calc(var(--base-unit)*6) 0 calc(var(--base-unit)*3);
 }
 
diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts
index 3b8c4da..b8b4562 100644
--- a/loama/src/router/index.ts
+++ b/loama/src/router/index.ts
@@ -14,7 +14,7 @@ const router = createRouter({
       component: LoginView
     },
     {
-      path: '/home',
+      path: '/home/:filePath(.*)',
       name: 'home',
       component: HomeView
     }
@@ -25,6 +25,7 @@ router.beforeEach(async (to) => {
   if (!store.session.info.isLoggedIn) {
     await store.session.handleIncomingRedirect()
     if (store.session.info.isLoggedIn) {
+      // Default to the first pod
       store.setUsedPod((await listPods(store.session as Session))[0])
     }
     if (!store.session.info.isLoggedIn && to.name !== 'login') {
diff --git a/loama/src/store.ts b/loama/src/store.ts
index 07ef5c3..07d3a8e 100644
--- a/loama/src/store.ts
+++ b/loama/src/store.ts
@@ -1,9 +1,10 @@
 import { getDefaultSession } from '@inrupt/solid-client-authn-browser'
 import { reactive } from 'vue'
 
-export const store = reactive({ 
-    session: getDefaultSession(),
-    usedPod: "",
-    setUsedPod(url:string) {
-        this.usedPod = url
-    }})
+export const store = reactive({
+  session: getDefaultSession(),
+  usedPod: '',
+  setUsedPod(url: string) {
+    this.usedPod = url
+  }
+})
diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue
index d2c8827..d4af4de 100644
--- a/loama/src/views/HomeView.vue
+++ b/loama/src/views/HomeView.vue
@@ -8,7 +8,7 @@
     <Suspense>
       <ResourceExplorer />
       <template #fallback>
-              <FallbackExplorer>Loading resource explorer...</FallbackExplorer>
+        <FallbackExplorer>Loading resource explorer...</FallbackExplorer>
       </template>
     </Suspense>
   </main>
diff --git a/loama/src/views/LoginView.vue b/loama/src/views/LoginView.vue
index 1aab9e6..6f83505 100644
--- a/loama/src/views/LoginView.vue
+++ b/loama/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="signin-container">
+  <div class="panel-container">
     <div class="left-panel">
       <LoginForm @toggle-provider="toggleSidePanel" v-model:showPopup="showPopup" title="LOAMA"
         subtitle="SOLID permissions made easy" />
@@ -32,7 +32,7 @@ img {
   height: 65vh;
 }
 
-.signin-container {
+.panel-container {
   display: flex;
   height: 100vh;
   width: 100vw;
@@ -51,7 +51,7 @@ img {
   gap: 4rem;
   flex: 2;
   background-color: var(--lama-gray);
-  background: var(--Login-Fade, linear-gradient(180deg, #F7F7F7 95%, #BFA8FF 100%));
+  background: var(--login-fade, linear-gradient(180deg, #F7F7F7 95%, #BFA8FF 100%));
   padding: 0 4rem;
 }
 
@@ -60,17 +60,4 @@ img {
   background-color: var(--solid-purple);
   position: relative;
 }
-
-.extra-panel {
-  background-color: #f0f0f0;
-  width: 30%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 999;
-  overflow-y: auto;
-  padding: 20px;
-  margin: 0;
-}
 </style>

From 8cfe1a10aadf03a74f92b03986cecc31f59409d3 Mon Sep 17 00:00:00 2001
From: Zelzahn <friedrich@friedrichvdb.be>
Date: Mon, 22 Jul 2024 15:50:00 +0200
Subject: [PATCH 8/8] Resolve remarks

---
 loama/README.md                               |  2 +-
 loama/src/components/SidePanel.vue            | 14 +++++++++++++-
 .../src/components/explorer/ExplorerEntry.vue |  1 -
 .../components/explorer/FallbackExplorer.vue  |  4 ++--
 loama/src/components/header/HeaderBase.vue    |  4 ++++
 .../components/header/HeaderContextMenu.vue   | 19 ++++++++++++-------
 6 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/loama/README.md b/loama/README.md
index 665bc72..a1ece0e 100644
--- a/loama/README.md
+++ b/loama/README.md
@@ -1,6 +1,6 @@
 # LOAMA
 
-This is the actual Access Management App, written in Vue.
+LOAMA is a Linked Open Access Management App, written in Vue.
 
 ## IDP Provider
 
diff --git a/loama/src/components/SidePanel.vue b/loama/src/components/SidePanel.vue
index 4c5693f..90ed06f 100644
--- a/loama/src/components/SidePanel.vue
+++ b/loama/src/components/SidePanel.vue
@@ -8,7 +8,9 @@
         {{ pod.name }}
       </LoButton>
     </div>
-    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">Close Panel</LoButton>
+    <LoButton :left-icon="PhX" variant="secondary" @click="emit('toggleProvider')">
+      Close Panel
+    </LoButton>
   </div>
 </template>
 
@@ -41,6 +43,16 @@ const openPodUrl = (pod: { name: string; url: string }) => {
   width: 100%;
   margin-top: 10px;
   border-right: 0.25rem solid var(--solid-purple);
+  background-color: #f0f0f0;
+  width: 30%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 999;
+  overflow-y: auto;
+  padding: 20px;
+  margin: 0;
 }
 
 h2 {
diff --git a/loama/src/components/explorer/ExplorerEntry.vue b/loama/src/components/explorer/ExplorerEntry.vue
index f486bcb..13c0a5b 100644
--- a/loama/src/components/explorer/ExplorerEntry.vue
+++ b/loama/src/components/explorer/ExplorerEntry.vue
@@ -14,7 +14,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
 import { RouterLink } from 'vue-router';
 import LoButton from "../LoButton.vue";
 import { PhFolder, PhFile, PhArrowRight } from '@phosphor-icons/vue';
diff --git a/loama/src/components/explorer/FallbackExplorer.vue b/loama/src/components/explorer/FallbackExplorer.vue
index 46da54a..f17d73f 100644
--- a/loama/src/components/explorer/FallbackExplorer.vue
+++ b/loama/src/components/explorer/FallbackExplorer.vue
@@ -29,10 +29,10 @@ span {
     --gradient: conic-gradient(from -90deg at 10px 10px, var(--solid-purple) 90deg, #0000 0);
     background: var(--gradient), var(--gradient), var(--gradient);
     background-size: 50% 50%;
-    animation: l16 1s infinite;
+    animation: shifting 1s infinite;
 }
 
-@keyframes l16 {
+@keyframes shifting {
     0% {
         background-position: 0 0, 10px 10px, 20px 20px
     }
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 669c171..377aa29 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -95,6 +95,10 @@ img {
     width: calc(var(--base-unit)*8);
 }
 
+img:hover {
+    cursor: pointer;
+}
+
 .hidden {
     display: none;
 }
diff --git a/loama/src/components/header/HeaderContextMenu.vue b/loama/src/components/header/HeaderContextMenu.vue
index b38818c..fa954e3 100644
--- a/loama/src/components/header/HeaderContextMenu.vue
+++ b/loama/src/components/header/HeaderContextMenu.vue
@@ -3,12 +3,12 @@
         <span>{{ store.usedPod }}</span>
         <div>
             <label for="pod">Selected Pod</label>
-        <select>
-            <option v-for="pod in pods" :key="pod">{{ pod }}</option>
-        </select>
+            <select>
+                <option v-for="pod in pods" :key="pod">{{ pod }}</option>
+            </select>
         </div>
         <a @click.prevent="logout">
-            <PhSignOut/>
+            <PhSignOut />
             <span>Sign out</span>
         </a>
     </aside>
@@ -24,30 +24,35 @@ const pods = await listPods(store.session as Session);
 
 async function logout() {
     store.session.logout();
-    router.push('/'); 
+    router.push('/');
 }
 </script>
 
 <style lang="css" scoped>
 aside {
+    z-index: 10;
     border-radius: 0.5rem;
     display: flex;
     flex-flow: column nowrap;
     border: 0.25rem solid var(--solid-purple);
     background-color: var(--off-white);
 }
-aside > div {
+
+aside>div {
     padding: var(--base-unit);
 }
+
 label {
     color: var(--off-black);
     font-weight: 700;
     display: block;
 }
+
 select {
     margin-bottom: var(--base-unit);
 }
-aside > span {
+
+aside>span {
     background-color: var(--solid-purple);
     color: var(--off-white);
     font-family: Raleway;