TIDY-449 - design improvements

Author: thyaravind

client/components/calendar/birdView/Birdview.svelte

@@ -24,7 +24,7 @@
 
   let {
     mode = TimeScaleUnit.DAY,
-    birthdate = new Date(1995, 3, 10),
+    birthdate = undefined,
     groupByBirthdate = true,
     yearPhases = []
   }: {

client/components/calendar/birdView/Roller.svelte

@@ -76,9 +76,7 @@
     config: RollerConfig;
     items: any[];
     selectedItem?: string | number;
-    handleWheelEvent: (
-      e: WheelEvent | ProgrammedVerticalWheelEvent
-    ) => void;
+    handleWheelEvent: (e: WheelEvent | ProgrammedVerticalWheelEvent) => void;
     container?: HTMLDivElement;
     onMount?: ((scrollToSelectedItem: () => void) => void) | undefined;
   } = $props();
@@ -154,10 +152,24 @@
     return year;
   }
 
-  function resolveYearSuffix(year: number) {
+  function resolveYearDecadeAgePrefix(year: number) {
     if (!isGroupedByBirthdate() || !shouldRenderYearDivider(year))
       return undefined;
-    return getAgeSuffix(year) || undefined;
+    const ageText = getAgeSuffix(year);
+    return ageText ? `${ageText}s` : undefined;
+  }
+
+  function resolveYearPrefix(year: number) {
+    const decadePrefix = resolveYearDecadeAgePrefix(year);
+    if (decadePrefix) return decadePrefix;
+    if (!isGroupedByBirthdate()) return undefined;
+    const y = Number(year);
+    const selectedYear = Number(selectedItem);
+    const matchesHighlight =
+      Number.isFinite(selectedYear) && y === selectedYear;
+    if (!matchesHighlight) return undefined;
+    const ageText = getAgeSuffix(year);
+    return ageText || undefined;
   }
 
   function resolveMonthLabel(year: number, month: string, index: number) {
@@ -166,13 +178,6 @@
     return label;
   }
 
-  function resolveMonthSuffix(year: number, index: number) {
-    if (!isGroupedByBirthdate() || index != birthdateParts.monthIndex) {
-      return undefined;
-    }
-    return getAgeSuffix(year) || undefined;
-  }
-
   function isBirthday(prefix: string, item: string) {
     if (!birthdateParts) return false;
     return (
@@ -211,9 +216,14 @@
   }
 
   function getDayLabel(prefix: string, item: string) {
-    return Number(item) == 1
-      ? `${prefix.slice(getFirstAlphabetPosition(prefix))} ${item}`
-      : item;
+    const n = Number(item);
+    if (n == 1) {
+      return `${prefix.slice(getFirstAlphabetPosition(prefix))} ${item}`;
+    }
+    if (Number.isFinite(n) && n >= 2 && n <= 9 && String(item).length == 1) {
+      return `0${item}`;
+    }
+    return item;
   }
 
   function getDayAdornment(prefix: string, item: string) {
@@ -503,16 +513,15 @@
               {config}
               item={month}
               label={resolveMonthLabel(item, month, index)}
-              suffix={resolveMonthSuffix(item, index)}
-              prefix={item}
+              context={item}
               bind:selectedItem
               {handleClick}
             />
           {/each}
         {:else}
           <RollerButton
             {config}
-            prefix={config.itemType == Itemtype.YEAR
+            context={config.itemType == Itemtype.YEAR
               ? ""
               : item.slice(0, getLastAlphabetPosition(item) + 1)}
             label={config.itemType == Itemtype.DAY
@@ -523,8 +532,8 @@
               : config.itemType == Itemtype.YEAR
                 ? resolveYearLabel(item)
                 : undefined}
-            suffix={config.itemType == Itemtype.YEAR
-              ? resolveYearSuffix(item)
+            prefix={config.itemType == Itemtype.YEAR
+              ? resolveYearPrefix(item)
               : undefined}
             adornment={config.itemType == Itemtype.DAY
               ? getDayAdornment(

client/components/calendar/birdView/RollerButton.svelte

@@ -11,7 +11,8 @@
     adornment,
     selectedItem = $bindable(),
     handleClick,
-    prefix = ""
+    prefix,
+    context = ""
   }: {
     config: any;
     item: any;
@@ -21,6 +22,7 @@
     selectedItem?: any;
     handleClick: (value: any) => void;
     prefix?: string;
+    context?: string;
   } = $props();
 
   const currYear = new Date().getFullYear();
@@ -41,7 +43,7 @@
   ];
   const currMonth = monthNames[currMonthIndex];
   const currDate = new Date().getDate();
-  const isSelected = $derived(selectedItem == prefix + item);
+  const isSelected = $derived(selectedItem == context + item);
   const state = $derived.by(() => {
     switch (config.itemType) {
       case Itemtype.YEAR:
@@ -51,25 +53,25 @@
         };
       case Itemtype.MONTH:
         return {
-          isToday: currYear == Number(prefix) && currMonth == item,
+          isToday: currYear == Number(context) && currMonth == item,
           isPast:
-            currYear > Number(prefix) ||
-            (currYear == Number(prefix) &&
+            currYear > Number(context) ||
+            (currYear == Number(context) &&
               currMonthIndex > monthNames.indexOf(item))
         };
       case Itemtype.DAY: {
-        const firstAlphIndex = getFirstAlphabetPosition(prefix);
+        const firstAlphIndex = getFirstAlphabetPosition(context);
         return {
           isToday:
-            currYear == Number(prefix.slice(0, firstAlphIndex)) &&
-            currMonth == prefix.slice(-3) &&
+            currYear == Number(context.slice(0, firstAlphIndex)) &&
+            currMonth == context.slice(-3) &&
             currDate == Number(item),
           isPast:
-            currYear > Number(prefix.slice(0, firstAlphIndex)) ||
-            (currYear == Number(prefix.slice(0, firstAlphIndex)) &&
-              currMonthIndex > monthNames.indexOf(prefix.slice(-3))) ||
-            (currYear == Number(prefix.slice(0, firstAlphIndex)) &&
-              currMonthIndex == monthNames.indexOf(prefix.slice(-3)) &&
+            currYear > Number(context.slice(0, firstAlphIndex)) ||
+            (currYear == Number(context.slice(0, firstAlphIndex)) &&
+              currMonthIndex > monthNames.indexOf(context.slice(-3))) ||
+            (currYear == Number(context.slice(0, firstAlphIndex)) &&
+              currMonthIndex == monthNames.indexOf(context.slice(-3)) &&
               currDate > Number(item))
         };
       }
@@ -90,24 +92,35 @@
   )}
   style="height:{config.itemHeight}px;"
   {...{
-    [`data-${config.itemType}`]: `${prefix}${item}`
+    [`data-${config.itemType}`]: `${context}${item}`
   }}
   onclick={() => {
-    handleClick(prefix + item);
+    handleClick(context + item);
   }}
   onkeydown={(event) => {
     if (event.key === "Enter") {
-      handleClick(prefix + item);
+      handleClick(context + item);
     }
   }}
 >
   <span class="flex w-full items-center justify-center">
     <span class="relative inline-flex items-center justify-center">
-      <span>{label ?? item}</span>
+      {#if prefix}
+        <span
+          class={cn(
+            "absolute right-full mr-1 top-1/2 -translate-y-1/2 rounded-md px-1 py-0.5 text-b5 leading-none tabular-nums",
+            { "bg-aps3 text-aps1": isSelected },
+            { "bg-bgs3 text-fgs3": !isSelected }
+          )}
+        >
+          {prefix}
+        </span>
+      {/if}
+      <span class="tabular-nums">{label ?? item}</span>
       {#if suffix}
         <span
           class={cn(
-            "absolute left-full ml-1 top-1/2 -translate-y-1/2 rounded-full px-1.5 py-0.5 text-b5 leading-none",
+            "absolute left-full ml-1 top-1/2 -translate-y-1/2 rounded-md px-1 py-0.5 text-b5 leading-none tabular-nums",
             { "bg-aps3 text-aps1": isSelected },
             { "bg-bgs3 text-fgs3": !isSelected }
           )}

client/components/calendar/birdView/RollerPicker.svelte

@@ -351,12 +351,9 @@
       itemHeight: rollerItemHeight,
       containerHeight: containerHeight
     };
-    if (mode == TimeScaleUnit.PART)
-      onSelectedDateChange?.(selectedDate);
-    else if (mode == TimeScaleUnit.DAY)
-      onSelectedMonthChange?.(selectedMonth);
-    else if (mode == TimeScaleUnit.MONTH)
-      onSelectedYearChange?.(selectedYear);
+    if (mode == TimeScaleUnit.PART) onSelectedDateChange?.(selectedDate);
+    else if (mode == TimeScaleUnit.DAY) onSelectedMonthChange?.(selectedMonth);
+    else if (mode == TimeScaleUnit.MONTH) onSelectedYearChange?.(selectedYear);
 
     onMount?.({
       handleDaysWheelEvent,
@@ -366,7 +363,10 @@
   });
 </script>
 
-<div class="relative flex bg-bgs2" bind:clientHeight={containerHeight}>
+<div
+  class="relative flex bg-bgs1 border-r border-brs2"
+  bind:clientHeight={containerHeight}
+>
   <Roller
     handleWheelEvent={handleYearsWheelEvent}
     items={years}

client/components/combination/CreateCombination.svelte

@@ -16,35 +16,35 @@
   import { CombinationType } from "@21n/components/combination/combination.type";
 
   let label = "";
-  let type: CombinationType = CombinationType.SIDENAV;
+  let type: CombinationType = CombinationType.NOTEBOOK;
   let error: string | undefined = undefined;
   const typeOptions: ISelectItem[] = [
     {
-      label: "Side nav",
+      label: "Notebook",
       icon: "sidebar",
-      value: CombinationType.SIDENAV
-    },
-    {
-      label: "Wall",
-      icon: "widget",
-      value: CombinationType.WALL,
-      isDisabled: true,
-      badge: "planned"
+      value: CombinationType.NOTEBOOK
     },
+    // {
+    //   label: "Wall",
+    //   icon: "widget",
+    //   value: CombinationType.WALL,
+    //   isDisabled: true,
+    //   badge: "planned"
+    // },
     {
       label: "Canvas",
       icon: "canvas",
-      value: CombinationType.WHITEBOARD,
-      isDisabled: true,
-      badge: "planned"
-    },
-    {
-      label: "Mind map",
-      icon: "tree-view",
-      value: CombinationType.MINDMAP,
+      value: CombinationType.CANVAS,
       isDisabled: true,
       badge: "planned"
     }
+    // {
+    //   label: "Mind map",
+    //   icon: "tree-view",
+    //   value: CombinationType.MINDMAP,
+    //   isDisabled: true,
+    //   badge: "planned"
+    // }
   ];
 
   async function onSave() {
@@ -53,7 +53,7 @@
       error = "Name is required";
       return;
     }
-    if (type !== CombinationType.SIDENAV) {
+    if (type !== CombinationType.NOTEBOOK) {
       toasts.error("Only side nav combinations are supported currently");
       return;
     }
@@ -74,14 +74,17 @@
     <div class="flex flex-col gap-6 w-full h-full">
       <TextInput
         label={{
-          label: "Name of the combination",
+          label: "Name of the space",
           orientation: Orientation.Vertical
         }}
-        placeholder="Some combination"
+        placeholder="School, Project X, Work, etc."
         bind:value={label}
       />
       <OptionSelector
-        labelProps={{ label: "Type of combination" }}
+        labelProps={{
+          label: "Layout of the space",
+          orientation: Orientation.Vertical
+        }}
         style={OptionSelectorStyle.TRAIN}
         options={typeOptions}
         bind:selected={type}

client/components/combination/combination.type.ts

@@ -58,13 +58,36 @@ export interface IActiveCombination
 }
 
 export enum CombinationType {
+  /**
+   * @deprecated - use {@link CombinationType.NOTEBOOK} instead.
+   * Side nav is now a view type in notebook.
+   * 
+   * A markdown page can be inserted as a sub side nav (TOC becomes the hierarchy).
+   */
   SIDENAV = "sidenav",
+  /**
+   * @deprecated - use {@link CombinationType.CANVAS} instead.
+   */
   WHITEBOARD = "whiteboard",
+  /**
+   * @deprecated - use {@link CombinationType.CANVAS} instead.
+   * 
+   * A canvas can have option to insert a mind map.
+   * A markdown page can be inserted as a mind map (TOC becomes the hierarchy).
+   */
   MINDMAP = "mindmap",
+  /**
+   * @deprecated - use {@link CombinationType.NOTEBOOK} instead. WALL is now a view type in notebook.
+   * 
+   * Infinitely deep structured layout.
+   * A markdown page can be inserted as sub wall (TOC becomes the hierarchy).
+   */
   WALL = "wall",
   /**
    * @deprecated - use horizontal stack and vertical stack when Calendar scope is activated in Calendar instead.
    * Previous - Pyramid, Funnel views merged into regular timeline view.
    */
-  TIMELINE = "timeline"
+  TIMELINE = "timeline",
+  NOTEBOOK = "notebook",
+  CANVAS = "canvas"
 }