3495 lines
124 KiB
HTML
3495 lines
124 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type="image/svg+xml" href="/echo/favicon.svg">
|
|
<title>Echo · Habits</title>
|
|
<link rel="stylesheet" href="/echo/common.css">
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
<script src="/echo/swipe-nav.js"></script>
|
|
<style>
|
|
/* Prevent horizontal overflow on mobile */
|
|
html, body {
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.main {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: var(--space-5);
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main {
|
|
padding: var(--space-3);
|
|
}
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-6);
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: var(--text-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Filter bar */
|
|
/* Filter/Search Bar - Collapsible */
|
|
.filter-bar {
|
|
margin-bottom: var(--space-4);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.filter-toolbar {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2);
|
|
min-height: 40px;
|
|
}
|
|
|
|
.filter-icon-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-primary);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.filter-icon-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.filter-icon-btn.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.search-container, .filter-container {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 300ms ease, padding 300ms ease;
|
|
}
|
|
|
|
.search-container.expanded {
|
|
max-height: 100px;
|
|
padding: 0 var(--space-3) var(--space-3) var(--space-3);
|
|
}
|
|
|
|
.filter-container.expanded {
|
|
max-height: 500px;
|
|
padding: 0 var(--space-3) var(--space-3) var(--space-3);
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
padding: var(--space-2) var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-alpha);
|
|
}
|
|
|
|
.filter-options {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
min-width: 150px;
|
|
flex: 1;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.filter-select {
|
|
padding: var(--space-2) var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.filter-select:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.filter-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-alpha);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.filter-options {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-group {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Mobile touch targets - minimum 44px */
|
|
.habit-card-action-btn {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.habit-card-check-btn-compact {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Compact cards stay compact on mobile */
|
|
.habit-card {
|
|
min-height: 90px;
|
|
max-height: none;
|
|
}
|
|
|
|
.habit-card-name {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.modal-close {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
/* Stats row 2x2 on mobile */
|
|
.stats-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* Icon picker wraps properly */
|
|
.icon-picker-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
max-height: 300px;
|
|
}
|
|
|
|
/* Day checkboxes wrap on small screens */
|
|
.day-checkboxes {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
/* Modal padding adjustment */
|
|
.modal {
|
|
margin: var(--space-2);
|
|
}
|
|
|
|
.modal-body,
|
|
.modal-header,
|
|
.modal-footer {
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
/* Touch-friendly form elements */
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
min-height: 44px;
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
/* Larger touch targets for pickers */
|
|
.icon-option {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.icon-option svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.day-checkbox-label {
|
|
min-height: 44px;
|
|
padding: var(--space-1);
|
|
}
|
|
|
|
/* Mood and rating buttons */
|
|
.mood-btn {
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
font-size: 36px;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
/* Habits grid */
|
|
.habits-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: var(--space-4);
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.habits-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--space-3);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1200px) {
|
|
.habits-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1201px) {
|
|
.habits-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--space-10);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin-bottom: var(--space-4);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state p {
|
|
font-size: var(--text-lg);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.empty-state .hint {
|
|
font-size: var(--text-sm);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Habit card */
|
|
.habit-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
border-left: 4px solid var(--accent);
|
|
padding: var(--space-4);
|
|
transition: all var(--transition-base);
|
|
overflow: visible;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.habit-card * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.habit-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* Compact single-row layout */
|
|
.habit-card-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.habit-card-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.habit-card-name {
|
|
flex: 1;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.habit-card-row {
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.habit-card-name {
|
|
font-size: 18px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.habit-card-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.habit-card-streak {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.habit-card-lives {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.habit-card-weekly-badge {
|
|
font-size: 11px;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.habit-icon-inline {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.habit-card-check-btn-compact {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 16px;
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
.habit-card-streak {
|
|
font-size: 16px;
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.habit-card-weekly-badge {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
background: var(--accent-muted);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.habit-card-lives {
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Compact check button */
|
|
.habit-card-check-btn-compact {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 2px solid var(--accent);
|
|
background: transparent;
|
|
color: var(--accent);
|
|
border-radius: 50%;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.habit-card-check-btn-compact:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.habit-card-check-btn-compact.checked {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.habit-card-check-btn-compact.checked:hover {
|
|
opacity: 0.8;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Ambient Actions - Weightless until needed */
|
|
.habit-card-actions {
|
|
position: absolute;
|
|
bottom: var(--space-2);
|
|
right: var(--space-2);
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
z-index: 10;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.habit-card:hover .habit-card-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Mobile: always visible but subtle */
|
|
@media (max-width: 768px) {
|
|
.habit-card-actions {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.habit-card:active .habit-card-actions,
|
|
.habit-card-actions:focus-within {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.habit-card-action-btn {
|
|
background: var(--bg-secondary);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: var(--space-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.habit-card-action-btn:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--border);
|
|
color: var(--text-primary);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.habit-card-action-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.habit-card-action-btn svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Distinctive hover colors */
|
|
.habit-card-action-btn[data-action="skip"]:not(:disabled):hover {
|
|
background: var(--warning);
|
|
border-color: var(--warning);
|
|
color: white;
|
|
}
|
|
|
|
.habit-card-action-btn[data-action="edit"]:hover {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.habit-card-action-btn[data-action="delete"]:hover {
|
|
background: var(--error);
|
|
border-color: var(--error);
|
|
color: white;
|
|
}
|
|
|
|
/* Disabled state */
|
|
.habit-card-action-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Progress bar row */
|
|
.habit-card-progress-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.habit-card-progress-bar {
|
|
flex: 1;
|
|
height: 6px;
|
|
background: var(--bg-muted);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.habit-card-progress-fill {
|
|
height: 100%;
|
|
transition: width var(--transition-base);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.habit-card-progress-text {
|
|
font-size: 18px;
|
|
color: var(--text-muted);
|
|
font-weight: 700;
|
|
min-width: 40px;
|
|
text-align: right;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Weekly badge row (separate from main row) */
|
|
.habit-card-weekly-badge-row {
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Next date row */
|
|
.habit-card-stats-row {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.habit-card-stat {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.habit-card-stat-sep {
|
|
color: var(--text-muted);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.habit-card-next-date {
|
|
font-size: 16px;
|
|
color: var(--text-muted);
|
|
text-align: left;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Bead chain visualization (30-day history) */
|
|
.habit-card-bead-chain {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 3px;
|
|
padding: var(--space-1) 0;
|
|
margin-top: var(--space-1);
|
|
max-width: 100%;
|
|
}
|
|
|
|
.habit-bead {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
font-size: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: transform 0.15s ease;
|
|
flex-shrink: 0;
|
|
-webkit-tap-highlight-color: transparent;
|
|
min-width: 20px;
|
|
min-height: 20px;
|
|
}
|
|
|
|
/* Inline Lucide icons for streak/lives */
|
|
.habit-icon-inline {
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.habit-bead:hover {
|
|
transform: scale(1.3);
|
|
z-index: 1;
|
|
}
|
|
|
|
.habit-bead:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/* Bead types */
|
|
.habit-bead.checked {
|
|
background: var(--success);
|
|
color: white;
|
|
}
|
|
|
|
.habit-bead.missed {
|
|
background: transparent;
|
|
border: 2px solid var(--border);
|
|
}
|
|
|
|
.habit-bead.skipped {
|
|
background: var(--warning);
|
|
color: white;
|
|
}
|
|
|
|
.habit-bead.upcoming {
|
|
background: var(--bg-muted);
|
|
border: 1px dashed var(--border);
|
|
}
|
|
|
|
/* Mobile: smaller beads to prevent horizontal overflow */
|
|
@media (max-width: 768px) {
|
|
.habit-bead {
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 9px;
|
|
min-width: 18px;
|
|
min-height: 18px;
|
|
}
|
|
|
|
.habit-card-bead-chain {
|
|
gap: 3px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* Keep priority indicator styles for future use */
|
|
.priority-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.priority-high {
|
|
background: var(--error);
|
|
}
|
|
|
|
.priority-medium {
|
|
background: var(--warning);
|
|
}
|
|
|
|
.priority-low {
|
|
background: var(--success);
|
|
}
|
|
|
|
/* Modal overlay */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.92) !important;
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal {
|
|
background: #1a1b1e;
|
|
border-radius: var(--radius-lg);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
[data-theme="light"] .modal {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--space-4);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: var(--space-1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-base);
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-close svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: var(--space-4);
|
|
}
|
|
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
/* Form fields */
|
|
.form-field {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
.form-label.required::after {
|
|
content: '*';
|
|
color: var(--error);
|
|
margin-left: var(--space-1);
|
|
}
|
|
|
|
.form-input,
|
|
.form-select,
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
transition: all var(--transition-base);
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-select:focus,
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-muted);
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* Color picker dropdown */
|
|
.color-picker-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.color-picker-trigger {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.color-picker-trigger:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.color-picker-preview {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.color-picker-name {
|
|
flex: 1;
|
|
text-align: left;
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.color-picker-chevron {
|
|
transition: transform var(--transition-base);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.color-picker-trigger.open .color-picker-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.color-picker-content {
|
|
position: absolute;
|
|
top: calc(100% + var(--space-1));
|
|
left: 0;
|
|
right: 0;
|
|
background: #1a1b1e;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
z-index: 100;
|
|
display: none;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.color-picker-content.visible {
|
|
display: block;
|
|
}
|
|
|
|
.color-picker-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.color-picker-option:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.color-picker-option.selected {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.color-picker-option-swatch {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--radius-sm);
|
|
border: 2px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.color-picker-option-name {
|
|
flex: 1;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.color-picker-custom {
|
|
border-top: 1px solid var(--border);
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
.color-picker-custom input {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* Icon picker dropdown */
|
|
.icon-picker-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.icon-picker-trigger {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
min-height: 44px;
|
|
}
|
|
|
|
.icon-picker-trigger:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.icon-picker-trigger svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.icon-picker-trigger span {
|
|
flex: 1;
|
|
text-align: left;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.trigger-chevron {
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.icon-picker-trigger.open .trigger-chevron {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.icon-picker-content {
|
|
position: absolute;
|
|
top: calc(100% + var(--space-1));
|
|
left: 0;
|
|
right: 0;
|
|
background: #1a1b1e;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
z-index: 100;
|
|
display: none;
|
|
max-height: 300px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.icon-picker-content.visible {
|
|
display: block;
|
|
}
|
|
|
|
.icon-search-input {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: none;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-base);
|
|
color: var(--text-primary);
|
|
font-size: var(--text-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.icon-search-input:focus {
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
.icon-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: var(--space-2);
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
padding: var(--space-2);
|
|
}
|
|
|
|
.icon-option {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
background: transparent;
|
|
min-height: 44px;
|
|
}
|
|
|
|
.icon-option:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.icon-option.selected {
|
|
border-color: var(--accent);
|
|
background: rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.icon-option svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Frequency params */
|
|
.frequency-params {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
.day-checkboxes {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.day-checkbox-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
.day-checkbox-label:has(input:checked) {
|
|
background: var(--accent-muted);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.day-checkbox-label input {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Toast notification */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: var(--space-4);
|
|
right: var(--space-4);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.toast.success {
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.toast.error {
|
|
border-color: var(--error);
|
|
}
|
|
|
|
.toast svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.toast.success svg {
|
|
color: var(--success);
|
|
}
|
|
|
|
.toast.error svg {
|
|
color: var(--error);
|
|
}
|
|
|
|
/* Pulse animation */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 0.5s ease-in-out;
|
|
}
|
|
|
|
/* Check-in detail modal */
|
|
.checkin-modal {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.rating-stars {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
justify-content: center;
|
|
margin: var(--space-3) 0;
|
|
}
|
|
|
|
.rating-star {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
transition: all var(--transition-base);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.rating-star.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.rating-star:hover {
|
|
transform: scale(1.2);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.mood-buttons {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
justify-content: center;
|
|
margin: var(--space-3) 0;
|
|
}
|
|
|
|
.mood-btn {
|
|
font-size: 32px;
|
|
cursor: pointer;
|
|
padding: var(--space-2);
|
|
border: 2px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-base);
|
|
background: none;
|
|
}
|
|
|
|
.mood-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.mood-btn.selected {
|
|
border-color: var(--accent);
|
|
background: var(--accent-muted);
|
|
}
|
|
|
|
/* Stats section */
|
|
.stats-section {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.stats-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3);
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
margin-bottom: var(--space-3);
|
|
transition: background var(--transition-base);
|
|
}
|
|
|
|
.stats-header:hover {
|
|
background: var(--bg-elevated);
|
|
}
|
|
|
|
.stats-title {
|
|
font-size: var(--text-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.stats-chevron {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: var(--text-muted);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
|
|
.stats-chevron.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.stats-content {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease-out;
|
|
}
|
|
|
|
.stats-content.visible {
|
|
max-height: 2000px;
|
|
transition: max-height 0.3s ease-in;
|
|
}
|
|
|
|
.stats-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: var(--text-2xl);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Weekly summary */
|
|
.weekly-summary {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.weekly-summary-header {
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-muted);
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: background var(--transition-base);
|
|
}
|
|
|
|
.weekly-summary-header:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
.weekly-summary-title {
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.weekly-summary-chevron {
|
|
transition: transform var(--transition-base);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.weekly-summary-chevron.expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.weekly-summary-content {
|
|
display: none;
|
|
padding: var(--space-3);
|
|
}
|
|
|
|
.weekly-summary-content.visible {
|
|
display: block;
|
|
}
|
|
|
|
.weekly-chart {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
height: 120px;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.weekly-bar-wrapper {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.weekly-bar {
|
|
width: 100%;
|
|
background: var(--accent);
|
|
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
|
transition: all var(--transition-base);
|
|
min-height: 4px;
|
|
}
|
|
|
|
.weekly-bar-empty {
|
|
background: var(--bg-muted);
|
|
opacity: 0.3;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.weekly-bar:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.weekly-bar-label {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
margin-bottom: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.weekly-day-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.weekly-stats {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<a href="/echo/index.html" class="logo">
|
|
<i data-lucide="circle-dot"></i>
|
|
Echo
|
|
</a>
|
|
<nav class="nav">
|
|
<a href="/echo/index.html" class="nav-item">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="/echo/workspace.html" class="nav-item">
|
|
<i data-lucide="code"></i>
|
|
<span>Workspace</span>
|
|
</a>
|
|
<a href="/echo/notes.html" class="nav-item">
|
|
<i data-lucide="file-text"></i>
|
|
<span>KB</span>
|
|
</a>
|
|
<a href="/echo/habits.html" class="nav-item active">
|
|
<i data-lucide="dumbbell"></i>
|
|
<span>Habits</span>
|
|
</a>
|
|
<a href="/echo/files.html" class="nav-item">
|
|
<i data-lucide="folder"></i>
|
|
<span>Files</span>
|
|
</a>
|
|
<a href="/echo/eco.html" class="nav-item">
|
|
<i data-lucide="cpu"></i>
|
|
<span>Eco</span>
|
|
</a>
|
|
<button class="theme-toggle" onclick="toggleTheme()" title="Schimbă tema">
|
|
<i data-lucide="sun" id="themeIcon"></i>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<div class="page-header">
|
|
<h1 class="page-title">Habits</h1>
|
|
<button class="btn btn-primary" onclick="showAddHabitModal()">
|
|
<i data-lucide="plus"></i>
|
|
Add Habit
|
|
</button>
|
|
</div>
|
|
|
|
<div class="filter-bar">
|
|
<!-- Collapsed toolbar with icons -->
|
|
<div class="filter-toolbar">
|
|
<button class="filter-icon-btn" id="searchToggle" title="Search habits">
|
|
<i data-lucide="search"></i>
|
|
</button>
|
|
<button class="filter-icon-btn" id="filterToggle" title="Filter and sort">
|
|
<i data-lucide="sliders"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search container (collapsed by default) -->
|
|
<div class="search-container" id="searchContainer">
|
|
<input type="text" id="searchInput" class="search-input" placeholder="Search habits by name...">
|
|
</div>
|
|
|
|
<!-- Filter options container (collapsed by default) -->
|
|
<div class="filter-container" id="filterContainer">
|
|
<div class="filter-options">
|
|
<div class="filter-group">
|
|
<label class="filter-label">Category</label>
|
|
<select id="categoryFilter" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="all">All</option>
|
|
<option value="work">Work</option>
|
|
<option value="health">Health</option>
|
|
<option value="growth">Growth</option>
|
|
<option value="personal">Personal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-label">Status</label>
|
|
<select id="statusFilter" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="all">All</option>
|
|
<option value="active_today">Active Today</option>
|
|
<option value="done_today">Done Today</option>
|
|
<option value="overdue">Overdue</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label class="filter-label">Sort By</label>
|
|
<select id="sortSelect" class="filter-select" onchange="applyFiltersAndSort()">
|
|
<option value="priority_asc">Priority (Low to High)</option>
|
|
<option value="priority_desc">Priority (High to Low)</option>
|
|
<option value="name_asc">Name A-Z</option>
|
|
<option value="name_desc">Name Z-A</option>
|
|
<option value="streak_desc">Streak (Highest)</option>
|
|
<option value="streak_asc">Streak (Lowest)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div id="statsSection" class="stats-section" style="display: none;">
|
|
<div class="stats-header" onclick="toggleStats()">
|
|
<h3 class="stats-title">Stats</h3>
|
|
<i data-lucide="chevron-down" class="stats-chevron" id="statsChevron"></i>
|
|
</div>
|
|
<div class="stats-content" id="statsContent">
|
|
<div class="stats-row">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Habits</div>
|
|
<div class="stat-value" id="statTotalHabits">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Last 7 Days</div>
|
|
<div class="stat-value" id="statCheckIns7d">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Last 30 Days</div>
|
|
<div class="stat-value" id="statCheckIns30d">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Avg Completion</div>
|
|
<div class="stat-value" id="statAvgCompletion">0%</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Best Streak 🏆</div>
|
|
<div class="stat-value" id="statBestStreak">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Lives</div>
|
|
<div class="stat-value" id="statTotalLives">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weekly-summary">
|
|
<div class="weekly-summary-header" onclick="toggleWeeklySummary()">
|
|
<div class="weekly-summary-title">Weekly Summary</div>
|
|
<i data-lucide="chevron-down" class="weekly-summary-chevron" id="weeklySummaryChevron"></i>
|
|
</div>
|
|
<div class="weekly-summary-content" id="weeklySummaryContent">
|
|
<div class="weekly-chart" id="weeklyChart"></div>
|
|
<div class="weekly-stats" id="weeklyStats">
|
|
<span id="weeklyCompletedText">0 completed this week</span>
|
|
<span id="weeklySkippedText">0 skipped this week</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="habitsContainer">
|
|
<div class="empty-state">
|
|
<i data-lucide="loader"></i>
|
|
<p>Loading habits...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Add/Edit Habit Modal -->
|
|
<div id="habitModal" class="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Add Habit</h2>
|
|
<button class="modal-close" onclick="closeHabitModal()">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="habitForm">
|
|
<!-- Name -->
|
|
<div class="form-field">
|
|
<label class="form-label required" for="habitName">Name</label>
|
|
<input type="text" id="habitName" class="form-input" maxlength="100" required>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitCategory">Category</label>
|
|
<select id="habitCategory" class="form-select">
|
|
<option value="work">Work</option>
|
|
<option value="health">Health</option>
|
|
<option value="growth">Growth</option>
|
|
<option value="personal">Personal</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Color -->
|
|
<div class="form-field">
|
|
<label class="form-label">Color</label>
|
|
<div class="color-picker-dropdown">
|
|
<button type="button" class="color-picker-trigger" id="colorPickerTrigger">
|
|
<div class="color-picker-preview" id="colorPreview"></div>
|
|
<span class="color-picker-name" id="colorName">Blue</span>
|
|
<i data-lucide="chevron-down" class="color-picker-chevron"></i>
|
|
</button>
|
|
<div class="color-picker-content" id="colorPickerContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Icon -->
|
|
<div class="form-field">
|
|
<label class="form-label">Icon</label>
|
|
<div class="icon-picker-dropdown">
|
|
<button type="button" class="icon-picker-trigger" id="iconPickerTrigger" onclick="toggleIconPicker()">
|
|
<i data-lucide="smile" id="selectedIconDisplay"></i>
|
|
<span>Select Icon</span>
|
|
<i data-lucide="chevron-down" class="trigger-chevron" id="iconPickerChevron"></i>
|
|
</button>
|
|
<div class="icon-picker-content" id="iconPickerContent">
|
|
<input type="text" id="iconSearch" class="icon-search-input" placeholder="Search icons..." oninput="filterIcons()">
|
|
<div class="icon-picker-grid" id="iconPicker"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Priority -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitPriority">Priority (1-100)</label>
|
|
<input type="number" id="habitPriority" class="form-input" min="1" max="100" value="50">
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="habitNotes">Notes</label>
|
|
<textarea id="habitNotes" class="form-textarea"></textarea>
|
|
</div>
|
|
|
|
<!-- Frequency Type -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="frequencyType">Frequency</label>
|
|
<select id="frequencyType" class="form-select" onchange="updateFrequencyParams()">
|
|
<option value="daily">Daily</option>
|
|
<option value="specific_days">Specific Days</option>
|
|
<option value="x_per_week">X times per week</option>
|
|
<option value="weekly">Weekly</option>
|
|
<option value="monthly">Monthly</option>
|
|
<option value="custom">Custom</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Frequency Params (conditional) -->
|
|
<div id="frequencyParams" class="frequency-params"></div>
|
|
|
|
<!-- Reminder Time -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="reminderTime">Reminder Time (optional)</label>
|
|
<input type="time" id="reminderTime" class="form-input">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" onclick="closeHabitModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submitHabitBtn" onclick="submitHabitForm(event)">
|
|
<span id="submitBtnText">Create Habit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Check-in Detail Modal -->
|
|
<div id="checkinModal" class="modal-overlay">
|
|
<div class="modal checkin-modal">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Check-In Details</h2>
|
|
<button class="modal-close" onclick="closeCheckinModal()">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Note -->
|
|
<div class="form-field">
|
|
<label class="form-label" for="checkinNote">Note (optional)</label>
|
|
<textarea id="checkinNote" class="form-textarea" placeholder="How did it go?"></textarea>
|
|
</div>
|
|
|
|
<!-- Rating -->
|
|
<div class="form-field">
|
|
<label class="form-label">Rating (optional)</label>
|
|
<div class="rating-stars" id="ratingStars">
|
|
<span class="rating-star" data-rating="1" onclick="selectRating(1)">⭐</span>
|
|
<span class="rating-star" data-rating="2" onclick="selectRating(2)">⭐</span>
|
|
<span class="rating-star" data-rating="3" onclick="selectRating(3)">⭐</span>
|
|
<span class="rating-star" data-rating="4" onclick="selectRating(4)">⭐</span>
|
|
<span class="rating-star" data-rating="5" onclick="selectRating(5)">⭐</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mood -->
|
|
<div class="form-field">
|
|
<label class="form-label">Mood (optional)</label>
|
|
<div class="mood-buttons">
|
|
<button class="mood-btn" data-mood="happy" onclick="selectMood('happy')">😊</button>
|
|
<button class="mood-btn" data-mood="neutral" onclick="selectMood('neutral')">😐</button>
|
|
<button class="mood-btn" data-mood="sad" onclick="selectMood('sad')">😞</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" onclick="closeCheckinModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submitCheckinBtn" onclick="submitCheckInDetail()">
|
|
Done!
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirmModal" class="modal-overlay">
|
|
<div class="modal" style="max-width: 400px;">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title" id="confirmTitle">Confirm</h2>
|
|
<button class="modal-close" onclick="closeConfirmModal()">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage" style="font-size: var(--text-base); color: var(--text-primary);"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn" onclick="closeConfirmModal()">Cancel</button>
|
|
<button type="button" class="btn btn-primary" id="confirmBtn" onclick="confirmAction()">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Theme management
|
|
function initTheme() {
|
|
const saved = localStorage.getItem('theme') || 'dark';
|
|
document.documentElement.setAttribute('data-theme', saved);
|
|
updateThemeIcon(saved);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
updateThemeIcon(next);
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const icon = document.getElementById('themeIcon');
|
|
if (icon) {
|
|
icon.setAttribute('data-lucide', theme === 'dark' ? 'sun' : 'moon');
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
initTheme();
|
|
|
|
// Habits state
|
|
let habits = [];
|
|
|
|
// Load habits from API
|
|
async function loadHabits() {
|
|
try {
|
|
const response = await fetch('/echo/api/habits', {
|
|
cache: 'no-cache',
|
|
headers: {
|
|
'Cache-Control': 'no-cache'
|
|
}
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
habits = await response.json();
|
|
// Cache habits for delete confirmation
|
|
localStorage.setItem('habitsCache', JSON.stringify(habits));
|
|
renderHabits();
|
|
} catch (error) {
|
|
console.error('Failed to load habits:', error);
|
|
showError('Failed to load habits: ' + error.message);
|
|
}
|
|
}
|
|
|
|
// Search and filter collapse/expand
|
|
function toggleSearch() {
|
|
const searchContainer = document.getElementById('searchContainer');
|
|
const searchToggle = document.getElementById('searchToggle');
|
|
const filterContainer = document.getElementById('filterContainer');
|
|
const filterToggle = document.getElementById('filterToggle');
|
|
const searchInput = document.getElementById('searchInput');
|
|
|
|
const isExpanded = searchContainer.classList.contains('expanded');
|
|
|
|
if (isExpanded) {
|
|
// Collapse search
|
|
searchContainer.classList.remove('expanded');
|
|
searchToggle.classList.remove('active');
|
|
} else {
|
|
// Collapse filter first if open
|
|
filterContainer.classList.remove('expanded');
|
|
filterToggle.classList.remove('active');
|
|
|
|
// Expand search
|
|
searchContainer.classList.add('expanded');
|
|
searchToggle.classList.add('active');
|
|
|
|
// Focus input after animation
|
|
setTimeout(() => searchInput.focus(), 300);
|
|
}
|
|
}
|
|
|
|
function toggleFilters() {
|
|
const filterContainer = document.getElementById('filterContainer');
|
|
const filterToggle = document.getElementById('filterToggle');
|
|
const searchContainer = document.getElementById('searchContainer');
|
|
const searchToggle = document.getElementById('searchToggle');
|
|
|
|
const isExpanded = filterContainer.classList.contains('expanded');
|
|
|
|
if (isExpanded) {
|
|
// Collapse filters
|
|
filterContainer.classList.remove('expanded');
|
|
filterToggle.classList.remove('active');
|
|
} else {
|
|
// Collapse search first if open
|
|
searchContainer.classList.remove('expanded');
|
|
searchToggle.classList.remove('active');
|
|
|
|
// Expand filters
|
|
filterContainer.classList.add('expanded');
|
|
filterToggle.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function collapseAll() {
|
|
const searchContainer = document.getElementById('searchContainer');
|
|
const searchToggle = document.getElementById('searchToggle');
|
|
const filterContainer = document.getElementById('filterContainer');
|
|
const filterToggle = document.getElementById('filterToggle');
|
|
|
|
searchContainer.classList.remove('expanded');
|
|
searchToggle.classList.remove('active');
|
|
filterContainer.classList.remove('expanded');
|
|
filterToggle.classList.remove('active');
|
|
}
|
|
|
|
// Search habits by name
|
|
function searchHabits(habits, query) {
|
|
if (!query || query.trim() === '') {
|
|
return habits;
|
|
}
|
|
|
|
const lowerQuery = query.toLowerCase();
|
|
return habits.filter(habit =>
|
|
habit.name.toLowerCase().includes(lowerQuery)
|
|
);
|
|
}
|
|
|
|
// Apply filters and sort
|
|
function applyFiltersAndSort() {
|
|
const categoryFilter = document.getElementById('categoryFilter').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const sortSelect = document.getElementById('sortSelect').value;
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem('habitCategoryFilter', categoryFilter);
|
|
localStorage.setItem('habitStatusFilter', statusFilter);
|
|
localStorage.setItem('habitSort', sortSelect);
|
|
|
|
renderHabits();
|
|
}
|
|
|
|
// Restore filters from localStorage
|
|
function restoreFilters() {
|
|
const categoryFilter = localStorage.getItem('habitCategoryFilter') || 'all';
|
|
const statusFilter = localStorage.getItem('habitStatusFilter') || 'all';
|
|
const sortSelect = localStorage.getItem('habitSort') || 'priority_asc';
|
|
|
|
document.getElementById('categoryFilter').value = categoryFilter;
|
|
document.getElementById('statusFilter').value = statusFilter;
|
|
document.getElementById('sortSelect').value = sortSelect;
|
|
}
|
|
|
|
// Filter habits based on selected filters
|
|
function filterHabits(habits) {
|
|
const categoryFilter = document.getElementById('categoryFilter').value;
|
|
const statusFilter = document.getElementById('statusFilter').value;
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
return habits.filter(habit => {
|
|
// Category filter
|
|
if (categoryFilter !== 'all' && habit.category !== categoryFilter) {
|
|
return false;
|
|
}
|
|
|
|
// Status filter
|
|
if (statusFilter !== 'all') {
|
|
const isDoneToday = isCheckedToday(habit);
|
|
const shouldCheckToday = habit.should_check_today; // Added by backend in GET endpoint
|
|
|
|
if (statusFilter === 'active_today' && !shouldCheckToday) {
|
|
return false;
|
|
}
|
|
if (statusFilter === 'done_today' && !isDoneToday) {
|
|
return false;
|
|
}
|
|
if (statusFilter === 'overdue' && (!shouldCheckToday || isDoneToday)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
}
|
|
|
|
// Sort habits based on selected sort option
|
|
function sortHabits(habits) {
|
|
const sortOption = document.getElementById('sortSelect').value;
|
|
const sorted = [...habits];
|
|
|
|
switch (sortOption) {
|
|
case 'priority_asc':
|
|
sorted.sort((a, b) => (a.priority || 50) - (b.priority || 50));
|
|
break;
|
|
case 'priority_desc':
|
|
sorted.sort((a, b) => (b.priority || 50) - (a.priority || 50));
|
|
break;
|
|
case 'name_asc':
|
|
sorted.sort((a, b) => a.name.localeCompare(b.name));
|
|
break;
|
|
case 'name_desc':
|
|
sorted.sort((a, b) => b.name.localeCompare(a.name));
|
|
break;
|
|
case 'streak_desc':
|
|
sorted.sort((a, b) => (b.current_streak || 0) - (a.current_streak || 0));
|
|
break;
|
|
case 'streak_asc':
|
|
sorted.sort((a, b) => (a.current_streak || 0) - (b.current_streak || 0));
|
|
break;
|
|
}
|
|
|
|
return sorted;
|
|
}
|
|
|
|
// Render habits grid
|
|
function renderHabits() {
|
|
const container = document.getElementById('habitsContainer');
|
|
|
|
// Render stats section
|
|
renderStats();
|
|
|
|
if (habits.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="dumbbell"></i>
|
|
<p>No habits yet. Create your first habit!</p>
|
|
<p class="hint">Click "Add Habit" to get started</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
// Apply search, filters, and sort
|
|
const searchQuery = document.getElementById('searchInput').value;
|
|
let searchedHabits = searchHabits(habits, searchQuery);
|
|
let filteredHabits = filterHabits(searchedHabits);
|
|
let sortedHabits = sortHabits(filteredHabits);
|
|
|
|
if (sortedHabits.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="filter"></i>
|
|
<p>No habits match your filters</p>
|
|
<p class="hint">Try adjusting the filters above</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
return;
|
|
}
|
|
|
|
const habitsHtml = sortedHabits.map(habit => renderHabitCard(habit)).join('');
|
|
container.innerHTML = `<div class="habits-grid">${habitsHtml}</div>`;
|
|
lucide.createIcons();
|
|
|
|
// Attach event handlers to ALL check-in buttons (for toggle behavior)
|
|
habits.forEach(habit => {
|
|
const btn = document.getElementById(`checkin-btn-${habit.id}`);
|
|
if (btn) {
|
|
// Right-click to open detail modal (only for unchecked habits)
|
|
if (!isCheckedToday(habit)) {
|
|
btn.addEventListener('contextmenu', (e) => handleCheckInButtonPress(habit.id, e, true));
|
|
|
|
// Mouse/touch events for long-press detection
|
|
btn.addEventListener('mousedown', (e) => handleCheckInButtonPress(habit.id, e, true));
|
|
btn.addEventListener('mouseup', (e) => handleCheckInButtonRelease(habit.id, e));
|
|
btn.addEventListener('mouseleave', () => handleCheckInButtonCancel());
|
|
|
|
btn.addEventListener('touchstart', (e) => handleCheckInButtonPress(habit.id, e, false));
|
|
btn.addEventListener('touchend', (e) => handleCheckInButtonRelease(habit.id, e));
|
|
btn.addEventListener('touchcancel', () => handleCheckInButtonCancel());
|
|
} else {
|
|
// For checked habits, simple click to uncheck
|
|
btn.addEventListener('click', (e) => checkInHabit(habit.id, e));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Get weekly progress for x_per_week habits
|
|
function getWeeklyProgress(habit) {
|
|
if (habit.frequency?.type !== 'x_per_week') {
|
|
return null;
|
|
}
|
|
|
|
const target = habit.frequency?.count || 1;
|
|
const today = new Date();
|
|
const currentDayOfWeek = today.getDay();
|
|
const mondayOffset = currentDayOfWeek === 0 ? -6 : 1 - currentDayOfWeek;
|
|
const monday = new Date(today);
|
|
monday.setDate(today.getDate() + mondayOffset);
|
|
monday.setHours(0, 0, 0, 0);
|
|
|
|
let weeklyCount = 0;
|
|
(habit.completions || []).forEach(completion => {
|
|
const compDate = new Date(completion.date);
|
|
compDate.setHours(0, 0, 0, 0);
|
|
const daysDiff = Math.floor((compDate - monday) / (1000 * 60 * 60 * 24));
|
|
if (daysDiff >= 0 && daysDiff < 7 && completion.type === 'check') {
|
|
weeklyCount++;
|
|
}
|
|
});
|
|
|
|
return { current: weeklyCount, target: target };
|
|
}
|
|
|
|
// Get check-ins count for last N days
|
|
function getCheckInsCount(habit, days) {
|
|
const today = new Date();
|
|
const cutoffDate = new Date(today);
|
|
cutoffDate.setDate(today.getDate() - days);
|
|
cutoffDate.setHours(0, 0, 0, 0);
|
|
|
|
let count = 0;
|
|
(habit.completions || []).forEach(completion => {
|
|
if (completion.type === 'check') {
|
|
const compDate = new Date(completion.date);
|
|
if (compDate >= cutoffDate) {
|
|
count++;
|
|
}
|
|
}
|
|
});
|
|
|
|
return count;
|
|
}
|
|
|
|
// Generate 30-day bead chain for visual progress history
|
|
function generateBeadChain(habit) {
|
|
const beads = [];
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
// Create completion map for quick lookup
|
|
const completionMap = {};
|
|
(habit.completions || []).forEach(c => {
|
|
completionMap[c.date] = c.type || 'check';
|
|
});
|
|
|
|
// Debug: log completions to verify data
|
|
console.log(`[Beads] ${habit.name}: ${habit.completions?.length || 0} completions`, completionMap);
|
|
|
|
// Generate 30 days (oldest to newest)
|
|
for (let i = 29; i >= 0; i--) {
|
|
const date = new Date(today);
|
|
date.setDate(date.getDate() - i);
|
|
// Use local date string to avoid timezone issues
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const dateStr = `${year}-${month}-${day}`;
|
|
|
|
let beadType, beadSymbol;
|
|
const completionType = completionMap[dateStr];
|
|
|
|
if (i === 0) {
|
|
// Today
|
|
if (completionType === 'check') {
|
|
beadType = 'checked';
|
|
beadSymbol = '✓';
|
|
} else if (completionType === 'skip') {
|
|
beadType = 'skipped';
|
|
beadSymbol = '/';
|
|
} else {
|
|
beadType = 'upcoming';
|
|
beadSymbol = '·';
|
|
}
|
|
} else {
|
|
// Past days
|
|
if (completionType === 'check') {
|
|
beadType = 'checked';
|
|
beadSymbol = '✓';
|
|
} else if (completionType === 'skip') {
|
|
beadType = 'skipped';
|
|
beadSymbol = '/';
|
|
} else {
|
|
beadType = 'missed';
|
|
beadSymbol = '○';
|
|
}
|
|
}
|
|
|
|
// Format tooltip
|
|
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
const tooltip = `${monthNames[date.getMonth()]} ${date.getDate()} - ${
|
|
beadType === 'checked' ? 'Checked in ✓' :
|
|
beadType === 'skipped' ? 'Skipped /' :
|
|
beadType === 'missed' ? 'Missed ○' :
|
|
'Today'
|
|
}`;
|
|
|
|
beads.push({ type: beadType, symbol: beadSymbol, tooltip, date: dateStr });
|
|
}
|
|
|
|
return beads;
|
|
}
|
|
|
|
// Render single habit card
|
|
function renderHabitCard(habit) {
|
|
const isDoneToday = isCheckedToday(habit);
|
|
|
|
// For x_per_week habits, show both current week AND 30-day rate
|
|
let completionRate;
|
|
let progressText;
|
|
if (habit.frequency?.type === 'x_per_week') {
|
|
const weeklyProg = getWeeklyProgress(habit);
|
|
const weeklyPercent = weeklyProg ? Math.round((weeklyProg.current / weeklyProg.target) * 100) : 0;
|
|
const monthlyPercent = Math.round(habit.completion_rate_30d || 0);
|
|
completionRate = weeklyPercent; // Progress bar shows weekly
|
|
progressText = `${weeklyPercent}% week · ${monthlyPercent}% month`;
|
|
} else {
|
|
completionRate = Math.round(habit.completion_rate_30d || 0);
|
|
progressText = `${completionRate}%`;
|
|
}
|
|
|
|
const nextCheckDate = getNextCheckDate(habit);
|
|
|
|
const lives = habit.lives || 0;
|
|
// Lives with shield icon (Lucide)
|
|
const livesDisplay = `<i data-lucide="shield" class="habit-icon-inline"></i> ${lives}`;
|
|
|
|
// Weekly progress for x_per_week habits
|
|
const weeklyProgress = getWeeklyProgress(habit);
|
|
const progressBadge = weeklyProgress
|
|
? `<span class="habit-card-weekly-badge" title="This week progress">${weeklyProgress.current}/${weeklyProgress.target}</span>`
|
|
: '';
|
|
|
|
// Total completions
|
|
const totalCompletions = (habit.completions || []).filter(c => c.type === 'check').length;
|
|
|
|
// Check-ins for last 7 and 30 days
|
|
const checkIns7d = getCheckInsCount(habit, 7);
|
|
const checkIns30d = getCheckInsCount(habit, 30);
|
|
|
|
// Generate bead chain for visual history
|
|
const beads = generateBeadChain(habit);
|
|
|
|
return `
|
|
<div class="habit-card" style="border-left-color: ${habit.color}" data-habit-id="${habit.id}">
|
|
<!-- Ambient Actions -->
|
|
<div class="habit-card-actions">
|
|
<button class="habit-card-action-btn" data-action="skip" onclick="skipHabitDay('${habit.id}', '${escapeHtml(habit.name)}')" title="Skip today (use 1 life)" aria-label="Skip" ${lives <= 0 || isDoneToday ? 'disabled' : ''}>
|
|
<i data-lucide="skip-forward"></i>
|
|
</button>
|
|
<button class="habit-card-action-btn" data-action="edit" onclick="showEditHabitModal('${habit.id}')" title="Edit habit" aria-label="Edit">
|
|
<i data-lucide="settings"></i>
|
|
</button>
|
|
<button class="habit-card-action-btn" data-action="delete" onclick="deleteHabit('${habit.id}')" title="Delete habit" aria-label="Delete">
|
|
<i data-lucide="trash-2"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="habit-card-row">
|
|
<i data-lucide="${habit.icon || 'circle'}" class="habit-card-icon"></i>
|
|
<span class="habit-card-name">${escapeHtml(habit.name)}</span>
|
|
${progressBadge}
|
|
<span class="habit-card-streak" title="Current streak">
|
|
<i data-lucide="zap" class="habit-icon-inline"></i> ${habit.current_streak || 0}
|
|
</span>
|
|
<span class="habit-card-lives" title="Lives remaining">${livesDisplay}</span>
|
|
<button
|
|
class="habit-card-check-btn-compact ${isDoneToday ? 'checked' : ''}"
|
|
id="checkin-btn-${habit.id}"
|
|
title="${isDoneToday ? 'Click to uncheck' : 'Check in'}"
|
|
>
|
|
${isDoneToday ? '✓' : '○'}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="habit-card-bead-chain">
|
|
${beads.map(bead => `
|
|
<div class="habit-bead ${bead.type}"
|
|
title="${bead.tooltip}"
|
|
onclick="showToast('${bead.tooltip}', 'info')"
|
|
data-date="${bead.date}">
|
|
${bead.symbol}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<div class="habit-card-progress-row">
|
|
<div class="habit-card-progress-bar">
|
|
<div class="habit-card-progress-fill" style="width: ${completionRate}%; background-color: ${habit.color}"></div>
|
|
</div>
|
|
<span class="habit-card-progress-text">${progressText}</span>
|
|
</div>
|
|
|
|
<div class="habit-card-stats-row">
|
|
<span class="habit-card-stat" title="Last 7 days">7d: ${checkIns7d}</span>
|
|
<span class="habit-card-stat-sep">·</span>
|
|
<span class="habit-card-stat" title="Last 30 days">30d: ${checkIns30d}</span>
|
|
<span class="habit-card-stat-sep">·</span>
|
|
<span class="habit-card-stat" title="Total check-ins">Total: ${totalCompletions}</span>
|
|
</div>
|
|
<div class="habit-card-next-date">${nextCheckDate}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Check if habit was checked today
|
|
function isCheckedToday(habit) {
|
|
if (!habit.completions || habit.completions.length === 0) {
|
|
return false;
|
|
}
|
|
const today = new Date().toISOString().split('T')[0];
|
|
return habit.completions.some(c => c.date === today);
|
|
}
|
|
|
|
// Get last check-in info text
|
|
function getLastCheckInfo(habit) {
|
|
if (!habit.completions || habit.completions.length === 0) {
|
|
return 'Last: Never';
|
|
}
|
|
|
|
const lastCompletion = habit.completions[habit.completions.length - 1];
|
|
const lastDate = new Date(lastCompletion.date);
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
lastDate.setHours(0, 0, 0, 0);
|
|
|
|
const diffDays = Math.floor((today - lastDate) / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffDays === 0) {
|
|
return 'Last: Today';
|
|
} else if (diffDays === 1) {
|
|
return 'Last: Yesterday';
|
|
} else {
|
|
return `Last: ${diffDays} days ago`;
|
|
}
|
|
}
|
|
|
|
// Render lives as hearts
|
|
function renderLives(lives) {
|
|
const totalLives = 3;
|
|
let html = '';
|
|
for (let i = 0; i < totalLives; i++) {
|
|
html += i < lives ? '❤️' : '🖤';
|
|
}
|
|
return html;
|
|
}
|
|
|
|
// Get priority level string
|
|
function getPriorityLevel(priority) {
|
|
if (priority === 1) return 'high';
|
|
if (priority === 2) return 'medium';
|
|
return 'low';
|
|
}
|
|
|
|
// Get next check date text
|
|
function getNextCheckDate(habit) {
|
|
if (isCheckedToday(habit)) {
|
|
return 'Next: Tomorrow';
|
|
}
|
|
if (habit.should_check_today) {
|
|
return 'Due: Today';
|
|
}
|
|
// For habits not due today, show generic "upcoming"
|
|
return 'Next: Upcoming';
|
|
}
|
|
|
|
|
|
// Stats calculation and rendering
|
|
function renderStats() {
|
|
const statsSection = document.getElementById('statsSection');
|
|
|
|
if (habits.length === 0) {
|
|
statsSection.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
statsSection.style.display = 'block';
|
|
|
|
// Calculate stats
|
|
const totalHabits = habits.length;
|
|
|
|
// Average completion rate (30d) across all habits
|
|
const avgCompletion = habits.length > 0
|
|
? Math.round(habits.reduce((sum, h) => sum + (h.completion_rate_30d || 0), 0) / habits.length)
|
|
: 0;
|
|
|
|
// Best streak across all habits
|
|
const bestStreak = Math.max(...habits.map(h => h.streak?.best || 0), 0);
|
|
|
|
// Total lives available
|
|
const totalLives = habits.reduce((sum, h) => sum + (h.lives || 0), 0);
|
|
|
|
// Total check-ins last 7 days
|
|
const today = new Date();
|
|
const last7Days = new Date(today);
|
|
last7Days.setDate(today.getDate() - 7);
|
|
const last30Days = new Date(today);
|
|
last30Days.setDate(today.getDate() - 30);
|
|
|
|
let checkIns7d = 0;
|
|
let checkIns30d = 0;
|
|
|
|
habits.forEach(habit => {
|
|
(habit.completions || []).forEach(completion => {
|
|
if (completion.type === 'check') {
|
|
const compDate = new Date(completion.date);
|
|
if (compDate >= last7Days) checkIns7d++;
|
|
if (compDate >= last30Days) checkIns30d++;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Update DOM
|
|
document.getElementById('statTotalHabits').textContent = totalHabits;
|
|
document.getElementById('statAvgCompletion').textContent = `${avgCompletion}%`;
|
|
document.getElementById('statBestStreak').textContent = bestStreak;
|
|
document.getElementById('statTotalLives').textContent = totalLives;
|
|
document.getElementById('statCheckIns7d').textContent = checkIns7d;
|
|
document.getElementById('statCheckIns30d').textContent = checkIns30d;
|
|
|
|
// Render weekly summary
|
|
renderWeeklySummary();
|
|
}
|
|
|
|
function renderWeeklySummary() {
|
|
const chartContainer = document.getElementById('weeklyChart');
|
|
|
|
// Get current week's data (Mon-Sun)
|
|
const today = new Date();
|
|
const currentDayOfWeek = today.getDay(); // 0 = Sunday, 1 = Monday, etc.
|
|
const mondayOffset = currentDayOfWeek === 0 ? -6 : 1 - currentDayOfWeek;
|
|
const monday = new Date(today);
|
|
monday.setDate(today.getDate() + mondayOffset);
|
|
monday.setHours(0, 0, 0, 0);
|
|
|
|
// Calculate completions per day (Mon-Sun)
|
|
const daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
const completionsPerDay = new Array(7).fill(0);
|
|
let weeklyCompleted = 0;
|
|
let weeklySkipped = 0;
|
|
|
|
habits.forEach(habit => {
|
|
(habit.completions || []).forEach(completion => {
|
|
const compDate = new Date(completion.date);
|
|
compDate.setHours(0, 0, 0, 0);
|
|
|
|
// Check if completion is in current week
|
|
const daysDiff = Math.floor((compDate - monday) / (1000 * 60 * 60 * 24));
|
|
if (daysDiff >= 0 && daysDiff < 7) {
|
|
if (completion.type === 'check') {
|
|
completionsPerDay[daysDiff]++;
|
|
weeklyCompleted++;
|
|
} else if (completion.type === 'skip') {
|
|
weeklySkipped++;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Use total number of habits as max for scaling
|
|
const totalHabitsCount = habits.length;
|
|
const maxPossible = totalHabitsCount > 0 ? totalHabitsCount : 1;
|
|
|
|
console.log('Weekly Summary Debug:', {
|
|
totalHabits: totalHabitsCount,
|
|
completionsPerDay: completionsPerDay,
|
|
maxPossible: maxPossible
|
|
});
|
|
|
|
// Render bars
|
|
let barsHtml = '';
|
|
for (let i = 0; i < 7; i++) {
|
|
const count = completionsPerDay[i];
|
|
// Calculate height relative to total habits
|
|
const actualPercent = (count / maxPossible) * 100;
|
|
|
|
if (count > 0) {
|
|
console.log(`Day ${daysOfWeek[i]}: ${count}/${maxPossible} = ${actualPercent.toFixed(1)}%`);
|
|
}
|
|
const barClass = count > 0 ? 'weekly-bar' : 'weekly-bar weekly-bar-empty';
|
|
const barLabel = count > 0 ? `<div class="weekly-bar-label">${count}/${maxPossible} · ${Math.round(actualPercent)}%</div>` : '';
|
|
// Use actual percentage for accurate visual scale, with small absolute minimum for visibility
|
|
const barHeight = count > 0 ? `max(10px, ${actualPercent}%)` : '8px';
|
|
barsHtml += `
|
|
<div class="weekly-bar-wrapper">
|
|
<div class="${barClass}" style="height: ${barHeight}" title="${count} / ${maxPossible} completed"></div>
|
|
${barLabel}
|
|
<div class="weekly-day-label">${daysOfWeek[i]}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
console.log('Setting chart HTML with', completionsPerDay.filter(c => c > 0).length, 'non-zero days');
|
|
chartContainer.innerHTML = barsHtml;
|
|
|
|
// Verify bars were rendered correctly
|
|
setTimeout(() => {
|
|
const bars = chartContainer.querySelectorAll('.weekly-bar:not(.weekly-bar-empty)');
|
|
console.log('Rendered bars:', Array.from(bars).map(bar => ({
|
|
height: bar.style.height,
|
|
computedHeight: window.getComputedStyle(bar).height
|
|
})));
|
|
}, 100);
|
|
|
|
// Update weekly stats text
|
|
document.getElementById('weeklyCompletedText').textContent = `${weeklyCompleted} completed this week`;
|
|
document.getElementById('weeklySkippedText').textContent = `${weeklySkipped} skipped this week`;
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function toggleStats() {
|
|
const content = document.getElementById('statsContent');
|
|
const chevron = document.getElementById('statsChevron');
|
|
|
|
if (content.classList.contains('visible')) {
|
|
content.classList.remove('visible');
|
|
chevron.classList.remove('expanded');
|
|
localStorage.setItem('habits-stats-main-collapsed', 'true');
|
|
} else {
|
|
content.classList.add('visible');
|
|
chevron.classList.add('expanded');
|
|
localStorage.setItem('habits-stats-main-collapsed', 'false');
|
|
}
|
|
}
|
|
|
|
function restoreStatsState() {
|
|
const content = document.getElementById('statsContent');
|
|
const chevron = document.getElementById('statsChevron');
|
|
const isCollapsed = localStorage.getItem('habits-stats-main-collapsed');
|
|
|
|
// Default is EXPANDED (visible) - changed from collapsed
|
|
if (isCollapsed === 'true') {
|
|
content.classList.remove('visible');
|
|
chevron.classList.remove('expanded');
|
|
} else {
|
|
content.classList.add('visible');
|
|
chevron.classList.add('expanded');
|
|
}
|
|
}
|
|
|
|
function toggleWeeklySummary() {
|
|
const content = document.getElementById('weeklySummaryContent');
|
|
const chevron = document.getElementById('weeklySummaryChevron');
|
|
|
|
if (content.classList.contains('visible')) {
|
|
content.classList.remove('visible');
|
|
chevron.classList.remove('expanded');
|
|
// Save collapsed state to localStorage
|
|
localStorage.setItem('habits-stats-collapsed', 'true');
|
|
} else {
|
|
content.classList.add('visible');
|
|
chevron.classList.add('expanded');
|
|
// Save expanded state to localStorage
|
|
localStorage.setItem('habits-stats-collapsed', 'false');
|
|
}
|
|
}
|
|
|
|
function restoreWeeklySummaryState() {
|
|
const content = document.getElementById('weeklySummaryContent');
|
|
const chevron = document.getElementById('weeklySummaryChevron');
|
|
const isCollapsed = localStorage.getItem('habits-stats-collapsed');
|
|
|
|
// Default is collapsed (isCollapsed === null means first visit)
|
|
// Only expand if explicitly set to 'false'
|
|
if (isCollapsed === 'false') {
|
|
content.classList.add('visible');
|
|
chevron.classList.add('expanded');
|
|
} else {
|
|
content.classList.remove('visible');
|
|
chevron.classList.remove('expanded');
|
|
}
|
|
}
|
|
|
|
// Modal state
|
|
let selectedColor = '#3B82F6';
|
|
let selectedIcon = 'dumbbell';
|
|
|
|
// Preset colors
|
|
const presetColors = [
|
|
'#EF4444', '#F97316', '#F59E0B', '#10B981',
|
|
'#3B82F6', '#8B5CF6', '#EC4899', '#6B7280'
|
|
];
|
|
|
|
const colorNames = {
|
|
'#EF4444': 'Red',
|
|
'#F97316': 'Orange',
|
|
'#F59E0B': 'Amber',
|
|
'#10B981': 'Green',
|
|
'#3B82F6': 'Blue',
|
|
'#8B5CF6': 'Purple',
|
|
'#EC4899': 'Pink',
|
|
'#6B7280': 'Gray'
|
|
};
|
|
|
|
// Common icons
|
|
const commonIcons = [
|
|
'dumbbell', 'moon', 'book', 'brain', 'heart', 'flame',
|
|
'star', 'target', 'trophy', 'coffee', 'music', 'camera',
|
|
'zap', 'sun', 'droplet', 'leaf', 'feather', 'pencil',
|
|
'smile', 'watch', 'footprints', 'activity', 'battery', 'headphones',
|
|
'utensils', 'apple', 'pizza', 'glass-water', 'pill', 'stethoscope',
|
|
'briefcase', 'laptop', 'smartphone', 'mail', 'calendar', 'clock'
|
|
];
|
|
|
|
// Show add habit modal
|
|
function showAddHabitModal() {
|
|
const modal = document.getElementById('habitModal');
|
|
const form = document.getElementById('habitForm');
|
|
const modalTitle = document.querySelector('.modal-title');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Reset editing state
|
|
editingHabitId = null;
|
|
|
|
// Reset modal title and button text to create mode
|
|
modalTitle.textContent = 'Add Habit';
|
|
submitBtnText.textContent = 'Create Habit';
|
|
|
|
// Reset form
|
|
form.reset();
|
|
selectedColor = '#3B82F6';
|
|
selectedIcon = 'dumbbell';
|
|
|
|
// Initialize color picker
|
|
initColorPicker();
|
|
|
|
// Initialize icon picker
|
|
initIconPicker();
|
|
|
|
// Update frequency params for initial selection
|
|
updateFrequencyParams();
|
|
|
|
// Show modal
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Close habit modal
|
|
function closeHabitModal() {
|
|
const modal = document.getElementById('habitModal');
|
|
modal.classList.remove('active');
|
|
|
|
// Reset editing state
|
|
editingHabitId = null;
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
const modal = document.getElementById('habitModal');
|
|
if (e.target === modal) {
|
|
closeHabitModal();
|
|
}
|
|
|
|
const checkinModal = document.getElementById('checkinModal');
|
|
if (e.target === checkinModal) {
|
|
closeCheckinModal();
|
|
}
|
|
|
|
const confirmModal = document.getElementById('confirmModal');
|
|
if (e.target === confirmModal) {
|
|
closeConfirmModal();
|
|
}
|
|
});
|
|
|
|
// Initialize color picker
|
|
function initColorPicker() {
|
|
const contentContainer = document.getElementById('colorPickerContent');
|
|
const trigger = document.getElementById('colorPickerTrigger');
|
|
|
|
// Render preset color options
|
|
const optionsHtml = presetColors.map(color =>
|
|
`<div class="color-picker-option ${color === selectedColor ? 'selected' : ''}"
|
|
data-color="${color}" onclick="selectColorFromDropdown('${color}')">
|
|
<div class="color-picker-option-swatch" style="background-color: ${color}"></div>
|
|
<span class="color-picker-option-name">${colorNames[color]}</span>
|
|
</div>`
|
|
).join('');
|
|
|
|
// Add custom color input at bottom
|
|
const customHtml = `
|
|
<div class="color-picker-custom">
|
|
<input type="text" id="customColorInput" placeholder="#RRGGBB"
|
|
pattern="^#[0-9A-Fa-f]{6}$" oninput="handleCustomColorInput(this.value)">
|
|
</div>
|
|
`;
|
|
|
|
contentContainer.innerHTML = optionsHtml + customHtml;
|
|
|
|
// Update trigger display
|
|
updateColorPickerTrigger(selectedColor);
|
|
|
|
// Add click listener to trigger
|
|
trigger.addEventListener('click', toggleColorPicker);
|
|
|
|
// Add click-outside listener to close dropdown
|
|
document.addEventListener('click', (e) => {
|
|
const dropdown = document.querySelector('.color-picker-dropdown');
|
|
if (dropdown && !dropdown.contains(e.target)) {
|
|
closeColorPicker();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Toggle color picker dropdown
|
|
function toggleColorPicker(e) {
|
|
e?.stopPropagation();
|
|
const content = document.getElementById('colorPickerContent');
|
|
const trigger = document.getElementById('colorPickerTrigger');
|
|
const isOpen = content.classList.contains('visible');
|
|
|
|
if (isOpen) {
|
|
closeColorPicker();
|
|
} else {
|
|
openColorPicker();
|
|
}
|
|
}
|
|
|
|
// Open color picker dropdown
|
|
function openColorPicker() {
|
|
const content = document.getElementById('colorPickerContent');
|
|
const trigger = document.getElementById('colorPickerTrigger');
|
|
content.classList.add('visible');
|
|
trigger.classList.add('open');
|
|
}
|
|
|
|
// Close color picker dropdown
|
|
function closeColorPicker() {
|
|
const content = document.getElementById('colorPickerContent');
|
|
const trigger = document.getElementById('colorPickerTrigger');
|
|
content.classList.remove('visible');
|
|
trigger.classList.remove('open');
|
|
}
|
|
|
|
// Select color from dropdown
|
|
function selectColorFromDropdown(color) {
|
|
selectedColor = color;
|
|
|
|
// Update selected state in options
|
|
const options = document.querySelectorAll('.color-picker-option');
|
|
options.forEach(option => {
|
|
if (option.dataset.color === color) {
|
|
option.classList.add('selected');
|
|
} else {
|
|
option.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
// Update trigger display
|
|
updateColorPickerTrigger(color);
|
|
|
|
// Close dropdown
|
|
closeColorPicker();
|
|
}
|
|
|
|
// Handle custom color input
|
|
function handleCustomColorInput(value) {
|
|
if (/^#[0-9A-Fa-f]{6}$/i.test(value)) {
|
|
selectedColor = value.toUpperCase();
|
|
updateColorPickerTrigger(selectedColor);
|
|
|
|
// Deselect all preset options
|
|
const options = document.querySelectorAll('.color-picker-option');
|
|
options.forEach(option => option.classList.remove('selected'));
|
|
}
|
|
}
|
|
|
|
// Update color picker trigger display
|
|
function updateColorPickerTrigger(color) {
|
|
const preview = document.getElementById('colorPreview');
|
|
const name = document.getElementById('colorName');
|
|
|
|
preview.style.backgroundColor = color;
|
|
name.textContent = colorNames[color] || color;
|
|
}
|
|
|
|
// Initialize icon picker
|
|
function initIconPicker() {
|
|
const iconPickerContainer = document.getElementById('iconPicker');
|
|
iconPickerContainer.innerHTML = commonIcons.map(icon =>
|
|
`<div class="icon-option ${icon === selectedIcon ? 'selected' : ''}"
|
|
onclick="selectIcon('${icon}')">
|
|
<i data-lucide="${icon}"></i>
|
|
</div>`
|
|
).join('');
|
|
|
|
// Update trigger button with selected icon
|
|
const selectedIconDisplay = document.getElementById('selectedIconDisplay');
|
|
selectedIconDisplay.setAttribute('data-lucide', selectedIcon);
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Toggle icon picker dropdown
|
|
function toggleIconPicker() {
|
|
const content = document.getElementById('iconPickerContent');
|
|
const trigger = document.getElementById('iconPickerTrigger');
|
|
const isOpen = content.classList.contains('visible');
|
|
|
|
if (isOpen) {
|
|
closeIconPicker();
|
|
} else {
|
|
openIconPicker();
|
|
}
|
|
}
|
|
|
|
// Open icon picker dropdown
|
|
function openIconPicker() {
|
|
const content = document.getElementById('iconPickerContent');
|
|
const trigger = document.getElementById('iconPickerTrigger');
|
|
const search = document.getElementById('iconSearch');
|
|
|
|
content.classList.add('visible');
|
|
trigger.classList.add('open');
|
|
|
|
// Reset search
|
|
search.value = '';
|
|
filterIcons();
|
|
|
|
// Focus search input
|
|
setTimeout(() => search.focus(), 50);
|
|
}
|
|
|
|
// Close icon picker dropdown
|
|
function closeIconPicker() {
|
|
const content = document.getElementById('iconPickerContent');
|
|
const trigger = document.getElementById('iconPickerTrigger');
|
|
|
|
content.classList.remove('visible');
|
|
trigger.classList.remove('open');
|
|
}
|
|
|
|
// Filter icons based on search query
|
|
function filterIcons() {
|
|
const searchQuery = document.getElementById('iconSearch').value.toLowerCase();
|
|
const iconPickerContainer = document.getElementById('iconPicker');
|
|
|
|
const filteredIcons = commonIcons.filter(icon =>
|
|
icon.toLowerCase().includes(searchQuery)
|
|
);
|
|
|
|
iconPickerContainer.innerHTML = filteredIcons.map(icon =>
|
|
`<div class="icon-option ${icon === selectedIcon ? 'selected' : ''}"
|
|
onclick="selectIcon('${icon}')">
|
|
<i data-lucide="${icon}"></i>
|
|
</div>`
|
|
).join('');
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Select icon
|
|
function selectIcon(icon) {
|
|
selectedIcon = icon;
|
|
|
|
// Update icon options
|
|
const iconOptions = document.querySelectorAll('.icon-option');
|
|
iconOptions.forEach(option => {
|
|
option.classList.remove('selected');
|
|
});
|
|
|
|
// Add selected class to clicked option
|
|
event.target.closest('.icon-option')?.classList.add('selected');
|
|
|
|
// Update trigger button display
|
|
const selectedIconDisplay = document.getElementById('selectedIconDisplay');
|
|
selectedIconDisplay.setAttribute('data-lucide', icon);
|
|
lucide.createIcons();
|
|
|
|
// Close dropdown after selection
|
|
closeIconPicker();
|
|
}
|
|
|
|
// Update frequency params based on selected type
|
|
function updateFrequencyParams() {
|
|
const frequencyType = document.getElementById('frequencyType').value;
|
|
const paramsContainer = document.getElementById('frequencyParams');
|
|
|
|
let html = '';
|
|
|
|
if (frequencyType === 'specific_days') {
|
|
html = `
|
|
<label class="form-label">Select Days</label>
|
|
<div class="day-checkboxes">
|
|
${['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, index) => `
|
|
<label class="day-checkbox-label">
|
|
<input type="checkbox" name="day" value="${index}" checked>
|
|
<span>${day}</span>
|
|
</label>
|
|
`).join('')}
|
|
</div>
|
|
`;
|
|
} else if (frequencyType === 'x_per_week') {
|
|
html = `
|
|
<label class="form-label" for="xPerWeek">Times per week</label>
|
|
<input type="number" id="xPerWeek" class="form-input" min="1" max="7" value="3">
|
|
`;
|
|
} else if (frequencyType === 'custom') {
|
|
html = `
|
|
<label class="form-label" for="customInterval">Interval (days)</label>
|
|
<input type="number" id="customInterval" class="form-input" min="1" value="7">
|
|
`;
|
|
}
|
|
|
|
paramsContainer.innerHTML = html;
|
|
}
|
|
|
|
// Submit habit form
|
|
async function submitHabitForm(event) {
|
|
event.preventDefault();
|
|
|
|
const submitBtn = document.getElementById('submitHabitBtn');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Determine if we're creating or editing
|
|
const isEditing = editingHabitId !== null;
|
|
|
|
// Get form values
|
|
const name = document.getElementById('habitName').value.trim();
|
|
const category = document.getElementById('habitCategory').value;
|
|
const priority = parseInt(document.getElementById('habitPriority').value);
|
|
const notes = document.getElementById('habitNotes').value.trim();
|
|
const frequencyType = document.getElementById('frequencyType').value;
|
|
const reminderTime = document.getElementById('reminderTime').value;
|
|
|
|
// Validate name
|
|
if (!name) {
|
|
showToast('Please enter a habit name', 'error');
|
|
return;
|
|
}
|
|
|
|
if (name.length > 100) {
|
|
showToast('Habit name must be 100 characters or less', 'error');
|
|
return;
|
|
}
|
|
|
|
// Validate color
|
|
if (!/^#[0-9A-Fa-f]{6}$/.test(selectedColor)) {
|
|
showToast('Invalid color format', 'error');
|
|
return;
|
|
}
|
|
|
|
// Build frequency params
|
|
let frequencyParams = {};
|
|
|
|
if (frequencyType === 'specific_days') {
|
|
const checkedDays = Array.from(document.querySelectorAll('input[name="day"]:checked'))
|
|
.map(cb => parseInt(cb.value));
|
|
frequencyParams = { days: checkedDays };
|
|
} else if (frequencyType === 'x_per_week') {
|
|
const xPerWeek = parseInt(document.getElementById('xPerWeek').value);
|
|
frequencyParams = { count: xPerWeek };
|
|
} else if (frequencyType === 'custom') {
|
|
const interval = parseInt(document.getElementById('customInterval').value);
|
|
frequencyParams = { interval };
|
|
}
|
|
|
|
// Build habit object
|
|
const habitData = {
|
|
name,
|
|
category,
|
|
color: selectedColor,
|
|
icon: selectedIcon,
|
|
priority,
|
|
notes: notes || undefined,
|
|
frequency: {
|
|
type: frequencyType,
|
|
...frequencyParams
|
|
},
|
|
reminderTime: reminderTime || undefined
|
|
};
|
|
|
|
// Show loading state
|
|
submitBtn.disabled = true;
|
|
submitBtnText.textContent = isEditing ? 'Saving...' : 'Creating...';
|
|
|
|
try {
|
|
const url = isEditing ? `/echo/api/habits/${editingHabitId}` : '/echo/api/habits';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(habitData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
// Success
|
|
showToast(isEditing ? 'Habit updated!' : 'Habit created successfully!', 'success');
|
|
closeHabitModal();
|
|
await loadHabits();
|
|
|
|
} catch (error) {
|
|
console.error(`Failed to ${isEditing ? 'update' : 'create'} habit:`, error);
|
|
showToast(`Failed to ${isEditing ? 'update' : 'create'} habit: ` + error.message, 'error');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtnText.textContent = isEditing ? 'Save Changes' : 'Create Habit';
|
|
}
|
|
}
|
|
|
|
// Show toast notification
|
|
function showToast(message, type = 'success') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
toast.innerHTML = `
|
|
<i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}"></i>
|
|
<span>${escapeHtml(message)}</span>
|
|
`;
|
|
|
|
document.body.appendChild(toast);
|
|
lucide.createIcons();
|
|
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 3000);
|
|
}
|
|
|
|
// Show edit habit modal
|
|
let editingHabitId = null; // Track which habit we're editing
|
|
|
|
function showEditHabitModal(habitId) {
|
|
const habit = habits.find(h => h.id === habitId);
|
|
if (!habit) {
|
|
showToast('Habit not found', 'error');
|
|
return;
|
|
}
|
|
|
|
editingHabitId = habitId;
|
|
|
|
const modal = document.getElementById('habitModal');
|
|
const form = document.getElementById('habitForm');
|
|
const modalTitle = document.querySelector('.modal-title');
|
|
const submitBtn = document.getElementById('submitHabitBtn');
|
|
const submitBtnText = document.getElementById('submitBtnText');
|
|
|
|
// Change modal title and button text
|
|
modalTitle.textContent = 'Edit Habit';
|
|
submitBtnText.textContent = 'Save Changes';
|
|
|
|
// Pre-populate form fields
|
|
document.getElementById('habitName').value = habit.name;
|
|
document.getElementById('habitCategory').value = habit.category || 'health';
|
|
document.getElementById('habitPriority').value = habit.priority || 3;
|
|
document.getElementById('habitNotes').value = habit.notes || '';
|
|
document.getElementById('frequencyType').value = habit.frequency?.type || 'daily';
|
|
document.getElementById('reminderTime').value = habit.reminderTime || '';
|
|
|
|
// Set selected color and icon
|
|
selectedColor = habit.color || '#3B82F6';
|
|
selectedIcon = habit.icon || 'dumbbell';
|
|
|
|
// Initialize color picker with current selection
|
|
initColorPicker();
|
|
|
|
// Initialize icon picker with current selection
|
|
initIconPicker();
|
|
|
|
// Update frequency params and pre-populate
|
|
updateFrequencyParams();
|
|
|
|
// Pre-populate frequency params based on type
|
|
const frequencyType = habit.frequency?.type;
|
|
if (frequencyType === 'specific_days' && habit.frequency.days) {
|
|
const dayCheckboxes = document.querySelectorAll('input[name="day"]');
|
|
dayCheckboxes.forEach(cb => {
|
|
cb.checked = habit.frequency.days.includes(parseInt(cb.value));
|
|
});
|
|
} else if (frequencyType === 'x_per_week' && habit.frequency.count) {
|
|
const xPerWeekInput = document.getElementById('xPerWeek');
|
|
if (xPerWeekInput) {
|
|
xPerWeekInput.value = habit.frequency.count;
|
|
}
|
|
} else if (frequencyType === 'custom' && habit.frequency.interval) {
|
|
const customIntervalInput = document.getElementById('customInterval');
|
|
if (customIntervalInput) {
|
|
customIntervalInput.value = habit.frequency.interval;
|
|
}
|
|
}
|
|
|
|
// Show modal
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Delete habit
|
|
async function deleteHabit(habitId) {
|
|
// Find habit to get its name for confirmation
|
|
const habits = JSON.parse(localStorage.getItem('habitsCache') || '[]');
|
|
const habit = habits.find(h => h.id === habitId);
|
|
const habitName = habit ? habit.name : 'this habit';
|
|
|
|
const confirmed = await showConfirm(`Delete ${habitName}? This cannot be undone.`, 'Delete Habit');
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/echo/api/habits/${habitId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
// Show success toast
|
|
showToast('Habit deleted', 'success');
|
|
|
|
// Refresh habits list (will remove card from DOM)
|
|
await loadHabits();
|
|
} catch (error) {
|
|
console.error('Failed to delete habit:', error);
|
|
showToast(`Failed to delete habit: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Skip a habit day using a life
|
|
async function skipHabitDay(habitId, habitName) {
|
|
const confirmed = await showConfirm('Use 1 life to skip today?', 'Skip Day');
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/echo/api/habits/${habitId}/skip`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Update habits array directly with fresh data
|
|
const habitIndex = habits.findIndex(h => h.id === habitId);
|
|
if (habitIndex !== -1) {
|
|
habits[habitIndex] = updatedHabit;
|
|
}
|
|
|
|
// Re-render everything
|
|
renderHabits();
|
|
|
|
// Show success toast with remaining lives
|
|
const remainingLives = updatedHabit.lives;
|
|
showToast(`Day skipped. ${remainingLives} ${remainingLives === 1 ? 'life' : 'lives'} remaining.`, 'success');
|
|
} catch (error) {
|
|
console.error('Failed to skip habit day:', error);
|
|
showToast(`Failed to skip: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Check-in state
|
|
let checkInHabitId = null;
|
|
let checkInRating = null;
|
|
let checkInMood = null;
|
|
let longPressTimer = null;
|
|
|
|
// Check in or uncheck habit (toggle)
|
|
async function checkInHabit(habitId, event) {
|
|
// Prevent simple check-in if this was triggered during long-press detection
|
|
if (event && event.type === 'mousedown') {
|
|
return; // Let the long-press handler deal with it
|
|
}
|
|
|
|
// Find the habit to check current state
|
|
const habit = habits.find(h => h.id === habitId);
|
|
if (!habit) {
|
|
showToast('Habit not found', 'error');
|
|
return;
|
|
}
|
|
|
|
const isChecked = isCheckedToday(habit);
|
|
const today = new Date().toISOString().split('T')[0];
|
|
|
|
// Get the check button for optimistic UI update
|
|
const btn = document.getElementById(`checkin-btn-${habitId}`);
|
|
// Find card by habit ID (more reliable than event.target)
|
|
const card = document.querySelector(`.habit-card[data-habit-id="${habitId}"]`);
|
|
const streakElement = card?.querySelector('.habit-card-streak');
|
|
|
|
// Store original state for rollback on error
|
|
const originalButtonText = btn?.innerHTML;
|
|
const originalButtonDisabled = btn?.disabled;
|
|
const originalStreakText = streakElement?.textContent;
|
|
|
|
try {
|
|
// Optimistic UI update
|
|
if (btn) {
|
|
if (isChecked) {
|
|
// Unchecking - show unchecked state
|
|
btn.innerHTML = '○';
|
|
btn.disabled = false;
|
|
} else {
|
|
// Checking - show checked state
|
|
btn.innerHTML = '✓';
|
|
btn.disabled = true;
|
|
}
|
|
}
|
|
|
|
let response;
|
|
if (isChecked) {
|
|
// Send DELETE request to uncheck
|
|
response = await fetch(`/echo/api/habits/${habitId}/check?date=${today}`, {
|
|
method: 'DELETE'
|
|
});
|
|
} else {
|
|
// Send POST request to check
|
|
response = await fetch(`/echo/api/habits/${habitId}/check`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({})
|
|
});
|
|
}
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Debug: log updated habit data
|
|
console.log('[Check-in] Updated habit:', {
|
|
name: updatedHabit.name,
|
|
completions: updatedHabit.completions?.length || 0,
|
|
lastCompletion: updatedHabit.completions?.[updatedHabit.completions.length - 1]
|
|
});
|
|
|
|
// Update habits array directly with fresh data from API
|
|
const habitIndex = habits.findIndex(h => h.id === habitId);
|
|
if (habitIndex !== -1) {
|
|
habits[habitIndex] = updatedHabit;
|
|
}
|
|
|
|
// Re-render everything (habits + stats)
|
|
renderHabits();
|
|
|
|
// Show lives award toast if applicable
|
|
if (!isChecked && updatedHabit.livesAwarded) {
|
|
showToast(`${updatedHabit.name}: +1 viață earned! Total: ${updatedHabit.lives}`, 'success');
|
|
}
|
|
|
|
// Show success toast with appropriate message
|
|
if (isChecked) {
|
|
showToast(`Check-in removed. 🔥 Streak: ${updatedHabit.current_streak || 0}`, 'success');
|
|
} else {
|
|
showToast(`Habit checked! 🔥 Streak: ${updatedHabit.current_streak || 0}`, 'success');
|
|
}
|
|
|
|
// Add pulse animation to the updated card
|
|
const updatedCard = document.querySelector(`.habit-card[data-habit-id="${habitId}"]`);
|
|
if (updatedCard) {
|
|
updatedCard.classList.add('pulse');
|
|
setTimeout(() => updatedCard.classList.remove('pulse'), 500);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to toggle check-in:', error);
|
|
|
|
// Revert optimistic UI update on error
|
|
if (btn) {
|
|
btn.innerHTML = originalButtonText;
|
|
btn.disabled = originalButtonDisabled;
|
|
}
|
|
if (streakElement) {
|
|
streakElement.textContent = originalStreakText;
|
|
}
|
|
|
|
showToast('Failed to toggle check-in: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Show check-in detail modal
|
|
function showCheckInDetailModal(habitId) {
|
|
checkInHabitId = habitId;
|
|
checkInRating = null;
|
|
checkInMood = null;
|
|
|
|
// Reset form
|
|
document.getElementById('checkinNote').value = '';
|
|
|
|
// Reset rating stars
|
|
document.querySelectorAll('.rating-star').forEach(star => {
|
|
star.classList.remove('active');
|
|
});
|
|
|
|
// Reset mood buttons
|
|
document.querySelectorAll('.mood-btn').forEach(btn => {
|
|
btn.classList.remove('selected');
|
|
});
|
|
|
|
// Show modal
|
|
const modal = document.getElementById('checkinModal');
|
|
modal.classList.add('active');
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Close check-in detail modal
|
|
function closeCheckinModal() {
|
|
const modal = document.getElementById('checkinModal');
|
|
modal.classList.remove('active');
|
|
checkInHabitId = null;
|
|
checkInRating = null;
|
|
checkInMood = null;
|
|
}
|
|
|
|
// Select rating
|
|
function selectRating(rating) {
|
|
checkInRating = rating;
|
|
|
|
// Update star display
|
|
document.querySelectorAll('.rating-star').forEach((star, index) => {
|
|
if (index < rating) {
|
|
star.classList.add('active');
|
|
} else {
|
|
star.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Select mood
|
|
function selectMood(mood) {
|
|
checkInMood = mood;
|
|
|
|
// Update mood button display
|
|
document.querySelectorAll('.mood-btn').forEach(btn => {
|
|
if (btn.dataset.mood === mood) {
|
|
btn.classList.add('selected');
|
|
} else {
|
|
btn.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Submit check-in with details
|
|
async function submitCheckInDetail() {
|
|
if (!checkInHabitId) {
|
|
showToast('No habit selected', 'error');
|
|
return;
|
|
}
|
|
|
|
const submitBtn = document.getElementById('submitCheckinBtn');
|
|
submitBtn.disabled = true;
|
|
|
|
try {
|
|
const note = document.getElementById('checkinNote').value.trim();
|
|
|
|
// Build request body with optional fields
|
|
const body = {};
|
|
if (note) body.note = note;
|
|
if (checkInRating) body.rating = checkInRating;
|
|
if (checkInMood) body.mood = checkInMood;
|
|
|
|
const response = await fetch(`/echo/api/habits/${checkInHabitId}/check`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || `HTTP ${response.status}`);
|
|
}
|
|
|
|
const updatedHabit = await response.json();
|
|
|
|
// Show success toast with streak
|
|
showToast(`Habit checked! 🔥 Streak: ${updatedHabit.current_streak || 0}`, 'success');
|
|
|
|
// Close modal
|
|
closeCheckinModal();
|
|
|
|
// Refresh habits list
|
|
await loadHabits();
|
|
|
|
} catch (error) {
|
|
console.error('Failed to check in:', error);
|
|
showToast('Failed to check in: ' + error.message, 'error');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Handle long-press for check-in detail modal
|
|
function handleCheckInButtonPress(habitId, event, isMouseEvent) {
|
|
// Prevent default context menu on right-click
|
|
if (event.type === 'contextmenu') {
|
|
event.preventDefault();
|
|
showCheckInDetailModal(habitId);
|
|
return;
|
|
}
|
|
|
|
// For touch/mouse press, start long-press timer
|
|
if (event.type === 'mousedown' || event.type === 'touchstart') {
|
|
event.preventDefault();
|
|
|
|
longPressTimer = setTimeout(() => {
|
|
showCheckInDetailModal(habitId);
|
|
longPressTimer = null;
|
|
}, 500); // 500ms for long-press
|
|
}
|
|
}
|
|
|
|
// Handle release of check-in button
|
|
function handleCheckInButtonRelease(habitId, event) {
|
|
if (event.type === 'mouseup' || event.type === 'touchend') {
|
|
// If long-press timer is still running, it was a short press
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
|
|
// Perform simple check-in
|
|
checkInHabit(habitId, event);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cancel long-press if moved away
|
|
function handleCheckInButtonCancel() {
|
|
if (longPressTimer) {
|
|
clearTimeout(longPressTimer);
|
|
longPressTimer = null;
|
|
}
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
const container = document.getElementById('habitsContainer');
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<i data-lucide="alert-circle"></i>
|
|
<p style="color: var(--error)">${escapeHtml(message)}</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Escape HTML to prevent XSS
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Custom confirm modal
|
|
let confirmCallback = null;
|
|
|
|
function showConfirm(message, title = 'Confirm') {
|
|
return new Promise((resolve) => {
|
|
confirmCallback = resolve;
|
|
document.getElementById('confirmTitle').textContent = title;
|
|
document.getElementById('confirmMessage').textContent = message;
|
|
document.getElementById('confirmModal').classList.add('active');
|
|
lucide.createIcons();
|
|
});
|
|
}
|
|
|
|
function closeConfirmModal() {
|
|
document.getElementById('confirmModal').classList.remove('active');
|
|
if (confirmCallback) {
|
|
confirmCallback(false);
|
|
confirmCallback = null;
|
|
}
|
|
}
|
|
|
|
function confirmAction() {
|
|
document.getElementById('confirmModal').classList.remove('active');
|
|
if (confirmCallback) {
|
|
confirmCallback(true);
|
|
confirmCallback = null;
|
|
}
|
|
}
|
|
|
|
// Initialize page
|
|
lucide.createIcons();
|
|
restoreFilters();
|
|
|
|
// Add event listeners for search/filter collapse
|
|
document.getElementById('searchToggle').addEventListener('click', toggleSearch);
|
|
document.getElementById('filterToggle').addEventListener('click', toggleFilters);
|
|
|
|
// Search input listener
|
|
document.getElementById('searchInput').addEventListener('input', () => {
|
|
renderHabits();
|
|
});
|
|
|
|
// ESC key to collapse
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
collapseAll();
|
|
}
|
|
});
|
|
|
|
// Click outside to collapse
|
|
document.addEventListener('click', (e) => {
|
|
const filterBar = document.querySelector('.filter-bar');
|
|
const searchContainer = document.getElementById('searchContainer');
|
|
const filterContainer = document.getElementById('filterContainer');
|
|
|
|
// If click is outside filter bar and something is expanded
|
|
if (!filterBar.contains(e.target)) {
|
|
if (searchContainer.classList.contains('expanded') ||
|
|
filterContainer.classList.contains('expanded')) {
|
|
collapseAll();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Click outside icon picker to close
|
|
document.addEventListener('click', (e) => {
|
|
const dropdown = document.querySelector('.icon-picker-dropdown');
|
|
const content = document.getElementById('iconPickerContent');
|
|
|
|
if (content && content.classList.contains('visible')) {
|
|
if (!dropdown.contains(e.target)) {
|
|
closeIconPicker();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Restore collapsed/expanded state from localStorage
|
|
restoreStatsState();
|
|
restoreWeeklySummaryState();
|
|
|
|
loadHabits();
|
|
</script>
|
|
</body>
|
|
</html>
|