Skip to content

Commit 1ca6620

Browse files
glennmichael123glennmichael123
committed
chore: wip
1 parent 224971f commit 1ca6620

File tree

14 files changed

+823
-506
lines changed

14 files changed

+823
-506
lines changed

‎storage/framework/defaults/components/Dashboard/DashboardLayout.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ interface Props {
2727
const props = withDefaults(defineProps<Props>(), {
2828
showSidebar: true,
2929
showNavbar: true,
30-
showWindowControls: false,
30+
showWindowControls: true, // Enable macOS window controls by default
3131
fullWidth: false,
3232
noPadding: false,
3333
})
@@ -97,7 +97,8 @@ function handleClose() {
9797
</script>
9898

9999
<template>
100-
<div class="min-h-screen bg-neutral-50 dark:bg-neutral-950">
100+
<!-- macOS-inspired layout with subtle background -->
101+
<div class="min-h-screen bg-neutral-100 dark:bg-neutral-950">
101102
<!-- Mobile sidebar overlay -->
102103
<Transition
103104
enter-active-class="transition-opacity duration-300 ease-out"

‎storage/framework/defaults/components/Dashboard/NavbarModern.vue‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,13 @@ function isActiveRoute(path: string): boolean {
9999
<header
100100
:class="[
101101
'sticky top-0 z-40',
102-
'h-16 flex items-center gap-4',
103-
'bg-white/80 dark:bg-neutral-900/80',
104-
'backdrop-blur-lg',
105-
'border-b border-neutral-200/80 dark:border-neutral-800/80',
106-
'px-4 lg:px-6',
107-
'transition-all duration-300',
102+
'h-13 flex items-center gap-3',
103+
// macOS vibrancy toolbar
104+
'bg-white/72 dark:bg-neutral-900/80',
105+
'backdrop-blur-xl backdrop-saturate-150',
106+
'border-b border-black/5 dark:border-white/5',
107+
'px-4',
108+
'transition-all duration-200',
108109
]"
109110
>
110111
<!-- Window Controls (for desktop app) -->
@@ -154,75 +155,75 @@ function isActiveRoute(path: string): boolean {
154155
<!-- Spacer -->
155156
<div class="flex-1" />
156157

157-
<!-- Search -->
158+
<!-- Search - macOS Spotlight style -->
158159
<div class="hidden sm:flex items-center">
159160
<div
160161
:class="[
161162
'relative flex items-center',
162-
'w-64 lg:w-80',
163+
'w-56 lg:w-72',
163164
'transition-all duration-200',
164-
isSearchFocused ? 'w-72 lg:w-96' : '',
165+
isSearchFocused ? 'w-64 lg:w-80' : '',
165166
]"
166167
>
167-
<div class="i-hugeicons-search-01 absolute left-3 w-4 h-4 text-neutral-400" />
168+
<div class="i-hugeicons-search-01 absolute left-2.5 w-3.5 h-3.5 text-neutral-400" />
168169
<input
169170
v-model="searchQuery"
170171
type="text"
171-
placeholder="Search..."
172-
class="w-full pl-9 pr-20 py-2 text-sm bg-neutral-100 dark:bg-neutral-800 border-0 rounded-lg text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all"
172+
placeholder="Search"
173+
class="w-full pl-8 pr-16 py-1.5 text-[13px] bg-black/5 dark:bg-white/8 border border-black/8 dark:border-white/10 rounded-lg text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500/50 transition-all"
173174
@focus="isSearchFocused = true"
174175
@blur="isSearchFocused = false"
175176
/>
176-
<div class="absolute right-3 flex items-center gap-1">
177-
<kbd class="hidden lg:inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium text-neutral-400 bg-neutral-200 dark:bg-neutral-700 rounded">
178-
<span class="text-[10px]">⌘</span>K
177+
<div class="absolute right-2.5 flex items-center gap-1">
178+
<kbd class="hidden lg:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-neutral-400 bg-black/5 dark:bg-white/10 border border-black/10 dark:border-white/10 rounded">
179+
<span>⌘</span>K
179180
</kbd>
180181
</div>
181182
</div>
182183
</div>
183184

184-
<!-- Right section -->
185-
<div class="flex items-center gap-2">
185+
<!-- Right section - macOS toolbar buttons -->
186+
<div class="flex items-center gap-1">
186187
<!-- Error Tracking -->
187188
<RouterLink
188189
to="/monitoring/errors"
189190
:class="[
190-
'p-2 rounded-lg transition-colors',
191+
'p-1.5 rounded-md transition-all duration-150 active:scale-95',
191192
isActiveRoute('/monitoring/errors')
192-
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
193-
: 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800',
193+
? 'text-blue-600 dark:text-blue-400 bg-blue-500/15 dark:bg-blue-400/15'
194+
: 'text-neutral-500 hover:text-neutral-700 hover:bg-black/5 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-white/8',
194195
]"
195196
>
196-
<div class="i-hugeicons-bug-01 w-5 h-5" />
197+
<div class="i-hugeicons-bug-01 w-[18px] h-[18px]" />
197198
</RouterLink>
198199

199200
<!-- Health -->
200201
<RouterLink
201202
to="/health"
202203
:class="[
203-
'p-2 rounded-lg transition-colors',
204+
'p-1.5 rounded-md transition-all duration-150 active:scale-95',
204205
isActiveRoute('/health')
205-
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
206-
: 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800',
206+
? 'text-blue-600 dark:text-blue-400 bg-blue-500/15 dark:bg-blue-400/15'
207+
: 'text-neutral-500 hover:text-neutral-700 hover:bg-black/5 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-white/8',
207208
]"
208209
>
209-
<div class="i-hugeicons-pulse-02 w-5 h-5" />
210+
<div class="i-hugeicons-pulse-02 w-[18px] h-[18px]" />
210211
</RouterLink>
211212

212213
<!-- Notifications -->
213214
<RouterLink
214215
to="/notifications"
215216
:class="[
216-
'relative p-2 rounded-lg transition-colors',
217+
'relative p-1.5 rounded-md transition-all duration-150 active:scale-95',
217218
isActiveRoute('/notifications')
218-
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
219-
: 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800',
219+
? 'text-blue-600 dark:text-blue-400 bg-blue-500/15 dark:bg-blue-400/15'
220+
: 'text-neutral-500 hover:text-neutral-700 hover:bg-black/5 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-white/8',
220221
]"
221222
>
222-
<div class="i-hugeicons-notification-02 w-5 h-5" />
223+
<div class="i-hugeicons-notification-02 w-[18px] h-[18px]" />
223224
<span
224225
v-if="notificationCount > 0"
225-
class="absolute top-1 right-1 flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-red-500 rounded-full"
226+
class="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold text-white bg-red-500 rounded-full"
226227
>
227228
{{ notificationCount > 9 ? '9+' : notificationCount }}
228229
</span>
@@ -231,14 +232,14 @@ function isActiveRoute(path: string): boolean {
231232
<!-- Dark mode toggle -->
232233
<button
233234
type="button"
234-
class="p-2 rounded-lg text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800 transition-colors"
235+
class="p-1.5 rounded-md text-neutral-500 hover:text-neutral-700 hover:bg-black/5 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-white/8 transition-all duration-150 active:scale-95"
235236
@click="toggleDark"
236237
>
237-
<div :class="[isDark ? 'i-hugeicons-sun-02' : 'i-hugeicons-moon-02', 'w-5 h-5']" />
238+
<div :class="[isDark ? 'i-hugeicons-sun-02' : 'i-hugeicons-moon-02', 'w-[18px] h-[18px]']" />
238239
</button>
239240

240241
<!-- Separator -->
241-
<div class="w-px h-6 bg-neutral-200 dark:bg-neutral-700 mx-1" />
242+
<div class="w-px h-5 bg-black/10 dark:bg-white/10 mx-1" />
242243

243244
<!-- User dropdown -->
244245
<Dropdown align="right" width="md">

‎storage/framework/defaults/components/Dashboard/SidebarModern.vue‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -269,16 +269,18 @@ function toggleCollapse() {
269269
:class="[
270270
'fixed inset-y-0 left-0 z-50',
271271
'flex flex-col',
272-
'bg-white dark:bg-neutral-900',
273-
'border-r border-neutral-200 dark:border-neutral-800',
272+
// macOS vibrancy effect
273+
'bg-white/80 dark:bg-neutral-900/80',
274+
'backdrop-blur-xl backdrop-saturate-150',
275+
'border-r border-black/5 dark:border-white/5',
274276
'transition-all duration-300 ease-out',
275-
isCollapsed && !isHovered ? 'w-16' : 'w-64',
277+
isCollapsed && !isHovered ? 'w-16' : 'w-60',
276278
]"
277279
@mouseenter="isHovered = true"
278280
@mouseleave="isHovered = false"
279281
>
280-
<!-- Header -->
281-
<div class="h-16 flex items-center justify-between px-4 border-b border-neutral-200 dark:border-neutral-800">
282+
<!-- Header - macOS titlebar style -->
283+
<div class="h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/5">
282284
<!-- Logo & Team -->
283285
<div v-show="showExpanded" class="flex items-center gap-3 min-w-0">
284286
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm">
@@ -327,28 +329,28 @@ function toggleCollapse() {
327329
<nav class="flex-1 overflow-y-auto px-3 py-2 space-y-1">
328330
<template v-for="sectionKey in sectionOrder" :key="sectionKey">
329331
<div v-if="sections[sectionKey]" class="py-1">
330-
<!-- Section header -->
332+
<!-- Section header - macOS Finder style -->
331333
<button
332334
type="button"
333335
:class="[
334-
'w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left',
335-
'transition-colors duration-150',
336+
'w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-left',
337+
'transition-all duration-150',
336338
sectionHasActiveChild(sectionKey)
337-
? 'text-blue-600 dark:text-blue-400'
338-
: 'text-neutral-600 dark:text-neutral-400',
339-
'hover:bg-neutral-100 dark:hover:bg-neutral-800',
339+
? 'text-neutral-900 dark:text-white'
340+
: 'text-neutral-500 dark:text-neutral-400',
341+
'hover:bg-black/5 dark:hover:bg-white/8',
340342
]"
341343
@click="toggleSection(sectionKey)"
342344
>
343-
<div :class="[sections[sectionKey].icon, 'w-5 h-5 flex-shrink-0']" />
344-
<span v-show="showExpanded" class="flex-1 text-sm font-medium">
345+
<div :class="[sections[sectionKey].icon, 'w-4 h-4 flex-shrink-0 opacity-70']" />
346+
<span v-show="showExpanded" class="flex-1 text-[13px] font-semibold tracking-tight">
345347
{{ sections[sectionKey].label }}
346348
</span>
347349
<div
348350
v-show="showExpanded"
349351
:class="[
350-
'i-hugeicons-arrow-down-01 w-4 h-4 transition-transform duration-200',
351-
expandedSections[sectionKey] ? 'rotate-180' : '',
352+
'i-hugeicons-arrow-right-01 w-3 h-3 transition-transform duration-200 opacity-50',
353+
expandedSections[sectionKey] ? 'rotate-90' : '',
352354
]"
353355
/>
354356
</button>
@@ -367,16 +369,16 @@ function toggleCollapse() {
367369
class="mt-1 space-y-0.5 overflow-hidden"
368370
>
369371
<template v-for="item in sections[sectionKey].content.items" :key="item.to">
370-
<!-- Regular item -->
372+
<!-- Regular item - macOS style -->
371373
<RouterLink
372374
v-if="!item.children"
373375
:to="item.to"
374376
:class="[
375-
'flex items-center gap-3 px-3 py-2 ml-2 rounded-lg text-sm',
376-
'transition-colors duration-150',
377+
'flex items-center gap-2.5 px-2.5 py-1.5 ml-2 rounded-md text-[13px]',
378+
'transition-all duration-150',
377379
isActiveRoute(item.to)
378-
? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-medium'
379-
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800',
380+
? 'bg-black/8 dark:bg-white/12 text-neutral-900 dark:text-white font-medium'
381+
: 'text-neutral-600 dark:text-neutral-400 hover:bg-black/5 dark:hover:bg-white/8',
380382
]"
381383
>
382384
<div :class="[item.icon, 'w-4 h-4 flex-shrink-0']" />

‎storage/framework/defaults/components/Dashboard/UI/Avatar.vue‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
<script lang="ts" setup>
2+
/**
3+
* Avatar Component - macOS Style
4+
* A clean avatar with macOS-inspired styling.
5+
*/
26
import { computed, ref } from 'vue'
37
48
interface Props {
@@ -30,14 +34,15 @@ const initials = computed(() => {
3034
3135
const showFallback = computed(() => !props.src || imageError.value)
3236
37+
// macOS-style compact sizes
3338
const sizeClasses = computed(() => {
3439
const sizes = {
35-
xs: 'h-6 w-6 text-xs',
36-
sm: 'h-8 w-8 text-sm',
37-
md: 'h-10 w-10 text-base',
38-
lg: 'h-12 w-12 text-lg',
39-
xl: 'h-14 w-14 text-xl',
40-
'2xl': 'h-16 w-16 text-2xl',
40+
xs: 'h-5 w-5 text-[10px]',
41+
sm: 'h-7 w-7 text-[11px]',
42+
md: 'h-8 w-8 text-[12px]',
43+
lg: 'h-10 w-10 text-[13px]',
44+
xl: 'h-12 w-12 text-[14px]',
45+
'2xl': 'h-14 w-14 text-[16px]',
4146
}
4247
return sizes[props.size]
4348
})
@@ -52,56 +57,51 @@ const radiusClasses = computed(() => {
5257
return radii[props.rounded]
5358
})
5459
60+
// macOS system colors for status dots
5561
const statusClasses = computed(() => {
5662
if (!props.status) return null
5763
5864
const colors = {
59-
online: 'bg-green-500',
65+
online: 'bg-green-500', // macOS green #34c759
6066
offline: 'bg-neutral-400',
61-
away: 'bg-amber-500',
62-
busy: 'bg-red-500',
67+
away: 'bg-orange-500', // macOS orange #ff9500
68+
busy: 'bg-red-500', // macOS red #ff3b30
6369
}
6470
6571
const sizeDot = {
6672
xs: 'h-1.5 w-1.5',
6773
sm: 'h-2 w-2',
68-
md: 'h-2.5 w-2.5',
69-
lg: 'h-3 w-3',
70-
xl: 'h-3.5 w-3.5',
71-
'2xl': 'h-4 w-4',
74+
md: 'h-2 w-2',
75+
lg: 'h-2.5 w-2.5',
76+
xl: 'h-3 w-3',
77+
'2xl': 'h-3.5 w-3.5',
7278
}
7379
7480
return [
7581
'absolute bottom-0 right-0',
7682
'rounded-full',
77-
'ring-2 ring-white dark:ring-neutral-800',
83+
'ring-2 ring-white dark:ring-neutral-900',
7884
colors[props.status],
7985
sizeDot[props.size],
8086
]
8187
})
8288
83-
// Generate a consistent background color based on name
89+
// macOS-style softer background colors
8490
const bgColorClass = computed(() => {
85-
if (!props.name) return 'bg-neutral-200 dark:bg-neutral-700'
91+
if (!props.name) return 'bg-black/[0.06] text-neutral-500 dark:bg-white/10 dark:text-neutral-400'
8692
93+
// macOS-inspired pastel colors
8794
const colors = [
88-
'bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400',
89-
'bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400',
90-
'bg-amber-100 text-amber-600 dark:bg-amber-900/50 dark:text-amber-400',
91-
'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/50 dark:text-yellow-400',
92-
'bg-lime-100 text-lime-600 dark:bg-lime-900/50 dark:text-lime-400',
93-
'bg-green-100 text-green-600 dark:bg-green-900/50 dark:text-green-400',
94-
'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400',
95-
'bg-teal-100 text-teal-600 dark:bg-teal-900/50 dark:text-teal-400',
96-
'bg-cyan-100 text-cyan-600 dark:bg-cyan-900/50 dark:text-cyan-400',
97-
'bg-sky-100 text-sky-600 dark:bg-sky-900/50 dark:text-sky-400',
98-
'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400',
99-
'bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400',
100-
'bg-violet-100 text-violet-600 dark:bg-violet-900/50 dark:text-violet-400',
101-
'bg-purple-100 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400',
102-
'bg-fuchsia-100 text-fuchsia-600 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
103-
'bg-pink-100 text-pink-600 dark:bg-pink-900/50 dark:text-pink-400',
104-
'bg-rose-100 text-rose-600 dark:bg-rose-900/50 dark:text-rose-400',
95+
'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
96+
'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
97+
'bg-yellow-500/15 text-yellow-600 dark:bg-yellow-400/20 dark:text-yellow-400',
98+
'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
99+
'bg-teal-500/15 text-teal-600 dark:bg-teal-400/20 dark:text-teal-400',
100+
'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400',
101+
'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
102+
'bg-indigo-500/15 text-indigo-600 dark:bg-indigo-400/20 dark:text-indigo-400',
103+
'bg-purple-500/15 text-purple-600 dark:bg-purple-400/20 dark:text-purple-400',
104+
'bg-pink-500/15 text-pink-600 dark:bg-pink-400/20 dark:text-pink-400',
105105
]
106106
107107
// Simple hash function to get consistent color

0 commit comments

Comments
 (0)