more ui components

components.d.ts

@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     SkeletonTopBar: typeof import('./src/components/Skeleton/SkeletonTopBar.vue')['default']
     Spinner: typeof import('./src/components/Spinner.vue')['default']
     TopBar: typeof import('./src/components/TopBar.vue')['default']
+    UIAlert: typeof import('./src/components/ui/UIAlert.vue')['default']
     UIButton: typeof import('./src/components/ui/UIButton.vue')['default']
     UIButtonGroup: typeof import('./src/components/ui/UIButtonGroup.vue')['default']
     UIDropdown: typeof import('./src/components/ui/UIDropdown.vue')['default']

src/App.vue

@@ -110,12 +110,10 @@ provide('loading', loading)
           v-model="passphrase"
         />
       </form>
-      <div class="alert alert-error mt-4 flex-row" v-if="passphraseValid === false">
+      <UIAlert color="error" class="mt-4">
-        <div>
+        <i class="fa-solid fa-triangle-exclamation"></i>
-          <i class="fa-solid fa-triangle-exclamation"></i>
+        The passphrase you entered is incorrect.
-          The passphrase you entered is incorrect.
+      </UIAlert>
-        </div>
-      </div>
     </template>
     <template #actions="{ close }">
       <UIButton color="primary" size="sm" @click="submitPassphrase(close)">Submit</UIButton>

src/components/TopBar/Hamburger.vue

@@ -8,12 +8,10 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <label class="swap-rotate swap btn-ghost btn-sm btn-circle btn">
+  <label
-    <input
+    class="btn-ghost btn-sm btn-circle btn relative inline-grid cursor-pointer select-none place-content-center"
-      type="checkbox"
+  >
-      @click="emit('toggleSideBar')"
+    <input type="checkbox" @click="emit('toggleSideBar')" :checked="!props.sideBarCollapsed" />
-      :checked="!props.sideBarCollapsed"
-    />
     <svg
       class="swap-off fill-current"
       xmlns="http://www.w3.org/2000/svg"
@@ -37,7 +35,27 @@ const emit = defineEmits<{
   </label>
 </template>
 <style scoped lang="scss">
-.swap > * {
+input {
+  appearance: none;
+}
+label > * {
   transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-property: transform, opacity;
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+input:checked ~ .swap-off {
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+
+input:checked ~ .swap-on {
+  opacity: 1;
+  transform: rotate(0deg);
+}
+.swap-on {
+  opacity: 0;
+  transform: rotate(45deg);
 }
 </style>

src/components/TopBar/Settings.vue

@@ -26,7 +26,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
   <OnClickOutside>
     <UIDropdown class="search-active-hide">
       <template #activator>
-        <UIButton size="sm" variant="outline" tabindex="0" class="py-1 text-white">
+        <UIButton :dropdown="true" size="sm" variant="outline" class="py-1 text-white">
           <i class="fa-fw fa-solid fa-user-gear" />
         </UIButton>
       </template>
@@ -34,6 +34,7 @@ const handleClick = (fn: (...args: any[]) => any) => {
         <UIDropdownItem
           v-for="source in availableNotesSources.filter((source) => source !== activeNotesSource)"
           :key="source"
+          @click="handleClick(() => (preferredNotesSource = source))"
         >
           <i class="fa-fw fa-solid fa-database" />
           {{ sourceLabels[source] }}

src/components/ui/UIAlert.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+interface Props {
+  color?: 'info' | 'success' | 'warning' | 'error'
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: 'info'
+})
+
+const styleClass = computed(() => {
+  const colorClass = `alert-${props.color}`
+  return [colorClass]
+})
+</script>
+<template>
+  <div class="alert shadow-lg" :class="styleClass">
+    <div><slot></slot></div>
+  </div>
+</template>

src/components/ui/UIButton.vue

@@ -3,12 +3,14 @@ interface Props {
   size?: string
   variant?: 'regular' | 'outline'
   color?: string
+  dropdown?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   variant: 'regular',
-  color: 'regular'
+  color: 'regular',
+  dropdown: false
 })
 
 const styleClass = computed(() => {
@@ -19,5 +21,8 @@ const styleClass = computed(() => {
 })
 </script>
 <template>
-  <button class="btn duration-0" :class="styleClass"><slot></slot></button>
+  <label class="btn duration-0" :class="styleClass" v-if="props.dropdown" tabindex="0">
+    <slot></slot>
+  </label>
+  <button class="btn duration-0" :class="styleClass" v-else><slot></slot></button>
 </template>