fix: UI/UX/DevX improvements (#36)

* feat: field type badges in the fields list table

* fix: proper loading state for reset panel in the switchboard

* fix: auto scroll to top in router

* fix: tiny change in backend Settings

* chore: restructured docker-compose.yml

* fix: tiny change in frontend api.ts

* fix: nice empty state in tags grid

Author: ivanskv2000

backend/app/settings.py

@@ -3,7 +3,7 @@
 from pathlib import Path
 from typing import Literal, Optional
 
-from pydantic import ConfigDict
+from pydantic import ConfigDict, Field
 from pydantic_settings import BaseSettings
 
 
@@ -14,7 +14,7 @@ def resolve_env_file(base_dir: str = ".") -> str:
 
 
 class Settings(BaseSettings):
-    env: Literal["dev", "prod", "demo"] = "dev"
+    env: Literal["dev", "prod", "demo"] = Field(default="dev", alias="ENV")
     database_url: str = "sqlite:///./test.db"
     frontend_url: Optional[str] = None
 
@@ -29,6 +29,7 @@ class Settings(BaseSettings):
     model_config = ConfigDict(
         env_file=resolve_env_file(),
         env_file_encoding="utf-8",
+        case_sensitive=False,
     )
 
     @property

docker-compose.yaml

@@ -1,22 +1,4 @@
 services:
-  db:
-    image: postgres:15
-    container_name: evsy-db
-    restart: always
-    environment:
-      POSTGRES_USER: evsy
-      POSTGRES_PASSWORD: evsy
-      POSTGRES_DB: evsy
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-#    ports:
-#      - "5432:5432"
-    healthcheck:
-      test: ["CMD", "pg_isready", "-U", "evsy"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
-
   backend:
     build:
       context: ./backend
@@ -52,5 +34,23 @@ services:
       backend:
         condition: service_healthy
 
+  db:
+    image: postgres:15
+    container_name: evsy-db
+    restart: always
+    environment:
+      POSTGRES_USER: evsy
+      POSTGRES_PASSWORD: evsy
+      POSTGRES_DB: evsy
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+#    ports:
+#      - "5432:5432"
+    healthcheck:
+      test: ["CMD", "pg_isready", "-U", "evsy"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
 volumes:
   postgres_data:

frontend/src/modules/fields/components/FieldTypeBadge.vue

@@ -2,12 +2,16 @@
 import { FieldType } from '@/modules/fields/types'
 import { Badge } from '@/shared/ui/badge'
 import { cn } from '@/shared/utils/general' // your utility for class merging
-import { useAttrs } from 'vue'
+import { computed, useAttrs } from 'vue'
 
-const props = defineProps<{
+interface Props {
   type: FieldType
   monochrome?: boolean
-}>()
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  monochrome: false,
+})
 
 const attrs = useAttrs()
 
@@ -31,10 +35,12 @@ const colorClass = {
 
 const baseClass = 'text-xs tracking-widest uppercase'
 
-const finalClass = cn(
-  baseClass,
-  props.monochrome ? 'bg-muted text-foreground' : colorClass[props.type],
-  attrs.class as string | undefined
+const color = computed(() =>
+  props.monochrome ? 'bg-muted text-foreground' : colorClass[props.type]
+)
+
+const finalClass = computed(() =>
+  cn(baseClass, color, color.value, attrs.class as string | undefined)
 )
 </script>
 

frontend/src/modules/fields/components/fieldColumns.ts

@@ -1,10 +1,11 @@
 import { h } from 'vue'
-import type { Field } from '@/modules/fields/types.ts'
+import type { Field, FieldType } from '@/modules/fields/types.ts'
 import type { ColumnDef } from '@tanstack/vue-table'
 import FieldsDataTableDropdown from '@/modules/fields/components/FieldsDataTableDropdown.vue'
 import { RouterLink } from 'vue-router'
 import DataTableColumnHeader from '@/shared/components/data/DataTableColumnHeader.vue'
 import { fieldsTableFilter } from '@/shared/utils/tableFilters'
+import FieldTypeBadge from '@/modules/fields/components/FieldTypeBadge.vue'
 
 export function getFieldColumns(
   onEdit: (field: Field) => void,
@@ -63,7 +64,7 @@ export function getFieldColumns(
       accessorKey: 'field_type',
       enableHiding: false,
       meta: {
-        class: 'w-[10ch]',
+        class: 'max-w-[10ch] text-left',
         headerClass: 'w-[10ch]',
       },
       header: ({ column }) =>
@@ -73,7 +74,7 @@ export function getFieldColumns(
         }),
       cell: ({ row }) => {
         const field_type = String(row.getValue('field_type'))
-        return h('div', { class: 'text-left font-medium' }, field_type)
+        return h(FieldTypeBadge, { type: field_type as FieldType }, field_type)
       },
       filterFn: (row, id, value) => {
         return value.includes(row.getValue(id))

frontend/src/modules/switchboard/api.ts

@@ -1,17 +1,17 @@
 import { api } from '@/shared/utils/api'
 import type { ExportBundle, ImportBundle, ResetPreview } from './types'
 
-export const seedDatabase = () => api.post('/admin/seed')
+export const seedDatabase = () => api.post('/admin/seed/')
 
 export const resetDatabase = (dryRun = false) =>
   api
-    .post<ResetPreview | { status: string }>('/admin/reset', null, {
+    .post<ResetPreview | { status: string }>('/admin/reset/', null, {
       params: { dry_run: dryRun },
     })
     .then(r => r.data)
 
 export const importData = (payload: ImportBundle, source = 'json') =>
-  api.post('/admin/io/import', payload, { params: { source } })
+  api.post('/admin/io/import/', payload, { params: { source } })
 
 export const exportData = (target = 'json') =>
-  api.get<ExportBundle>('/admin/io/export', { params: { target } })
+  api.get<ExportBundle>('/admin/io/export/', { params: { target } })

frontend/src/modules/switchboard/components/ResetPanel.vue

@@ -6,11 +6,12 @@ import { Button } from '@/shared/ui/button'
 import { useEnhancedToast } from '@/shared/composables/useEnhancedToast'
 import type { ResetPreview } from '../types'
 import { Badge } from '@/shared/ui/badge'
+import { Skeleton } from '@/shared/ui/skeleton'
 
 const queryClient = useQueryClient()
 const { showSuccess } = useEnhancedToast()
 
-const { data: preview } = useQuery({
+const { data: preview, isLoading } = useQuery({
   queryKey: ['resetPreview'],
   queryFn: () => resetDatabase(true),
   select: data => (data as ResetPreview).would_delete,
@@ -35,24 +36,35 @@ const { mutate: handleReset, isPending: isResetting } = useMutation({
       <div class="flex flex-wrap items-center gap-4">
         <Button variant="destructive" :disabled="isResetting" @click="handleReset"> Reset </Button>
         <div
-          class="text-muted-foreground flex flex-wrap items-center gap-2 text-xs transition-opacity duration-300"
+          v-if="!isLoading"
+          class="text-muted-foreground flex flex-wrap items-center gap-2 font-mono text-xs transition-opacity duration-300"
         >
-          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center">
             <Transition name="fade-slide" mode="out-in">
               <span v-if="preview" :key="preview.events">{{ preview.events }} events</span>
             </Transition>
           </Badge>
-          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
+
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center">
             <Transition name="fade-slide" mode="out-in">
               <span v-if="preview" :key="preview.fields">{{ preview.fields }} fields</span>
             </Transition>
           </Badge>
-          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center font-mono">
+
+          <Badge variant="outline" class="min-h-[1.5rem] min-w-[14ch] text-center">
             <Transition name="fade-slide" mode="out-in">
               <span v-if="preview" :key="preview.tags">{{ preview.tags }} tags</span>
             </Transition>
           </Badge>
         </div>
+        <div
+          v-if="isLoading"
+          class="text-muted-foreground flex flex-wrap items-center gap-2 font-mono text-xs transition-opacity duration-300"
+        >
+          <Skeleton class="h-[1.5rem] w-[14ch] rounded-md" />
+          <Skeleton class="h-[1.5rem] w-[14ch] rounded-md" />
+          <Skeleton class="h-[1.5rem] w-[14ch] rounded-md" />
+        </div>
       </div>
     </template>
   </SwitchboardSection>

frontend/src/modules/tags/components/TagsDataGrid.vue

@@ -62,10 +62,8 @@ const handleSearchKeydown = (event: KeyboardEvent) => {
       </template>
 
       <template v-else>
-        <div class="col-span-full flex items-center justify-center py-6">
-          <div class="text-center">
-            <div class="text-sm">No results.</div>
-          </div>
+        <div class="col-span-full w-full rounded-lg border p-4 text-center text-sm">
+          <div>No results.</div>
         </div>
       </template>
     </div>

frontend/src/router/index.ts

@@ -7,6 +7,13 @@ const publicPages = ['/login', '/signup', '/landing', '/oauth/callback']
 const router = createRouter({
   history: createWebHistory(),
   routes: routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0, behavior: 'smooth' }
+    }
+  },
 })
 
 router.beforeEach((to, _from, next) => {

frontend/src/shared/utils/api.ts

@@ -3,7 +3,7 @@ import { useAuthStore } from '@/modules/auth/stores/useAuthStore'
 import router from '@/router'
 
 export const api = axios.create({
-  baseURL: import.meta.env.VITE_API_URL ?? '/api/v1',
+  baseURL: import.meta.env.VITE_API_URL || '/api/v1',
   headers: {
     'Content-Type': 'application/json',
   },