From f571a2339520edf796f6c3674dad0ead2f17d4d1 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Tue, 16 Jul 2024 14:58:17 +0200
Subject: [PATCH 1/7] Able to save podName into store

---
 loama/src/components/Header.vue            | 43 ++++++++--------------
 loama/src/components/HeaderContextMenu.vue | 40 ++++++++++++++++++++
 loama/src/components/PodList.vue           |  1 -
 loama/src/router/index.ts                  |  9 ++++-
 loama/src/store.ts                         |  7 +++-
 loama/src/views/HomeView.vue               |  6 ++-
 6 files changed, 72 insertions(+), 34 deletions(-)
 create mode 100644 loama/src/components/HeaderContextMenu.vue

diff --git a/loama/src/components/Header.vue b/loama/src/components/Header.vue
index 792dbac..ef85d83 100644
--- a/loama/src/components/Header.vue
+++ b/loama/src/components/Header.vue
@@ -1,26 +1,17 @@
 <template>
     <header>
         <div class="wordmark">
-            <Loama />
+            <Loama/>
             <span>Loama</span>
         </div>
         <nav>
             <slot></slot>
         </nav>
         <img :src="pfpSrc" alt="User profile picture" @click="showContextMenu"/>
+        <Suspense>
+            <HeaderContextMenu class="menu" :class="{hidden: isContextMenuHidden}" @click="showContextMenu"/>
+        </Suspense>
     </header>
-    <aside :class="{visible: isContextMenuOpen}">
-        <div>
-            <strong>Name of Pod</strong>
-            <p>https://css12.onto-deside.ilabt.imec.be/osoc1/</p>
-        </div>
-        <label for="pod">Selected Pod</label>
-        <select>
-            <option selected>https://css12.onto-deside.ilabt.imec.be/osoc1/</option>
-            <option>https://css12.onto-deside.ilabt.imec.be/osoc1/</option>
-        </select>
-        <button @click.prevent="logout">Sign out</button>
-    </aside>
 </template>
 
 <script setup lang="ts">
@@ -28,20 +19,21 @@ import { ref } from 'vue';
 import Loama from '../assets/loama.svg'
 import { store } from '@/store';
 import router from '@/router';
+import HeaderContextMenu from './HeaderContextMenu.vue'
+
 const props = defineProps<{
     pfpSrc: string,
-
 }>()
-
-const isContextMenuOpen = ref(false)
+const isContextMenuHidden = ref(true)
 
 async function logout() {
     store.session.logout();
     router.push('/'); 
 }
 function showContextMenu() {
-    isContextMenuOpen.value = !isContextMenuOpen.value
+    isContextMenuHidden.value = !isContextMenuHidden.value
 }
+
 </script>
 
 <style scoped>
@@ -67,7 +59,7 @@ function showContextMenu() {
         padding: calc(var(--base-unit)*3) calc(var(--base-unit)*6) 0 calc(var(--base-unit)*3);
     }
 
-    span {
+    .wordmark > span {
         font-family: "JetBrains Mono";
         font-size: calc(var(--base-unit)*6);
         font-style: normal;
@@ -91,18 +83,13 @@ function showContextMenu() {
         border-radius: 100%;
         width: calc(var(--base-unit)*8);
     }
-
-    aside {
-        background-color: var(--solid-purple);
-        min-height: 200px;
-        min-width: 200px;
+    
+    .hidden {
         display: none;
+    }
+
+    .menu {
         position: absolute;
         right: 0;
-        color: var(--off-white);
-    }
-    
-    .visible {
-        display: block;
     }
 </style>
\ No newline at end of file
diff --git a/loama/src/components/HeaderContextMenu.vue b/loama/src/components/HeaderContextMenu.vue
new file mode 100644
index 0000000..8ceb311
--- /dev/null
+++ b/loama/src/components/HeaderContextMenu.vue
@@ -0,0 +1,40 @@
+<template>
+    <aside>
+        <span>{{ store.usedPod }}</span>
+        <label for="pod">Selected Pod</label>
+        <select>
+            <option v-for="pod in pods" :key="pod">{{ pod }}</option>
+        </select>
+        <button @click.prevent="logout">Sign out</button>
+    </aside>
+</template>
+
+<script setup lang="ts">
+import router from '@/router';
+import { store } from '@/store';
+import type { Session } from '@inrupt/solid-client-authn-browser';
+import { listPods } from 'loama-controller';
+const pods = await listPods(store.session as Session);
+
+async function logout() {
+    store.session.logout();
+    router.push('/'); 
+}
+</script>
+
+<style lang="css" scoped>
+aside {
+    border-radius: 0.5rem;
+    color: var(--off-white);
+}
+span {
+    background-color: var(--solid-purple);
+    color: var(--off-white);
+    font-family: Raleway;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+</style>
\ No newline at end of file
diff --git a/loama/src/components/PodList.vue b/loama/src/components/PodList.vue
index 25fd152..e6b3196 100644
--- a/loama/src/components/PodList.vue
+++ b/loama/src/components/PodList.vue
@@ -39,7 +39,6 @@ import { Permission } from "loama-controller/dist/types";
 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]))
 
 // const pods = [await listPod(store.session, "https://css12.onto-deside.ilabt.imec.be/osoc5/")]
diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts
index f9fa8cd..ff80039 100644
--- a/loama/src/router/index.ts
+++ b/loama/src/router/index.ts
@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import LandingView from '@/views/LandingView.vue'
 import { store } from '@/store'
+import { listPods } from 'loama-controller'
+import type { Session } from '@inrupt/solid-client-authn-browser'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -22,8 +24,11 @@ const router = createRouter({
 router.beforeEach(async (to) => {
   console.log(store.session.info)
   if (!store.session.info.isLoggedIn) {
-    await store.session.handleIncomingRedirect()
-
+    await store.session.handleIncomingRedirect();
+    console.log(store.session.info)
+    if(store.session.info.isLoggedIn){
+      store.setUsedPod((await listPods(store.session as Session))[0])
+    }
     if (!store.session.info.isLoggedIn && to.name !== 'landing') {
       return { name: 'landing' }
     }
diff --git a/loama/src/store.ts b/loama/src/store.ts
index 32c865f..07ef5c3 100644
--- a/loama/src/store.ts
+++ b/loama/src/store.ts
@@ -1,4 +1,9 @@
 import { getDefaultSession } from '@inrupt/solid-client-authn-browser'
 import { reactive } from 'vue'
 
-export const store = reactive({ session: getDefaultSession(), usedPod: "" })
+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 0689dd7..2318721 100644
--- a/loama/src/views/HomeView.vue
+++ b/loama/src/views/HomeView.vue
@@ -1,7 +1,9 @@
 <template>
-  <Header pfp-src="https://thispersondoesnotexist.com">
+  <Suspense>
+    <Header pfp-src="https://thispersondoesnotexist.com">
       <HeaderTab href="/home" active>Files</HeaderTab>
-  </Header>
+    </Header>
+  </Suspense>
   <main>
     <hr />
     <Suspense>

From e5536c0690f07ae48a68acf57e0a800a9602c339 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Tue, 16 Jul 2024 15:23:39 +0200
Subject: [PATCH 2/7] Styled context menu

---
 loama/package.json                         |  1 +
 loama/pnpm-lock.yaml                       | 13 +++++++
 loama/src/App.vue                          | 16 ++++++++-
 loama/src/components/Header.vue            |  7 +++-
 loama/src/components/HeaderContextMenu.vue | 41 +++++++++++++++++++---
 5 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/loama/package.json b/loama/package.json
index f4631ba..0c79e8d 100644
--- a/loama/package.json
+++ b/loama/package.json
@@ -18,6 +18,7 @@
   "packageManager": "pnpm@9.5.0+sha512.140036830124618d624a2187b50d04289d5a087f326c9edfc0ccd733d76c4f52c3a313d4fc148794a2a9d81553016004e6742e8cf850670268a7387fc220c903",
   "dependencies": {
     "@inrupt/solid-client-authn-browser": "^2.2.4",
+    "@phosphor-icons/vue": "^2.2.1",
     "loama-controller": "link:../controller",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.29",
diff --git a/loama/pnpm-lock.yaml b/loama/pnpm-lock.yaml
index 09a4bd3..79025cf 100644
--- a/loama/pnpm-lock.yaml
+++ b/loama/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@inrupt/solid-client-authn-browser':
         specifier: ^2.2.4
         version: 2.2.4
+      '@phosphor-icons/vue':
+        specifier: ^2.2.1
+        version: 2.2.1(vue@3.4.31(typescript@5.4.5))
       loama-controller:
         specifier: link:../controller
         version: link:../controller
@@ -455,6 +458,12 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@phosphor-icons/vue@2.2.1':
+    resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vue: '>=3.2.39'
+
   '@pkgr/core@0.1.1':
     resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -2125,6 +2134,10 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@phosphor-icons/vue@2.2.1(vue@3.4.31(typescript@5.4.5))':
+    dependencies:
+      vue: 3.4.31(typescript@5.4.5)
+
   '@pkgr/core@0.1.1': {}
 
   '@polka/url@1.0.0-next.25': {}
diff --git a/loama/src/App.vue b/loama/src/App.vue
index c461d46..c89720e 100644
--- a/loama/src/App.vue
+++ b/loama/src/App.vue
@@ -11,7 +11,7 @@
   --solid-purple: #7C4DFF;
   --off-white: #F7F7F7;
   --off-black: #170D33;
-  --lama-gray: #F7F7F7;
+  --lama-gray: #DADADA;
   --base-unit: 0.5rem;
   --base-corner: 0.5rem;
 }
@@ -70,5 +70,19 @@ html{
   font-family: "Raleway", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
+  color: var(--off-black);
+  font-size: var(--base-unit)*2;
 }
+
+select {
+  padding: var(--base-unit);
+  border-radius: var(--base-corner);
+  background-color: var(--off-white);
+  border: 0.125rem solid var(--off-black);
+}
+
+select:active {
+  border-color: var(--solid-purple);
+}
+
 </style>
diff --git a/loama/src/components/Header.vue b/loama/src/components/Header.vue
index ef85d83..2d1be85 100644
--- a/loama/src/components/Header.vue
+++ b/loama/src/components/Header.vue
@@ -90,6 +90,11 @@ function showContextMenu() {
 
     .menu {
         position: absolute;
-        right: 0;
+        right: var(--base-unit);
+        top: calc(var(--base-unit)*14);
+        min-width: fit-content;
+        min-height: fit-content;
+        max-width: 25vw;
+        max-height: 50vw;
     }
 </style>
\ No newline at end of file
diff --git a/loama/src/components/HeaderContextMenu.vue b/loama/src/components/HeaderContextMenu.vue
index 8ceb311..b38818c 100644
--- a/loama/src/components/HeaderContextMenu.vue
+++ b/loama/src/components/HeaderContextMenu.vue
@@ -1,11 +1,16 @@
 <template>
     <aside>
         <span>{{ store.usedPod }}</span>
-        <label for="pod">Selected Pod</label>
+        <div>
+            <label for="pod">Selected Pod</label>
         <select>
             <option v-for="pod in pods" :key="pod">{{ pod }}</option>
         </select>
-        <button @click.prevent="logout">Sign out</button>
+        </div>
+        <a @click.prevent="logout">
+            <PhSignOut/>
+            <span>Sign out</span>
+        </a>
     </aside>
 </template>
 
@@ -13,6 +18,7 @@
 import router from '@/router';
 import { store } from '@/store';
 import type { Session } from '@inrupt/solid-client-authn-browser';
+import { PhSignOut } from '@phosphor-icons/vue';
 import { listPods } from 'loama-controller';
 const pods = await listPods(store.session as Session);
 
@@ -25,16 +31,41 @@ async function logout() {
 <style lang="css" scoped>
 aside {
     border-radius: 0.5rem;
-    color: var(--off-white);
+    display: flex;
+    flex-flow: column nowrap;
+    border: 0.25rem solid var(--solid-purple);
+    background-color: var(--off-white);
+}
+aside > div {
+    padding: var(--base-unit);
+}
+label {
+    color: var(--off-black);
+    font-weight: 700;
+    display: block;
 }
-span {
+select {
+    margin-bottom: var(--base-unit);
+}
+aside > span {
     background-color: var(--solid-purple);
     color: var(--off-white);
     font-family: Raleway;
-    font-size: 24px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
+    padding: var(--base-unit);
+    margin-bottom: var(--base-unit);
 }
 
+a {
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: var(--lama-gray);
+    padding: var(--base-unit);
+    gap: var(--base-unit);
+    align-items: center;
+    font-style: normal;
+    font-weight: 700;
+}
 </style>
\ No newline at end of file

From f275cd22abc0ceba7e3e97e44c1c030b14ebc799 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Tue, 16 Jul 2024 15:35:17 +0200
Subject: [PATCH 3/7] Renamed Header to HeaderBase for more clarity

---
 .../src/components/{Header.vue => header/HeaderBase.vue}  | 6 +++++-
 loama/src/components/{ => header}/HeaderContextMenu.vue   | 0
 loama/src/components/{ => header}/HeaderTab.vue           | 0
 loama/src/router/index.ts                                 | 2 +-
 loama/src/views/HomeView.vue                              | 8 ++++----
 5 files changed, 10 insertions(+), 6 deletions(-)
 rename loama/src/components/{Header.vue => header/HeaderBase.vue} (93%)
 rename loama/src/components/{ => header}/HeaderContextMenu.vue (100%)
 rename loama/src/components/{ => header}/HeaderTab.vue (100%)

diff --git a/loama/src/components/Header.vue b/loama/src/components/header/HeaderBase.vue
similarity index 93%
rename from loama/src/components/Header.vue
rename to loama/src/components/header/HeaderBase.vue
index 2d1be85..6f8a4ad 100644
--- a/loama/src/components/Header.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -7,16 +7,20 @@
         <nav>
             <slot></slot>
         </nav>
+        
         <img :src="pfpSrc" alt="User profile picture" @click="showContextMenu"/>
         <Suspense>
             <HeaderContextMenu class="menu" :class="{hidden: isContextMenuHidden}" @click="showContextMenu"/>
+            <template #fallback>
+                Loading context menu...
+            </template>
         </Suspense>
     </header>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import Loama from '../assets/loama.svg'
+import Loama from '../../assets/loama.svg'
 import { store } from '@/store';
 import router from '@/router';
 import HeaderContextMenu from './HeaderContextMenu.vue'
diff --git a/loama/src/components/HeaderContextMenu.vue b/loama/src/components/header/HeaderContextMenu.vue
similarity index 100%
rename from loama/src/components/HeaderContextMenu.vue
rename to loama/src/components/header/HeaderContextMenu.vue
diff --git a/loama/src/components/HeaderTab.vue b/loama/src/components/header/HeaderTab.vue
similarity index 100%
rename from loama/src/components/HeaderTab.vue
rename to loama/src/components/header/HeaderTab.vue
diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts
index ff80039..189695d 100644
--- a/loama/src/router/index.ts
+++ b/loama/src/router/index.ts
@@ -2,7 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import LandingView from '@/views/LandingView.vue'
 import { store } from '@/store'
-import { listPods } from 'loama-controller'
+import { getPod, listPods } from 'loama-controller'
 import type { Session } from '@inrupt/solid-client-authn-browser'
 
 const router = createRouter({
diff --git a/loama/src/views/HomeView.vue b/loama/src/views/HomeView.vue
index 2318721..6015961 100644
--- a/loama/src/views/HomeView.vue
+++ b/loama/src/views/HomeView.vue
@@ -1,8 +1,8 @@
 <template>
   <Suspense>
-    <Header pfp-src="https://thispersondoesnotexist.com">
+    <HeaderBase pfp-src="https://thispersondoesnotexist.com">
       <HeaderTab href="/home" active>Files</HeaderTab>
-    </Header>
+    </HeaderBase>
   </Suspense>
   <main>
     <hr />
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import HeaderTab from "../components/HeaderTab.vue";
-import Header from '../components/Header.vue'
+import HeaderTab from "../components/header/HeaderTab.vue";
+import HeaderBase from '../components/header/HeaderBase.vue'
 import PodList from '../components/PodList.vue'
 </script>

From 1737a97ae9ecc42f651b0e612f07ea50dccf522b Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 11:26:24 +0200
Subject: [PATCH 4/7] Created share button & component 'IconButton'

---
 loama/src/components/IconButton.vue        | 63 ++++++++++++++++++++++
 loama/src/components/header/HeaderBase.vue | 20 +++----
 2 files changed, 74 insertions(+), 9 deletions(-)
 create mode 100644 loama/src/components/IconButton.vue

diff --git a/loama/src/components/IconButton.vue b/loama/src/components/IconButton.vue
new file mode 100644
index 0000000..e7b7a60
--- /dev/null
+++ b/loama/src/components/IconButton.vue
@@ -0,0 +1,63 @@
+<template>
+    <button :class="type">
+        <component :v-if="leftIcon" :is="leftIcon" :size="24"/>
+        <span><slot></slot></span>
+        <component :v-if="rightIcon" :is="rightIcon" :size="24"/>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+    /**
+     * The icon to display on the left side of the button. Should be a Phosphor icon from the `@phosphor-icons/vue` package.
+     */
+    leftIcon?: Object,
+    /**
+     * The icon to display on the right side of the button. Should be a Phosphor icon from the `@phosphor-icons/vue` package.
+     */
+    rightIcon?: Object,
+    /**
+     * The variant of the button; defaults to primary.
+     */
+    variant?: "primary" | "secondary"
+}>(), {
+    variant: "primary"
+})
+
+const type = computed(() => {
+    return {
+        primary: props.variant === "primary",
+        secondary: props.variant === "secondary"
+    }
+})
+</script>
+
+<style scoped>
+button {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    padding: var(--base-unit);
+    gap: var(--base-unit);
+    border-radius: var(--base-corner);
+    height: fit-content;
+    border: none;
+}
+
+.primary {
+    background-color: var(--solid-purple);
+    color: var(--off-white);
+}
+
+.secondary {
+    background-color: var(--solid-white);
+    color: var(--off-black);
+    border: 0.25rem solid var(--solid-purple);
+}
+</style>
\ No newline at end of file
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 6f8a4ad..3fe9449 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -6,8 +6,8 @@
         </div>
         <nav>
             <slot></slot>
+            <IconButton :rightIcon="PhShareFat" class="share">Share access</IconButton>
         </nav>
-        
         <img :src="pfpSrc" alt="User profile picture" @click="showContextMenu"/>
         <Suspense>
             <HeaderContextMenu class="menu" :class="{hidden: isContextMenuHidden}" @click="showContextMenu"/>
@@ -21,19 +21,16 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Loama from '../../assets/loama.svg'
-import { store } from '@/store';
-import router from '@/router';
+import IconButton from '../IconButton.vue'
 import HeaderContextMenu from './HeaderContextMenu.vue'
-
-const props = defineProps<{
+import { PhShareFat } from '@phosphor-icons/vue';
+defineProps<{
     pfpSrc: string,
 }>()
+
 const isContextMenuHidden = ref(true)
 
-async function logout() {
-    store.session.logout();
-    router.push('/'); 
-}
+
 function showContextMenu() {
     isContextMenuHidden.value = !isContextMenuHidden.value
 }
@@ -78,6 +75,11 @@ function showContextMenu() {
         align-items: end;
     }
 
+    .share {
+        align-self: center;
+        margin-left: auto;
+    }
+
     svg {
         width: calc(var(--base-unit)*8);
         height: calc(var(--base-unit)*8);

From 941b72e607160c024feb61962445954980879646 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 11:29:46 +0200
Subject: [PATCH 5/7] Removed outdated pod list section

---
 loama/src/components/PodList.vue | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/loama/src/components/PodList.vue b/loama/src/components/PodList.vue
index e6b3196..2c3ee06 100644
--- a/loama/src/components/PodList.vue
+++ b/loama/src/components/PodList.vue
@@ -1,31 +1,7 @@
 <template>
     <div>
         <h2>Pods:</h2>
-        <template v-for="pod in pods" :key="pod.pod">
-            <h4>{{ pod.pod }}</h4>
-            <table>
-                <thead>
-                    <th>URL</th>
-                    <th>Properties</th>
-                    <th>Access Modes</th>
-                </thead>
-                <tbody>
-                    <tr v-for="thing in pod.things" :key="thing.url">
-                        <td>{{ thing.url }}</td>
-                        <td>
-                            <ul>
-                                <li v-for="property in thing.properties" :key="property">{{ property }}</li>
-                            </ul>
-                        </td>
-                        <td>
-                            {{ thing.accessModes }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <h4>{{ `${pod.pod}index.json` }}</h4>
-            {{ indexFile }}
-        </template>
+        
         <button @click="addReadmePermissions">Add README permissions</button>
         <button @click="removeReadmePermissions">Revoke README permissions</button>
     </div>

From 6e5827c4ed1956951902b4ac930cd22ee7421bc1 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 12:09:11 +0200
Subject: [PATCH 6/7] Applied suggestions from PR

---
 .../{IconButton.vue => LoButton.vue}          |   0
 loama/src/components/header/HeaderBase.vue    | 146 +++++++++---------
 loama/src/router/index.ts                     |   2 -
 3 files changed, 75 insertions(+), 73 deletions(-)
 rename loama/src/components/{IconButton.vue => LoButton.vue} (100%)

diff --git a/loama/src/components/IconButton.vue b/loama/src/components/LoButton.vue
similarity index 100%
rename from loama/src/components/IconButton.vue
rename to loama/src/components/LoButton.vue
diff --git a/loama/src/components/header/HeaderBase.vue b/loama/src/components/header/HeaderBase.vue
index 3fe9449..4de316a 100644
--- a/loama/src/components/header/HeaderBase.vue
+++ b/loama/src/components/header/HeaderBase.vue
@@ -1,16 +1,16 @@
 <template>
     <header>
         <div class="wordmark">
-            <Loama/>
+            <Loama />
             <span>Loama</span>
         </div>
         <nav>
             <slot></slot>
-            <IconButton :rightIcon="PhShareFat" class="share">Share access</IconButton>
+            <LoButton :rightIcon="PhShareFat" class="share">Share access</LoButton>
         </nav>
-        <img :src="pfpSrc" alt="User profile picture" @click="showContextMenu"/>
+        <img :src="pfpSrc" alt="User profile picture" @click="toggleContextMenu" />
         <Suspense>
-            <HeaderContextMenu class="menu" :class="{hidden: isContextMenuHidden}" @click="showContextMenu"/>
+            <HeaderContextMenu class="menu" :class="{ hidden: isContextMenuHidden }" @click="toggleContextMenu" />
             <template #fallback>
                 Loading context menu...
             </template>
@@ -21,7 +21,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import Loama from '../../assets/loama.svg'
-import IconButton from '../IconButton.vue'
+import LoButton from '../LoButton.vue'
 import HeaderContextMenu from './HeaderContextMenu.vue'
 import { PhShareFat } from '@phosphor-icons/vue';
 defineProps<{
@@ -31,76 +31,80 @@ defineProps<{
 const isContextMenuHidden = ref(true)
 
 
-function showContextMenu() {
+function toggleContextMenu() {
     isContextMenuHidden.value = !isContextMenuHidden.value
 }
 
 </script>
 
 <style scoped>
-    header, .wordmark, nav {
-        display: flex;
-        flex-flow: row nowrap;
-    }
-
-    .wordmark, img {
-        margin-bottom: calc(var(--base-unit));
-    }
-
-    header, img {
-        border: 0.25rem solid var(--solid-purple);
-    }
-
-    header {
-        width: 100%;
-        gap: calc(var(--base-unit)*5);
-        border-radius: 0 0 var(--base-corner) var(--base-corner);
-        border-bottom: 0.5rem solid var(--solid-purple);
-        border-top: 0;
-        padding: calc(var(--base-unit)*3) calc(var(--base-unit)*6) 0 calc(var(--base-unit)*3);
-    }
-
-    .wordmark > span {
-        font-family: "JetBrains Mono";
-        font-size: calc(var(--base-unit)*6);
-        font-style: normal;
-        font-weight: 700;
-        line-height: normal;
-        color: var(--solid-purple);
-        text-transform: uppercase;
-    }
-
-    nav {
-        flex-grow: 1;
-        align-items: end;
-    }
-
-    .share {
-        align-self: center;
-        margin-left: auto;
-    }
-
-    svg {
-        width: calc(var(--base-unit)*8);
-        height: calc(var(--base-unit)*8);
-    }
-
-    img {
-        border-radius: 100%;
-        width: calc(var(--base-unit)*8);
-    }
-    
-    .hidden {
-        display: none;
-    }
-
-    .menu {
-        position: absolute;
-        right: var(--base-unit);
-        top: calc(var(--base-unit)*14);
-        min-width: fit-content;
-        min-height: fit-content;
-        max-width: 25vw;
-        max-height: 50vw;
-    }
+header,
+.wordmark,
+nav {
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.wordmark,
+img {
+    margin-bottom: calc(var(--base-unit));
+}
+
+header,
+img {
+    border: 0.25rem solid var(--solid-purple);
+}
+
+header {
+    width: 100%;
+    gap: calc(var(--base-unit)*5);
+    border-radius: 0 0 var(--base-corner) var(--base-corner);
+    border-bottom: 0.5rem solid var(--solid-purple);
+    border-top: 0;
+    padding: calc(var(--base-unit)*3) calc(var(--base-unit)*6) 0 calc(var(--base-unit)*3);
+}
+
+.wordmark>span {
+    font-family: "JetBrains Mono";
+    font-size: calc(var(--base-unit)*6);
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    color: var(--solid-purple);
+    text-transform: uppercase;
+}
+
+nav {
+    flex-grow: 1;
+    align-items: end;
+}
+
+.share {
+    align-self: center;
+    margin-left: auto;
+}
+
+svg {
+    width: calc(var(--base-unit)*8);
+    height: calc(var(--base-unit)*8);
+}
+
+img {
+    border-radius: 100%;
+    width: calc(var(--base-unit)*8);
+}
+
+.hidden {
+    display: none;
+}
+
+.menu {
+    position: absolute;
+    right: var(--base-unit);
+    top: calc(var(--base-unit)*14);
+    min-width: fit-content;
+    min-height: fit-content;
+    max-width: 25vw;
+    max-height: 50vw;
+}
 </style>
\ No newline at end of file
diff --git a/loama/src/router/index.ts b/loama/src/router/index.ts
index 189695d..d3a38ea 100644
--- a/loama/src/router/index.ts
+++ b/loama/src/router/index.ts
@@ -22,10 +22,8 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to) => {
-  console.log(store.session.info)
   if (!store.session.info.isLoggedIn) {
     await store.session.handleIncomingRedirect();
-    console.log(store.session.info)
     if(store.session.info.isLoggedIn){
       store.setUsedPod((await listPods(store.session as Session))[0])
     }

From 69f001df333cdc009fd2dac70cd3edc6bc7024a1 Mon Sep 17 00:00:00 2001
From: Bo Robbrecht <robbrechtbo@hotmail.com>
Date: Wed, 17 Jul 2024 12:15:14 +0200
Subject: [PATCH 7/7] Applied semantic suggestion from PR

---
 loama/src/components/LoButton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/loama/src/components/LoButton.vue b/loama/src/components/LoButton.vue
index e7b7a60..d678051 100644
--- a/loama/src/components/LoButton.vue
+++ b/loama/src/components/LoButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button :class="type">
+    <button :class="classList">
         <component :v-if="leftIcon" :is="leftIcon" :size="24"/>
         <span><slot></slot></span>
         <component :v-if="rightIcon" :is="rightIcon" :size="24"/>
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<{
     variant: "primary"
 })
 
-const type = computed(() => {
+const classList = computed(() => {
     return {
         primary: props.variant === "primary",
         secondary: props.variant === "secondary"