chore: more ui improvements

Author: atinux

pnpm-lock.yaml

@@ -35,12 +35,6 @@ async function editContentFile(id: string) {
   ui.open(StudioFeature.Content)
 }
 
-const colorModeClass = ref(host.ui.colorMode)
-
-host.on.colorModeChange((colorMode) => {
-  colorModeClass.value = colorMode
-})
-
 host.on.mounted(() => {
   detectActiveDocuments()
   host.on.routeChange(() => {
@@ -59,7 +53,7 @@ router.beforeEach((to, from) => {
 </script>
 
 <template>
-  <div :class="colorModeClass">
+  <div :class="ui.colorMode.value">
     <UApp :toaster="{ portal: false }">
       <AppLayout :open="ui.isOpen.value">
         <RouterView v-slot="{ Component }">

src/app/src/app.vue

@@ -12,7 +12,7 @@ const actions = computed(() => {
 </script>
 
 <template>
-  <div class="flex items-center gap-1">
+  <div class="flex items-center">
     <UTooltip
       v-for="action in actions"
       :key="action.id"

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -16,5 +16,6 @@ defineProps({
     :color="COLOR_UI_STATUS_MAP[status]"
     :label="status"
     variant="soft"
+    size="sm"
   />
 </template>

src/app/src/components/shared/item/ItemBadge.vue

@@ -5,7 +5,6 @@ import { computed, unref } from 'vue'
 import type { TreeItem } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
 import { findParentFromId, ROOT_ITEM } from '../../../utils/tree'
-import { FEATURE_DISPLAY_MAP } from '../../../utils/context'
 import { DraftStatus } from '../../../types/draft'
 
 const { context } = useStudio()
@@ -15,7 +14,7 @@ const tree = computed(() => context.featureTree.value.root.value)
 
 const items = computed<BreadcrumbItem[]>(() => {
   const rootItem = {
-    label: FEATURE_DISPLAY_MAP[context.featureTree.value.type as keyof typeof FEATURE_DISPLAY_MAP],
+    icon: 'i-lucide-folder-git',
     onClick: () => {
       // TODO: update for ROOT_DOCUMENT_ITEM and ROOT_MEDIA_ITEM
       context.featureTree.value.select(ROOT_ITEM)
@@ -70,10 +69,11 @@ const items = computed<BreadcrumbItem[]>(() => {
 </script>
 
 <template>
-  <div class="flex gap-2">
+  <div class="flex items-center gap-1">
     <UBreadcrumb
       :items="items"
       color="neutral"
+      :ui="{ link: 'text-xs', list: 'gap-0.5', separatorIcon: 'size-3', linkLeadingIcon: 'size-4' }"
     >
       <template #ellipsis="{ item }">
         <UDropdownMenu :items="item.children">

src/app/src/components/shared/item/ItemBreadcrumb.vue

@@ -4,7 +4,8 @@ import type { PropType } from 'vue'
 import { computed } from 'vue'
 import { Image } from '@unpic/vue'
 import { titleCase } from 'scule'
-import { COLOR_STATUS_MAP } from '../../../utils/draft'
+import { COLOR_UI_STATUS_MAP } from '../../../utils/draft'
+import { DraftStatus } from '../../../types/draft'
 
 const props = defineProps({
   item: {
@@ -36,20 +37,21 @@ const imageSrc = computed(() => {
   return 'https://placehold.co/1920x1080/f9fafc/f9fafc'
 })
 
-const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_MAP[props.item.status]}-200 hover:ring-${COLOR_STATUS_MAP[props.item.status]}-300 hover:dark:ring-${COLOR_STATUS_MAP[props.item.status]}-700` : 'ring-gray-200 hover:ring-gray-300 hover:dark:ring-gray-700')
+// ring-(--ui-success) ring-(--ui-info) ring-(--ui-warning) ring-(--ui-error) ring-(--ui-neutral)
+const statusRingColor = computed(() => props.item.status ? `ring-(--ui-${COLOR_UI_STATUS_MAP[props.item.status]})` : 'ring-(--ui-border) hover:ring-(--ui-border-accented)')
 </script>
 
 <template>
   <UPageCard
     reverse
-    class="cursor-pointer hover:bg-white relative w-full min-w-0 overflow-hidden"
+    class="cursor-pointer hover:bg-muted relative w-full min-w-0 overflow-hidden"
     :class="statusRingColor"
   >
     <div
       v-if="item.type === 'file'"
       class="relative"
     >
-      <div class="bg-[#f7f9fa] bg-[linear-gradient(45deg,#e6e9ea_25%,transparent_0),linear-gradient(-45deg,#e6e9ea_25%,transparent_0),linear-gradient(45deg,transparent_75%,#e6e9ea_0),linear-gradient(-45deg,transparent_75%,#e6e9ea_0)] bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0]">
+      <div class="bg-default bg-[linear-gradient(45deg,#e6e9ea_25%,transparent_0),linear-gradient(-45deg,#e6e9ea_25%,transparent_0),linear-gradient(45deg,transparent_75%,#e6e9ea_0),linear-gradient(-45deg,transparent_75%,#e6e9ea_0)] bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0]">
         <Image
           :src="imageSrc"
           width="426"
@@ -63,12 +65,12 @@ const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_
         >
           <UIcon
             :name="itemExtensionIcon"
-            class="w-8 h-8 text-gray-400 dark:text-gray-500"
+            class="w-8 h-8 text-muted"
           />
         </div>
       </div>
       <ItemBadge
-        v-if="item.status"
+        v-if="item.status && item.status !== DraftStatus.Opened"
         :status="item.status"
         class="absolute top-2 right-2"
       />
@@ -81,15 +83,15 @@ const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_
             <UIcon
               v-if="isFolder"
               name="i-lucide-folder"
-              class="h-4 w-4 shrink-0"
+              class="h-4 w-4 shrink-0 text-muted"
             />
             <UIcon
               v-else-if="name === 'Home'"
               name="i-lucide-house"
-              class="h-4 w-4 shrink-0"
+              class="h-4 w-4 shrink-0 text-muted"
             />
             <h3
-              class="text-sm font-semibold truncate"
+              class="text-sm font-semibold truncate text-default"
               :class="props.item.status === 'deleted' && 'line-through'"
             >
               {{ name }}
@@ -99,7 +101,7 @@ const statusRingColor = computed(() => props.item.status ? `ring-${COLOR_STATUS_
         </div>
 
         <UTooltip :text="item.routePath">
-          <span class="truncate leading-relaxed text-xs text-gray-400 dark:text-gray-500 block w-full">
+          <span class="truncate leading-relaxed text-xs text-dimmed block w-full">
             {{ item.routePath || item.fsPath }}
           </span>
         </UTooltip>

src/app/src/components/shared/item/ItemCard.vue

@@ -8,6 +8,11 @@ export const useUI = createSharedComposable((host: StudioHost) => {
   const sidebar = useSidebar()
   const isOpen = ref(false)
   const currentPanel = ref<StudioFeature | null>(null)
+  const colorMode = ref(host.ui.colorMode)
+
+  host.on.colorModeChange((newColorMode) => {
+    colorMode.value = newColorMode
+  })
 
   watch(isOpen, (value) => {
     if (value) {
@@ -20,6 +25,7 @@ export const useUI = createSharedComposable((host: StudioHost) => {
 
   return {
     config,
+    colorMode,
     sidebar,
     isOpen,
     currentPanel,

src/app/src/composables/useUI.ts

@@ -1,13 +1,8 @@
-import { type StudioAction, StudioFeature, type TreeItem } from '../types'
+import { type StudioAction, type TreeItem } from '../types'
 import { DraftStatus } from '../types/draft'
 import type { ActionHandlerParams } from '../types/context'
 import { StudioItemActionId } from '../types/context'
 
-export const FEATURE_DISPLAY_MAP = {
-  [StudioFeature.Content]: '/',
-  [StudioFeature.Media]: '/',
-} as const
-
 export const oneStepActions: StudioItemActionId[] = [StudioItemActionId.RevertItem, StudioItemActionId.DeleteItem, StudioItemActionId.DuplicateItem]
 export const twoStepActions: StudioItemActionId[] = [StudioItemActionId.CreateDocument, StudioItemActionId.CreateFolder, StudioItemActionId.RenameItem]
 

src/app/src/utils/context.ts

@@ -2,14 +2,6 @@ import { type BaseItem, type DatabasePageItem, ContentFileExtension, DraftStatus
 import { stringify } from 'minimark/stringify'
 import { ROOT_ITEM } from './tree'
 
-export const COLOR_STATUS_MAP: { [key in DraftStatus]?: string } = {
-  [DraftStatus.Created]: 'green',
-  [DraftStatus.Updated]: 'orange',
-  [DraftStatus.Deleted]: 'red',
-  [DraftStatus.Renamed]: 'blue',
-  [DraftStatus.Opened]: 'gray',
-} as const
-
 export const COLOR_UI_STATUS_MAP: { [key in DraftStatus]?: string } = {
   [DraftStatus.Created]: 'success',
   [DraftStatus.Updated]: 'warning',

src/app/src/utils/draft.ts

@@ -23,7 +23,7 @@ export default defineConfig({
       },
       ui: {
         colors: {
-          neutral: 'zinc',
+          neutral: 'neutral',
         },
         pageCard: {
           slots: {