rdarius/ClockyFly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Model: Qwen 3.6 35B A3
Some checks failed
tests / ci (8.5) (push) Failing after 2m31s
Details
linter / quality (push) Failing after 2m55s
Details
tests / ci (8.3) (push) Failing after 3m25s
Details
tests / ci (8.4) (push) Failing after 3m49s
Details

Browse Source 
Prompt: simplify and fix dashboard layout. Sidebars are now a mess, weird gaps everywhere, make it simple and modern keeping general color scheme

Stats:
Context: 41,492 tokens
Time: 6m 15s
This commit is contained in:
Darius Rapalis
2026-04-28 23:16:20 +03:00
parent 27b2f5c543
commit 36f924a16a
6 changed files with 49 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/AppSidebarHeader.vue
View File

@@ -15,10 +15,10 @@ withDefaults(
<template> <template>
<header <header
class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4" class="flex h-[60px] shrink-0 items-center gap-2 border-b border-[#e4eaee] px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-[56px] dark:border-[#37474f]"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 w-full">
<SidebarTrigger class="-ml-1" /> <SidebarTrigger class="-ml-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200" />
<template v-if="breadcrumbs && breadcrumbs.length > 0"> <template v-if="breadcrumbs && breadcrumbs.length > 0">
<Breadcrumbs :breadcrumbs="breadcrumbs" /> <Breadcrumbs :breadcrumbs="breadcrumbs" />
</template> </template>

2
resources/js/components/ui/sidebar/SidebarContent.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps<{
<div <div
data-slot="sidebar-content" data-slot="sidebar-content"
data-sidebar="content" data-sidebar="content"
:class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)" :class="cn('flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
> >
<slot /> <slot />
</div> </div>

2
resources/js/components/ui/sidebar/SidebarFooter.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps<{
<div <div
data-slot="sidebar-footer" data-slot="sidebar-footer"
data-sidebar="footer" data-sidebar="footer"
:class="cn('flex flex-col gap-2 p-2', props.class)" :class="cn('flex flex-col gap-1 p-2', props.class)"
> >
<slot /> <slot />
</div> </div>

2
resources/js/components/ui/sidebar/SidebarHeader.vue
View File

@@ -11,7 +11,7 @@ const props = defineProps<{
<div <div
data-slot="sidebar-header" data-slot="sidebar-header"
data-sidebar="header" data-sidebar="header"
:class="cn('flex flex-col gap-2 p-2', props.class)" :class="cn('flex flex-col gap-1 p-2', props.class)"
> >
<slot /> <slot />
</div> </div>

1
resources/js/components/ui/sidebar/SidebarInset.vue
View File

@@ -12,7 +12,6 @@ const props = defineProps<{
data-slot="sidebar-inset" data-slot="sidebar-inset"
:class="cn( :class="cn(
'bg-background relative flex w-full flex-1 flex-col', 'bg-background relative flex w-full flex-1 flex-col',
'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
props.class, props.class,
)" )"
> >

239
resources/js/pages/Dashboard.vue
View File

@@ -24,251 +24,66 @@ defineOptions({
<AppShell variant="sidebar"> <AppShell variant="sidebar">
<AppSidebar /> <AppSidebar />
<AppContent variant="sidebar" class="overflow-x-hidden"> <AppContent variant="sidebar" class="overflow-x-hidden">
<!-- Main Content -->
<div class="flex h-full flex-1 flex-col"> <div class="flex h-full flex-1 flex-col">
<!-- Top Bar --> <!-- Timer Bar -->
<div <div class="sticky top-0 z-10 bg-[#1d272c] border-b border-[#37474f]">
class="h-[60px] bg-white border-b border-gray-200 flex items-center px-4 shadow-sm sticky top-0 z-10" <div class="flex items-center gap-4 px-6 h-[60px]">
>
<!-- Workspace Switcher -->
<div
class="flex items-center gap-2 px-3 py-1.5 rounded-lg cursor-pointer text-sm font-medium text-gray-900 hover:bg-gray-100"
>
<div
class="w-7 h-7 bg-[#03a9f4] rounded-lg flex items-center justify-center text-white text-xs font-semibold"
>
W
</div>
<span>Workspace</span>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
class="text-gray-500"
>
<path
d="M3 4.5L6 7.5L9 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<!-- Search & Actions -->
<div class="ml-auto flex items-center gap-3">
<!-- Search -->
<div
class="flex items-center gap-2 px-3.5 py-2 bg-gray-100 rounded-lg text-gray-500 text-sm cursor-pointer max-w-[280px] w-full"
>
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<span>Search</span>
<span
class="ml-auto text-xs text-gray-400 whitespace-nowrap"
>⌘K</span
>
</div>
<!-- Notifications -->
<button
class="w-9 h-9 border-0 bg-transparent rounded-lg cursor-pointer flex items-center justify-center text-gray-600"
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"
/>
<path
d="M10.3 21a3.5 3.5 0 0 0 3.4 0"
/>
</svg>
</button>
<!-- User Avatar -->
<div
class="w-9 h-9 rounded-full bg-[#03a9f4] flex items-center justify-center text-white text-sm font-semibold cursor-pointer"
>
U
</div>
</div>
</div>
<!-- Time Tracker Recorder -->
<div
class="sticky top-[60px] z-[99] bg-[#1d272c] flex items-center gap-4 px-6 shadow-md"
>
<!-- Timer Display --> <!-- Timer Display -->
<div <div class="font-mono text-[28px] font-normal text-gray-200 tracking-wide min-w-[140px]">
class="font-mono text-[28px] font-normal text-gray-200 tracking-wide min-w-[140px]"
>
00:00:00 00:00:00
</div> </div>
<!-- Start Button --> <!-- Start Button -->
<button <button class="w-11 h-11 rounded-full bg-[#4caf50] border-0 cursor-pointer flex items-center justify-center transition-colors hover:bg-[#43a047]">
class="w-11 h-11 rounded-full bg-[#4caf50] border-0 cursor-pointer flex items-center justify-center transition-colors hover:bg-[#43a047]" <svg width="18" height="18" viewBox="0 0 24 24" fill="white">
>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="white"
>
<polygon points="5,3 19,12 5,21" /> <polygon points="5,3 19,12 5,21" />
</svg> </svg>
</button> </button>
<!-- Task Input --> <!-- Task Input -->
<div <div class="flex-1 flex items-center px-3.5 py-2 bg-[#263238] rounded-lg text-gray-500 text-sm cursor-text">
class="flex-1 flex items-center px-3.5 py-2 bg-[#263238] rounded-lg text-gray-500 text-sm cursor-text" <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2.5 opacity-50">
> <path d="M12 20h9" />
<svg <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2.5 opacity-50"
>
<path
d="M12 20h9"
/>
<path
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
/>
</svg> </svg>
<span>Add a description</span> <span>Add a description</span>
</div> </div>
<!-- Project Selector --> <!-- Project Selector -->
<button <button class="flex items-center gap-1.5 px-3.5 py-2 bg-[#263238] border border-[#37474f] rounded-lg text-gray-200 text-sm cursor-pointer whitespace-nowrap">
class="flex items-center gap-1.5 px-3.5 py-2 bg-[#263238] border border-[#37474f] rounded-lg text-gray-200 text-sm cursor-pointer whitespace-nowrap" <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
> <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
/>
</svg> </svg>
<span>No project</span> <span>No project</span>
<svg <svg width="12" height="12" viewBox="0 0 12 12" fill="none" class="opacity-50">
width="12" <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
height="12"
viewBox="0 0 12 12"
fill="none"
class="opacity-50"
>
<path
d="M3 4.5L6 7.5L9 4.5"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg> </svg>
</button> </button>
<!-- Stop Button --> <!-- Stop Button -->
<button <button class="w-11 h-11 rounded-full border-2 border-[#f44336] bg-transparent cursor-pointer flex items-center justify-center transition-colors hover:bg-red-500/10">
class="w-11 h-11 rounded-full border-2 border-[#f44336] bg-transparent cursor-pointer flex items-center justify-center transition-colors hover:bg-red-500/10" <svg width="16" height="16" viewBox="0 0 24 24" fill="#f44336">
> <rect x="6" y="6" width="12" height="12" rx="1" />
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="#f44336"
>
<rect
x="6"
y="6"
width="12"
height="12"
rx="1"
/>
</svg> </svg>
</button> </button>
</div> </div>
</div>
<!-- Tracker Entries --> <!-- Tracker Entries -->
<div class="p-6 max-w-[1400px] w-full mx-auto"> <div class="p-6 max-w-[1400px] w-full mx-auto">
<!-- Empty State --> <!-- Empty State -->
<div <div class="flex flex-col items-center justify-center text-center py-16 mt-5">
class="flex flex-col items-center justify-center text-center py-16 mt-5" <img src="/empty-tracker-icon.webp" alt="No time entries" class="max-w-[80px] mb-6 opacity-70" />
> <h2 class="text-xl font-medium text-gray-700 mb-2">
<img
src="/empty-tracker-icon.webp"
alt="No time entries"
class="max-w-[80px] mb-6 opacity-70"
/>
<h2
class="text-xl font-medium text-gray-700 mb-2"
>
No time entries yet No time entries yet
</h2> </h2>
<p <p class="text-sm text-gray-500 mb-6 max-w-[400px] leading-relaxed">
class="text-sm text-gray-500 mb-6 max-w-[400px] leading-relaxed"
>
Start tracking your time by clicking the play button above. Your time entries will appear here. Start tracking your time by clicking the play button above. Your time entries will appear here.
</p> </p>
<button <button class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#03a9f4] text-white border-0 rounded-lg text-sm font-medium cursor-pointer transition-colors hover:bg-[#0290d4]">
class="inline-flex items-center gap-2 px-6 py-2.5 bg-[#03a9f4] text-white border-0 rounded-lg text-sm font-medium cursor-pointer transition-colors hover:bg-[#0290d4]" <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
> <line x1="12" y1="5" x2="12" y2="19" />
<svg <line x1="5" y1="12" x2="19" y2="12" />
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
</svg> </svg>
Start Tracking Start Tracking
</button> </button>