Tags (with colors) + read-only calendar option and more

package.json

@@ -13,7 +13,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "format": "prettier --write --experimental-cli src/",
-    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.1.5/core.wasm",
+    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.1.6/core.wasm",
     "fetch-wasm-latest": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/latest/download/core.wasm"
   },
   "dependencies": {

src/App.vue

@@ -5,9 +5,10 @@ import { onBeforeMount, ref } from 'vue';
 import AlertModal from '@/components/modals/AlertModal.vue';
 import { createCalendarOnce } from '@/utils';
 import { syncAllWrapper } from '@/services/gitSync';
-import { settings } from './services/settings';
-import { useAlertModal } from './composables/modals/useAlertModal';
-import { notifyEventsChanged } from './composables/useEventsRefresh';
+import { settings } from '@/services/settings';
+import { useAlertModal } from '@/composables/modals/useAlertModal';
+import { notifyEventsChanged } from '@/composables/useEventsRefresh';
+import { loadCalendars } from '@/services/calendarCache';
 
 const { alert } = useAlertModal();
 
@@ -29,6 +30,8 @@ onBeforeMount(async () => {
     await CalendarCore.loadCalendars(); // load local first, they might change after with network pull
     sync();
 
+    await loadCalendars();
+
     coreReady.value = true;
   } catch (err) {
     alert(String(err));

src/assets/locales/cs.json

@@ -23,6 +23,7 @@
     "to": "Do",
     "entireDay": "Celý den",
     "calendar": "Kalendář",
+    "tag": "Štítek",
     "repeat": {
       "repeat": "Opakování",
       "end": "Konec",
@@ -41,7 +42,13 @@
     "username": "Uživatelské jméno",
     "password": "Heslo/Token",
     "encrypted": "Šifrování",
-    "decryptionKey": "Šifrovací heslo"
+    "encryptionKey": "Šifrovací heslo",
+    "readonly": "Pouze čtení"
+  },
+  "tag": {
+    "name": "Jméno",
+    "color": "Barva",
+    "notag": "Bez štítku"
   },
   "views": {
     "4days": "4 dny",
@@ -85,5 +92,15 @@
   "message": {
     "confirmCalendarDelete": "Chcete opravdu smazat celý kalenář?",
     "errorRemoteUrlEndDotGit": "Remote URL musí končit \".git\"."
+  },
+  "colors": {
+    "blue": "Modrá",
+    "green": "Zelená",
+    "red": "Červená",
+    "purple": "Fialová",
+    "yellow": "Žlutá",
+    "orange": "Oranžová",
+    "pink": "Růžová",
+    "gray": "Šedá"
   }
 }

src/assets/locales/en.json

@@ -23,6 +23,7 @@
     "to": "Till",
     "entireDay": "Entire day",
     "calendar": "Calendar",
+    "tag": "Tag",
     "repeat": {
       "repeat": "Repeat",
       "end": "End",
@@ -41,7 +42,13 @@
     "username": "Username",
     "password": "Password/Token",
     "encrypted": "Encrypted",
-    "decryptionKey": "Encryption key/password"
+    "encryptionKey": "Encryption key/password",
+    "readonly": "Read-only"
+  },
+  "tag": {
+    "name": "Name",
+    "color": "Color",
+    "notag": "Untagged"
   },
   "views": {
     "4days": "4 days",
@@ -85,5 +92,15 @@
   "message": {
     "confirmCalendarDelete": "Do you really want to delete the whole calendar?",
     "errorRemoteUrlEndDotGit": "Remote URL must end with \".git\"."
+  },
+  "colors": {
+    "blue": "Blue",
+    "green": "Green",
+    "red": "Red",
+    "purple": "Purple",
+    "yellow": "Yellow",
+    "orange": "Orange",
+    "pink": "Pink",
+    "gray": "Gray"
   }
 }

src/assets/locales/git.json

@@ -19,5 +19,15 @@
     "compiling": "Building...",
     "starting": "Running...",
     "done": "Ready!"
+  },
+  "colors": {
+    "blue": "Commit Blue",
+    "green": "Addition Green (+)",
+    "red": "Deletion Red (-)",
+    "purple": "Merged Purple",
+    "yellow": "Stash Yellow",
+    "orange": "Rebase Orange",
+    "pink": "Fetch Pink",
+    "gray": "Docs Gray"
   }
 }

src/assets/styles.css

@@ -120,7 +120,6 @@ input[type='checkbox'] {
   width: 1rem;
   height: 1rem;
   padding: 0;
-  margin-bottom: 2px;
   vertical-align: middle;
   cursor: pointer;
 }
@@ -130,7 +129,7 @@ input[type='checkbox']::before {
   position: absolute;
   inset: 0;
   border-radius: var(--small-border-radius);
-  background-color: var(--btn-bg-color);
+  background-color: var(--sidebar-btn-bg-color);
 }
 
 input[type='checkbox']:checked::before {
@@ -182,13 +181,49 @@ input.red,
       resize: vertical;
       min-height: 2rem;
     }
+
+    fieldset {
+      display: contents;
+      border: 0;
+      padding: 0;
+      margin: 0;
+
+      &:disabled label,
+      &:disabled .dates > span,
+      &:disabled > #git-credentials {
+        opacity: 0.5;
+      }
+
+      &:disabled select {
+        opacity: 1; /* it was dimmed 2 times idk */
+      }
+    }
+
+    label:has(select) {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+
+      select {
+        flex: 1 1 auto;
+      }
+    }
   }
 
   .bottom-btns {
     justify-content: center;
 
     display: flex;
     gap: 1rem;
+
+    .delete-btn {
+      border: 1px solid var(--git-color);
+      background-color: var(--btn-red-bg-color);
+
+      &:hover:not(:focus):not(:disabled) {
+        background-color: var(--btn-red-bg-color-hover);
+      }
+    }
   }
 
   @media (max-width: 768px) {

src/assets/themes.css

@@ -7,10 +7,11 @@
 [data-theme='dark'] {
   --bg-color: #1a1a1a;
   --text-color: #c1c1c1;
+  --text-color-harder: #d9d9d9;
   --text-color-hard: #fff;
 
   --btn-bg-color: #2b2b2b;
-  --btn-bg-color-hover: color-mix(in srgb, var(--btn-bg-color), white 3%);
+  --btn-bg-color-hover: color-mix(in srgb, var(--btn-bg-color), white 5%);
   --btn-bg-color-checked: color-mix(in srgb, var(--btn-bg-color), white 10%);
   --btn-red-bg-color: color-mix(in srgb, var(--git-color), black 50%);
   --btn-red-bg-color-hover: color-mix(in srgb, var(--git-color), black 40%);
@@ -19,14 +20,41 @@
   --git-bg-color: color-mix(in srgb, var(--git-color-real), black 30%);
 
   --sidebar-color: #242424;
+  --sidebar-btn-bg-color: #333;
+  --sidebar-btn-bg-hover-color: color-mix(in srgb, var(--sidebar-btn-bg-color), white 5%);
   --sidebar-hover-color: color-mix(in srgb, transparent, white 10%);
 
   --grid-color: #262626;
+
+  /* old:
+  --event-color-blue: #6495ed;
+  --event-color-green: #2ea043;
+  --event-color-red: #ee3a49;
+  --event-color-purple: #8250df;
+  --event-color-yellow: #d9a520;
+  --event-color-orange: #f66a0a;
+  --event-color-pink: #e84393;
+  --event-color-teal: #009688;
+  --event-color-gray: #9d9c9d;*/
+
+  --event-color-blue: #00579f;
+  --event-color-green: #0d7b00;
+  --event-color-red: #af0800;
+  --event-color-purple: #7a218f;
+  --event-color-yellow: #fdc700;
+  --event-color-orange: #e85d04;
+  --event-color-pink: #ff5ba1;
+  --event-color-teal: #00a8ad;
+  --event-color-gray: #777777;
+  --event-color-brown: #755020;
+
+  --event-color-git: #f03c2e;
 }
 
 [data-theme='light'] {
   --bg-color: #f2f2f2;
-  --text-color: #101010;
+  --text-color: #1a1a1a;
+  --text-color-harder: #101010;
   --text-color-hard: #000;
 
   --btn-bg-color: #d5d5d5;
@@ -39,6 +67,7 @@
   --git-bg-color: color-mix(in srgb, var(--git-color-real), white 10%);
 
   --sidebar-color: #eaeaea;
+  --sidebar-btn-bg-color: #ddd;
   --sidebar-hover-color: color-mix(in srgb, transparent, black 10%);
 
   --grid-color: #d1d1d1;

src/colors.ts

@@ -0,0 +1,30 @@
+import { settings } from './services/settings';
+
+export const colorsList = [
+  'blue',
+  'green',
+  'red',
+  'purple',
+  'yellow',
+  'orange',
+  'pink',
+  'teal',
+  'brown',
+  'gray',
+] as const;
+
+export type ColorId = (typeof colorsList)[number];
+
+// Just returns the CSS variable name
+export function getEventColorCSSVariable(colorId: ColorId): string {
+  return `var(--event-color-${colorId})`;
+}
+
+export function getColorI18nKey(id: ColorId): string {
+  return `colors.${id}`;
+}
+
+export function toColorId(color?: string): ColorId {
+  if (colorsList.includes(color as ColorId)) return color as ColorId;
+  else return settings.value.defaultEventColor;
+}