refactoring

Author: or2e

.devcontainer/Dockerfile

@@ -18,6 +18,3 @@ RUN SNIPPET="export PROMPT_COMMAND='history -a' && export HISTFILE=/commandhisto
 
 # [Optional] Uncomment this line to install global node packages.
 RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm update -g" 2>&1
-
-# https://heyapi.dev/openapi-ts/configuration#input
-RUN 'export NODE_TLS_REJECT_UNAUTHORIZED=0'

src/WebUI/app/components/app/Login.vue

@@ -1,34 +1,38 @@
 <script setup lang="ts">
 import type { ButtonProps, DropdownMenuItem } from '@nuxt/ui'
 
+import { useStorage } from '@vueuse/core'
+
+import type { Platform } from '~/models/platform'
+
 import { useAsyncCallback } from '~/composables/utils/use-async-callback'
-import { PLATFORM } from '~/models/platform'
+import { AVAILABLE_PLATFORM, PLATFORM } from '~/models/platform'
 import { login } from '~/services/auth-service'
 import { platformToIcon } from '~/services/platform-service'
 import { useUserStore } from '~/stores/user'
 
 const { size = 'xl' } = defineProps<{ size?: ButtonProps['size'] }>()
 const userStore = useUserStore()
 const { user } = toRefs(userStore)
-const { platform, changePlatform } = usePlatform()
+
+const platform = useStorage<Platform>('user-platform', PLATFORM.Steam) // Steam by default
+
 const { t } = useI18n()
 
 const {
   execute: loginUser,
   isLoading: logging,
 } = useAsyncCallback(() => login(platform.value))
 
-const items = computed(() =>
-  Object.values(PLATFORM).map(p => ({
-    label: t(`platform.${p}`),
-    icon: `crpg:${platformToIcon[p]}`,
-    type: 'checkbox' as const,
-    checked: p === platform.value,
-    onUpdateChecked() {
-      changePlatform(p)
-    },
-  })) satisfies DropdownMenuItem[],
-)
+const items = AVAILABLE_PLATFORM.map(p => ({
+  label: t(`platform.${p}`),
+  icon: `crpg:${platformToIcon[p]}`,
+  type: 'checkbox' as const,
+  checked: p === platform.value,
+  onUpdateChecked() {
+    platform.value = p
+  },
+})) satisfies DropdownMenuItem[]
 </script>
 
 <template>

src/WebUI/app/components/character/action/respec/CharacterActionRespecConfirmDialog.vue

@@ -18,7 +18,7 @@ defineEmits<{
     :confirm="character.name"
     @close="(res) => $emit('close', res)"
   >
-    <template #title>
+    <template #description>
       <i18n-t
         scope="global"
         keypath="character.settings.respecialize.dialog.desc"

src/WebUI/app/components/character/action/retire/CharacterActionRetireConfirmDialog.vue

@@ -26,7 +26,7 @@ const experienceMultiplierBonus = computed(() => getExperienceMultiplierBonus(us
     :confirm-label="$t('action.confirm')"
     @close="(res) => $emit('close', res)"
   >
-    <template #title>
+    <template #description>
       <div class="space-y-2">
         <i18n-t
           scope="global"

src/WebUI/app/components/character/inventory/item/CharacterInventoryItemUpgradesModal.vue

@@ -184,8 +184,6 @@ async function reforge() {
 
     <template #body>
       <ItemTableUpgrades
-        with-header
-        :with-filler="false"
         :current-rank="userItem.item.rank"
         :loading="isLoadingitemUpgrades"
         :items="itemUpgrades"

src/WebUI/app/components/item/ItemParam.vue

@@ -63,7 +63,6 @@ const formattedBuckets = computed(() => {
   return [humanizeBucket(field, rawBuckets, item)]
 })
 
-// TODO: to tailwind cfg
 const colorPositive = '#34d399'
 const colorNegative = '#ef4444'
 

src/WebUI/app/components/item/grid/ItemGrid.vue

@@ -10,8 +10,8 @@ import type { SortingConfig } from '~/services/item-search-service'
 import { useMainHeader } from '~/composables/app/use-main-header'
 import { useStickySidebar } from '~/composables/use-sticky-sidebar'
 import { ITEM_TYPE } from '~/models/item'
-import { getFacetsByItemType } from '~/services/item-search-service'
-import { aggregationsConfig, getFilterFn } from '~/services/item-search-service/aggregations'
+import { getFacetsByItemType, getFilterFn } from '~/services/item-search-service'
+import { aggregationsConfig } from '~/services/item-search-service/aggregations'
 
 const { sortingConfig, items, withPagination = true, loading = false } = defineProps<{
   items: T[]

src/WebUI/app/components/item/table/ItemTableUpgrades.vue

@@ -1,82 +1,49 @@
 <script setup lang="ts">
 import type { TableColumn } from '@nuxt/ui'
-import type { RowSelectionState, VisibilityState } from '@tanstack/vue-table'
+import type { RowSelectionState } from '@tanstack/vue-table'
 
-import { ItemParam, ItemTableMedia } from '#components'
+import { AppCoin, ItemParam, ItemTableMedia } from '#components'
 
 import type { CompareItemsResult, ItemFlat } from '~/models/item'
-import type { AggregationConfig, AggregationOptions } from '~/services/item-search-service/aggregations'
+import type { AggregationConfig } from '~/services/item-search-service/aggregations'
 
 import { ITEM_COMPARE_MODE } from '~/models/item'
+import { getColumnVisibility } from '~/services/item-search-service'
 
 const {
   items,
   aggregationConfig,
-  withHeader = false,
   compareItemsResult,
   loading = false,
   currentRank,
-  withFiller = true,
 } = defineProps<{
   items: ItemFlat[]
   aggregationConfig: AggregationConfig
   compareItemsResult: CompareItemsResult
   loading?: boolean
-  withHeader?: boolean
-  withFiller?: boolean // offset
   currentRank?: number
 }>()
 
-const { t } = useI18n()
+const { t, n } = useI18n()
 
-function createTableColumn(key: keyof ItemFlat, options: AggregationOptions): TableColumn<ItemFlat> {
-  const widthPx = options.width || 160
+function createTableColumn(key: keyof ItemFlat): TableColumn<ItemFlat> {
   return {
     accessorKey: key,
-    meta: {
-      style: {
-        th: {
-          width: `${widthPx}px`,
-        },
-        td: {
-          width: `${widthPx}px`,
-        },
-      },
-    },
     header: ({ header }) => t(`item.aggregations.${header.id}.title`),
     cell: ({ row }) => h(ItemParam, {
       field: key,
       item: row.original,
       isCompare: true,
       compareMode: ITEM_COMPARE_MODE.Relative,
       relativeValue: compareItemsResult[key]!,
+    }, {
+      ...(key === 'upkeep' && { default: ({ rawBuckets }: { rawBuckets: number }) => h(AppCoin, { value: t('item.format.upkeep', { upkeep: n(rawBuckets) }) }) }),
+      ...(key === 'price' && { default: ({ rawBuckets }: { rawBuckets: number }) => h(AppCoin, { value: rawBuckets }) }),
     }),
   }
 }
 
 const columns = computed<TableColumn<ItemFlat>[]>(() => [
-  ...(withFiller
-    ? [
-        {
-          id: 'fill',
-          meta: {
-            class: {
-              td: 'px-0 w-[32px]',
-              th: 'px-0 w-[32px]',
-            },
-          },
-        },
-        {
-          id: 'fill2',
-          meta: {
-            class: {
-              td: 'px-0 w-[32px]',
-              th: 'px-0 w-[32px]',
-            },
-          },
-        },
-      ]
-    : []),
   {
     accessorKey: 'name',
     header: '',
@@ -85,19 +52,10 @@ const columns = computed<TableColumn<ItemFlat>[]>(() => [
       showTier: true,
     }),
   },
-  ...Object.entries(aggregationConfig).map(([key, config]) => createTableColumn(key as keyof ItemFlat, config)),
+  ...objectKeys(aggregationConfig).map(createTableColumn),
 ])
 
-const columnVisibility = computed<VisibilityState>(() => {
-  return {
-    ...Object.entries(aggregationConfig)
-      .filter(([_, value]) => value.hidden)
-      .reduce((out, [key]) => {
-        out[key] = false
-        return out
-      }, {} as VisibilityState),
-  }
-})
+const columnVisibility = computed(() => getColumnVisibility(aggregationConfig))
 
 const rowSelection = ref<RowSelectionState>({
   ...(currentRank !== undefined && {
@@ -115,9 +73,6 @@ const rowSelection = ref<RowSelectionState>({
     :columns
     :ui="{
       root: 'overflow-visible',
-      ...(!withHeader && {
-        thead: 'hidden',
-      }),
     }"
   >
     <template #empty>

src/WebUI/app/components/moderator/RestrictionsTable.vue

@@ -4,7 +4,7 @@ import type { SortingState, VisibilityState } from '@tanstack/vue-table'
 
 import { getPaginationRowModel } from '@tanstack/vue-table'
 import { navigateTo } from '#app'
-import { NuxtLink, UBadge, UiCollapsibleText, UInput, UiTableColumnHeader, UiTableColumnHeaderLabel, USelect, UserMedia, UTooltip } from '#components'
+import { NuxtLink, UBadge, UiCollapsibleText, UiGridColumnHeader, UiGridColumnHeaderLabel, UInput, USelect, UserMedia, UTooltip } from '#components'
 
 import type { UserRestriction } from '~/models/user'
 
@@ -37,7 +37,7 @@ const columns: TableColumn<UserRestriction>[] = [
   {
     accessorKey: 'status',
     header: ({ column }) => {
-      return h(UiTableColumnHeader, {
+      return h(UiGridColumnHeader, {
         label: t('restriction.table.column.status'),
         withFilter: true,
         filtered: column.getIsFiltered(),
@@ -61,7 +61,7 @@ const columns: TableColumn<UserRestriction>[] = [
             'modelValue': column.getFilterValue(),
             'onUpdate:modelValue': column.setFilterValue,
           }, {
-            default: () => h(UiTableColumnHeaderLabel, {
+            default: () => h(UiGridColumnHeaderLabel, {
               label: t('restriction.table.column.status'),
               withFilter: true,
             }),
@@ -78,7 +78,7 @@ const columns: TableColumn<UserRestriction>[] = [
   {
     accessorKey: 'type',
     header: ({ column }) => {
-      return h(UiTableColumnHeader, {
+      return h(UiGridColumnHeader, {
         label: t('restriction.table.column.type'),
         withFilter: true,
         filtered: column.getIsFiltered(),
@@ -102,7 +102,7 @@ const columns: TableColumn<UserRestriction>[] = [
             'modelValue': column.getFilterValue(),
             'onUpdate:modelValue': column.setFilterValue,
           }, {
-            default: () => h(UiTableColumnHeaderLabel, {
+            default: () => h(UiGridColumnHeaderLabel, {
               label: t('restriction.table.column.type'),
               withFilter: true,
             }),

src/WebUI/app/components/moderator/UserFinder.vue

@@ -4,7 +4,7 @@ import type { ValueOf } from 'type-fest'
 
 import type { Platform } from '~/models/platform'
 
-import { PLATFORM } from '~/models/platform'
+import { AVAILABLE_PLATFORM, PLATFORM } from '~/models/platform'
 import { platformToIcon } from '~/services/platform-service'
 import { getUserById, searchUser } from '~/services/restriction-service'
 
@@ -61,7 +61,7 @@ const searchModeItems = Object.keys(SEARCH_MODE).map<TabsItem>(mode => ({
   slot: `${mode}` as const,
 }))
 
-const platformItems = computed(() => Object.values(PLATFORM).map<SelectItem>(p => ({
+const platformItems = computed(() => AVAILABLE_PLATFORM.map<SelectItem>(p => ({
   value: p,
   label: t(`platform.${p}`),
   icon: `crpg:${platformToIcon[p]}`,