bug fixes file deletions and more

ui/components/Breadcrumbs.vue

@@ -25,9 +25,9 @@ const crumbs = computed(() => {
                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="m9 6l6 6l-6 6" />
             </svg>
-            <a class="hover:text-text" :class="index === crumbs.length - 1 ? 'text-foam' : 'text-subtle'"
-                :href="crumb.link">{{
-                    crumb.name }}</a>
+            <NuxtLink class="hover:text-text" :class="index === crumbs.length - 1 ? 'text-foam' : 'text-subtle'"
+                :to="crumb.link">{{
+                    crumb.name }}</NuxtLink>
         </span>
     </div>
 </template>

ui/components/Checkbox.vue

@@ -0,0 +1,23 @@
+<template>
+    <div v-on:click="toggle()" class="w-5 h-5 border rounded cursor-pointer flex items-center justify-center"
+        :class="state === 'unchecked' ? 'hover:bg-muted/5 active:bg-muted/15' : 'bg-foam/10 hover:bg-foam/15 active:bg-foam/25 text-foam'">
+        <div v-if="state === 'some'" class="w-8/12 h-0.5 bg-current rounded-full"></div>
+        <span v-else-if="state === 'checked'">
+            <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="m5 12l5 5L20 7" />
+            </svg>
+        </span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps(['modelValue'])
+const emit = defineEmits(['update:modelValue'])
+let state = computed(() => props.modelValue)
+
+const toggle = () => {
+    const newState = state.value === 'unchecked' ? 'checked' : 'unchecked'
+    emit('update:modelValue', newState);
+}
+</script>

ui/components/FileNav.vue

@@ -19,7 +19,6 @@ const percentage = computed(() => {
     return (props.usageBytes / capacityBytes.value);
 });
 
-console.log(percentage.value, props.usageBytes, capacityBytes.value)
 const offset = computed(() => {
     return circumference - percentage.value * circumference;
 });
@@ -30,10 +29,6 @@ const capacity = computed(() => {
     return formatBytes(capacityBytes.value)
 });
 
-if (props.usageBytes > capacityBytes.value) {
-    console.log("SCAN SCAN SCAM SCAM")
-}
-
 const isAllFilesActive = computed(() => route.path === '/home');
 
 const isInFolder = computed(() => route.path.startsWith('/home/') && route.path !== '/home');

ui/components/Nav.vue

@@ -18,7 +18,7 @@ const changeTheme = () => {
 </script>
 
 <template>
-    <header class="flex h-[var(--nav-height)] px-4 justify-center sticky top-0 z-50 border-b bg-base">
+    <header class="flex h-[var(--nav-height)] px-4 justify-center sticky top-0 z-20 border-b bg-base">
         <div class="flex w-full items-center justify-between space-x-2.5">
             <p
                 class="-ml-2.5 flex shrink-0 items-center px-2.5 py-1.5 focus:outline-none focus:ring rounded-m font-semiboldd">

ui/components/Popup.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+defineProps(['modelValue', 'header'])
+const emit = defineEmits(['update:modelValue'])
+</script>
+
+<template>
+    <div class="grid place-content-center absolute top-0 left-0 bottom-0 right-0 z-40"
+        :class="{ 'hidden': !modelValue }">
+        <div v-on:click=" $emit('update:modelValue', !modelValue)"
+            class="absolute top-0 left-0 bottom-0 right-0 bg-base/40">
+        </div>
+
+        <transition name="scale-fade">
+            <div v-if="modelValue"
+                class="bg-surface rounded-xl border shadow-md p-6 transition-[transform,opacity] duration-[250ms] origin-center z-50 w-screen h-screen sm:w-[600px] sm:h-auto">
+                <div class="flex justify-between mb-2 items-center">
+                    <h3 class="text-xl font-semibold">{{ header }}</h3>
+                    <button v-on:click=" $emit('update:modelValue', !modelValue)"
+                        class="p-1 border h-fit rounded-md hover:bg-muted/10 active:bg-muted/20 transition-bg">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                stroke-width="2" d="M18 6L6 18M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <slot />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<style scoped>
+.scale-fade-enter-from,
+.scale-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.90);
+}
+
+.scale-fade-enter-to {
+    opacity: 1;
+    transform: scale(1);
+}
+</style>