Skip to content
This repository was archived by the owner on Mar 30, 2026. It is now read-only.

fix: z #81

Merged
aki91-g merged 2 commits into from
Mar 25, 2026
Merged

fix: z #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
35507e8
fix: z
aki91-g Mar 25, 2026
9b520bf
minor
aki91-g Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions apps/frontend/src/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ watch(isMenuOpen, async (open) => {
:aria-label="t('specialThanks')"
@click="emit('show-thanks')"
>
<span class="gradient-text">100 program v9</span>
{{ t('aboutUs') }}
</button>
</div>

Expand Down Expand Up @@ -214,8 +214,9 @@ watch(isMenuOpen, async (open) => {
.version-badge {
appearance: none;
border-radius: 9999px;
border: 1px solid #e2e8f0;
background-color: var(--badge-bg);
border: 1px solid var(--tg-border-default);
background-color: var(--tg-surface);
color: var(--tg-text-default);
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 600;
Expand All @@ -226,15 +227,9 @@ watch(isMenuOpen, async (open) => {

.version-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
background-color: var(--badge-bg);
}

.gradient-text {
background: linear-gradient(to right, #ef4444, #a855f7, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
box-shadow: var(--tg-shadow-soft);
border-color: var(--tg-border-strong);
background-color: var(--tg-surface-raised);
}

.user-actions {
Expand Down
95 changes: 81 additions & 14 deletions apps/frontend/src/components/TaskDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const createDescription = ref<string | null>(null);
const createDue = ref('');
const createDuration = ref<number | null>(null);
const createMotivation = ref(5);
const createStatusUi = ref<'backlog' | 'todo' | 'doing' | 'done'>('todo');

const editTitle = ref('');
const editDescription = ref<string | null>(null);
Expand All @@ -45,6 +46,7 @@ const isUpdatingStatus = ref(false);
const previousMode = ref<'view' | 'tasks'>('view');
const viewStatusSelectId = 'task-drawer-status-view';
const editStatusSelectId = 'task-drawer-status-edit';
const createStatusSelectId = 'task-drawer-status-create';

const { createItem, updateItem, updateItemStatus, archiveItem, softDeleteItem, items: repositoryItems } = useItems();
const { t, language } = useSettings();
Expand Down Expand Up @@ -99,6 +101,7 @@ function resetCreateForm(): void {
createDescription.value = null;
createDuration.value = null;
createMotivation.value = 5;
createStatusUi.value = 'todo';

const now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
Expand Down Expand Up @@ -212,6 +215,11 @@ async function submitCreate(): Promise<void> {
durationMinutes: createDuration.value,
});

const createStatus = fromUiStatus(createStatusUi.value);
if (createStatus !== 'todo') {
await updateItemStatus(id, createStatus);
}
Comment on lines +218 to +221
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Create flow can report failure after a successful item creation

At Lines 218-221, status is updated in a second call after createItem. If that second call fails, the catch path treats the whole operation as failed even though the item already exists, which can lead to duplicate retries.

🔧 Suggested safe handling of post-create status update 
 async function submitCreate(): Promise<void> {
   if (!createTitle.value.trim() || !createDue.value.trim()) return;

   isCreating.value = true;
   try {
     const id = await createItem({
       title: createTitle.value.trim(),
       description: createDescription.value,
       motivation: createMotivation.value,
       due: new Date(createDue.value).toISOString(),
       durationMinutes: createDuration.value,
     });

-    const createStatus = fromUiStatus(createStatusUi.value);
-    if (createStatus !== 'todo') {
-      await updateItemStatus(id, createStatus);
-    }
+    const createStatus = fromUiStatus(createStatusUi.value);
+    if (createStatus !== 'todo') {
+      try {
+        await updateItemStatus(id, createStatus);
+      } catch (error) {
+        console.error('Failed to apply initial status after create:', error);
+      }
+    }

     const created = repositoryItems.value.find((item) => item.id === id) ?? null;
     if (created) {
       emit('select-item', created);
       emit('update:mode', 'view');
       emit('success');
     }
   } catch (error) {
     console.error('Failed to create item:', error);
   } finally {
     isCreating.value = false;
   }
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const createStatus = fromUiStatus(createStatusUi.value);
if (createStatus !== 'todo') {
await updateItemStatus(id, createStatus);
}
const createStatus = fromUiStatus(createStatusUi.value);
if (createStatus !== 'todo') {
try {
await updateItemStatus(id, createStatus);
} catch (error) {
console.error('Failed to apply initial status after create:', error);
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/frontend/src/components/TaskDrawer.vue` around lines 218 - 221, The
post-create status update (using fromUiStatus(createStatusUi.value) and calling
updateItemStatus(id, createStatus)) happens after createItem and currently
propagates failures as if creation failed; wrap the updateItemStatus call in its
own try/catch and do not rethrow to the outer create flow—on failure, log/report
the status update error (include id and createStatus) and optionally schedule a
retry, but return success for the created item so the upstream caller won’t
retry creating a duplicate; ensure createItem success path remains the canonical
success even if updateItemStatus fails.


const created = repositoryItems.value.find((item) => item.id === id) ?? null;
if (created) {
emit('select-item', created);
Expand Down Expand Up @@ -404,29 +412,59 @@ onUnmounted(() => {
<div class="drawer-body">
<transition name="fade-slide" mode="out-in">
<form v-if="mode === 'create'" key="create" @submit.prevent="submitCreate" class="task-form">
<div class="input-group">
<label>{{ t('drawerTitleRequired') }}</label>
<input v-model="createTitle" type="text" :placeholder="t('drawerTitlePlaceholder')" :disabled="isCreating" class="user-input" />
</div>
<div class="edit-fields">
<div class="input-group">
<label>{{ t('drawerTitleRequired') }}</label>
<input v-model="createTitle" type="text" :placeholder="t('drawerTitlePlaceholder')" :disabled="isCreating" class="user-input" />
</div>

<div class="input-group">
<label>{{ t('drawerDescription') }}</label>
<textarea v-model="createDescription" rows="3" :placeholder="t('drawerDescriptionPlaceholder')" :disabled="isCreating" class="user-input" />
</div>
<div class="input-group">
<label>{{ t('drawerDescription') }}</label>
<textarea v-model="createDescription" rows="6" :placeholder="t('drawerDescriptionPlaceholder')" :disabled="isCreating" class="user-input" />
</div>

<div class="input-row">
<div class="input-group">
<label>{{ t('drawerDueRequired') }}</label>
<input v-model="createDue" type="datetime-local" :disabled="isCreating" class="user-input" />
</div>

<div class="input-group">
<label>{{ t('drawerDurationMin') }}</label>
<input v-model.number="createDuration" type="number" min="1" :disabled="isCreating" class="user-input" />
</div>

<div class="input-group">
<label>{{ t('drawerMotivation') }}</label>
<div class="motivation-field">
<input
v-model.number="createMotivation"
type="range"
min="1"
max="10"
step="1"
:disabled="isCreating"
class="motivation-slider"
/>
<span class="motivation-value">{{ createMotivation }}</span>
</div>
</div>

<div class="input-group">
<label :for="createStatusSelectId">{{ t('drawerStatus') }}</label>
<select
:id="createStatusSelectId"
v-model="createStatusUi"
:disabled="isCreating"
class="user-input status-select"
:aria-label="t('drawerStatusAriaEdit')"
>
<option v-for="statusOption in localizedStatusOptions" :key="statusOption.value" :value="statusOption.value">{{ statusOption.label }}</option>
</select>
</div>
</div>

<div class="form-actions">
<button type="button" class="link-text" @click="cancelCreate">{{ t('drawerCancel') }}</button>
<div class="edit-footer">
<button type="button" class="secondary-action" @click="cancelCreate">{{ t('drawerCancel') }}</button>
<button type="submit" :disabled="!createTitle.trim() || !createDue.trim() || isCreating" class="primary-button">
{{ isCreating ? t('drawerCreating') : t('drawerCreateTask') }}
</button>
Expand Down Expand Up @@ -489,9 +527,18 @@ onUnmounted(() => {

<div class="input-group">
<label>{{ t('drawerMotivation') }}</label>
<select v-model.number="editMotivation" :disabled="isSavingEdit" class="user-input">
<option v-for="n in 10" :key="n" :value="n">{{ n }}</option>
</select>
<div class="motivation-field">
<input
v-model.number="editMotivation"
type="range"
min="1"
max="10"
step="1"
:disabled="isSavingEdit"
class="motivation-slider"
/>
<span class="motivation-value">{{ editMotivation }}</span>
</div>
</div>

<div class="input-group">
Expand Down Expand Up @@ -856,6 +903,26 @@ onUnmounted(() => {
box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);
}

.motivation-field {
display: flex;
align-items: center;
gap: 0.75rem;
}

.motivation-slider {
flex: 1;
accent-color: #64748b;
cursor: pointer;
}

.motivation-value {
min-width: 2rem;
text-align: right;
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
}

/* --- Danger Zone --- */
.danger-zone {
display: flex;
Expand Down
1 change: 0 additions & 1 deletion apps/frontend/src/components/TaskList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@ function displayStatus(status: Item['status']): string {
letter-spacing: 0.02em;
}

/* 各ステータスの色味をグラスデザインに合わせ調整 */
.todo { background: var(--status-bg-todo); color: var(--status-text-todo); }
.inprogress { background: var(--status-bg-inprogress); color: var(--status-text-inprogress); }
.done { background: var(--status-bg-done); color: var(--status-text-done); }
Expand Down
10 changes: 6 additions & 4 deletions apps/frontend/src/composables/useSettings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const isInitialized = ref(false);
const messages = {
en: {
appTitle: 'TaskGraph',
aboutUs: 'About us',
specialThanks: 'Special Thanks',
helpTitle: 'How to use',
guestMode: 'Guest Mode',
Expand Down Expand Up @@ -95,6 +96,7 @@ const messages = {
},
ja: {
appTitle: 'TaskGraph',
aboutUs: 'About us',
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Japanese translation is missing for aboutUs.

The aboutUs key uses the English string 'About us' for both locales. Japanese users will see English text instead of a localized string. Consider providing a proper Japanese translation (e.g., '私たちについて' or 'アバウト').

🌐 Proposed fix 
-    aboutUs: 'About us',
+    aboutUs: '私たちについて',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
aboutUs: 'About us',
aboutUs: '私たちについて',
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/frontend/src/composables/useSettings.ts` at line 99, The aboutUs key in
the settings/locales object (look for the aboutUs entry in
apps/frontend/src/composables/useSettings.ts, e.g., inside the exported
settings/locales map) currently uses the English string 'About us' for all
locales; update the Japanese locale value for aboutUs to a proper Japanese
translation such as '私たちについて' (or 'アバウト') so Japanese users see a localized
label—modify the aboutUs entry within the same settings/locales object to
include the Japanese string for the Japanese locale.

specialThanks: '謝意',
helpTitle: '使い方',
guestMode: 'ゲストモード',
Expand All @@ -121,9 +123,9 @@ const messages = {
range1w: '1週間',
range2w: '2週間',
range1m: '1か月',
axisDuration: '時間',
axisDuration: '所要時間',
axisMotivation: 'モチベーション',
axisStatus: 'ステータス',
axisStatus: '状態',
visualNone: 'なし',
controlWindow: '表示範囲',
controlYAxis: 'Y軸',
Expand All @@ -145,7 +147,7 @@ const messages = {
drawerCancel: 'キャンセル',
drawerCreating: '作成中...',
drawerNoDescription: '説明なし',
drawerStatus: 'ステータス',
drawerStatus: '状態',
drawerStatusAriaView: '詳細画面のタスクステータス',
drawerStatusAriaEdit: '編集画面のタスクステータス',
drawerMotivation: 'モチベーション',
Expand All @@ -162,7 +164,7 @@ const messages = {
statusDone: '完了',
groupedTasks: 'グループ化タスク',
groupedTasksCount: '件のタスク',
statusPrefix: 'ステータス',
statusPrefix: '状態',
past: '過去',
future: '未来',
thanksClose: '閉じる',
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
--bg-danger-hover: #fef2f2;

--z-header: 20;
--z-dropdown: 40;
--z-dropdown: 5000;
--z-drawer: 50;
--z-modal: 1000;
Comment on lines +25 to 27
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Dropdown layer is now above modal/drawer overlays

Line 25 sets --z-dropdown to 5000, while Line 27 keeps modal at 1000 and drawers are 50 in TaskDrawer.vue. This can place header dropdowns above active modals/drawers and break overlay UX.

💡 Suggested z-index hierarchy fix 
-  --z-dropdown: 5000;
+  --z-dropdown: 40;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
--z-dropdown: 5000;
--z-drawer: 50;
--z-modal: 1000;
--z-dropdown: 40;
--z-drawer: 50;
--z-modal: 1000;
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/frontend/src/style.css` around lines 25 - 27, The dropdown z-index
(--z-dropdown) is higher than modals/drawers causing header dropdowns to appear
above overlays; change the CSS variable --z-dropdown to a value lower than
--z-drawer and --z-modal (e.g., set --z-dropdown to 40) and ensure
TaskDrawer.vue or any component that uses these variables relies on the updated
--z-* values so modals/drawers (--z-drawer and --z-modal) remain above
dropdowns.


Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/views/MainView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,7 +303,7 @@ watch(
position: absolute;
top: 0.85rem;
right: 0.9rem;
z-index: 80;
z-index: 10;
display: inline-flex;
gap: 0.5rem;
}
Expand Down
Loading