Skip to content

Commit a62eea1

Browse files
JoachimLKJoachimLK
authored
Merge pull request #166 from reqcore-inc/feat/properties-and-filters
feat: add property management utilities and schemas
2 parents e139b72 + a5237a5 commit a62eea1

47 files changed

Lines changed: 11709 additions & 380 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/assets/css/main.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "tailwindcss";
22
@plugin "@tailwindcss/typography";
3+
@source "../../../shared/properties.ts";
34

45
/* ─────────────────────────────────────────────────────────
56
Reqcore — Design System
@@ -121,6 +122,8 @@
121122
--color-info-800: oklch(44.3% 0.110 241);
122123
--color-info-900: oklch(39.1% 0.090 241);
123124
--color-info-950: oklch(18.0% 0.035 243);
125+
126+
124127
}
125128

126129
/* ── Base reset & defaults ──────────────────────────────── */

‎app/components/AppTopBar.vue‎

Lines changed: 107 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ChevronDown, Menu, X, Users, ChevronLeft,
77
LayoutDashboard, Calendar, ArrowUpCircle,
88
Cloud, Server, Sparkles, Radio, History,
9-
MessageCircle,
9+
MessageCircle, MoreHorizontal,
1010
} from 'lucide-vue-next'
1111
1212
const route = useRoute()
@@ -20,6 +20,8 @@ const showFeedbackModal = ref(false)
2020
const showUserMenu = ref(false)
2121
const showMobileMenu = ref(false)
2222
const showGetStartedMenu = ref(false)
23+
const showMoreNav = ref(false)
24+
const showMoreActions = ref(false)
2325
2426
const config = useRuntimeConfig()
2527
const { activeOrg } = useCurrentOrg()
@@ -162,6 +164,10 @@ function isActiveRoute(to: string, exact: boolean) {
162164
return route.path === localizedTo || route.path.startsWith(`${localizedTo}/`)
163165
}
164166
167+
const primaryNavLabels = ['Dashboard', 'Jobs', 'Candidates', 'Applications', 'Interviews']
168+
const primaryNavItems = computed(() => navItems.value.filter(i => primaryNavLabels.includes(i.label)))
169+
const moreNavItems = computed(() => navItems.value.filter(i => !primaryNavLabels.includes(i.label)))
170+
165171
// Close menus on route change
166172
watch(() => route.path, () => {
167173
showUserMenu.value = false
@@ -221,23 +227,66 @@ onUnmounted(() => {
221227
<!-- Desktop nav links -->
222228
<nav class="hidden md:flex items-center gap-0.5">
223229
<NuxtLink
224-
v-for="item in navItems"
230+
v-for="item in primaryNavItems"
225231
:key="item.to"
226232
:to="$localePath(item.to)"
227-
class="relative flex items-center gap-2 px-3 py-1.5 rounded-lg text-[13px] font-medium transition-all duration-200 no-underline"
233+
class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-medium transition-all duration-200 no-underline"
228234
:class="isActiveRoute(item.to, item.exact)
229235
? 'text-brand-700 dark:text-brand-300 bg-brand-50/80 dark:bg-brand-950/40'
230236
: 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-100/80 dark:hover:bg-surface-800/60'"
231237
>
232238
<component :is="item.icon" class="size-4" />
233239
{{ item.label }}
234-
<span
235-
v-if="item.comingSoon"
236-
class="ml-0.5 inline-flex items-center rounded-full bg-amber-50 dark:bg-amber-950/40 px-1.5 py-0.5 text-[9px] font-semibold leading-none text-amber-700 dark:text-amber-400 ring-1 ring-inset ring-amber-200/60 dark:ring-amber-800/40"
237-
>
238-
Soon
239-
</span>
240240
</NuxtLink>
241+
242+
<!-- More nav dropdown -->
243+
<div
244+
v-if="moreNavItems.length"
245+
class="relative"
246+
@mouseenter="showMoreNav = true"
247+
@mouseleave="showMoreNav = false"
248+
>
249+
<button
250+
class="relative flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[13px] font-medium transition-all duration-200 cursor-pointer border-0 bg-transparent"
251+
:class="moreNavItems.some(i => isActiveRoute(i.to, i.exact))
252+
? 'text-brand-700 dark:text-brand-300 bg-brand-50/80 dark:bg-brand-950/40'
253+
: 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-100/80 dark:hover:bg-surface-800/60'"
254+
>
255+
More
256+
<ChevronDown
257+
class="size-3 opacity-60 transition-transform duration-200"
258+
:class="showMoreNav ? 'rotate-180' : ''"
259+
/>
260+
</button>
261+
<Transition
262+
enter-active-class="transition duration-150 ease-out"
263+
enter-from-class="opacity-0 scale-95 -translate-y-1"
264+
enter-to-class="opacity-100 scale-100 translate-y-0"
265+
leave-active-class="transition duration-100 ease-in"
266+
leave-from-class="opacity-100 scale-100 translate-y-0"
267+
leave-to-class="opacity-0 scale-95 -translate-y-1"
268+
>
269+
<div
270+
v-if="showMoreNav"
271+
class="absolute left-0 top-full z-50 pt-1.5"
272+
>
273+
<div class="w-52 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-xl shadow-surface-900/8 dark:shadow-surface-950/30 overflow-hidden py-1">
274+
<NuxtLink
275+
v-for="item in moreNavItems"
276+
:key="item.to"
277+
:to="$localePath(item.to)"
278+
class="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors no-underline"
279+
:class="isActiveRoute(item.to, item.exact)
280+
? 'text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-950/40'
281+
: 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-800'"
282+
>
283+
<component :is="item.icon" class="size-4" />
284+
{{ item.label }}
285+
</NuxtLink>
286+
</div>
287+
</div>
288+
</Transition>
289+
</div>
241290
</nav>
242291
</div>
243292

@@ -325,39 +374,64 @@ onUnmounted(() => {
325374

326375
<!-- Color mode toggle -->
327376
<button
328-
class="flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all duration-200 cursor-pointer border-0 bg-transparent"
329-
:title="isDark ? 'Switch to light' : 'Switch to dark'"
377+
class="inline-flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all duration-200 cursor-pointer border-0 bg-transparent"
378+
:title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
330379
@click="toggleColorMode"
331380
>
332381
<Sun v-if="isDark" class="size-4" />
333382
<Moon v-else class="size-4" />
334383
</button>
335384

336-
<!-- Updates button -->
337-
<NuxtLink
338-
:to="$localePath('/dashboard/updates')"
339-
class="hidden sm:flex items-center justify-center size-8 rounded-lg transition-all duration-200 no-underline"
340-
:class="isActiveRoute('/dashboard/updates', false)
341-
? 'text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-950/40'
342-
: 'text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'"
343-
title="Updates & changelog"
344-
aria-label="Updates & changelog"
385+
<!-- More actions dropdown -->
386+
<div
387+
class="relative hidden sm:block"
388+
@mouseenter="showMoreActions = true"
389+
@mouseleave="showMoreActions = false"
345390
>
346-
<ArrowUpCircle class="size-4" />
347-
</NuxtLink>
348-
349-
<!-- Feedback button -->
350-
<button
351-
v-if="isFeedbackEnabled"
352-
class="flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all duration-200 cursor-pointer border-0 bg-transparent"
353-
title="Report issue"
354-
@click="showFeedbackModal = true"
355-
>
356-
<MessageSquarePlus class="size-4" />
357-
</button>
391+
<button
392+
class="inline-flex items-center justify-center size-8 rounded-lg text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all duration-200 cursor-pointer border-0 bg-transparent"
393+
title="More options"
394+
>
395+
<MoreHorizontal class="size-4" />
396+
</button>
397+
<Transition
398+
enter-active-class="transition duration-150 ease-out"
399+
enter-from-class="opacity-0 scale-95 -translate-y-1"
400+
enter-to-class="opacity-100 scale-100 translate-y-0"
401+
leave-active-class="transition duration-100 ease-in"
402+
leave-from-class="opacity-100 scale-100 translate-y-0"
403+
leave-to-class="opacity-0 scale-95 -translate-y-1"
404+
>
405+
<div
406+
v-if="showMoreActions"
407+
class="absolute right-0 top-full z-50 pt-1.5"
408+
>
409+
<div class="w-52 rounded-xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-900 shadow-xl shadow-surface-900/8 dark:shadow-surface-950/30 overflow-hidden py-1">
410+
<NuxtLink
411+
:to="$localePath('/dashboard/updates')"
412+
class="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors no-underline"
413+
:class="isActiveRoute('/dashboard/updates', false)
414+
? 'text-brand-700 dark:text-brand-300 bg-brand-50 dark:bg-brand-950/40'
415+
: 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-800'"
416+
>
417+
<ArrowUpCircle class="size-4" />
418+
Updates & changelog
419+
</NuxtLink>
420+
<button
421+
v-if="isFeedbackEnabled"
422+
class="flex items-center gap-2.5 w-full px-3 py-2 text-[13px] font-medium text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors cursor-pointer border-0 bg-transparent text-left"
423+
@click="showFeedbackModal = true; showMoreActions = false"
424+
>
425+
<MessageSquarePlus class="size-4" />
426+
Report issue
427+
</button>
428+
</div>
429+
</div>
430+
</Transition>
431+
</div>
358432

359433
<!-- Divider -->
360-
<div class="hidden sm:block w-px h-6 bg-surface-200 dark:bg-surface-700 mx-1" />
434+
<div class="hidden sm:block w-px h-6 bg-surface-200 dark:bg-surface-700 mx-0.5" />
361435

362436
<!-- User menu -->
363437
<div ref="userMenuRoot" class="relative">

0 commit comments

Comments
 (0)