mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-07-28 21:43:50 +00:00
feat(ui): enhance frontend architecture and improve user experience
Refactor the frontend to use a more consistent design system and improve the overall user interface and experience. - Implement a consistent use of `Card` components across various pages (Dashboard, Settings, Notes, etc.). - Improve layout responsiveness and spacing in several modules. - Enhance the Tasks page with drag-and-drop status updates and a Kanban-style view. - Update the Calendar view with better color coding for task priorities and types. - Refactor the Bookmarks page to use a grid layout with improved card previews. - Update the Nginx configuration to handle SPA routing and health checks more effectively. - Standardize import paths using `@/` aliases. - Fix minor bugs in message sending and loading states. - Update Docker configuration to build from source and use a specific backend port.
This commit is contained in:
Tomas Dvorak
+1
-1
@@ -5,7 +5,7 @@
|
||||
FROM node:22-alpine AS frontend-builder
|
||||
WORKDIR /app/frontend
|
||||
COPY frontend/package*.json ./
|
||||
RUN npm ci --only=production
|
||||
RUN npm install
|
||||
COPY frontend/ ./
|
||||
RUN npm run build
|
||||
|
||||
|
||||
+3
-4
@@ -1,14 +1,13 @@
|
||||
icon: https://github.com/Dvorinka/Trackeep/raw/main/trackeepfavi_bg.png
|
||||
|
||||
services:
|
||||
trackeep:
|
||||
image: ghcr.io/dvorinka/trackeep:latest
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "${HOST_PORT:-8080}:8080"
|
||||
env_file:
|
||||
- .env
|
||||
environment:
|
||||
- BACKEND_PORT=8080
|
||||
- DB_HOST=postgres
|
||||
- DB_PORT=5432
|
||||
- GIN_MODE=release
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
set -e
|
||||
|
||||
# Backend configuration
|
||||
export BACKEND_PORT=${BACKEND_PORT:-8080}
|
||||
export BACKEND_PORT=8081
|
||||
export DB_HOST=${DB_HOST:-postgres}
|
||||
export DB_PORT=${DB_PORT:-5432}
|
||||
export DB_NAME=${DB_NAME:-trackeep}
|
||||
@@ -23,7 +23,7 @@ echo "Starting Trackeep backend on port ${BACKEND_PORT}..."
|
||||
# Wait for backend to be ready
|
||||
echo "Waiting for backend to be ready..."
|
||||
for i in $(seq 1 30); do
|
||||
if wget --no-verbose --tries=1 --spider http://localhost:${BACKEND_PORT}/health 2>/dev/null; then
|
||||
if wget --no-verbose --tries=1 --spider http://localhost:8081/health 2>/dev/null; then
|
||||
echo "Backend is ready!"
|
||||
break
|
||||
fi
|
||||
@@ -31,9 +31,6 @@ for i in $(seq 1 30); do
|
||||
sleep 2
|
||||
done
|
||||
|
||||
# Update nginx config to proxy to localhost backend
|
||||
sed -i "s|http://trackeep-backend:8080/|http://localhost:${BACKEND_PORT}/|g" /etc/nginx/nginx.conf
|
||||
|
||||
# Start nginx
|
||||
echo "Starting nginx..."
|
||||
nginx -g "daemon off;"
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
<meta name="theme-color" content="#39b9ff" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Trackeep - Your Self-Hosted Productivity & Knowledge Hub</title>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-LnCEqXC_.css">
|
||||
<script>
|
||||
// Runtime environment variable injection
|
||||
window.ENV = {
|
||||
|
||||
+27
-2
@@ -39,7 +39,7 @@ http {
|
||||
image/svg+xml;
|
||||
|
||||
server {
|
||||
listen 80;
|
||||
listen 8080;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
@@ -50,14 +50,39 @@ http {
|
||||
add_header X-XSS-Protection "1; mode=block" always;
|
||||
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
|
||||
|
||||
# Explicit root files (prevent SPA fallback)
|
||||
location = /manifest.json {
|
||||
try_files $uri =404;
|
||||
}
|
||||
location = /trackeep.svg {
|
||||
try_files $uri =404;
|
||||
}
|
||||
location = /trackeepfavi_bg.png {
|
||||
try_files $uri =404;
|
||||
}
|
||||
location = /trackeepfavi.png {
|
||||
try_files $uri =404;
|
||||
}
|
||||
|
||||
# Handle client-side routing
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Health check proxy to backend
|
||||
location /health {
|
||||
proxy_pass http://localhost:8081/health;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
}
|
||||
|
||||
# API proxy to backend (internal localhost)
|
||||
location /api/ {
|
||||
proxy_pass http://localhost:8080/;
|
||||
proxy_pass http://localhost:8081;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
|
||||
@@ -182,10 +182,10 @@ export function Layout(props: LayoutProps) {
|
||||
{/* Main Content */}
|
||||
<div class="flex-1 min-h-0 flex flex-col">
|
||||
{/* Header */}
|
||||
<Header title={props.title} onMenuClick={toggleSidebar} />
|
||||
{!props.fullBleed && <Header title={props.title} onMenuClick={toggleSidebar} />}
|
||||
|
||||
{/* Page Content */}
|
||||
<main class="flex-1 overflow-auto max-w-screen">
|
||||
<main class={`flex-1 ${props.fullBleed ? 'overflow-hidden' : 'overflow-auto w-full'}`}>
|
||||
<div class={props.fullBleed ? "h-full" : "p-2 max-w-7xl mx-auto"}>
|
||||
{resolved()}
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
IconClock,
|
||||
IconChecklist
|
||||
} from '@tabler/icons-solidjs';
|
||||
import { ColorSwitcher } from './ColorSwitcher';
|
||||
import { ColorSwitcher } from '@/pages/settings/ColorSwitcher';
|
||||
import { useHaptics } from '@/lib/haptics';
|
||||
|
||||
interface ProjectStats {
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
FileText as FileTextIcon,
|
||||
Sparkles,
|
||||
ChevronDown,
|
||||
Settings,
|
||||
Trash,
|
||||
User
|
||||
} from 'lucide-solid'
|
||||
@@ -386,109 +385,8 @@ const Chat = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="mt-4 pb-32 max-w-7xl mx-auto">
|
||||
<div class="bg-background rounded-lg border shadow-sm">
|
||||
{/* Header with Model Selection */}
|
||||
<div class="p-6 border-b bg-card/95 backdrop-blur-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<h2 class="font-semibold text-lg">AI Assistant</h2>
|
||||
<p class="text-sm text-muted-foreground">Your intelligent workspace companion</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1 p-1 bg-muted rounded-lg">
|
||||
<button
|
||||
onClick={() => setActiveView('chat')}
|
||||
class={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
activeView() === 'chat'
|
||||
? 'bg-background shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
Chat
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveView('ai-tools')}
|
||||
class={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
activeView() === 'ai-tools'
|
||||
? 'bg-background shadow-sm'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
>
|
||||
AI Tools
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowSettings(!showSettings())}
|
||||
class="flex items-center gap-2 px-3 py-2 hover:bg-muted rounded-lg text-sm transition-colors"
|
||||
>
|
||||
<Settings class="h-4 w-4" />
|
||||
Settings
|
||||
</Button>
|
||||
|
||||
{/* Enhanced AI Model Picker */}
|
||||
<div class="relative">
|
||||
<button
|
||||
onClick={() => setShowModelPicker(!showModelPicker())}
|
||||
class="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 rounded-lg text-sm transition-colors"
|
||||
>
|
||||
<span>{getAIModels().find(m => m.id === selectedModel())?.name || 'Select Model'}</span>
|
||||
<ChevronDown class={`h-4 w-4 transition-transform ${showModelPicker() ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
<Show when={showModelPicker()}>
|
||||
<div class="absolute right-0 mt-2 w-80 bg-background border rounded-lg shadow-lg z-50 p-2 max-h-96 overflow-y-auto">
|
||||
<div class="p-2 border-b mb-2">
|
||||
<h4 class="text-sm font-semibold text-foreground">Select AI Model</h4>
|
||||
<p class="text-xs text-muted-foreground">Choose the best model for your needs</p>
|
||||
</div>
|
||||
<For each={getAIModels()}>
|
||||
{model => (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedModel(model.id)
|
||||
setShowModelPicker(false)
|
||||
}}
|
||||
class={`w-full text-left p-3 rounded-lg transition-colors ${
|
||||
selectedModel() === model.id
|
||||
? 'bg-primary/10 border border-primary/20'
|
||||
: 'hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="font-medium text-sm">{model.name}</div>
|
||||
<div class="text-xs text-muted-foreground mt-1">{model.description}</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">
|
||||
{model.provider}
|
||||
</span>
|
||||
<span class="text-xs px-2 py-1 bg-muted text-muted-foreground rounded-full">
|
||||
{model.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{selectedModel() === model.id && (
|
||||
<div class="w-2 h-2 bg-primary rounded-full"></div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pb-32 max-w-7xl mx-auto flex flex-col md:flex-row gap-4">
|
||||
<div class="w-72 flex-shrink-0 bg-background rounded-lg border shadow-sm overflow-hidden flex flex-col">
|
||||
<Show when={showSettings()}>
|
||||
<div class="p-6 border-b bg-muted/30">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
@@ -741,7 +639,7 @@ const Chat = () => {
|
||||
</div>
|
||||
|
||||
{/* Chat Area */}
|
||||
<div class="flex-1 flex flex-col min-w-0 ml-80">
|
||||
<div class="flex-1 flex flex-col min-w-0 bg-background rounded-lg border shadow-sm overflow-hidden">
|
||||
<div class="hidden md:flex items-center justify-between p-6 border-b bg-card/95 backdrop-blur-sm">
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -811,9 +709,9 @@ const Chat = () => {
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div class="flex flex-col">
|
||||
<div class="flex-1 flex flex-col min-h-0">
|
||||
<Show when={activeView() === 'chat'}>
|
||||
<div class="flex-1 overflow-y-auto h-[calc(100vh-320px)]">
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
<div class="space-y-6 max-w-5xl mx-auto p-6">
|
||||
<For each={messages()}>
|
||||
{message => (
|
||||
@@ -1111,7 +1009,6 @@ const Chat = () => {
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<div class="clear-both"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -606,13 +606,16 @@
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.messages-shell {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messages-sidebar,
|
||||
.messages-main {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.messages-shell-list .messages-main {
|
||||
@@ -622,6 +625,10 @@
|
||||
.messages-shell-conversation .messages-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.messages-composer {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-composer-drag {
|
||||
@@ -830,9 +837,9 @@
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 980px) {
|
||||
.messages-sidebar,
|
||||
.messages-main {
|
||||
width: 100%;
|
||||
.messages-sidebar {
|
||||
width: 16rem;
|
||||
min-width: 16rem;
|
||||
border-inline: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
@@ -848,11 +855,11 @@
|
||||
}
|
||||
|
||||
.messages-composer-row {
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-template-columns: repeat(3, auto) 1fr auto;
|
||||
}
|
||||
|
||||
.messages-composer-row > button:last-child {
|
||||
grid-column: 3;
|
||||
grid-column: 5;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@@ -1768,6 +1768,7 @@ export const Messages = () => {
|
||||
if (!selectedConversationId()) return;
|
||||
const body = inputText().trim();
|
||||
if (!body && selectedFiles().length === 0 && attachedLibraryFiles().length === 0 && composerAiReferences().length === 0) return;
|
||||
if (sendingMessage()) return;
|
||||
|
||||
try {
|
||||
const localFiles = [...selectedFiles()];
|
||||
@@ -2751,6 +2752,7 @@ export const Messages = () => {
|
||||
}}
|
||||
disabled={
|
||||
sendingMessage() ||
|
||||
uploadProgress() !== null ||
|
||||
(!inputText().trim() && selectedFiles().length === 0 && attachedLibraryFiles().length === 0 && composerAiReferences().length === 0)
|
||||
}
|
||||
>
|
||||
|
||||
@@ -482,114 +482,122 @@ export const Bookmarks = () => {
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{filteredBookmarks().map((bookmark) => {
|
||||
const faviconUrl = getFaviconUrl(bookmark);
|
||||
const screenshotUrl = getScreenshotUrl(bookmark);
|
||||
return (
|
||||
<Card class="p-6 hover:bg-accent transition-colors group">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
{/* Left side: preview image + favicon + title + URL + tags */}
|
||||
<div class="flex-1 min-w-0">
|
||||
{screenshotUrl && (
|
||||
<div class="mb-3 rounded-md overflow-hidden border border-border bg-muted/40">
|
||||
<img
|
||||
src={screenshotUrl}
|
||||
alt="Website preview"
|
||||
class="w-full h-32 sm:h-40 object-cover"
|
||||
loading="lazy"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Card class="p-4 hover:bg-accent/50 transition-colors group flex flex-col h-full">
|
||||
{screenshotUrl && (
|
||||
<div class="mb-3 rounded-lg overflow-hidden border border-border/50 bg-muted/30 -mx-4 -mt-4">
|
||||
<a href={bookmark.url} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src={screenshotUrl}
|
||||
alt="Website preview"
|
||||
class="w-full h-28 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
onError={(e) => {
|
||||
e.currentTarget.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
<div class="flex items-start gap-3 mb-3">
|
||||
<div class="flex-shrink-0 w-9 h-9 bg-muted rounded-lg flex items-center justify-center overflow-hidden border border-border/50">
|
||||
{faviconUrl ? (
|
||||
<img
|
||||
src={faviconUrl}
|
||||
alt=""
|
||||
class="w-5 h-5 object-contain"
|
||||
onError={(e) => {
|
||||
const img = e.currentTarget;
|
||||
img.style.display = 'none';
|
||||
const span = document.createElement('span');
|
||||
span.className = 'text-xs text-muted-foreground font-bold';
|
||||
span.textContent = getBookmarkInitial(bookmark.title);
|
||||
img.parentElement!.appendChild(span);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span class="text-xs text-muted-foreground font-bold">
|
||||
{getBookmarkInitial(bookmark.title)}
|
||||
</span>
|
||||
)}
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-muted rounded-md flex items-center justify-center overflow-hidden">
|
||||
{faviconUrl ? (
|
||||
<img
|
||||
src={faviconUrl}
|
||||
alt=""
|
||||
class="w-6 h-6 object-contain"
|
||||
onError={(e) => {
|
||||
const img = e.currentTarget;
|
||||
img.style.display = 'none';
|
||||
const span = document.createElement('span');
|
||||
span.className = 'text-xs text-muted-foreground font-medium';
|
||||
span.textContent = getBookmarkInitial(bookmark.title);
|
||||
img.parentElement!.appendChild(span);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span class="text-xs text-muted-foreground font-medium">
|
||||
{getBookmarkInitial(bookmark.title)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-foreground truncate">
|
||||
<a
|
||||
href={bookmark.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-primary hover:text-primary/80 transition-colors flex items-center gap-1"
|
||||
>
|
||||
{bookmark.title}
|
||||
<IconExternalLink class="size-5 ml-1.5 flex-shrink-0 text-current group-hover:text-white" />
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-muted-foreground text-sm truncate">{bookmark.url}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{bookmark.description && (
|
||||
<p class="text-foreground text-sm mb-3 line-clamp-2">{bookmark.description}</p>
|
||||
)}
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-1">
|
||||
{(bookmark.tags || []).map((tag) => (
|
||||
<button
|
||||
onClick={() => handleTagClick(tag)}
|
||||
class={`px-2 py-1 text-xs rounded-md border transition-colors cursor-pointer
|
||||
${selectedTag() === tag
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-muted/80 text-muted-foreground border-transparent group-hover:bg-accent group-hover:text-accent-foreground group-hover:border-border'
|
||||
}`}
|
||||
title={`Click to filter by ${tag}`}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-sm font-semibold text-foreground leading-tight">
|
||||
<a
|
||||
href={bookmark.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
{bookmark.title}
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text-muted-foreground text-xs truncate mt-0.5">{bookmark.url}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: optional date above important star + menu */}
|
||||
<div class="flex flex-col items-end gap-2 ml-2">
|
||||
{bookmark.created_at && !isNaN(new Date(bookmark.created_at).getTime()) && (
|
||||
<div class="text-muted-foreground text-xs">
|
||||
{new Date(bookmark.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
{bookmark.description && (
|
||||
<p class="text-foreground/80 text-xs mb-3 line-clamp-2 flex-grow">{bookmark.description}</p>
|
||||
)}
|
||||
|
||||
<div class="flex flex-wrap gap-1.5 mt-auto">
|
||||
{(bookmark.tags || []).slice(0, 4).map((tag) => (
|
||||
<button
|
||||
onClick={() => handleTagClick(tag)}
|
||||
class={`px-2 py-0.5 text-[10px] rounded-md border transition-colors cursor-pointer
|
||||
${selectedTag() === tag
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-muted/60 text-muted-foreground border-transparent hover:bg-accent hover:text-accent-foreground'
|
||||
}`}
|
||||
title={`Click to filter by ${tag}`}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
{(bookmark.tags || []).length > 4 && (
|
||||
<span class="px-2 py-0.5 text-[10px] text-muted-foreground">+{(bookmark.tags || []).length - 4}</span>
|
||||
)}
|
||||
<div class="flex items-center gap-2">
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-3 pt-3 border-t border-border/50">
|
||||
{bookmark.created_at && !isNaN(new Date(bookmark.created_at).getTime()) ? (
|
||||
<span class="text-muted-foreground text-[10px]">
|
||||
{new Date(bookmark.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => toggleImportant(bookmark.id)}
|
||||
class={`flex-shrink-0 p-1 rounded hover:bg-accent/50 transition-colors ${
|
||||
bookmark.isImportant ? 'order-first' : ''
|
||||
}`}
|
||||
class="p-1.5 rounded-md hover:bg-accent transition-colors"
|
||||
title={bookmark.isImportant ? 'Remove from favorites' : 'Mark as favorite'}
|
||||
>
|
||||
<IconStar
|
||||
class={`size-4 ${
|
||||
class={`size-3.5 ${
|
||||
bookmark.isImportant
|
||||
? 'text-primary fill-primary'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
href={bookmark.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="p-1.5 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground"
|
||||
title="Open in new tab"
|
||||
>
|
||||
<IconExternalLink class="size-3.5" />
|
||||
</a>
|
||||
<DropdownMenu
|
||||
trigger={
|
||||
<button class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-inherit hover:bg-accent/50 hover:text-accent-foreground h-8 w-8">
|
||||
<IconDotsVertical class="size-4" />
|
||||
<button class="p-1.5 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground">
|
||||
<IconDotsVertical class="size-3.5" />
|
||||
</button>
|
||||
}
|
||||
>
|
||||
@@ -612,17 +620,18 @@ export const Bookmarks = () => {
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredBookmarks().length === 0 && (
|
||||
<Card class="p-12 text-center">
|
||||
<p class="text-muted-foreground">
|
||||
{searchTerm() ? 'No bookmarks found matching your search.' : 'No bookmarks yet. Add your first bookmark!'}
|
||||
</p>
|
||||
</Card>
|
||||
<div class="col-span-full">
|
||||
<Card class="p-12 text-center">
|
||||
<p class="text-muted-foreground">
|
||||
{searchTerm() ? 'No bookmarks found matching your search.' : 'No bookmarks yet. Add your first bookmark!'}
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { SearchTagFilterBar } from '@/components/ui/SearchTagFilterBar';
|
||||
import { NoteModal } from '@/components/ui/NoteModal';
|
||||
import { ViewNoteModal } from '@/components/ui/ViewNoteModal';
|
||||
import { NoteContentRenderer } from '@/components/notes/NoteContentRenderer';
|
||||
import { IconPin, IconTrash, IconEdit, IconCopy, IconDownload, IconPaperclip } from '@tabler/icons-solidjs';
|
||||
import { IconPin, IconTrash, IconEdit, IconCopy } from '@tabler/icons-solidjs';
|
||||
import { getMockNotes } from '@/lib/mockData';
|
||||
import { isDemoMode, shouldUseRealBackend } from '@/lib/demo-mode';
|
||||
import { getApiV1BaseUrl } from '@/lib/api-url';
|
||||
@@ -103,7 +103,6 @@ export const Notes = () => {
|
||||
const [editingNote, setEditingNote] = createSignal<Note | null>(null);
|
||||
const [viewingNote, setViewingNote] = createSignal<Note | null>(null);
|
||||
const [copiedContent, setCopiedContent] = createSignal(false);
|
||||
const [expandedNotes, setExpandedNotes] = createSignal<Set<number>>(new Set());
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
@@ -400,18 +399,6 @@ export const Notes = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleNoteExpansion = (noteId: number) => {
|
||||
setExpandedNotes(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(noteId)) {
|
||||
newSet.delete(noteId);
|
||||
} else {
|
||||
newSet.add(noteId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const exportNote = (note: Note) => {
|
||||
const content = note.isMarkdown ? `# ${note.title}\n\n${note.content}` : note.content;
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
@@ -527,21 +514,6 @@ export const Notes = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<Card class="p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-muted-foreground mb-1">Total Notes</p>
|
||||
<p class="text-xl font-semibold text-foreground">{filteredNotes().length}</p>
|
||||
</Card>
|
||||
<Card class="p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-muted-foreground mb-1">Pinned</p>
|
||||
<p class="text-xl font-semibold text-foreground">{filteredNotes().filter((note) => note.pinned).length}</p>
|
||||
</Card>
|
||||
<Card class="p-4">
|
||||
<p class="text-xs uppercase tracking-wide text-muted-foreground mb-1">Tags</p>
|
||||
<p class="text-xl font-semibold text-foreground">{allTags().length}</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Show when={loadError()}>
|
||||
<Card class="border-destructive/30 bg-destructive/5 p-4">
|
||||
<p class="text-sm font-medium text-foreground">Notes could not be loaded</p>
|
||||
@@ -555,170 +527,117 @@ export const Notes = () => {
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={isLoading()}>
|
||||
<div class="space-y-4">
|
||||
{[...Array(3)].map(() => (
|
||||
<Card class="p-6">
|
||||
<div class="animate-pulse">
|
||||
<div class="h-6 bg-muted rounded mb-2"></div>
|
||||
<div class="h-4 bg-muted rounded w-3/4"></div>
|
||||
{isLoading() ? (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[...Array(6)].map(() => (
|
||||
<Card class="p-5 h-40">
|
||||
<div class="animate-pulse space-y-3">
|
||||
<div class="h-5 bg-muted rounded w-2/3"></div>
|
||||
<div class="h-3 bg-muted rounded w-full"></div>
|
||||
<div class="h-3 bg-muted rounded w-4/5"></div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={!isLoading()}>
|
||||
<div class="space-y-4">
|
||||
) : (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<For each={filteredNotes()}>
|
||||
{(note) => (
|
||||
<Card
|
||||
data-note-id={note.id}
|
||||
class={`p-6 cursor-pointer transition-colors hover:bg-accent/50 ${note.pinned ? 'border-l-4 border-l-primary' : ''}`}
|
||||
<div
|
||||
class={`group relative bg-card rounded-xl border border-border p-5 cursor-pointer hover:shadow-lg hover:border-primary/20 transition-all ${note.pinned ? 'ring-1 ring-primary/20' : ''}`}
|
||||
onClick={() => viewNote(note)}
|
||||
>
|
||||
<div class="flex justify-between items-start mb-3 gap-3">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<h3 class="text-lg font-semibold text-foreground truncate">{note.title}</h3>
|
||||
<Show when={note.pinned}>
|
||||
<IconPin class="size-4 text-primary" />
|
||||
</Show>
|
||||
<Show when={note.isMarkdown}>
|
||||
<span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded">MD</span>
|
||||
</Show>
|
||||
<Show when={note.isHtml}>
|
||||
<span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded">HTML</span>
|
||||
</Show>
|
||||
</div>
|
||||
<div class="flex gap-1 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
copyNoteContent(note);
|
||||
}}
|
||||
class="text-muted-foreground hover:text-foreground p-1"
|
||||
>
|
||||
<IconCopy size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
exportNote(note);
|
||||
}}
|
||||
class="text-muted-foreground hover:text-foreground p-1"
|
||||
>
|
||||
<IconDownload size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startEditNote(note);
|
||||
}}
|
||||
class="text-muted-foreground hover:text-foreground p-1"
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
togglePin(note.id);
|
||||
}}
|
||||
class="text-primary hover:text-primary/80 p-1"
|
||||
{...{ title: note.pinned ? 'Unpin note' : 'Pin note' }}
|
||||
>
|
||||
<IconPin size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteNote(note.id);
|
||||
}}
|
||||
class="text-destructive hover:text-destructive/80 p-1"
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-muted-foreground text-sm mb-3">
|
||||
<div class={expandedNotes().has(note.id) ? '' : 'max-h-72 overflow-hidden'}>
|
||||
<NoteContentRenderer
|
||||
content={note.content}
|
||||
kind={getNoteKind(note)}
|
||||
preview={!expandedNotes().has(note.id)}
|
||||
maxBlocks={4}
|
||||
onToggleTask={(taskIndex, nextChecked) => updateNoteCheckbox(note.id, taskIndex, nextChecked)}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleNoteExpansion(note.id);
|
||||
}}
|
||||
class="mt-2 text-xs text-primary hover:text-primary/80 font-medium cursor-pointer transition-colors"
|
||||
>
|
||||
{expandedNotes().has(note.id) ? 'Show less ←' : 'Show more →'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Show when={note.attachments && note.attachments.length > 0}>
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<IconPaperclip class="size-4 text-muted-foreground" />
|
||||
<span class="text-xs text-muted-foreground">Attachments ({note.attachments?.length || 0})</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<For each={note.attachments || []}>
|
||||
{(attachment) => (
|
||||
<div class="flex items-center gap-2 px-2 py-1 bg-muted rounded-md text-xs">
|
||||
<span class="text-foreground">{attachment.name}</span>
|
||||
<span class="text-muted-foreground">({attachment.size})</span>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<Show when={note.pinned}>
|
||||
<div class="absolute top-3 right-3">
|
||||
<IconPin class="size-3.5 text-primary" />
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<For each={note.tags}>
|
||||
<h3 class={`text-base font-semibold text-foreground mb-2 pr-5 ${note.pinned ? 'text-primary' : ''}`}>
|
||||
{note.title}
|
||||
</h3>
|
||||
|
||||
<div class="text-muted-foreground text-sm line-clamp-3 mb-4">
|
||||
<NoteContentRenderer
|
||||
content={note.content}
|
||||
kind={getNoteKind(note)}
|
||||
preview={true}
|
||||
maxBlocks={3}
|
||||
onToggleTask={(taskIndex, nextChecked) => updateNoteCheckbox(note.id, taskIndex, nextChecked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-1.5 mb-3">
|
||||
<For each={note.tags.slice(0, 4)}>
|
||||
{(tag) => (
|
||||
<button
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleTag(tag);
|
||||
}}
|
||||
class="px-2 py-1 bg-muted hover:bg-muted/80 text-muted-foreground hover:text-foreground text-xs rounded-md transition-colors cursor-pointer"
|
||||
class="px-2 py-0.5 bg-muted/60 text-muted-foreground text-[10px] rounded-full cursor-pointer hover:bg-muted hover:text-foreground transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</For>
|
||||
<Show when={note.tags.length > 4}>
|
||||
<span class="px-2 py-0.5 text-muted-foreground text-[10px]">+{note.tags.length - 4}</span>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<p class="text-muted-foreground text-xs">
|
||||
Updated: {formatDisplayDate(note.updatedAt)}
|
||||
</p>
|
||||
</Card>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-[10px] text-muted-foreground">
|
||||
{formatDisplayDate(note.updatedAt)}
|
||||
</span>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); copyNoteContent(note); }}
|
||||
class="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
title="Copy"
|
||||
>
|
||||
<IconCopy class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); startEditNote(note); }}
|
||||
class="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
title="Edit"
|
||||
>
|
||||
<IconEdit class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); togglePin(note.id); }}
|
||||
class="p-1.5 rounded-md hover:bg-muted text-primary hover:text-primary/80"
|
||||
title={note.pinned ? 'Unpin' : 'Pin'}
|
||||
>
|
||||
<IconPin class="size-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); deleteNote(note.id); }}
|
||||
class="p-1.5 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
|
||||
title="Delete"
|
||||
>
|
||||
<IconTrash class="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
|
||||
<Show when={filteredNotes().length === 0}>
|
||||
<Card class="p-12 text-center">
|
||||
<p class="text-muted-foreground">
|
||||
{searchTerm() || selectedTags().length > 0
|
||||
? 'No notes found matching your search or filters.'
|
||||
: 'No notes yet. Add your first note!'}
|
||||
</p>
|
||||
</Card>
|
||||
<div class="col-span-full">
|
||||
<Card class="p-12 text-center">
|
||||
<p class="text-muted-foreground">
|
||||
{searchTerm() || selectedTags().length > 0
|
||||
? 'No notes found matching your search or filters.'
|
||||
: 'No notes yet. Add your first note!'}
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
)}
|
||||
|
||||
{/* Add Note Modal */}
|
||||
<NoteModal
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
} from '@tabler/icons-solidjs';
|
||||
import { BrowserSearch } from '@/components/search/BrowserSearch';
|
||||
import { DropdownMenu, DropdownMenuItem } from '@/components/ui/DropdownMenu';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { FilePreviewModal } from '@/components/ui/FilePreviewModal';
|
||||
import { ActivityFeed } from '@/components/ui/ActivityFeed';
|
||||
import { UploadModal } from '@/components/ui/UploadModal';
|
||||
@@ -525,129 +526,105 @@ export const Dashboard = () => {
|
||||
return (
|
||||
<div class="p-6 mt-4 pb-32 max-w-5xl mx-auto">
|
||||
{/* Stats Overview */}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
|
||||
<Card class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<div class="bg-muted flex items-center justify-center p-2.5 rounded-xl">
|
||||
<IconFileText class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-light">{stats().totalDocuments}</p>
|
||||
<p class="text-sm text-muted-foreground">Documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconBookmark class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-light">{stats().totalBookmarks}</p>
|
||||
<p class="text-sm text-muted-foreground">Bookmarks</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconChecklist class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-light">{stats().totalTasks}</p>
|
||||
<p class="text-sm text-muted-foreground">Tasks</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconNotebook class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-light">{stats().totalNotes}</p>
|
||||
<p class="text-sm text-muted-foreground">Notes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Stats Row */}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconVideo class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{stats().totalVideos}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Videos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconSchool class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{stats().totalLearningPaths}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Learning</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconClock class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{formatDuration(stats().totalTimeTracked)}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconTrendingUp class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{stats().averageProductivity}%</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Productivity</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconFolder class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{stats().totalDocuments}</p>
|
||||
<p class="text-2xl font-bold text-foreground">{stats().totalDocuments}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Documents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex flex-col items-center text-center gap-2">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconActivity class="size-5 text-primary" />
|
||||
<Card class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2.5 rounded-xl">
|
||||
<IconBookmark class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-foreground">{stats().totalNotes}</p>
|
||||
<p class="text-2xl font-bold text-foreground">{stats().totalBookmarks}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Bookmarks</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2.5 rounded-xl">
|
||||
<IconChecklist class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-foreground">{stats().totalTasks}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Tasks</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-muted flex items-center justify-center p-2.5 rounded-xl">
|
||||
<IconNotebook class="size-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-foreground">{stats().totalNotes}</p>
|
||||
<p class="text-xs text-muted-foreground font-medium">Notes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Secondary Stats */}
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8">
|
||||
<Card class="p-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-xl">
|
||||
<IconVideo class="size-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-foreground">{stats().totalVideos}</p>
|
||||
<p class="text-[10px] text-muted-foreground font-medium">Videos</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-xl">
|
||||
<IconSchool class="size-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-foreground">{stats().totalLearningPaths}</p>
|
||||
<p class="text-[10px] text-muted-foreground font-medium">Learning</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-xl">
|
||||
<IconClock class="size-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-foreground">{formatDuration(stats().totalTimeTracked)}</p>
|
||||
<p class="text-[10px] text-muted-foreground font-medium">Tracked</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="p-3">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-xl">
|
||||
<IconTrendingUp class="size-4 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-foreground">{stats().averageProductivity}%</p>
|
||||
<p class="text-[10px] text-muted-foreground font-medium">Productivity</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recent Achievements and Deadlines */}
|
||||
|
||||
@@ -328,22 +328,22 @@ export function Calendar() {
|
||||
|
||||
const getPriorityColor = (priority: string) => {
|
||||
switch (priority) {
|
||||
case 'urgent': return 'text-primary'
|
||||
case 'high': return 'text-primary'
|
||||
case 'medium': return 'text-primary'
|
||||
case 'low': return 'text-primary'
|
||||
default: return 'text-primary'
|
||||
case 'urgent': return 'text-red-500'
|
||||
case 'high': return 'text-orange-500'
|
||||
case 'medium': return 'text-yellow-500'
|
||||
case 'low': return 'text-green-500'
|
||||
default: return 'text-muted-foreground'
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'task': return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
case 'meeting': return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
case 'deadline': return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
case 'reminder': return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
case 'habit': return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
default: return 'bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary'
|
||||
case 'task': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
case 'meeting': return 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
|
||||
case 'deadline': return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
||||
case 'reminder': return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
|
||||
case 'habit': return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
default: return 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { createSignal, onMount } from 'solid-js';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { SearchTagFilterBar } from '@/components/ui/SearchTagFilterBar';
|
||||
import { TaskModal } from '@/components/ui/TaskModal';
|
||||
import { IconEdit, IconTrash } from '@tabler/icons-solidjs';
|
||||
import { getApiV1BaseUrl } from '@/lib/api-url';
|
||||
@@ -25,12 +24,53 @@ export const Tasks = () => {
|
||||
const [showAddModal, setShowAddModal] = createSignal(false);
|
||||
const [showEditModal, setShowEditModal] = createSignal(false);
|
||||
const [editingTask, setEditingTask] = createSignal<Task | null>(null);
|
||||
const [filter, setFilter] = createSignal<'all' | 'active' | 'completed'>('all');
|
||||
const [searchTerm, setSearchTerm] = createSignal('');
|
||||
const [selectedPriority, setSelectedPriority] = createSignal('');
|
||||
const [draggedTaskId, setDraggedTaskId] = createSignal<number | null>(null);
|
||||
const [dragOverColumn, setDragOverColumn] = createSignal<string | null>(null);
|
||||
const [taskStatuses, setTaskStatuses] = createSignal<Record<number, 'todo' | 'inProgress' | 'done'>>({});
|
||||
|
||||
const haptics = useHaptics();
|
||||
|
||||
const getTaskColumn = (task: Task) => {
|
||||
if (task.completed) return 'done';
|
||||
return taskStatuses()[task.id] || 'todo';
|
||||
};
|
||||
|
||||
const setTaskColumn = async (taskId: number, column: 'todo' | 'inProgress' | 'done') => {
|
||||
const task = tasks().find(t => t.id === taskId);
|
||||
if (!task) return;
|
||||
|
||||
const shouldBeCompleted = column === 'done';
|
||||
|
||||
if (column === 'done') {
|
||||
setTaskStatuses(prev => { const n = { ...prev }; delete n[taskId]; return n; });
|
||||
} else {
|
||||
setTaskStatuses(prev => ({ ...prev, [taskId]: column }));
|
||||
}
|
||||
|
||||
if (task.completed !== shouldBeCompleted) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/tasks/${taskId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': localStorage.getItem('trackeep_token') ? `Bearer ${localStorage.getItem('trackeep_token')}` : '',
|
||||
},
|
||||
body: JSON.stringify({ ...task, completed: shouldBeCompleted }),
|
||||
});
|
||||
if (response.ok) {
|
||||
const updated = await response.json();
|
||||
setTasks(prev => prev.map(t => t.id === taskId ? updated : t));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update task status:', error);
|
||||
}
|
||||
} else {
|
||||
setTasks(prev => prev.map(t => t.id === taskId ? { ...t, completed: shouldBeCompleted } : t));
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/tasks`, {
|
||||
@@ -51,30 +91,29 @@ export const Tasks = () => {
|
||||
}
|
||||
});
|
||||
|
||||
const filteredTasks = () => {
|
||||
const searchedTasks = () => {
|
||||
const term = searchTerm().toLowerCase();
|
||||
const filtered = tasks().filter(task => {
|
||||
return tasks().filter(task => {
|
||||
const matchesSearch = !term ||
|
||||
task.title.toLowerCase().includes(term) ||
|
||||
(task.description && task.description.toLowerCase().includes(term));
|
||||
|
||||
const matchesPriority = !selectedPriority() || task.priority === selectedPriority();
|
||||
|
||||
const matchesFilter =
|
||||
(filter() === 'active' && !task.completed) ||
|
||||
(filter() === 'completed' && task.completed) ||
|
||||
filter() === 'all';
|
||||
|
||||
return matchesSearch && matchesFilter && matchesPriority;
|
||||
});
|
||||
|
||||
return filtered.sort((a, b) => {
|
||||
return matchesSearch && matchesPriority;
|
||||
}).sort((a, b) => {
|
||||
const priorityOrder = { high: 0, medium: 1, low: 2 };
|
||||
if (a.completed !== b.completed) return a.completed ? 1 : -1;
|
||||
return priorityOrder[a.priority] - priorityOrder[b.priority];
|
||||
});
|
||||
};
|
||||
|
||||
const columnTasks = (column: 'todo' | 'inProgress' | 'done') =>
|
||||
searchedTasks().filter(t => getTaskColumn(t) === column);
|
||||
|
||||
const columnCounts = () => ({
|
||||
todo: columnTasks('todo').length,
|
||||
inProgress: columnTasks('inProgress').length,
|
||||
done: columnTasks('done').length,
|
||||
});
|
||||
|
||||
const handleAddTask = async (task: Omit<Task, 'id'>) => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/tasks`, {
|
||||
@@ -134,19 +173,6 @@ export const Tasks = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTaskComplete = async (taskId: number) => {
|
||||
try {
|
||||
// TODO: Replace with actual API call
|
||||
setTasks(prev => prev.map(task =>
|
||||
task.id === taskId ? { ...task, completed: !task.completed } : task
|
||||
));
|
||||
haptics.completion(); // Completion feedback for toggling task
|
||||
} catch (error) {
|
||||
haptics.error(); // Error feedback
|
||||
console.error('Failed to update task:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteTask = async (taskId: number) => {
|
||||
if (confirm('Are you sure you want to delete this task?')) {
|
||||
try {
|
||||
@@ -185,20 +211,13 @@ export const Tasks = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const taskStats = () => {
|
||||
const total = tasks().length;
|
||||
const completed = tasks().filter(t => t.completed).length;
|
||||
const active = total - completed;
|
||||
return { total, completed, active };
|
||||
};
|
||||
|
||||
const hasSearchOrPriorityFilters = () =>
|
||||
Boolean(searchTerm().trim()) || Boolean(selectedPriority());
|
||||
|
||||
return (
|
||||
<div class="p-6 space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-3xl font-bold text-[#fafafa]">Tasks</h1>
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-foreground">Tasks</h1>
|
||||
<p class="text-muted-foreground text-sm mt-1">{columnCounts().todo} todo · {columnCounts().inProgress} in progress · {columnCounts().done} done</p>
|
||||
</div>
|
||||
<Button onClick={() => setShowAddModal(true)} haptic="impact">
|
||||
Add Task
|
||||
</Button>
|
||||
@@ -221,137 +240,106 @@ export const Tasks = () => {
|
||||
isEdit={true}
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<Card class="p-4 text-center">
|
||||
<p class="text-2xl font-bold text-[#fafafa]">{taskStats().total}</p>
|
||||
<p class="text-[#a3a3a3] text-sm">Total Tasks</p>
|
||||
</Card>
|
||||
<Card class="p-4 text-center">
|
||||
<p class="text-2xl font-bold text-[#fafafa]">{taskStats().active}</p>
|
||||
<p class="text-[#a3a3a3] text-sm">Active</p>
|
||||
</Card>
|
||||
<Card class="p-4 text-center">
|
||||
<p class="text-2xl font-bold text-blue-400">{taskStats().completed}</p>
|
||||
<p class="text-[#a3a3a3] text-sm">Completed</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<SearchTagFilterBar
|
||||
searchPlaceholder="Search tasks..."
|
||||
searchValue={searchTerm()}
|
||||
onSearchChange={(value) => setSearchTerm(value)}
|
||||
tagOptions={['high', 'medium', 'low']}
|
||||
selectedTag={selectedPriority()}
|
||||
onTagChange={(value) => setSelectedPriority(value)}
|
||||
onReset={() => {
|
||||
setSearchTerm('');
|
||||
setSelectedPriority('');
|
||||
}}
|
||||
allOptionLabel="All Priorities"
|
||||
/>
|
||||
|
||||
<div class="flex flex-wrap gap-2 -mt-3 mb-6">
|
||||
{(['all', 'active', 'completed'] as const).map((filterOption) => (
|
||||
<Button
|
||||
variant={filter() === filterOption ? 'default' : 'outline'}
|
||||
onClick={() => setFilter(filterOption)}
|
||||
class="capitalize"
|
||||
haptic="selection"
|
||||
>
|
||||
{filterOption}
|
||||
</Button>
|
||||
))}
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search tasks..."
|
||||
value={searchTerm()}
|
||||
onInput={(e) => setSearchTerm(e.currentTarget.value)}
|
||||
class="flex-1 min-w-0 px-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
/>
|
||||
<select
|
||||
value={selectedPriority()}
|
||||
onChange={(e) => setSelectedPriority(e.currentTarget.value)}
|
||||
class="px-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
|
||||
>
|
||||
<option value="">All priorities</option>
|
||||
<option value="high">High</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="low">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{isLoading() ? (
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{[...Array(3)].map(() => (
|
||||
<Card class="p-6">
|
||||
<div class="animate-pulse">
|
||||
<div class="h-6 bg-[#262626] rounded mb-2"></div>
|
||||
<div class="h-4 bg-[#262626] rounded w-3/4"></div>
|
||||
<Card class="p-4 h-48">
|
||||
<div class="animate-pulse space-y-3">
|
||||
<div class="h-5 bg-muted rounded w-1/2"></div>
|
||||
<div class="h-20 bg-muted rounded"></div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div class="space-y-4">
|
||||
{filteredTasks().map((task) => (
|
||||
<div
|
||||
class={`cursor-pointer transition-all ${task.completed ? 'opacity-60' : ''}`}
|
||||
onClick={() => toggleTaskComplete(task.id)}
|
||||
>
|
||||
<Card class={`p-6 hover:bg-[#141415]`}>
|
||||
<div class="flex items-start space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.completed}
|
||||
onChange={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleTaskComplete(task.id);
|
||||
}}
|
||||
class="mt-1 w-4 h-4 text-[#39b9ff] bg-[#141415] border-[#262626] rounded focus:ring-[#39b9ff]"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class={`text-lg font-semibold text-[#fafafa] ${task.completed ? 'line-through' : ''}`}>
|
||||
{task.title}
|
||||
</h3>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class={`px-2 py-1 text-xs rounded-md ${getPriorityColor(task.priority)}`}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
|
||||
{([
|
||||
{ key: 'todo' as const, label: 'To Do', color: 'border-t-4 border-t-muted-foreground' },
|
||||
{ key: 'inProgress' as const, label: 'In Progress', color: 'border-t-4 border-t-primary' },
|
||||
{ key: 'done' as const, label: 'Done', color: 'border-t-4 border-t-emerald-500' },
|
||||
]).map((col) => {
|
||||
const items = columnTasks(col.key);
|
||||
const isDropTarget = dragOverColumn() === col.key;
|
||||
return (
|
||||
<div
|
||||
class={`flex flex-col gap-3 rounded-xl border border-border bg-card/60 p-4 min-h-[12rem] transition-all ${col.color} ${isDropTarget ? 'ring-2 ring-primary/30 bg-primary/5' : ''}`}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOverColumn(col.key); }}
|
||||
onDragLeave={() => setDragOverColumn(null)}
|
||||
onDrop={(e) => { e.preventDefault(); setDragOverColumn(null); const id = draggedTaskId(); if (id !== null) setTaskColumn(id, col.key); setDraggedTaskId(null); }}
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold text-foreground">{col.label}</h2>
|
||||
<span class="text-xs font-medium px-2 py-0.5 rounded-full bg-muted text-muted-foreground">{items.length}</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
{items.map((task: Task) => (
|
||||
<div
|
||||
draggable={true}
|
||||
onDragStart={() => { setDraggedTaskId(task.id); haptics.impact(); }}
|
||||
onDragEnd={() => setDraggedTaskId(null)}
|
||||
class={`group bg-background border border-border rounded-lg p-3 cursor-grab active:cursor-grabbing hover:shadow-md hover:border-primary/20 transition-all ${draggedTaskId() === task.id ? 'opacity-40' : ''}`}
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<h3 class="text-sm font-medium text-foreground leading-snug flex-1">{task.title}</h3>
|
||||
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
|
||||
<button
|
||||
onClick={() => editTask(task)}
|
||||
class="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<IconEdit class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteTask(task.id)}
|
||||
class="p-1 rounded hover:bg-muted text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<IconTrash class="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{task.description && (
|
||||
<p class="text-xs text-muted-foreground mt-1 line-clamp-2">{task.description}</p>
|
||||
)}
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class={`text-[10px] px-1.5 py-0.5 rounded font-medium ${getPriorityColor(task.priority)}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
editTask(task);
|
||||
}}
|
||||
class="text-blue-400 hover:text-blue-300"
|
||||
haptic="impact"
|
||||
>
|
||||
<IconEdit class="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteTask(task.id);
|
||||
}}
|
||||
class="text-red-400 hover:text-red-300"
|
||||
haptic="warning"
|
||||
>
|
||||
<IconTrash class="w-4 h-4" />
|
||||
</Button>
|
||||
{task.dueDate && (
|
||||
<span class="text-[10px] text-muted-foreground">
|
||||
{new Date(task.dueDate).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{task.description && (
|
||||
<p class="text-[#a3a3a3] text-sm mt-1">{task.description}</p>
|
||||
)}
|
||||
{task.dueDate && (
|
||||
<p class="text-[#a3a3a3] text-xs mt-2">
|
||||
Due: {new Date(task.dueDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<div class="text-center py-8 text-xs text-muted-foreground border-2 border-dashed border-border rounded-lg">
|
||||
Drop tasks here
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{filteredTasks().length === 0 && (
|
||||
<Card class="p-12 text-center">
|
||||
<p class="text-[#a3a3a3]">
|
||||
{hasSearchOrPriorityFilters()
|
||||
? 'No tasks found matching your search or filters.'
|
||||
: filter() === 'completed' ? 'No completed tasks yet.' :
|
||||
filter() === 'active' ? 'No active tasks. Great job!' :
|
||||
'No tasks yet. Add your first task!'}
|
||||
</p>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { createSignal, createEffect, Show, For } from 'solid-js';
|
||||
import { Card } from '../components/ui/Card';
|
||||
import { Button } from '../components/ui/Button';
|
||||
import { Input } from '../components/ui/Input';
|
||||
import { toast } from '../components/ui/Toast';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { toast } from '@/components/ui/Toast';
|
||||
import { CheckCircle, AlertCircle, Shield, Key, Globe, Clock, Users, Settings } from 'lucide-solid';
|
||||
import { getApiV1BaseUrl } from '@/lib/api-url';
|
||||
|
||||
@@ -478,7 +478,7 @@ curl -X POST \\\n -H "Authorization: Bearer tk_your_api_key_here" \\\n -H "Con
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Key Name</label>
|
||||
<Input
|
||||
value={newKeyName()}
|
||||
onInput={(e) => setNewKeyName((e.target as HTMLInputElement).value)}
|
||||
onInput={(e: InputEvent) => setNewKeyName((e.target as HTMLInputElement).value)}
|
||||
placeholder="e.g., Chrome Extension, Laptop Backup"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useAuth } from '@/lib/auth';
|
||||
import { IconUser, IconLock, IconKey, IconBrain, IconMail, IconSend, IconShield, IconDownload } from '@tabler/icons-solidjs';
|
||||
import { TwoFactorAuth } from '@/components/TwoFactorAuth';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { AIProviderIcon } from '@/components/AIProviderIcon';
|
||||
import { useHaptics } from '@/lib/haptics';
|
||||
import { getApiV1BaseUrl } from '@/lib/api-url';
|
||||
@@ -412,7 +413,7 @@ export const Settings = () => {
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div class="border-b border-border mb-6">
|
||||
<nav class="flex space-x-1">
|
||||
<nav class="flex space-x-1 overflow-x-auto scrollbar-hide">
|
||||
<For each={tabs}>
|
||||
{(tab) => (
|
||||
<button
|
||||
@@ -420,7 +421,7 @@ export const Settings = () => {
|
||||
setActiveTab(tab.id);
|
||||
haptics.selection();
|
||||
}}
|
||||
class={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
class={`flex items-center gap-2 px-3 sm:px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
|
||||
activeTab() === tab.id
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
@@ -440,9 +441,11 @@ export const Settings = () => {
|
||||
<Show when={activeTab() === 'account'}>
|
||||
<div class="space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="border rounded-lg p-6">
|
||||
<Card class="p-6">
|
||||
<h2 class="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<IconUser class="size-5" />
|
||||
<div class="bg-muted flex items-center justify-center p-2 rounded-lg">
|
||||
<IconUser class="size-4 text-primary" />
|
||||
</div>
|
||||
Profile Settings
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
@@ -546,9 +549,9 @@ export const Settings = () => {
|
||||
{isLoading() ? 'Updating...' : 'Update Profile'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="border rounded-lg p-6">
|
||||
<Card class="p-6">
|
||||
<h2 class="text-xl font-semibold text-foreground mb-4 flex items-center gap-2">
|
||||
<IconLock class="size-5" />
|
||||
Change Password
|
||||
@@ -611,7 +614,7 @@ export const Settings = () => {
|
||||
{isLoading() ? 'Changing...' : 'Change Password'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@
|
||||
"render:video:poster": "npm --workspace video run render:poster",
|
||||
"install:all": "npm install && cd frontend && npm install && cd ../mobile && npm install && cd ../desktop && npm install",
|
||||
"clean": "rm -rf dist node_modules frontend/node_modules mobile/node_modules desktop/node_modules backend/vendor desktop/dist desktop/src-tauri/target",
|
||||
"postinstall": "patch-package"
|
||||
"postinstall": "patch-package || true"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^8.2.2",
|
||||
|
||||
Reference in New Issue
Block a user