From df93c5f0bf096e4cbe1c7993d44eda49ae9072fc Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Mon, 9 Mar 2026 13:18:24 +0100
Subject: [PATCH 01/10] =?UTF-8?q?Changed=20the=20button=20to=20only=20show?=
 =?UTF-8?q?=20if=20the=20user=20is=20admin=20or=20higher=20role.=20Also=20?=
 =?UTF-8?q?changed=20Vr-scen=20to=20vr-milj=C3=B6=20in=20the=20text=20the?=
 =?UTF-8?q?=20user=20sees?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/views/public/StartView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/views/public/StartView.vue b/app/src/views/public/StartView.vue
index a543118b..6787c25f 100644
--- a/app/src/views/public/StartView.vue
+++ b/app/src/views/public/StartView.vue
@@ -16,7 +16,7 @@
         </h2>
         <button v-if="canCreateVrSpace" class="btn btn-primary btn-outline btn-sm px-2" @click="createVrSpace">
           <span class="material-icons">add</span>
-          Skapa ny VR-scen
+          Skapa ny VR-miljö
         </button>
       </div>
       <VRList />
@@ -39,7 +39,7 @@ const authStore = useAuthStore();
 const vrSpaceStore = useVrSpaceStore();
 
 const canCreateVrSpace = computed(() => {
-  if (!authStore.role) { return false; }
+  if (!authStore.role || !hasAtLeastSecurityRole(authStore.role, 'admin')) { return false; }
   return hasAtLeastSecurityRole(authStore.role, 'user');
 });
 async function createVrSpace() {

From d38e177f050475515c7eb5c89b41e54e4a65e41d Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Tue, 7 Apr 2026 13:48:43 +0200
Subject: [PATCH 02/10] Added a filter to user list and made the list paginated

---
 app/src/views/admin/AdminUserManagerView.vue | 70 ++++++++++++++++++--
 1 file changed, 65 insertions(+), 5 deletions(-)

diff --git a/app/src/views/admin/AdminUserManagerView.vue b/app/src/views/admin/AdminUserManagerView.vue
index 10fd4dbc..78f5ff3e 100644
--- a/app/src/views/admin/AdminUserManagerView.vue
+++ b/app/src/views/admin/AdminUserManagerView.vue
@@ -42,6 +42,17 @@
         <h3>
           Befintliga användare
         </h3>
+        <div class="flex flex-col gap-3 md:flex-row md:items-center">
+          <input
+            v-model="userSearch"
+            class="input input-bordered input-primary w-full md:max-w-sm"
+            placeholder="Sök användarnamn..."
+          />
+
+          <button v-if="filterActive || userSearch" @click="clearFilters" class="btn btn-neutral btn-sm">
+            Rensa filter
+          </button>
+        </div>
         <div class="flex flex-wrap gap-2">
           <label v-for="role in fetchedRoles" class="btn btn-xs gap-1 rounded-full leading-none"
             :class="`has-[:checked]:${getClassForRole(role.value)}`">
@@ -54,7 +65,7 @@
             class="btn btn-neutral btn-circle btn-xs material-icons">clear</button>
         </div>
         <div class="grid grid-cols-[auto_auto_1fr_auto_auto] gap-x-4 gap-y-1">
-          <div v-for="user in filteredUsers" :key="user.userId" class="grid grid-cols-subgrid col-span-5 items-center">
+          <div v-for="user in paginatedUsers" :key="user.userId" class="grid grid-cols-subgrid col-span-5 items-center">
             <template v-if="editedUserId === user.userId">
               <input v-model="editedUsername" class="input input-bordered input-sm px-3 text-base font-bold"
                 placeholder="Användarnamn"
@@ -98,6 +109,25 @@
             </template>
           </div>
         </div>
+        <div class="flex items-center gap-2 mt-4">
+            <button class="btn btn-sm" :disabled="currentPage === 1" @click="currentPage--">
+              Föregående
+            </button>
+          
+            <span class="text-sm">
+              Sida {{ currentPage }} av {{ totalPages }}
+            </span>
+          
+            <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="currentPage++">
+              Nästa
+            </button>
+          
+            <select v-model.number="pageSize" class="select select-bordered select-sm">
+              <option :value="10">10</option>
+              <option :value="25">25</option>
+              <option :value="50">50</option>
+            </select>
+          </div>
       </div>
       <div v-else>
         <!-- Vad gör du här? Du får inte vara här. -->
@@ -109,7 +139,7 @@
 
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/authStore';
-import { computed, onBeforeMount, reactive, ref } from 'vue';
+import { computed, onBeforeMount, reactive, ref, watch } from 'vue';
 import { createUser, getAdmins, updateUser, deleteUser, getUsers } from '@/modules/authClient';
 import { allRolesBelow, hasAtLeastSecurityRole, roleHierarchy, translateUserRole, type UserRole } from 'schemas';
 import MaxWidth7xl from '@/components/layout/MaxWidth7xl.vue';
@@ -143,6 +173,10 @@ function getClassForRole(role: UserRole) {
   }
 }
 
+const userSearch = ref('');
+const currentPage = ref(1);
+const pageSize = ref(10);
+
 const createdUsername = ref('');
 const createdPassword = ref('');
 const createdRole = ref<UserRole>('guest');
@@ -178,9 +212,35 @@ function clearFilters() {
   }
 }
 const filteredUsers = computed(() => {
-  if (!filterActive.value) return fetchedUsers.value;
-  return fetchedUsers.value.filter(user => pickedRoleFilters.value.includes(user.role));
-})
+  const query = userSearch.value.trim().toLowerCase();
+
+  const activeRoles = Object.entries(roleFilter)
+    .filter(([, active]) => active)
+    .map(([role]) => role as UserRole);
+
+  return fetchedUsers.value.filter(user => {
+    const matchesSearch =
+      query === '' || user.username.toLowerCase().includes(query);
+
+    const matchesRole =
+      activeRoles.length === 0 || activeRoles.includes(user.role);
+
+    return matchesSearch && matchesRole;
+  });
+});
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(filteredUsers.value.length / pageSize.value))
+);
+
+const paginatedUsers = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  return filteredUsers.value.slice(start, start + pageSize.value);
+});
+
+watch([userSearch, roleFilter], () => {
+  currentPage.value = 1;
+}, { deep: true });
 
 const editedUserId = ref<string>();
 const editedUsername = ref<string>();

From aaa0bd79ae9e95012bc4af8fc1c32191e86e7c43 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 14:33:14 +0200
Subject: [PATCH 03/10] Added filter function to list

---
 app/src/components/VRList.vue | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index 491ccc41..a80f4f14 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -60,6 +60,35 @@ const connection = useConnectionStore();
 const authStore = useAuthStore();
 // const vrSpaceStore = useVrSpaceStore();
 
+const searchQuery = ref('');
+const visibilityFilter = ref<'all' | 'owned' | 'member' | 'public'>('all');
+const currentPage = ref(1);
+const pageSize = ref(12);
+
+const visibilityFilter = ref<'all' | 'owned' | 'member' | 'public'>('all');
+
+const filteredVrSpaces = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+
+  return availableVrSpaces.value.filter(space => {
+    const matchesName =
+      query === '' || space.name.toLowerCase().includes(query);
+
+    const matchesVisibility =
+      visibilityFilter.value === 'all'
+        ? true
+        : visibilityFilter.value === 'owned'
+          ? space.permissionLevel === 'owner'
+          : visibilityFilter.value === 'member'
+            ? ['admin', 'edit', 'view'].includes(space.permissionLevel ?? '')
+            : visibilityFilter.value === 'public'
+              ? space.visibility === 'public'
+              : true;
+
+    return matchesName && matchesVisibility;
+  });
+});
+
 const props = defineProps({
   max: { type: Number, default: -1 },
 });

From 591d5a653ef5f0b2ff14fe3eebd3f319b9121fef Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 14:33:41 +0200
Subject: [PATCH 04/10] Added pagination functions to list

---
 app/src/components/VRList.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index a80f4f14..d1e3f024 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -51,7 +51,7 @@
 import type { RouterOutputs } from '@/modules/trpcClient';
 import { useConnectionStore } from '@/stores/connectionStore';
 import { type VrSpaceId, hasAtLeastPermissionLevel, hasAtLeastSecurityRole, translatePermissionLevelAdjective, translatePermissionLevelVerb, translateVisibility } from 'schemas';
-import { onBeforeMount, ref, computed } from 'vue';
+import { onBeforeMount, ref, computed, watch } from 'vue';
 import { RouterLink, useRouter } from 'vue-router';
 import { getAssetUrl } from '@/modules/utils';
 import { useAuthStore } from '@/stores/authStore';
@@ -89,6 +89,19 @@ const filteredVrSpaces = computed(() => {
   });
 });
 
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(filteredVrSpaces.value.length / pageSize.value))
+);
+
+const paginatedVrSpaces = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value;
+  return filteredVrSpaces.value.slice(start, start + pageSize.value);
+});
+
+watch([searchQuery, visibilityFilter, pageSize], () => {
+  currentPage.value = 1;
+});
+
 const props = defineProps({
   max: { type: Number, default: -1 },
 });

From 77ec206ce2f49f26b0cfe39c4929724feab9f493 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 15:10:36 +0200
Subject: [PATCH 05/10] Removed duplicate of a const variable

---
 app/src/components/VRList.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index d1e3f024..570cbc68 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -13,6 +13,20 @@
         </button>
       </template>
     </div> -->
+    <div class="flex flex-col gap-3 md:flex-row md:items-center">
+      <input
+        v-model="searchQuery"
+        class="input input-bordered input-primary w-full md:max-w-sm"
+        placeholder="Sök VR-scen..."
+      />
+
+      <select v-model="visibilityFilter" class="select select-bordered">
+        <option value="all">Alla</option>
+        <option value="owned">Äger själv</option>
+        <option value="member">Med i men äger inte</option>
+        <option value="public">Publika</option>
+      </select>
+    </div>
     <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-4 items-stretch">
       <div v-for="space in listedVrSpaces" :key="space.vrSpaceId" class="card card-compact w-full shadow-xl">
         <figure class="w-full h-32" style="background-size: cover"
@@ -65,8 +79,6 @@ const visibilityFilter = ref<'all' | 'owned' | 'member' | 'public'>('all');
 const currentPage = ref(1);
 const pageSize = ref(12);
 
-const visibilityFilter = ref<'all' | 'owned' | 'member' | 'public'>('all');
-
 const filteredVrSpaces = computed(() => {
   const query = searchQuery.value.trim().toLowerCase();
 

From 284132a6c2a7bec1f6f44b7cb6e7bbce3f97ba06 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 15:11:50 +0200
Subject: [PATCH 06/10] Changed words used to fit more

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

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index 570cbc68..67413b2e 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -22,8 +22,8 @@
 
       <select v-model="visibilityFilter" class="select select-bordered">
         <option value="all">Alla</option>
-        <option value="owned">Äger själv</option>
-        <option value="member">Med i men äger inte</option>
+        <option value="owned">Äger</option>
+        <option value="member">Medlem</option>
         <option value="public">Publika</option>
       </select>
     </div>

From c97f565ed0108d36c1ec3148cb9b1440564d210c Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 15:14:46 +0200
Subject: [PATCH 07/10] Added pagination to list

---
 app/src/components/VRList.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index 67413b2e..7b233291 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -28,7 +28,7 @@
       </select>
     </div>
     <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-4 items-stretch">
-      <div v-for="space in listedVrSpaces" :key="space.vrSpaceId" class="card card-compact w-full shadow-xl">
+      <div v-for="space in paginatedVrSpaces" :key="space.vrSpaceId" class="card card-compact w-full shadow-xl">
         <figure class="w-full h-32" style="background-size: cover"
           :style="{ 'background-image': 'url(' + (space.image ? `${getAssetUrl(space.image)}?scaledown=8` : 'https://plus.unsplash.com/premium_photo-1663091704223-cc051e0f0c47?q=80&w=2073&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') + ')' }" />
         <div class="card-body bg-base-400 ">
@@ -59,6 +59,22 @@
         </div>
       </div>
     </div>
+    <div class="flex justify-between items-baseline gap-2 mt-4">
+      <div class="flex gap-2">
+        <button class="btn btn-sm" :disabled="currentPage === 1" @click="currentPage--">
+          Föregående
+        </button>
+        <span class="text-sm">Sida {{ currentPage }} av {{ totalPages }}</span>
+        <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="currentPage++">
+          Nästa
+        </button>
+      </div>
+      <select v-model.number="pageSize" class="select select-bordered select-sm">
+        <option :value="12">12</option>
+        <option :value="24">24</option>
+        <option :value="48">48</option>
+      </select>
+    </div>
   </div>
 </template>
 <script setup lang="ts">

From 62b04ddf0a8f2bd1eeabb25a65d9222bb9f7c1c1 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Wed, 8 Apr 2026 15:24:52 +0200
Subject: [PATCH 08/10] Added alphabetical sorting

---
 app/src/components/VRList.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index 7b233291..27e651f5 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -26,6 +26,9 @@
         <option value="member">Medlem</option>
         <option value="public">Publika</option>
       </select>
+      <button class="btn btn-sm" @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'">
+        Sortera {{ sortOrder === 'asc' ? 'A → Ö' : 'Ö → A' }}
+      </button>
     </div>
     <div class="w-full grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-4 items-stretch">
       <div v-for="space in paginatedVrSpaces" :key="space.vrSpaceId" class="card card-compact w-full shadow-xl">
@@ -94,6 +97,7 @@ const searchQuery = ref('');
 const visibilityFilter = ref<'all' | 'owned' | 'member' | 'public'>('all');
 const currentPage = ref(1);
 const pageSize = ref(12);
+const sortOrder = ref<'asc' | 'desc'>('asc');
 
 const filteredVrSpaces = computed(() => {
   const query = searchQuery.value.trim().toLowerCase();
@@ -117,13 +121,19 @@ const filteredVrSpaces = computed(() => {
   });
 });
 
+const sortedVrSpaces = computed(() => {
+  return [...filteredVrSpaces.value].sort((a, b) => {
+    return a.name.localeCompare(b.name, 'sv') * (sortOrder.value === 'asc' ? 1 : -1);
+  });
+});
+
 const totalPages = computed(() =>
-  Math.max(1, Math.ceil(filteredVrSpaces.value.length / pageSize.value))
+  Math.max(1, Math.ceil(sortedVrSpaces.value.length / pageSize.value))
 );
 
 const paginatedVrSpaces = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value;
-  return filteredVrSpaces.value.slice(start, start + pageSize.value);
+  return sortedVrSpaces.value.slice(start, start + pageSize.value);
 });
 
 watch([searchQuery, visibilityFilter, pageSize], () => {

From 07fd0cc1c2850b283cc377e79a39fd0930541443 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Tue, 14 Apr 2026 08:14:10 +0200
Subject: [PATCH 09/10] Fixed clearfilters not resetting the search text

---
 app/src/views/admin/AdminUserManagerView.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/src/views/admin/AdminUserManagerView.vue b/app/src/views/admin/AdminUserManagerView.vue
index 78f5ff3e..9bea1cb5 100644
--- a/app/src/views/admin/AdminUserManagerView.vue
+++ b/app/src/views/admin/AdminUserManagerView.vue
@@ -127,7 +127,7 @@
               <option :value="25">25</option>
               <option :value="50">50</option>
             </select>
-          </div>
+        </div>
       </div>
       <div v-else>
         <!-- Vad gör du här? Du får inte vara här. -->
@@ -207,6 +207,7 @@ const filterActive = computed(() => {
   return filterArr.some(([k, active]) => active);
 })
 function clearFilters() {
+  userSearch.value = '';
   for (const key of Object.keys(roleFilter) as UserRole[]) {
     roleFilter[key] = false;
   }

From 7fbeffcf876b769759ceaddb3fdfd12cbb807067 Mon Sep 17 00:00:00 2001
From: Darkdusk <johan.svensson.01@hotmail.com>
Date: Tue, 14 Apr 2026 13:41:54 +0200
Subject: [PATCH 10/10] Fixed pagination options appearence to be more pleasing

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

diff --git a/app/src/components/VRList.vue b/app/src/components/VRList.vue
index 27e651f5..17435687 100644
--- a/app/src/components/VRList.vue
+++ b/app/src/components/VRList.vue
@@ -62,12 +62,12 @@
         </div>
       </div>
     </div>
-    <div class="flex justify-between items-baseline gap-2 mt-4">
+    <div class="flex items-center gap-2 mt-4">
       <div class="flex gap-2">
         <button class="btn btn-sm" :disabled="currentPage === 1" @click="currentPage--">
           Föregående
         </button>
-        <span class="text-sm">Sida {{ currentPage }} av {{ totalPages }}</span>
+        <span class="text-sm leading-none self-center">Sida {{ currentPage }} av {{ totalPages }}</span>
         <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="currentPage++">
           Nästa
         </button>