Setup intelligence (#84)

* Add next suggestions and remove console logs

* Add pomodoro timer

* Add pomodoro switch in settings

* Fix pomodoro setting

* Add timezones to settings

* Fix an issue with password reset

* Cleanup

* Sort tags alphabetically

* Clean up today's view

* Add an indicator for repeatedly added to today

* Refactor tags

* Add due date today item

* Move recurrence to the subtitle area

* Fix today layout

* Add a badge to Inbox items

* Move inbox badge to sidebar

* Add quotes and progress bar

* Add translations for quotes

* Fix test issues

* Add helper script for docker local

* Set up overdue tasks

* Add  linux/arm/v7 build to deploy script

* Add  linux/arm/v7 build to deploy script pt2

* Fix an issue with helmet and SSL

* Add volume db persistence

* Fix cog icon issues

frontend/components/Shared/CollapsibleSection.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+
+interface CollapsibleSectionProps {
+  title: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  isExpanded,
+  onToggle,
+  children,
+  className = ""
+}) => {
+  return (
+    <div className={`border-b border-gray-200 dark:border-gray-700 ${className}`}>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+      >
+        <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          {title}
+        </span>
+        {isExpanded ? (
+          <ChevronDownIcon className="h-4 w-4 text-gray-500" />
+        ) : (
+          <ChevronRightIcon className="h-4 w-4 text-gray-500" />
+        )}
+      </button>
+      
+      <div className={`transition-all duration-300 ease-in-out ${
+        isExpanded ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0 overflow-hidden'
+      }`}>
+        <div className="px-4 pb-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CollapsibleSection;