2.5.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Paper Change Log
 
+### 2.5.0
+
+_2023-05-07_
+
+- Various UI updates, bug fixes, and other small changes.
+
 ### 2.4.2
 
 _2023-05-02_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paper.nu",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "private": true,
   "homepage": "https://www.paper.nu",
   "dependencies": {

src/App.tsx

@@ -219,12 +219,14 @@ class App extends React.Component<{}, AppState> implements AppType {
     let params = new URLSearchParams(window.location.search);
     let hash = window.location.hash;
 
-    let code = params.get('code');
+    const code = params.get('code');
     params.delete('code');
-    let state = params.get('state');
+    const state = params.get('state');
     params.delete('state');
-    let action = params.get('action');
+    const action = params.get('action');
     params.delete('action');
+    const search = params.get('fs');
+    params.delete('fs');
 
     if (this.state.switches.get.use_url) {
       window.history.replaceState(
@@ -258,6 +260,10 @@ class App extends React.Component<{}, AppState> implements AppType {
       }
     }
 
+    if (search) {
+      this.state.ff.set(search);
+    }
+
     if (code && state) {
       d('query has code and state, logging in');
       Account.logIn(code, state).then((response) => {

src/app/ChangeLogPreview.ts

@@ -3,21 +3,15 @@ import { ChangeLogPreviewInformation } from '../types/BaseTypes';
 const clp: ChangeLogPreviewInformation = {
   items: [
     {
-      title: 'Room finder links!',
+      title: 'Northwestern Discord Integration!',
       description:
-        "You can now get a direct link to a room on Tech Room Finder right from Paper! No need to find the room name on Paper just to have to search it again on the room finder if you're not sure where in Tech your class is. Just open the info side card by clicking on a course section and click on the room name.",
-    },
-    {
-      title: 'UI and feature updates to the plan view.',
-      description:
-        'The plan view search UI has been updated and is now more similar to the search UI in the schedule view. You can also now remove the summer quarter from a year without having to remove all of the courses and refreshing the page.',
-    },
-    {
-      title: 'Course topics are finally here. (v2.3)',
-      description:
-        'Seminar courses (first-year seminars, special topics, special projects, etc.) and other courses with specified topics now have their topics displayed in Paper (schedule view). Find course topics in search results, on the schedule, and in the course info side card.',
+        'Easily share course information in chat while talking about classes with friends on the Northwestern Discord server! Just use "/course". Did you know you can see all of the latest dining hall menus in "#menu" without having to wait a millennium for Dine On Campus to load? And you can join thousands of other Northwestern students, alumni, applicants, faculty, and staff?? Join it now???? Or you\'ll be banned from Paper for life. Just kidding. But still.',
     },
   ],
+  link: {
+    text: 'Join the NU Discord 🥺',
+    url: 'https://discord.gg/northwestern-655629737888055317',
+  },
 };
 
 export default clp;

src/components/menu/ChangeLogPreview.tsx

@@ -73,8 +73,8 @@ function ChangeLogPreview({
                   <ul className="w-full list-disc">
                     {info.items.map(({ title, description }, i) => (
                       <li className="my-4" key={`clp-item-${i}`}>
-                        <p className="font-medium">{title}</p>
-                        <p className="text-sm font-light">{description}</p>
+                        <p className="font-bold">{title}</p>
+                        <p className="text-sm font-normal">{description}</p>
                       </li>
                     ))}
                   </ul>
@@ -96,13 +96,19 @@ function ChangeLogPreview({
                                 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-100 active:bg-gray-200 active:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600
                                 dark:active:bg-gray-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                     onClick={() => {
+                      if (info.link) {
+                        window.open(info.link.url, '_blank');
+                        return;
+                      }
                       window.open(
                         'https://www.dilanxd.com/paper/changelog',
                         '_blank'
                       );
                     }}
                   >
-                    View all changes in v{version}
+                    {info.link
+                      ? info.link.text
+                      : `View all changes in v${version}`}
                   </button>
                 </div>
               </Dialog.Panel>

src/components/menu/about/About.tsx

@@ -37,7 +37,7 @@ const versions: InfoSetData = [
   [
     'API Version',
     async () => {
-      const response = await fetch(Account.SERVER + '/info');
+      const response = await fetch(Account.SERVER);
       const data = await response.json();
       return data.version;
     },

src/components/menu/toolbar/Toolbar.tsx

@@ -5,6 +5,7 @@ import {
   InformationCircleIcon,
   MapIcon,
   PencilSquareIcon,
+  QuestionMarkCircleIcon,
   UserCircleIcon,
 } from '@heroicons/react/24/outline';
 import { CalendarIcon, RectangleStackIcon } from '@heroicons/react/24/solid';
@@ -90,15 +91,37 @@ function Toolbar({
           ) : (
             <RectangleStackIcon className="h-5 w-5" />
           )}
-          <p className="overflow-hidden text-ellipsis whitespace-nowrap">
+          <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
             {activeItem}
           </p>
         </div>
       )}
       <div className="flex gap-1">
         <ToolbarButton
           icon={InformationCircleIcon}
-          onClick={() => openAboutMenu()}
+          active={contextMenuData?.name === 'about'}
+          onClick={(x, y) => {
+            contextMenu({
+              name: 'about',
+              x,
+              y,
+              theme,
+              items: [
+                {
+                  text: 'About',
+                  icon: InformationCircleIcon,
+                  onClick: () => openAboutMenu(),
+                },
+                {
+                  text: 'Help',
+                  icon: QuestionMarkCircleIcon,
+                  onClick: () => {
+                    window.open('https://kb.dilanxd.com/paper', '_blank');
+                  },
+                },
+              ],
+            });
+          }}
         >
           About
         </ToolbarButton>
@@ -130,7 +153,6 @@ function Toolbar({
         >
           Notes
         </ToolbarButton>
-
         <ToolbarButton
           icon={ArrowTopRightOnSquareIcon}
           active={contextMenuData?.name === 'export'}

src/components/menu/toolbar/ToolbarButton.tsx

@@ -39,7 +39,7 @@ function ToolbarButton({
       }`}
     >
       <p className="hidden md:block">{children}</p>
-      <Icon className="h-6 w-6 stroke-2 md:h-5 md:w-5" />
+      <Icon className="h-5 w-5 stroke-2 md:h-5 md:w-5" />
     </button>
   );
 }

src/components/search/Search.tsx

@@ -193,8 +193,11 @@ class Search extends React.Component<SearchProps, SearchState> {
             ? [
                 <div key="no-query">
                   <MiniContentBlock icon={MagnifyingGlassIcon} title="Search">
-                    Use the search bar to search across every course at
-                    Northwestern and view detailed information for each one.
+                    Search across every course at Northwestern and view detailed
+                    information for each one using the{' '}
+                    <span className="font-medium">search bar</span>, along with
+                    the <span className="font-medium">browse</span> and{' '}
+                    <span className="font-medium">filter</span> buttons above.
                   </MiniContentBlock>
                   <MiniContentBlock icon={ArrowRightIcon} title="Drag">
                     Drag courses from this search area into the quarter you
@@ -203,43 +206,50 @@ class Search extends React.Component<SearchProps, SearchState> {
                   </MiniContentBlock>
                   <MiniContentBlock icon={CloudIcon} title="Save">
                     Easily create an account to save multiple plans and access
-                    them from anywhere.
+                    them from anywhere, right from the{' '}
+                    <span className="font-medium">Schedules</span> tab at the
+                    bottom.
                   </MiniContentBlock>
                   <MiniContentBlock
                     icon={ArrowTopRightOnSquareIcon}
                     title="Share"
                   >
-                    The URL updates as you modify your plan. Share it with
-                    others and they'll have a copy that they can view and edit.
+                    Plans are built to be sharable. Just use the{' '}
+                    <span className="font-medium">Export</span> button to share
+                    a link to a copy of your plan.
                   </MiniContentBlock>
                 </div>,
               ]
             : [
                 <div key="no-query">
                   <MiniContentBlock icon={MagnifyingGlassIcon} title="Search">
-                    Use the search bar to search across every course offered{' '}
+                    Search across every course offered{' '}
                     <span className="font-bold">{this.props.term?.name}</span>{' '}
                     at Northwestern and view detailed information for each one.
                     Search courses by subject and number, title, time slot,
-                    instructor, or location.
+                    instructor, or location using the{' '}
+                    <span className="font-medium">search bar</span>, along with
+                    the <span className="font-medium">browse</span> and{' '}
+                    <span className="font-medium">filter</span> buttons above.
                   </MiniContentBlock>
                   <MiniContentBlock icon={ArrowRightIcon} title="Add">
                     Add any of the sections for a course to your schedule and
                     watch as they appear at the appropriate time.
                   </MiniContentBlock>
                   <MiniContentBlock icon={CloudIcon} title="Save">
                     Easily create an account to save multiple schedules and
-                    access them from anywhere. You can even add custom blocks to
-                    your account schedules.
+                    access them from anywhere, right from the{' '}
+                    <span className="font-medium">Schedules</span> tab at the
+                    bottom.
                   </MiniContentBlock>
                   <MiniContentBlock
                     icon={ArrowTopRightOnSquareIcon}
                     title="Share"
                   >
-                    The URL updates as you modify your schedule. Share it with
-                    others and they'll have a copy that they can view and edit.
-                    You can also export your schedule as an image or to your
-                    calendar app.
+                    Schedules are built to be sharable. Just use the{' '}
+                    <span className="font-medium">Export</span> button to share
+                    your schedule as an image or a link, or export it to your
+                    calendar.
                   </MiniContentBlock>
                 </div>,
               ],
@@ -367,28 +377,22 @@ class Search extends React.Component<SearchProps, SearchState> {
     );
 
     const queryEmpty = search.length === 0;
-
     const loading = this.props.loading || !this.props.term;
-
     const mapSection: ScheduleSection =
       this.props.scheduleInteractions.previewSection.get ||
       this.props.schedule.schedule[
         this.props.scheduleInteractions.hoverSection.get || ''
       ];
-
     const roomFinderAvailable = mapSection?.room?.some((r) =>
       r?.toLowerCase().includes('tech')
     );
-
     const isBrowsing = searchMode === SearchMode.BROWSE || filter.get.subject;
-
     const isBrowsingDeep =
       (searchMode === SearchMode.BROWSE && this.state.browseSchool) ||
       filter.get.subject;
-
     const termName = this.props.term?.name ?? '-';
-
     const isSchedule = appMode === Mode.SCHEDULE;
+    const usingFilters = Object.keys(filter.get).length > 0;
 
     return (
       <div
@@ -455,7 +459,7 @@ class Search extends React.Component<SearchProps, SearchState> {
                   </span>
                 </p>
               )}
-              {Object.keys(filter.get).length > 0 && (
+              {usingFilters && (
                 <SearchFilterDisplay filter={filter} appMode={appMode} />
               )}
               {queryEmpty && (
@@ -507,6 +511,7 @@ class Search extends React.Component<SearchProps, SearchState> {
                   <SearchButton
                     fullWidth={!isSchedule}
                     tooltip="Filter"
+                    color={usingFilters ? 'orange' : undefined}
                     action={() => {
                       this.props.alert({
                         title: 'Edit search filters',

src/components/search/SearchScheduleSection.tsx

@@ -37,9 +37,9 @@ function SearchScheduleSection({
 }: SearchScheduleSectionProps) {
   const disabled =
     alreadyAdded ||
-    !section.meeting_days ||
-    !section.start_time ||
-    !section.end_time;
+    !section.meeting_days?.length ||
+    !section.start_time?.length ||
+    !section.end_time?.length;
 
   const meetingPatterns = [];
 

src/types/BaseTypes.ts

@@ -133,6 +133,10 @@ export interface ChangeLogPreviewInformation {
     title: string;
     description?: string;
   }[];
+  link?: {
+    text: string;
+    url: string;
+  };
 }
 
 export interface ContextMenuData {

src/types/SearchTypes.ts

@@ -66,7 +66,7 @@ export interface SearchResultsElements {
 }
 
 export interface SearchModificationFunctions {
-  set: (query: string, current: string | undefined) => void;
+  set: (query: string, current?: string) => void;
 }
 
 export interface SearchDefaults {