resolved comments

Author: aikhanj

bg.png

@@ -339,17 +339,27 @@ h3, h4 {
 
 .command-center-widgets {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: start;
   gap: 20px;
   width: 100%;
-  max-width: 1120px;
+  max-width: 1520px;
   margin: 0 auto;
   padding: 0 20px 48px 20px;
   position: relative;
   z-index: 10;
 }
 
+.command-center-widgets.columns-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  max-width: 1120px;
+}
+
+.command-center-widgets.columns-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  max-width: 1520px;
+}
+
 .widget-arrange-toolbar {
   width: 100%;
   max-width: 1120px;
@@ -445,10 +455,10 @@ h3, h4 {
   position: relative;
   border-radius: var(--radius-lg);
   transition:
-    transform 320ms var(--ease-apple),
-    box-shadow 320ms var(--ease-apple),
-    border-color 320ms var(--ease-apple),
-    background 320ms var(--ease-apple);
+    transform 220ms var(--ease-apple),
+    box-shadow 220ms var(--ease-apple),
+    border-color 220ms var(--ease-apple),
+    background 220ms var(--ease-apple);
 }
 
 .widget-slot.is-dragging {
@@ -462,7 +472,7 @@ h3, h4 {
 }
 
 .widget-slot.is-snapped {
-  animation: widgetSnap 420ms var(--ease-heavy);
+  animation: widgetSnap 280ms var(--ease-heavy);
 }
 
 .widget-slot-badge {
@@ -589,8 +599,13 @@ button:disabled {
 
 body {
   background-color: var(--bg-main);
-  background-image: radial-gradient(ellipse at 50% 0%, rgba(231, 117, 0, 0.06) 0%, transparent 60%);
-  background-size: 100vw 100vh;
+  background-image:
+    linear-gradient(180deg, rgba(8, 8, 10, 0.72) 0%, rgba(8, 8, 10, 0.84) 100%),
+    radial-gradient(ellipse at 50% 0%, rgba(231, 117, 0, 0.14) 0%, rgba(0, 0, 0, 0) 58%),
+    url("../public/bg.png");
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
   background-attachment: fixed;
   color: var(--text-primary) !important;
   min-height: 100vh;
@@ -654,6 +669,20 @@ body {
   min-height: 220px;
 }
 
+.today-news-source {
+  align-self: flex-start;
+  margin-bottom: 12px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(231, 117, 0, 0.35);
+  background: rgba(231, 117, 0, 0.12);
+  color: rgba(255, 231, 207, 0.95);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
 .today-news-link {
   display: inline-block;
   color: var(--text-primary);

extension/public/bg.png

@@ -26,43 +26,70 @@ const AVAILABLE_WIDGETS = [
 
 const DEFAULT_WIDGETS = ["dhall", "weather", "today"];
 const ALLOWED_WIDGET_IDS = new Set(AVAILABLE_WIDGETS.map((widget) => widget.id));
-type WidgetColumn = "left" | "right";
+const ALL_WIDGET_COLUMNS = ["left", "middle", "right"] as const;
+const MIN_WIDGET_COLUMNS = 2;
+const MAX_WIDGET_COLUMNS = 3;
+
+type WidgetColumn = (typeof ALL_WIDGET_COLUMNS)[number];
 type WidgetLayout = Record<WidgetColumn, string[]>;
 
-const WIDGET_COLUMNS: WidgetColumn[] = ["left", "right"];
+const getActiveColumns = (columnCount: number): WidgetColumn[] => {
+  const safeCount = Math.max(MIN_WIDGET_COLUMNS, Math.min(MAX_WIDGET_COLUMNS, columnCount));
+  return safeCount === 2 ? ["left", "right"] : ["left", "middle", "right"];
+};
+
+const createEmptyLayout = (): WidgetLayout => ({
+  left: [],
+  middle: [],
+  right: [],
+});
 
-const buildDefaultLayout = (widgets: string[]): WidgetLayout => {
-  const layout: WidgetLayout = { left: [], right: [] };
+const buildDefaultLayout = (widgets: string[], columnCount: number): WidgetLayout => {
+  const layout = createEmptyLayout();
+  const activeColumns = getActiveColumns(columnCount);
   widgets.forEach((widgetId, index) => {
-    const targetColumn: WidgetColumn = index % 2 === 0 ? "left" : "right";
+    const targetColumn = activeColumns[index % activeColumns.length];
     layout[targetColumn].push(widgetId);
   });
   return layout;
 };
 
 const normalizeWidgetLayout = (
   layout: Partial<WidgetLayout> | null,
-  activeWidgets: string[]
+  activeWidgets: string[],
+  columnCount: number
 ): WidgetLayout => {
+  const activeColumns = getActiveColumns(columnCount);
   const activeSet = new Set(activeWidgets);
   const seen = new Set<string>();
 
-  const sanitize = (ids?: string[]) =>
-    (ids || []).filter((id) => {
+  const normalized = createEmptyLayout();
+
+  // Keep explicit user ordering for currently active columns.
+  activeColumns.forEach((column) => {
+    normalized[column] = (layout?.[column] || []).filter((id) => {
       if (!activeSet.has(id) || seen.has(id)) return false;
       seen.add(id);
       return true;
     });
+  });
 
-  const normalized: WidgetLayout = {
-    left: sanitize(layout?.left),
-    right: sanitize(layout?.right),
-  };
+  // Re-home widgets from inactive columns + any new/missing widgets.
+  const extras = ALL_WIDGET_COLUMNS.filter((column) => !activeColumns.includes(column))
+    .flatMap((column) => layout?.[column] || [])
+    .filter((id) => activeSet.has(id) && !seen.has(id));
 
   activeWidgets.forEach((id) => {
+    if (!seen.has(id)) {
+      extras.push(id);
+    }
+  });
+
+  extras.forEach((id) => {
     if (seen.has(id)) return;
-    const targetColumn =
-      normalized.left.length <= normalized.right.length ? "left" : "right";
+    const targetColumn = activeColumns.reduce((shortest, candidate) =>
+      normalized[candidate].length < normalized[shortest].length ? candidate : shortest
+    );
     normalized[targetColumn].push(id);
     seen.add(id);
   });
@@ -79,6 +106,10 @@ function App() {
   const [draggingWidgetId, setDraggingWidgetId] = useState<string | null>(null);
   const [dropTargetKey, setDropTargetKey] = useState<string | null>(null);
   const [snappedWidgetId, setSnappedWidgetId] = useState<string | null>(null);
+  const [columnCount, setColumnCount] = useState<2 | 3>(() => {
+    const saved = storage.getLocalStorage(StorageKeys.WIDGET_COLUMN_COUNT);
+    return saved === "2" ? 2 : 3;
+  });
 
   const [activeWidgets, setActiveWidgets] = useState<string[]>(() => {
     const saved = storage.getLocalStorage(StorageKeys.ACTIVE_WIDGETS);
@@ -95,13 +126,13 @@ function App() {
   });
   const [widgetLayout, setWidgetLayout] = useState<WidgetLayout>(() => {
     const saved = storage.getLocalStorage(StorageKeys.WIDGET_LAYOUT);
-    if (!saved) return buildDefaultLayout(activeWidgets);
+    if (!saved) return buildDefaultLayout(activeWidgets, columnCount);
 
     try {
       const parsed = JSON.parse(saved) as Partial<WidgetLayout>;
-      return normalizeWidgetLayout(parsed, activeWidgets);
+      return normalizeWidgetLayout(parsed, activeWidgets, columnCount);
     } catch {
-      return buildDefaultLayout(activeWidgets);
+      return buildDefaultLayout(activeWidgets, columnCount);
     }
   });
 
@@ -130,13 +161,17 @@ function App() {
   }, [activeWidgets]);
 
   useEffect(() => {
-    setWidgetLayout((prev) => normalizeWidgetLayout(prev, activeWidgets));
-  }, [activeWidgets]);
+    setWidgetLayout((prev) => normalizeWidgetLayout(prev, activeWidgets, columnCount));
+  }, [activeWidgets, columnCount]);
 
   useEffect(() => {
     storage.setLocalStorage(StorageKeys.WIDGET_LAYOUT, JSON.stringify(widgetLayout));
   }, [widgetLayout]);
 
+  useEffect(() => {
+    storage.setLocalStorage(StorageKeys.WIDGET_COLUMN_COUNT, String(columnCount));
+  }, [columnCount]);
+
   const toggleWidget = (id: string) => {
     if (!ALLOWED_WIDGET_IDS.has(id)) return;
     setActiveWidgets(prev => 
@@ -163,14 +198,26 @@ function App() {
     if (!fromId) return;
 
     setWidgetLayout((prev) => {
-      const next = normalizeWidgetLayout(prev, activeWidgets);
-      next.left = next.left.filter((id) => id !== fromId);
-      next.right = next.right.filter((id) => id !== fromId);
-
-      const insertionIndex = Math.max(
-        0,
-        Math.min(toIndex, next[toColumn].length)
-      );
+      const next = normalizeWidgetLayout(prev, activeWidgets, columnCount);
+      let fromColumn: WidgetColumn | null = null;
+      let fromIndex = -1;
+
+      for (const column of ALL_WIDGET_COLUMNS) {
+        const index = next[column].indexOf(fromId);
+        if (index === -1 || fromColumn) continue;
+        fromColumn = column;
+        fromIndex = index;
+      }
+
+      if (!fromColumn) return next;
+
+      next[fromColumn] = next[fromColumn].filter((id) => id !== fromId);
+
+      let insertionIndex = Math.max(0, Math.min(toIndex, next[toColumn].length));
+      if (fromColumn === toColumn && fromIndex < toIndex) {
+        insertionIndex = Math.max(0, insertionIndex - 1);
+      }
+
       next[toColumn].splice(insertionIndex, 0, fromId);
       return next;
     });
@@ -180,6 +227,7 @@ function App() {
 
   const feedbackMailto =
     "mailto:aj5828@princeton.edu?subject=TodayCustom%20Feedback%20%28Free%20Coffee%29&body=Hey%20Khan%2C%0A%0AHere%20is%20my%20feedback%20for%20TodayCustom%3A%0A-%20%0A-%20%0A%0AThanks!";
+  const activeColumns = getActiveColumns(columnCount);
 
   return (
     <div className="App">
@@ -216,8 +264,10 @@ function App() {
           </div>
         )}
 
-        <div className={`command-center-widgets ${isArrangeMode ? "is-arranging" : ""}`}>
-          {WIDGET_COLUMNS.map((column) => (
+        <div
+          className={`command-center-widgets columns-${columnCount} ${isArrangeMode ? "is-arranging" : ""}`}
+        >
+          {activeColumns.map((column) => (
             <div
               key={column}
               className={[
@@ -264,16 +314,20 @@ function App() {
                   onDragOver={(e) => {
                     if (!isArrangeMode) return;
                     e.preventDefault();
+                    e.stopPropagation();
                     if (dropTargetKey !== `${column}:${widgetId}`) {
                       setDropTargetKey(`${column}:${widgetId}`);
                     }
                   }}
                   onDrop={(e) => {
                     if (!isArrangeMode) return;
                     e.preventDefault();
+                    e.stopPropagation();
                     const draggedId = e.dataTransfer.getData("text/plain");
                     const targetIndex = widgetLayout[column].indexOf(widgetId);
-                    moveWidget(draggedId, column, targetIndex);
+                    const slotRect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();
+                    const isDropAfter = e.clientY >= slotRect.top + slotRect.height / 2;
+                    moveWidget(draggedId, column, targetIndex + (isDropAfter ? 1 : 0));
                     setDraggingWidgetId(null);
                     setDropTargetKey(null);
                   }}
@@ -305,6 +359,8 @@ function App() {
         activeWidgets={activeWidgets}
         toggleWidget={toggleWidget}
         availableWidgets={AVAILABLE_WIDGETS}
+        columnCount={columnCount}
+        onColumnCountChange={setColumnCount}
       />
 
       <a

extension/src/App.css

@@ -207,6 +207,43 @@
   transform: translateX(20px);
 }
 
+.settings-layout-toggle {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.04);
+  padding: 8px;
+}
+
+.settings-layout-option {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 10px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-secondary, #a1a1aa);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 160ms var(--ease-apple), border-color 160ms var(--ease-apple), color 160ms var(--ease-apple), transform 160ms var(--ease-apple);
+}
+
+.settings-layout-option:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary, #ffffff);
+}
+
+.settings-layout-option:active {
+  transform: scale(0.98);
+}
+
+.settings-layout-option.active {
+  background: rgba(231, 117, 0, 0.2);
+  border-color: rgba(231, 117, 0, 0.7);
+  color: #fff;
+}
+
 .settings-upload-card {
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 14px;