${apps.map(app => {
- const on = enabledIds.has(app.id);
+ const on = enabledIds.has(app.id);
const hidden = !editMode && !on ? ' hidden' : '';
const editCls = editMode ? ` edit-mode ${on ? 'on' : 'off'}` : '';
const bgStyle = isColorful
? `background:${color}14;border-color:${color}38;`
: '';
+ const isCustom = !!app.custom;
+ const isInitial = app.icon === '_initial';
+
+ const iconHTML = isInitial
+ ? `
${app.label.charAt(0).toUpperCase()}
`
+ : `
`;
+
+ const delBtn = isCustom
+ ? `
`
+ : '';
+
return `
-
+ style="${bgStyle}">
+ ${delBtn}
+ ${iconHTML}
${app.label}
@@ -810,7 +1158,7 @@ function renderApps() {
container.querySelectorAll('.app-item').forEach(el => {
const id = el.dataset.id;
- const app = APP_DB.find(a => a.id === id);
+ const app = allApps().find(a => a.id === id);
if (!app) return;
el.addEventListener('click', () => {
if (editMode) toggleApp(id);
@@ -825,6 +1173,13 @@ function renderApps() {
});
});
+ container.querySelectorAll('.custom-del-btn').forEach(btn => {
+ btn.addEventListener('click', e => {
+ e.stopPropagation();
+ deleteCustomApp(btn.dataset.delId);
+ });
+ });
+
lucide.createIcons();
}
@@ -870,7 +1225,7 @@ document.getElementById('apiKeySave').addEventListener('click', () => {
// ── リセット ────────────────────────────────────────────────
document.getElementById('resetBtn').addEventListener('click', () => {
- enabledIds = new Set(APP_DB.map(a => a.id));
+ enabledIds = new Set(allApps().map(a => a.id));
saveEnabled();
renderApps();
showToast('リセットしました');
@@ -884,6 +1239,110 @@ function showToast(msg) {
setTimeout(() => el.classList.remove('show'), 2200);
}
+// ── アプリ追加モーダル ───────────────────────────────────────
+let selectedIcon = null;
+
+function buildIconPicker() {
+ const grid = document.getElementById('iconPickerGrid');
+ grid.innerHTML = ICON_PICKER_ICONS.map(name => `
+
+ `).join('');
+
+ grid.querySelectorAll('.icon-pick-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ selectedIcon = btn.dataset.icon;
+ grid.querySelectorAll('.icon-pick-btn').forEach(b => b.classList.remove('selected'));
+ btn.classList.add('selected');
+ document.getElementById('iconInitialPick').classList.remove('selected');
+ validateAddForm();
+ });
+ });
+
+ lucide.createIcons();
+}
+
+function openAddModal() {
+ selectedIcon = null;
+ document.getElementById('addName').value = '';
+ document.getElementById('addCat').value = '';
+ document.getElementById('addAndroid').value = '';
+ document.getElementById('addIos').value = '';
+ document.getElementById('addWeb').value = '';
+ document.getElementById('addSubmitBtn').disabled = true;
+ document.getElementById('iconInitialPick').classList.remove('selected');
+ document.getElementById('initialPreviewChar').textContent = 'A';
+
+ buildIconPicker();
+
+ document.getElementById('addModalBackdrop').classList.add('open');
+ document.getElementById('addModal').classList.add('open');
+ document.getElementById('addName').focus();
+}
+
+function closeAddModal() {
+ document.getElementById('addModalBackdrop').classList.remove('open');
+ document.getElementById('addModal').classList.remove('open');
+}
+
+function validateAddForm() {
+ const name = document.getElementById('addName').value.trim();
+ const cat = document.getElementById('addCat').value;
+ const ok = name.length > 0 && cat.length > 0 && selectedIcon !== null;
+ document.getElementById('addSubmitBtn').disabled = !ok;
+}
+
+document.getElementById('addName').addEventListener('input', () => {
+ const firstChar = document.getElementById('addName').value.trim().charAt(0).toUpperCase() || 'A';
+ document.getElementById('initialPreviewChar').textContent = firstChar || 'A';
+ validateAddForm();
+});
+document.getElementById('addCat').addEventListener('change', validateAddForm);
+
+document.getElementById('iconInitialPick').addEventListener('click', () => {
+ selectedIcon = '_initial';
+ document.getElementById('iconInitialPick').classList.add('selected');
+ document.getElementById('iconPickerGrid').querySelectorAll('.icon-pick-btn')
+ .forEach(b => b.classList.remove('selected'));
+ validateAddForm();
+});
+
+document.getElementById('addSubmitBtn').addEventListener('click', () => {
+ const name = document.getElementById('addName').value.trim();
+ const cat = document.getElementById('addCat').value;
+ const android = document.getElementById('addAndroid').value.trim() || null;
+ const ios = document.getElementById('addIos').value.trim() || null;
+ const web = document.getElementById('addWeb').value.trim() || null;
+
+ if (!name || !cat || !selectedIcon) return;
+
+ const newApp = {
+ id: `custom-${Date.now()}`,
+ label: name,
+ icon: selectedIcon,
+ cat: cat,
+ android: android,
+ ios: ios,
+ web: web,
+ custom: true,
+ };
+
+ customApps.push(newApp);
+ saveCustomApps();
+ enabledIds.add(newApp.id);
+ saveEnabled();
+
+ closeAddModal();
+ showToast(`${name} を追加しました`);
+ renderApps();
+});
+
+document.getElementById('addAppBtn').addEventListener('click', openAddModal);
+document.getElementById('addModalClose').addEventListener('click', closeAddModal);
+document.getElementById('addModalBackdrop').addEventListener('click', closeAddModal);
+
// ── 時計 ────────────────────────────────────────────────────
const DAYS_JP = ['日','月','火','水','木','金','土'];