Skip to content

Commit 2063b3a

Browse files
tech4242tech4242
authored
Merge pull request #5 from tech4242/bugfix/cleanup-ui
bugfix/cleanup UI
2 parents b70e6cc + 270c704 commit 2063b3a

27 files changed

+1294
-151
lines changed

‎.gitignore‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ tests/test_logs/
44
CLAUDE.md
55
.DS_Store
66

7-
# Frontend build output
8-
mcphawk/web/static/*
9-
107
# Node modules
118
node_modules/
129
frontend/node_modules/

‎examples/branding/mcphawk_screenshot.png‎

37.1 KB
Loading

‎frontend/src/App-original.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
3+
<!-- Header -->
4+
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
5+
<div class="px-4 sm:px-6 lg:px-8">
6+
<div class="flex items-center justify-between h-16">
7+
<div class="flex items-center">
8+
<img src="/mcphawk_logo.png" alt="MCPHawk Logo" class="h-[62px]">
9+
<ConnectionStatus class="ml-4" />
10+
</div>
11+
<div class="flex items-center space-x-4">
12+
<StatsPanel />
13+
<ThemeToggle />
14+
</div>
15+
</div>
16+
</div>
17+
</header>
18+
19+
<!-- Main Content -->
20+
<main class="flex-1">
21+
<div class="px-4 sm:px-6 lg:px-8 py-6">
22+
<!-- Filters -->
23+
<div class="mb-6">
24+
<LogFilters />
25+
</div>
26+
27+
<!-- Log Table -->
28+
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
29+
<LogTable />
30+
</div>
31+
</div>
32+
</main>
33+
34+
<!-- Message Detail Modal -->
35+
<MessageDetailModal />
36+
</div>
37+
</template>
38+
39+
<script setup>
40+
import { onMounted, onUnmounted } from 'vue'
41+
import { useLogStore } from '@/stores/logs'
42+
import { useWebSocketStore } from '@/stores/websocket'
43+
import ConnectionStatus from '@/components/common/ConnectionStatus.vue'
44+
import ThemeToggle from '@/components/common/ThemeToggle.vue'
45+
import StatsPanel from '@/components/Stats/StatsPanel.vue'
46+
import LogFilters from '@/components/LogTable/LogFiltersModern.vue'
47+
import LogTable from '@/components/LogTable/LogTable.vue'
48+
import MessageDetailModal from '@/components/MessageDetail/MessageDetailModal.vue'
49+
50+
const logStore = useLogStore()
51+
const wsStore = useWebSocketStore()
52+
53+
onMounted(() => {
54+
// Load initial logs
55+
logStore.fetchLogs()
56+
57+
// Connect WebSocket
58+
wsStore.connect()
59+
})
60+
61+
onUnmounted(() => {
62+
wsStore.disconnect()
63+
})
64+
</script>

‎frontend/src/App-sidebar.vue‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
3+
<!-- Header -->
4+
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-10">
5+
<div class="px-4 sm:px-6 lg:px-8">
6+
<div class="flex items-center justify-between h-16">
7+
<div class="flex items-center">
8+
<button
9+
@click="sidebarOpen = !sidebarOpen"
10+
class="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
11+
>
12+
<Bars3Icon v-if="!sidebarOpen" class="h-6 w-6" />
13+
<XMarkIcon v-else class="h-6 w-6" />
14+
</button>
15+
<img src="/mcphawk_logo.png" alt="MCPHawk Logo" class="h-[62px] ml-2 lg:ml-0">
16+
<ConnectionStatus class="ml-4" />
17+
</div>
18+
<div class="flex items-center space-x-4">
19+
<StatsPanel />
20+
<ThemeToggle />
21+
</div>
22+
</div>
23+
</div>
24+
</header>
25+
26+
<!-- Main Content Area -->
27+
<div class="flex-1 flex overflow-hidden">
28+
<!-- Sidebar -->
29+
<aside
30+
class="w-80 flex-shrink-0 overflow-hidden transition-all duration-300 lg:relative lg:translate-x-0"
31+
:class="[
32+
sidebarOpen ? 'translate-x-0' : '-translate-x-full',
33+
'fixed inset-y-0 left-0 z-40 lg:static lg:inset-auto'
34+
]"
35+
>
36+
<div class="h-full" style="margin-top: 65px;" class="lg:mt-0">
37+
<LogFiltersSidebar />
38+
</div>
39+
</aside>
40+
41+
<!-- Mobile sidebar backdrop -->
42+
<div
43+
v-if="sidebarOpen"
44+
@click="sidebarOpen = false"
45+
class="lg:hidden fixed inset-0 bg-black/50 z-30"
46+
style="margin-top: 65px;"
47+
></div>
48+
49+
<!-- Main Content -->
50+
<main class="flex-1 overflow-auto">
51+
<div class="px-4 sm:px-6 lg:px-8 py-6">
52+
<!-- Search Bar and Actions -->
53+
<div class="mb-6">
54+
<LogSearchBar />
55+
</div>
56+
57+
<!-- Log Table -->
58+
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
59+
<LogTable />
60+
</div>
61+
</div>
62+
</main>
63+
</div>
64+
65+
<!-- Message Detail Modal -->
66+
<MessageDetailModal />
67+
</div>
68+
</template>
69+
70+
<script setup>
71+
import { onMounted, onUnmounted, ref } from 'vue'
72+
import { useLogStore } from '@/stores/logs'
73+
import { useWebSocketStore } from '@/stores/websocket'
74+
import ConnectionStatus from '@/components/common/ConnectionStatus.vue'
75+
import ThemeToggle from '@/components/common/ThemeToggle.vue'
76+
import StatsPanel from '@/components/Stats/StatsPanel.vue'
77+
import LogFiltersSidebar from '@/components/LogTable/LogFiltersSidebar.vue'
78+
import LogSearchBar from '@/components/LogTable/LogSearchBar.vue'
79+
import LogTable from '@/components/LogTable/LogTable.vue'
80+
import MessageDetailModal from '@/components/MessageDetail/MessageDetailModal.vue'
81+
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
82+
83+
const logStore = useLogStore()
84+
const wsStore = useWebSocketStore()
85+
const sidebarOpen = ref(false)
86+
87+
onMounted(() => {
88+
// Load initial logs
89+
logStore.fetchLogs()
90+
91+
// Connect WebSocket
92+
wsStore.connect()
93+
})
94+
95+
onUnmounted(() => {
96+
wsStore.disconnect()
97+
})
98+
</script>

‎frontend/src/App.vue‎

Lines changed: 74 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
<template>
2-
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
2+
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
33
<!-- Header -->
4-
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
4+
<header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 z-10">
55
<div class="px-4 sm:px-6 lg:px-8">
66
<div class="flex items-center justify-between h-16">
7-
<div class="flex items-center">
7+
<div class="flex items-center space-x-4">
88
<img src="/mcphawk_logo.png" alt="MCPHawk Logo" class="h-[62px]">
9-
<ConnectionStatus class="ml-4" />
9+
<div class="h-8 w-px bg-gray-300 dark:bg-gray-600"></div>
10+
<button
11+
@click="toggleSidebar"
12+
class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200"
13+
:title="sidebarOpen ? 'Hide filters' : 'Show filters'"
14+
>
15+
<ViewColumnsIcon class="h-5 w-5" />
16+
<span class="text-sm font-medium hidden sm:inline">
17+
{{ sidebarOpen ? 'Hide' : 'Show' }} Filters
18+
</span>
19+
</button>
20+
<ConnectionStatus />
1021
</div>
1122
<div class="flex items-center space-x-4">
1223
<StatsPanel />
@@ -16,49 +27,95 @@
1627
</div>
1728
</header>
1829

19-
<!-- Main Content -->
20-
<main class="flex-1">
21-
<div class="px-4 sm:px-6 lg:px-8 py-4">
22-
<!-- Filters -->
23-
<div class="mb-4">
24-
<LogFilters />
30+
<!-- Main Content Area -->
31+
<div class="flex-1 flex overflow-hidden">
32+
<!-- Sidebar -->
33+
<aside
34+
:class="[
35+
'w-64 flex-shrink-0 overflow-hidden transition-all duration-300',
36+
windowWidth < 1024
37+
? 'fixed inset-y-0 left-0 z-40'
38+
: 'relative',
39+
sidebarOpen
40+
? 'translate-x-0'
41+
: '-translate-x-full lg:hidden'
42+
]"
43+
>
44+
<div class="h-full lg:h-full" :class="{'mt-16': true, 'lg:mt-0': true}">
45+
<LogFiltersSidebar />
2546
</div>
47+
</aside>
48+
49+
<!-- Mobile sidebar backdrop -->
50+
<div
51+
v-if="sidebarOpen && windowWidth < 1024"
52+
@click="sidebarOpen = false"
53+
class="fixed inset-0 bg-black/50 z-30 mt-16"
54+
></div>
2655

27-
<!-- Log Table -->
28-
<div class="bg-white dark:bg-gray-800 shadow rounded-lg">
29-
<LogTable />
56+
<!-- Main Content -->
57+
<main class="flex-1 overflow-auto">
58+
<div class="px-4 sm:px-6 lg:px-8 py-6">
59+
<!-- Search Bar and Actions -->
60+
<div class="mb-6">
61+
<LogSearchBar />
62+
</div>
63+
64+
<!-- Log Table -->
65+
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
66+
<LogTable />
67+
</div>
3068
</div>
31-
</div>
32-
</main>
69+
</main>
70+
</div>
3371

3472
<!-- Message Detail Modal -->
3573
<MessageDetailModal />
3674
</div>
3775
</template>
3876

3977
<script setup>
40-
import { onMounted, onUnmounted } from 'vue'
78+
import { onMounted, onUnmounted, ref } from 'vue'
4179
import { useLogStore } from '@/stores/logs'
4280
import { useWebSocketStore } from '@/stores/websocket'
4381
import ConnectionStatus from '@/components/common/ConnectionStatus.vue'
4482
import ThemeToggle from '@/components/common/ThemeToggle.vue'
4583
import StatsPanel from '@/components/Stats/StatsPanel.vue'
46-
import LogFilters from '@/components/LogTable/LogFilters.vue'
84+
import LogFiltersSidebar from '@/components/LogTable/LogFiltersSidebar.vue'
85+
import LogSearchBar from '@/components/LogTable/LogSearchBar.vue'
4786
import LogTable from '@/components/LogTable/LogTable.vue'
4887
import MessageDetailModal from '@/components/MessageDetail/MessageDetailModal.vue'
88+
import { ViewColumnsIcon } from '@heroicons/vue/24/outline'
4989
5090
const logStore = useLogStore()
5191
const wsStore = useWebSocketStore()
92+
const sidebarOpen = ref(true) // Default to open on desktop
93+
const windowWidth = ref(window.innerWidth)
94+
95+
// Handle window resize
96+
const handleResize = () => {
97+
windowWidth.value = window.innerWidth
98+
}
99+
100+
// Toggle sidebar
101+
const toggleSidebar = () => {
102+
sidebarOpen.value = !sidebarOpen.value
103+
}
52104
53105
onMounted(() => {
54106
// Load initial logs
55107
logStore.fetchLogs()
56108
57109
// Connect WebSocket
58110
wsStore.connect()
111+
112+
// Add resize listener
113+
window.addEventListener('resize', handleResize)
114+
handleResize() // Initial check
59115
})
60116
61117
onUnmounted(() => {
62118
wsStore.disconnect()
119+
window.removeEventListener('resize', handleResize)
63120
})
64121
</script>

0 commit comments

Comments
 (0)